Share
Rymden är en grundläggande parameter i webbdesign, men också en av de mest undervärderade. Om vi tar kontroll över det vita utrymmet kan vi styra ett subtilt men definierande element på en webbsida och utnyttja den väl.
I ett nötskal är vitt utrymme avståndet mellan olika element, oavsett om det ligger mellan de faktiska sidorna på sidan eller helt ner till mellanslag mellan bokstäver. I de flesta fall använder vi vitt utrymme (även kallat negativt utrymme) för att rymma innehållet för att underlätta och i slutändan snabbare, skanning av en sida utan att behöva sätta in specifika separeringselement.
Idag kommer vi att täcka hur du kan använda negativt utrymme i dina mönster och utarbeta hur exakt det hjälper till att ge din design en ren, ryddig känsla.
Som jag just har förklarat är vitt utrymme (eller negativt utrymme) avståndet mellan olika element som inte innehåller något. För jämförande ändamål kallar vi det utrymme som fylls positivt. Den negativa rymden bidrar faktiskt till att mögel och definiera vad det positiva utrymmet är. Detta kan demonstreras genom att titta på den optiska illusionen nedan.
Vad ser du? Vasen, eller de två ansikten? Om du ser ansiktena beror det på att i den här konstruktionen fungerar det vita utrymmet som det negativa rummet, medan det svarta är det positiva. Vi kan inversa rollerna och få en helt annan syn på grund av att båda jobbar tillsammans för att forma bilden.
Vad det här exemplet försöker få är att ditt negativa utrymme är ganska viktigt eftersom det kan hjälpa till att definiera innehållet som ligger i det positiva utrymmet. Tänk inte på det vita utrymmet som den övre delen som du inte skapade innehåll för, utan snarare en stor strukturell aktör i din webbplatss layout.
Det finns också två nivåer av vitt utrymme. Dessa är makro- och mikrovita utrymmen, relaterade till utrymmet mellan kärnelementen och utrymmet mellan de mindre elementen.
Google, som du kan se, är en stor förespråkare för vitt utrymme i sina mönster. Sökmotorn anses allmänt ha en ren design eftersom fokus ligger på sidans huvudsyfte, utan massiv hängivenhet till andra områden (till skillnad från andra).
Jag beundrar det designarbete som Envato-laget gjorde med den här sajten. Det finns en fin, balanserad användning av vitt utrymme mellan titlarna, kreditlinjerna och styckena.
Negativt utrymme behöver egentligen inte vara ett enda block av färg. I fotografering kan något område som inte är i fokus klassas som negativt utrymme. I det här exemplet drar bristen på fokus i bakgrunden dina ögon mot rånen som är. (Och också, ändrade inte Starbucks sin logotyp?)
När en design är hans fokus normalt på det positiva utrymmet. Det är nästan undermedvetet att det negativa rummet följer och faktiskt hjälper mögel och formar hur det positiva utrymmet läggs ut och läses sedan. Denna egenskap kan sedan tweaked för att skräddarsy upplevelsen för en bättre tid att läsa och interagera med det positiva utrymmet.
Låt oss säga att du är i en butik. Det skulle inte vara en bekväm eller trevlig upplevelse om du hade problem med att flytta runt på grund av de överfulla gångarna, tillsammans med försäljningsassistenten som ständigt uppmanar dig med sina specialerbjudanden. Det är bara för mycket att titta på och du har varken tid eller tålamod att hitta det du ursprungligen kom ifrån. Det är inte trevligt.
Det här är en av huvuddragen i varför Apple-butikerna fungerar så bra. De är väldigt minimalistiska och en stor del av butiksgolvet ges till själva produkterna. Men bör du satsa på en annan PC-butik, konsumeras du av oändliga gångar av maskiner som ser ut och fungerar annorlunda. Enligt min erfarenhet är den minimalistiska shoppingupplevelsen mycket trevligare.
Nu, vad har det att göra med webbdesign? Mycket faktiskt. Vi kommer inte online för att jaga upp en viss textsträng under en mängd meningslöst innehåll du inte bryr dig om. Negativt utrymme hjälper till med båda dessa problem genom att lämna designen ryddig samtidigt som man uppmärksammar sidans kontaktpunkt.
Du kanske frågar, varför ska jag bry sig om att mitt negativa utrymme är rätt?
Text på webben är till skillnad från text på någon annan plattform och vi skräddarsyr alla våra mönster så att slutanvändaren har den enklaste upplevelsen att läsa innehållet. Till skillnad från en tidning kan det vara frustrerande på webben för att försöka dechiffrera var innehållet du är intresserad av är faktiskt. Rubbade mönster som är för tunga att ta itu med ger inte en ren och lätt läsupplevelse, eftersom vi är tvungna att granska webbsidan först för att skilja element från varandra. Vitt utrymme hackar en buffert mellan element, så det är lättare för oss att hitta innehållet vi bryr oss om.
Vi kan också rikta oss till en ny artikel om min typografi, där jag tittade på åtta viktiga faktorer som bidrar till god webtypografi. Genom att spricka de rumsliga elementen (som ledande och brevavstånd) kan vi öka läsbarheten. Att arbeta på den här nivån innebär att vi arbetar med mikrovitt utrymme.
I ett nötskal (en annan än den som nämnts tidigare), rymmer vitt utrymme allt ut, ger elementen sitt eget utrymme för att vara själva, att bli erkänt och lätt att läsa och interagera med.
Negativt utrymme används i många kreativa fält, särskilt fotografering. I fotografering är negativt utrymme något utrymme som inte används för att hålla ett ämne, vilket inte ligger långt ifrån sin roll i webbdesign. Om vi tittar på Apples webbdesign använder de naturligtvis både makro och mikrovitt utrymme för att kasta ut element och ge dem en egen plats på webbsidan.
Apples design använder både makro och mikrovitt utrymme, definierat av de två olika färgerna som läggs på bilden nedan. Detta resulterar i en ren, elegant design som är fördelad nådigt. Du kanske inte vet det, men din uppmärksamhet på innehållet kommer att ha påverkats av bristen på innehåll i de vita rymdområdena. Vårt uppmärksamhetsområde har visat sig vara kortare när det är på webben, så de röriga, tunga trycksakerna var inte en trend som övergick till de virtuella konstruktionsområdena.
Naturligtvis behöver inte utrymmet faktiskt vara vitt. Vilken typ av tomt utrymme som inte konkurrerar med fokusinnehållet kan klassas som "white space", som designen nedan föreslår.
I tryckdesign kan du märka att din klient vill att varje sista del av hans fastighet används för att marknadsföra sin produkt. Det är dock en annan historia när man utformar för virtuella länder. Vitt utrymme kan ge en känsla av sofistikering och lyx till en generisk webbsida genom att skapa en känsla av att produkten är viktigare än fastigheten den lever i. Den kan göra en produkt ser lyxig ut med principen om mindre är mer. När du tittar på Apples hemsida - ett varumärke som vi anser vara i den mer avancerade delen av databehandling - det behövs väldigt lite, eftersom produkterna talar för sig, om än tillsammans med några minimalistiska taglines. Detta är ett fenomen som också är populärt i premiumhälsa och välbefinnande webbplatser där lite innehåll behövs för att kommunicera den allmänna idén om den produkt eller tjänst som annonseras.
Ofta verkar billigare varumärken sprida så mycket information i ett utrymme som möjligt. olika marknader, olika slutanvändare. HP och Apple webbplatser till exempel markera den här punkten. Apple är ökänt självförtroende och låter sina produkter tala för sig själva. Om du vill ha produkten, ta en titt, om inte flytta med dig. Å andra sidan sysselsätter HP-webbplatsen en större upp- och tvärsäljning, främjar erbjudanden och trycker på billig prissättning i användarens sinne och försöker presentera ett sortiment av alternativa produkter du kan vara intresserade av.
Vid det här laget bör du känna igen vilket negativt utrymme som är och hur du identifierar det i din design. Om du är ny i det här fältet kan du bli förvirrad när någon föreslår att du förbättrar det vita utrymmet. Jag skulle inte bli helt förvånad om du svarade på något i linje med "det är bara vänster över rymden". Jo, faktiskt kan ditt negativa utrymme förbättras avsevärt genom att tweaking några vanliga problem för att göra dess existens mycket effektivare.
Inkonsekvent avstånd kan vara ett av de största problemen, men en som enkelt kan tweaked. Allt verkar bara mer balanserat och övergripande snyggare när din vaddering runt ett element är lika. Om vi tittar på exemplet nedan ser designen (vårs hemsida, ActiveTuts +) ut, den verkliga på höger sida så mycket bättre, eftersom polstringen mellan elementen är mycket mer konsekvent.
Marginaler ska inte heller göra en designfel bortkopplad. Marginaler som är för stora kan bryta förhållandet mellan element, vilket minskar känslan av enhet i designen. Stora marginaler kommer också att slösa bort din fastighet, vilket potentiellt minskar effektiviteten i ditt arbete.
Som förklarat tidigare är mikronivåavstånd det negativa utrymmet som finns mellan de minsta elementen på sidan, som bokstäverna i ett stycke.
Linjeavstånd kan drastiskt förbättra läsbarheten hos en texttext, som är en kritisk avbrytare i din fallstudie av väl anpassad typografi. Linjeavstånd, eller ledande, är det mikrovita utrymmet mellan textlinjer. Generellt sett desto större är ledande, desto bättre upplevelse kommer användaren att ha när du läser, men för mycket kan bryta enheten och göra konstruktionen frånkopplad.
Jag har använt bilden nedan i flera olika artiklar här på Tuts +, och jag vill påpeka det igen. Exemplet till höger är mer ledande och bör, när det används i ett större urval av text, göra det lättare att läsa.
På samma sätt kan brevavstånd bidra till ett välutnyttat negativt utrymme. Krama bokstäver är inte så roliga att läsa, men inte heller sådana som du kan misstaga för enskilda ord. Återigen handlar det bara om att hitta den perfekta balansen.
När du utformar och skräddarsyr din webbdesign, gör det med ett nytt sinne som inte är förorenad med vad du gjorde rätt förra gången. Varje projekt är annorlunda och eftersom det inte finns några fördefinierade riktlinjer eller konsekvent matte behöver du använda ditt nyfinade öga för att analysera varje produkt separat.
Negativt utrymme, som jag har nämnt flera gånger i hela den här artikeln, skapar både redskapsdesign och hjälper mögel och ritar fokus till innehållet på sidan. Återgå till shopping analogi, ingen vill arbeta för att uppnå sitt önskade resultat. I stället vill de att det ska serveras på en lätt identifierbar tallrik som inte störs av meningslösa sidrätter som de inte bad om eller vill ha.
För att återskapa kan vi också förbättra negativ rymdanvändning genom att analysera och förfina marginaler genom att hålla dem konsekventa under de flesta omständigheter och uppmärksamma typografi och mikronivåavstånd. Helst bör du också ta varje projekt annorlunda för att känna igen den söta fläcken i designen.
Bortsett från de praktiska fördelarna med en ren och snygg webbsida kan negativt utrymme skapa en känsla av sofistikering och elegans genom att låta innehållet "tala för sig själv" utan stora intrång som verkar billigt.
Tack för att du dyker in i en intressant resa i ett område som inte är det. Förhoppningsvis har du lärt dig något om det viktiga av negativt utrymme i design, och kanske tänker två gånger innan du försöker trycka en miljon nonsensiska eller onödiga objekt i din sida. Innan jag lämnar dig, ett sista tips: prova fem sekunders testet (se en webbsida i fem sekunder och skriv ner det du kommer ihåg) för att bekräfta att din design är snygg och med sin vita plats.
Accentsconagua