White Space Design: Hur man anvÀnder White Space effektivt i webbdesign

White Space Design: Hur man anvÀnder White Space effektivt i webbdesign

Om du inte Ă€r designer kan det vara en utmaning att se till att din webbplats ser nĂ€stan perfekt ut. Att anvĂ€nda ett kvalitetstema kan hjĂ€lpa mycket, men du vill ocksĂ„ lĂ€ra dig nĂ„gra grundlĂ€ggande principer om du vill ha de bĂ€sta resultaten. Detta inkluderar att förstĂ„ begreppet “vitt utrymme” design.

Vitt utrymme Ă€r precis som det lĂ„ter som, och trots sin uppenbara enkelhet Ă€r det en viktig del av alla visuella design. För mycket kan till exempel lĂ€mna en sida som ser tom ut, medan för lite kan göra att ditt innehĂ„ll verkar rörigt. Å andra sidan kan du uppnĂ„ rĂ€tt balans kan göra mycket för din webbplats utseende och anvĂ€ndarvĂ€nlighet.

I det hÀr inlÀgget presenterar vi Àmnet vit design. Vi kommer att utforska konceptet i detalj och visa dig hur du anvÀnder det pÄ din egen webbplats. LÄt oss börja arbeta!

En introduktion till det vita utrymmet

Vitt utrymme Ă€r en allmĂ€n term som anvĂ€nds i mĂ„nga sammanhang. Dessa inkluderar tryckning, konst och (naturligtvis) webbdesign. Även om du aldrig har hört frasen förut har du förmodligen en aning om vad det betyder med namnet ensam.

Ta en titt pÄ följande sida:

Denna hemsida visar en bild, en titel och lite text, som alla innehĂ„ller sidans innehĂ„ll. ‘Tomheten’ som omger innehĂ„llet kallas vitt utrymme.

Naturligtvis Ă€r det viktigt att inte ta denna term bokstavligt. Vitt utrymme behöver faktiskt inte vara vitt – det kan ha nĂ„gon annan bakgrundsfĂ€rg (eller till och med en bakgrundsbild eller design). Det Ă€r helt enkelt den del av en sida som Ă€r tom. Med tanke pĂ„ detta kallas det ibland ocksĂ„ “negativt utrymme”.

Det Àr lÀtt att avvisa de tomma delarna av en sida som oviktiga. PÄ ett sÀtt Àr dock varje sidas vita utrymme lika viktigt som innehÄllet det separerar. LÄt oss prata om varför detta Àr.

Varför vitt utrymme Àr ett viktigt designkoncept

NĂ€r du sĂ€tter ihop en webbplats kan det vara frestande att passa sĂ„ mycket innehĂ„ll som möjligt pĂ„ varje sida. Det finns trots allt mycket du vill dela med dina lĂ€sare eller kunder. Av denna anledning Ă€r det enkelt att glida in i en “mer Ă€r bĂ€ttre” -mentalitet.

LÄt oss dock titta pÄ vad som hÀnder nÀr vi tar den hÀr filosofin till dess naturliga ytterlighet:

Gates N Fences webbplats.

Denna sida saknar nÀstan vitt utrymme och lider som ett resultat. Det verkar otroligt rörigt och det Àr svÄrt att hitta det du letar efter. NÀr de nÄr en webbplats som denna kommer de flesta besökare sannolikt att lÀmna omedelbart.

Även om detta kanske Ă€r ett överdrivet exempel Ă€r sidor som inte anvĂ€nder tillrĂ€ckligt med vitt utrymme ganska vanliga. Denna webbplats illustrerar ocksĂ„ poĂ€ngen snyggt:

Webbplatsen för framtidens historiker.

Det hÀnder mindre hÀr, men elementen klÀms fortfarande för nÀra varandra. Detta gör sidan övervÀldigande att titta pÄ (och naturligtvis hjÀlper valet av fÀrger och bilder inte heller).

PoÀngen hÀr Àr att anvÀnda tillrÀckligt med vitt utrymme pÄ dina webbsidor Àr nyckeln till att göra dem bÄde visuellt tilltalande och lÀtta att navigera. Att ha tillrÀckligt med vitt utrymme mellan elementen har ocksÄ visats upprepade gÄnger för att öka lÀsförstÄelsen och för att ha en positiv effekt pÄ den totala anvÀndarupplevelsen (UX).

Naturligtvis kan du ocksÄ ta detta koncept för lÄngt i motsatt riktning. För mycket vitt utrymme kan göra att din design ser tom, ojÀmn och oprofessionell ut:

Suzanne Collins webbplats.

Samtidigt Àr Googles hemsida nÀstan ingenting annat Àn vitt utrymme och Àr mycket effektivt:

Googles startsida.

Detta visar bara att hur mycket vitt utrymme som Ă€r “rĂ€tt” för en viss webbsida beror pĂ„ dess mĂ„l och vilken typ av innehĂ„ll den innehĂ„ller. Att hitta den perfekta balansen mellan negativt och ockuperat utrymme bör ligga i framkant för dig nĂ€r du bygger eller omformar din egen webbplats.

