20 Exempel på White Space-användning i webbdesign

# Låt oss säga att du är på ett bibliotek. Det vore inte alls trevligt om du inte kunde röra dig på grund av de överfulla hyllorna och salarna, medan bibliotekarien ständigt uppmanade dig med de senaste böckerna som kommit. Det är samma sak med vitt utrymme som används i webbdesign: det ger utrymme att andas till många webbplatselement. Vitt utrymme är extremt viktigt i webbdesign för användbarhet och läsbarhet och det betonar särskilda element. Föreställ dig hur det skulle vara om det fanns många ord som klistrade ihop. Användarupplevelsen skulle definitivt vara mycket obehaglig och det skulle krävas mycket ansträngning för att förstå budskapen på en webbplats. Vitt utrymme är också känt som ”negativt utrymme” och hänvisar till det tomma utrymmet runt och mellan flera delar av en design eller sidlayout. Det kallas också ”andningsrum”. Och det behöver inte vara vitt. färg skulle passa så länge det skapar en ren och snygg design. Även om negativt utrymme inte innehåller något kan det definiera och förstärka det positiva utrymmet. ##### Vitt utrymme – ett aktivt element Negativt utrymme har ansetts vara ett passivt element, men det spelar en extremt viktig roll för att förbättra varumärkesexponeringen och förbättra hela den visuella layouten. Att skapa och leverera en fantastisk användarupplevelse innebär mer än att använda blankt utrymme, men vi kan inte förneka den enorma betydelsen av detta element. Den guidar användare på en sida, skapar sofistikering och en harmonisk layout, kommunicerar det som behöver mer uppmärksamhet på en webbplats och underlättar skanningsbarhet. Vitt utrymme används mellan flera element som sidofält, texter, sidfötter, sidhuvuden och bilder. En rörig sida, särskilt om det inte finns någon hierarki i texten, försämrar läshastigheten och förståelsen. Negativt utrymme kan bli lika värdefullt som själva innehållet. Detta gäller särskilt viktiga varumärken eftersom det tillför en ton av elegans. ##### Rollen av vitt utrymme i webbdesign Det finns två typer av vitt utrymme: mikro- och makrovitt utrymme. Micro white space är utrymmet mellan dessa mindre element: mellan bokstäver, ord, listobjekt, mellan en bild och en bildtext. Tänk till exempel på en nättidning. Den behöver ha utrymme runt tecken och mellan stycken för att göra innehållet lättläst och ge tidningen en ren och lätt känsla. Makroutrymme betyder utrymmet mellan större element, vilket används mycket för till exempel Googles webbplats. Den har en ren design, fokus ligger på sidans huvudsyfte, medan andra aspekter inte är så betonade. För att testa hur webbplatsen du bygger ser ut när det gäller färger är Adobe Kuler rätt verktyg. Du kan skapa, redigera och ladda upp olika färgscheman. Dessutom, om du är osäker och inte vet vilka typsnitt som skulle vara lämpligare, prova Google Webfonts. Välj olika typsnitt och se hur de sammanflätar med blanksteg. Om du inte är säker på var och hur du använder blanksteg när du bygger och anpassar en webbplats kan Balsamiq vara till hjälp. Det hjälper dig att arbeta snabbare och enklare genom att återskapa en skiss på en whiteboard, men genom din dator. Eftersom alla webbplatser har webbformulär. Det är oerhört viktigt var du placerar dem och hur du använder negativt utrymme i detta sammanhang. Och eftersom att skapa webbformulär vanligtvis innebär kodning, behöver du ett verktyg för att förenkla ditt arbete och spara tid. 123ContactForm webbformulärbyggare kräver ingen kodning och är idealiskt även när du använder blanksteg för att bygga ett webbformulär. Vitt utrymme kan vara aktivt och passivt. Aktivt negativt utrymme leder en läsare från ett element till ett annat, skapar harmoni och kan positionera ett varumärke mycket bättre. Passivt blanksteg är faktiskt det vita utrymmet som omger utsidan av en sida eller tomma områden inuti innehållet, vilket ibland betraktas som dålig design. Negativt utrymme skapar balans, ett bra övergripande flöde och påverkar läsarna, vilket gör att de stannar mer på en sida. Och detta gäller inte bara en nättidning, utan vilken webbplats som helst. Ibland ställs webbdesigners inför olika plattformar, skärmupplösningar eller webbläsare. Det är därför det finns kompositionsövningar för webbdesignstudenter. Dessa övningar hjälper dem att inse vikten av negativt utrymme och hur man använder det effektivt. ##### Negativt utrymme har ett stort inflytande. Ta reda på varför! White space ger hjärnan visuella ledtrådar om vilka element som är separerade och vilka som hör ihop. Det bästa exemplet består av flera rader med telefonnummer eller e-postadresser på en webbplats separerade av blanksteg, vilket signalerar din hjärna att var och en är en annan sekvens och inte ett särskilt långt nummer. Om det finns mer vitt utrymme kommer en webbplats att se mer elegant ut. Denna användning av negativt utrymme är vanligt i dyra och eleganta tidningar för kvinnor. Nästan alla annonser har mycket vitt utrymme, det finns tillräckligt med utrymme för bakgrundsbilder och texter är knappa. Ett motsatt exempel är en direkt e-postannons som vi alla har fått minst en gång. Kommer du ihåg att det var så lite negativt utrymme kombinerat med många och stora textblock som inte såg bra ut? Så det har ett enormt inflytande. Det är därför webbdesigners måste arbeta med det i åtanke innan de skapar och anpassar en viss webbplats. Det finns några grundläggande principer för att skapa en bra webbdesign. Negativt utrymme ska separera element som sidhuvud, sidfot och navigering. Och nästa gång du designar en sida, analysera marginalerna och vaddera mer istället för att undra hur mycket utrymme du behöver för lite text. ##### Kunder bör också förstå vikten av vitt utrymme Om du har tvivel eller om dina kunder inte riktigt förstår vikten av negativt utrymme, så här kan du göra: bygga din design på två olika sätt. En med mindre negativt utrymme för att förmedla en mer praktisk och lågmäld ton och den andra med mer vitt utrymme för en sofistikerad känsla. Tänk på att du bör använda samma element i dina två mönster. Det enda du bör göra annorlunda är att ändra avståndet mellan alla dessa element. Det kanske bästa sättet att se hur vitt utrymme används och lära sig mer om dess betydelse är att ta en titt på flera webbplatser. De kan inspirera och hjälpa dig med dina framtida projekt. Ta bara en titt på följande webbplatser, frigör din fantasi och resultatet kommer att bli utmärkt! [Madebysofa.com](http://www.madebysofa.com/) använder vitt utrymme för att skapa en ren, minimalistisk look. På detta sätt ligger tonvikten på webbplatskategorier och länkar. [](http://www.madebysofa.com/) [Vertigo Visual](http://www.vertigo.com.mk/) håller det enkelt och använder massor av vitt utrymme för att lägga till en touch av stil och personlighet. [](http://www.vertigo.com.mk/) [Cultured Code](https://culturedcode.com/) är ett exempel där vitt utrymme inte är vitt, utan ljusblått. Det finns också några färgade geometriska element som förstärker vissa kategorier. [](https://culturedcode.com/) [Philip House NYC](http://www.philiphousenyc.com/) har mycket vitt utrymme. Syftet här är att fånga ögat och förbättra några bilder och kategorier som visas på webbsidan. [](http://www.philiphousenyc.com/) [Byggd av Buffalo](http://builtbybuffalo.com/) använder vitt utrymme mycket klokt. Det betonar alla kategorier och logotyper. I mitten av sidan finns det flera färgade avsnitt som leder till viktig information. När du rullar nedåt kan du märka att blanksteg fortfarande dominerar, men fokus ligger fortfarande på andra avsnitt. [](http://builtbybuffalo.com/) [Ditto](https://www.ditto.com/) är också en webbplats som använder vitt utrymme för att lägga till sofistikering och elegans. Samtidigt används negativt utrymme för att bättre visa upp produkterna. [](https://www.ditto.com/) [Metta Skincare](http://www.mettaskincare.com/) har en snygg design. Fokus ligger på produkter, USP och webbplatskategorier. [](http://www.mettaskincare.com/) [Fell Swoop](http://www.fellswoop.com/) inkluderade vitt utrymme för att skapa känslor och öka användarens engagemang. [](http://www.fellswoop.com/) [Attitude Design](http://www.attitudedesign.co.uk/) kombinerar vitt utrymme med ”färgat” vitt utrymme för att få uppmärksamhet till några viktiga punkter på webbplatsen. Enkel men effektiv! [](http://www.attitudedesign.co.uk/) [Super Real](http://www.superreal.de/) -webbplatsen har en touch av elegans och sofistikering på grund av vitt utrymme. Negativt utrymme används här för att förstärka huvudkategorierna. [](http://www.superreal.de/) [Handiemail](http://www.handiemail.com/) har en enkel, vit layout som håller besökarna intresserade. Allt är så lätt att läsa på grund av en så ren design. [](http://www.handiemail.com/) [Suki](http://www.suki.co.il/) är en webbplats som fångar din uppmärksamhet nästan omedelbart. Det är fantastiskt hur negativt utrymme växlar med bilder, videor och uppmaningar. Bara ta en titt! [](http://www.suki.co.il/) [Tom Reinert](http://www.tomreinert.de/) är en webbplats där dominansen av vitt utrymme separerar flera element. Helhetsintrycket är en ren, vacker och lättläst sida. [](http://www.tomreinert.de/) [Webydo](http://www.webydo.com/) utnyttjar negativt utrymme och använder det kring bilder, kolumner och uppmaningar för att visa upp olika delar av webbplatsen, kontaktuppgifter och mer. [](http://www.webydo.com/) [PlainWhite](http://plainwhite.co/) är ett annat bra exempel på blanksteg som används i webbdesign. Som vi kan se här vägleder den dina ögon och bidrar till en snygg och luftig design. På så sätt visas alla webbplatskategorier vackert. [](http://plainwhite.co/) [Beanstalk](http://beanstalkapp.com/) är ett bra exempel på hur vitt utrymme inte bara är ”vitt”. Det skapar harmoni, balans, får hemsidan att se stilren ut och lyfter fram innehållet. [](http://beanstalkapp.com/) [Pulp Fingers](http://pulpfingers.com/) visar också effektiviteten av ”färgat” negativt utrymme. Här har vi en djärv färg som framhäver meddelanden, uppmaningar, knappar på sociala medier, kontaktfält och webbplatskategorier. [](http://pulpfingers.com/) [No Leath](http://www.noleath.com/noleath/) har vitt utrymme, som faktiskt är en ljusgrå nyans kombinerad med stor grafik för att visa sina produkter så bra som möjligt. [](http://www.noleath.com/noleath/) [Dropbox](https://www.dropbox.com/) är en förespråkare av negativt utrymme. Den här webbplatsen visar att mindre är mer. Och detta uppnås genom att bara behålla de element som är riktigt viktiga. White space här ökar läsbarheten och användbarheten, vilket gör allt på webbplatsen extremt lätt att läsa och förstå. [](https://www.dropbox.com/) [Something Splendid](http://somethingsplendid.com/) har mycket vitt utrymme kombinerat med färgglada inslag. Detta gör sidan extremt lättnavigerad. Dessutom är det en trevlig upplevelse att interagera med en sådan webbplats. Varje kategori är mer märkbar, utan att göra designen rörig. [](http://somethingsplendid.com/) Det här är bara några av de webbplatser som använder blankt utrymme på bästa sätt. Även om vitt utrymme är ett kontroversiellt element, hittar du flera webbplatser som använder det, på grund av dess fördelar. Om det används som det ska bidrar negativt utrymme till fantastiska användarupplevelser. Vitt utrymme orsakar ofta friktion mellan webbdesigners och deras kunder. Ibland vill kunderna inte se något tomt utrymme på sin webbplats och tänker att det måste vara täckt med innehåll. Det är därför designers måste förklara sina kunder rollen av negativt utrymme. Det kan vara svårt, åtminstone för nybörjare, att formulera inflytandet av det. Tänk ändå inte på vitt utrymme som ”tomt utrymme”, utan mening. Ja, det kan se tomt och vanligt ut, men kom ihåg att du har använt det speciellt för att det verkligen förbättrar den övergripande designen, inte för att det inte fanns något annat att lägga till där. Det kan vara svårt att förklara det för dina kunder, men jag hoppas att den här artikeln hjälper dig med det.