Hur man anvÀnder vitrumsdesign effektivt pÄ dina webbsidor

Som vi har pÄpekat kan bÄde för mycket eller för lite vitt utrymme bli ett problem. I verkligheten Àr problemet dock nÀstan alltid att glömma att anvÀnda tillrÀckligt negativt utrymme mellan de andra elementen pÄ dina webbsidor. Detta Àr anledningen till att design av vita utrymmen i stor utstrÀckning kretsar kring att balansera innehÄllselement med hjÀlp av vita utrymmen.

För att bli Ànnu mer specifik finns det faktiskt tvÄ typer av vitt utrymme.

Mikrovitt utrymme

‘Micro white space’ avser de mindre luckorna som finns mellan textrader, bilder i ett rutnĂ€t eller galleri, menylĂ€nkar och andra sĂ„dana element:

Mellanslag mellan menylÀnkar.

Det hÀr utrymmet Àr avgörande för att se till att besökare kan lÀsa texten pÄ din sida och för att separera element för att visa att de Àr distinkta. I de flesta fall bör allt pÄ din sida ha Ätminstone lite mikrovitt utrymme runt sig.

Detta kan ocksÄ ses som en grÀns eller marginal och Àr vanligtvis mest effektivt nÀr det anvÀnds konsekvent. Det innebÀr att du anvÀnder samma mÀngd utrymme mellan varje textrad, till exempel, och inkluderar ramar med samma bredd runt alla dina bilder:

Ett bildgalleri med vita grÀnser.

Vitt utrymme för makro

Som du förvĂ€ntar dig Ă€r den andra aspekten att tĂ€nka pĂ„ “makrovita mellanrum”. Dessa Ă€r de större tomma omrĂ„dena som finns mellan sektionerna pĂ„ en sida, runt innehĂ„llsblock, eller som skiljer sidofĂ€lt, sidhuvuden och sidfot frĂ„n huvudinnehĂ„llet:

En webbplats med tydligt definierade avsnitt.

Makrovitt utrymme hjÀlper besökare att förstÄ strukturen pÄ din webbsida. Det visar snabbt var ett avsnitt slutar och ett annat börjar. Dessutom sÀkerstÀller det att nyckelelement som navigering lÀtt kan skiljas frÄn allt annat.

Som en tumregel, desto tydligare ett element Ă€r frĂ„n ett annat, desto mer vitt utrymme bör ingĂ„ mellan dem. Avsnitt med mindre negativt utrymme mellan sig kommer att ses som nĂ€rmare beslĂ€ktade. Å andra sidan indikerar större luckor en övergĂ„ng till en ny typ av innehĂ„ll eller funktion:

Apples webbplats.

Slutligen kan det vita utrymmet ocksÄ anvÀndas för att hjÀlpa de viktigaste elementen pÄ en sida att sticka ut. Till exempel har de flesta webbplatser minst en uppmaning (CTA). Det hÀr Àr viktiga steg du vill att dina besökare ska ta. Det kan till exempel innebÀra att du klickar pÄ en köpknapp eller fyller i ett prenumerationsformulÀr.

Att omge ditt CTA-element med gott om vitt utrymme Àr ett av de bÀsta sÀtten att dra besökarnas ögon direkt mot det. Detta Àr sÀrskilt effektivt nÀr CTA i sig ocksÄ görs distinkt genom unika fÀrger och design:

En CTA pÄ Spotify.

Att uppnÄ rÀtt balans mellan vitt utrymme pÄ dina sidor krÀver lite arbete. Det Àr dock vÀl vÀrt anstrÀngningen. Det Àr ocksÄ viktigt att lita pÄ ditt eget öga och att testare tittar pÄ dina sidor ur ett nytt perspektiv.

Dessutom, om du har problem med att avgöra om du har inkluderat tillrÀckligt med vitt utrymme pÄ en levande webbplats, kan du anvÀnda ett vÀrmekartverktyg för att analysera besökarnas beteende. Om du inte ser mycket interaktion med viktiga element som navigering och uppmaningar kan du dra nytta av att ge dem lite mer utrymme att andas. NÀr det gÀller vitrumsdesign Àr mindre definitivt mer.

Slutsats

Det sĂ€gs att i musiken Ă€r tystnaderna mellan noterna lika viktiga som sjĂ€lva ljuden, för det Ă€r detta som formar och skiljer dessa ljud. Samma princip gĂ€ller för din webbplats – mellanrummen mellan innehĂ„ll Ă€r viktigare Ă€n vad du först förvĂ€ntade dig.

NÀr det gÀller att anvÀnda principerna för vitrumsdesign pÄ din webbplats Àr balans viktig. För lite vitt utrymme gör att dina sidor kÀnns röriga och förvirrande, medan för mycket inte ger nÄgon tydlig struktur. För att undvika dessa problem kan du anvÀnda negativt utrymme strategiskt för att visa bÄde nÀra anslutna element och de som ska ses som separata och distinkta.