Hvidt mellemrum er mere end det tomme rum mellem elementer på et websted. I sandhed er det et kraftfuldt værktøj, der kan bruges intelligent til at give brugeren pusterum, fokusere deres opmærksomhed og gøre deres rejse lettere.
Find ud af hvordan.
Der er mange forskellige tilgange til webdesign - fra minimalisme til fladt design, materialedesign og kreativ brug af kontrast. Et andet utrolig vigtigt værktøj i webdesign er white space.
Hvidt rum tilskynder til minimalisme og balance. Det kan også forbedre brugeroplevelsen ved f.eks. At oprette afsnitsbrud og mellemrum for bedre læsbarhed.
Brugen af hvidt mellemrum bør dog udføres ansvarligt og korrekt. Brug for lidt, og du kan i høj grad påvirke læsbarheden og anvendeligheden af et websted. Brug for meget, og du risikerer at sende den forkerte besked.
I denne artikel vil vi diskutere, hvad hvidt rum er, dets forskellige typer, hvorfor du skal bruge det, og vigtigst af alt, vise dig eksempler på en god implementering af hvidt rum.
Hvad er hvidt rum?
Hvidt rum eller negativt rum er et designudtryk, vi bruger til at referere til tomrummet omkring eller inden for elementer i designet.
Hvis du ser på hjemmesiden for webstedet for The New Yorker, vil du se eksempler på dette overalt:
De store rum, der indrammer logoet for The New Yorker:
De lige store mellemrum, der adskiller hvert af navigationslinkene:
Frimærkerne, der er oprettet omkring hver af hjemmesidens indholdsblokke:
Selv valg af retning og typografisporing viser nytten af hvidt rum i webstedsdesign.
Tag et kig på webstedet for 2008, og du vil se, hvordan hvidt rum gør en kæmpe forskel:
Der er hvidt rum til stede, selvom det ikke er så stilfuldt eller strategisk som det, vi ser på webstedet i dag.
Hvor kommer hvidt rum fra?
Udtrykket "hvidt rum" er noget misvisende. Selvom nogle eksempler på hvidt rum faktisk er hvide (som The New Yorker -eksemplet ovenfor), er dette normalt ikke tilfældet.
For at forstå, hvorfor hvidt rum fik sit navn, skal vi se på, hvor det kom fra.
Selvom der ikke er nogen navngivet i oprettelsen af hvidt rum, kan vi tilskrive det til følgende dele:
Den første er de kinesiske kunstnere og kalligrafer fra det 20. århundrede. De tomme rum på det hvide rispapir, de arbejdede på, blev ikke behandlet som spildplads. De fandt mening i tomrummet og mente, at det bidrog til den overordnede forståelse af hele billedet.
De kaldte det "at designe hvidt".
carol douglas forklarer værdien af hvidt rum i kinesisk kunst:
”I kinesisk kunst forventes tomrum at formidle information på grund af dets mangel på billedsprog. Størrelser og konturer af tomme former skaber rytme og enhed. Faste former giver mening til tomhed og omvendt.
White space blev senere et hæfteklammer til print takket være modernismen, der fokuserede på minimalisme, strukturerede gitre og negativt rum.
Så det er også sandsynligt, at vi kalder det hvidt mellemrum på grund af det hvide papir, modernisterne skrev på eller de hvide lærreder, de malede på.
De forskellige typer hvidt rum skal du kende
Normalt opdeler vi hvidt rum i to forskellige kategorier:
Micro vs hvidt mellemrum. makro
Mikro- og makrohvidrum definerer ikke kun hvidt rum baseret på størrelse.
Mikrohvide mellemrum referere til de mindre mellemrum og buffere bygget op omkring indhold. For eksempel kan der findes et mikrohvidt mellemrum mellem:
- Breve
- Ordene
- Afsnit
- Navigationslinks
- Billeder eller indhold i et gitter
- Formfelter
Formålet med mikrohvidrum er at forbedre læsbarheden af dit indhold.
Hvad angår makrohvidrummet, refererer det til større områder uden indhold. For eksempel kan der findes makrohvidt mellemrum:
- I margen på et websted
- Omkring logoet i overskriften
- Mellem sektioner på en side
- I heltebillederne
- Ved adskillelse af hovedindhold og sidepanel
- På billeder
- Omkring CTA -knapper
Formålet med makrohvidrum er at forbedre layoutet på webstedet og gøre det lettere at forstå og navigere.
Passivt hvidt mellemrum og aktivt hvidt rum
Hvide rum kan også opdeles i passive og aktive kategorier.
Passive hvide mellemrum referere til huller, der forekommer naturligt i designet eller typografien. Du kan styre størrelsen på disse rum med hensyn til æstetik, men de vil være der med eller uden at du placerer dem der.
Aktivt hvidt rum refererer til tomme områder, der bevidst er tilføjet til en side for at lette bevægelsen. Målet er at guide en besøgendes øjne ned ad siden eller gennem en proces, indtil de når den uundgåelige konklusion og konverterer.
Hvorfor skal du bruge hvid plads på websteder
Her er nogle af de vigtigste grunde til, at hvidt rum skal indbygges på hvert websted, du designer:
Det er en klassiker
Uensartede tendenser inden for webdesign, der måske kun ser godt ud eller er relevante i kort tid, hvidt rum er en varig klassiker. Se bare på, hvor længe det har eksisteret, og hvordan det har udviklet sig fra kinesisk kalligrafi til modernistiske værker - og nu til internettet.
Hvis du vil gøre dine webdesign bæredygtige, bør hvidt rum være en af dem.
Det fører til mere attraktive grænseflader
At gå ind på et websted er lidt som at gå ind i nogens hus. Alt du behøver er et par sekunder for at få en fornemmelse af, hvor behagelig du kommer til at føle dig.
Med den rigtige mængde hvidt mellemrum kan du skabe den perfekte kontrast mellem indhold og rum.
Men det er op til dig at beslutte, hvad det rigtige forhold er. For et mærke som Google fungerer dette hvide rum:
For et andet mærke kan en alt for forenklet brugergrænseflade imidlertid gøre webstedet for tomt og mærket blottet for værdi. Men hvis du finder den rigtige balance, kan dit valg af hvidt rum helt sikkert hjælpe med at gøre et websted tiltrækkende for dets målbrugere.
Det gør hjemmesider lettere at bruge
Hvis du studerer principperne for webdesign, vil du bemærke, at positionering og afstand er stærkt omtalt i dem.
Når du anvender disse designprincipper på websteder, udnytter du brugerpsykologi til at oprette brugergrænseflader og rejser, der er lette at forstå og følge.
Tag dette eksempel fra Fitts lov:
Mellemrum omkring indhold, links og CTA -knappen forbedrer ikke bare udseendet af disse sider. De kan også forbedre brugernes tillid og kliknøjagtighed.
Det forbedrer fokus
Når du smider for meget indhold på besøgende på én gang, kan de blive overvældet og have svært ved at fokusere på én ting.
Det er et fænomen, som forklares af Hicks lov :
Jo flere stimuli der er til stede ad gangen, jo længere tid vil det tage folk at reagere på dem. Og i tilfælde af et websted kan det være nok til at forhindre dem i at træffe en beslutning.
Ved at skabe plads omkring hvert område på din webside, giver du dine besøgende mulighed for at tage et øjeblik til at trække vejret og tænke over, hvad de ser på. Dette bremser beslutningsprocessen ... men på en god måde.
Det er nyttigt fororganisation
Når du har masser af indhold, der skal medtages på et websted, er det ret let at finde ud af, hvordan det kan opdeles i forskellige sektioner og sider. Men bare at placere indhold i forskellige beholdere rækker ikke langt nok.
Når du tilføjer plads omkring indhold eller dets beholder, sender du et signal om betydningen af dette indhold, og hvordan det forholder sig til det, der omgiver det.
Le Nielsen Norman Group forklarer, hvordan det fungerer:
I denne graf kan du ikke se 20 point. Du ser et større afsnit af prikker til venstre og et mindre afsnit til højre. Det er mellemrumene, der er lige langt mellem de grupperede punkter og de største mellem grupperne, der giver os mulighed for at se dem som beslægtede enheder i modsætning til de enkelte punkter.
Det forbedrer læsbarheden af dit indhold
Hvis det er et kort stykke tekst i en helt billede, et langt blogindlæg eller en meget beskrivende produktside, du vil have besøgende til at læse indholdet der.
Dimensionering af din skrifttype hjælper med at henlede opmærksomheden på dine ord, men det er afstanden mellem bogstaver, ord og afsnit, der sikrer, at de let kan læses.
Nielsen Norman Group mener, at typografiafstand er en af de tre faktorer, der gør et design smukt:
Denne grafik viser de forskellige måder, hvorpå læsbarheden forbedres som et resultat.
11 inspirerende eksempler på hvidt rum i webdesign
Fordi der er så mange måder at bruge hvid plads til at forbedre et websted, vil jeg præsentere 11 eksempler, der bruger forskellige typer hvidt rum særligt godt.
Pittsburgh Zoo og PPG Aquarium -logo
Hvis du skulle tage et hurtigt kig på logoet på Pittsburgh Zoo, vil du sandsynligvis først se det hvide træ og fuglene flyve rundt. Ved nærmere eftersyn vil du dog se et skjult billede i det negative rum: en gorilla mod en løve.
Denne kreative brug af hvidt rum gør dette logo og dets mærke ganske mindeværdigt. Plus, den skjulte overraskelse er en fantastisk måde at gøre et stærkt første indtryk på besøgende.
Cirka 1886 heltebilledgalleri
Heltbilledet på et websted skal effektivt kunne fange en besøgendes opmærksomhed. Der er flere måder at gøre dette på. Du kan designe heltebilledet ved hjælp af hovedsageligt farver og former for at lade printet skinne. Eller du kan gøre som på Ca. 1886 og lad dine billeder stå i centrum.
Læg mærke til, hvordan dette galleri bruger hvide tallerkener, hvidt sengetøj, klart glas og skinnende bestik til at indramme hovedmotivet i hvert foto. Dette bogstavelige hvide rum holder fokus på maden, ikke distraktionerne fra restauranten eller spisende gæster omkring den.
Billeder af Florian Schulz Productions
Dette er det kuratoriske websted for fotografer og filmskabere af Florian og Emil Schulz. Som du måske forventer, er webstedet fuld af iøjnefaldende naturfotografier.
Det er et bevis på, at hvidt rum ikke bare er noget, der forbedrer et websteds design. Ved at bruge fotos, der gør god brug af hvidt rum, vil du være i stand til at rette dine besøgendes øjne mere effektivt mod dine motiver.
I eksemplet ovenfor ser vi, hvordan den mørke masse af rokker fungerer som hvidt rum og tillader rokker, der bevæger sig i grønt vand, at være det primære fokus.
Overstock navigation links
Du tror måske ikke, at du kan passe 13 navigationslinks pænt i træk, men hjemmesiden forOverstock beviser du tager fejl. Her ser vi, hvordan den rigtige mængde plads mellem links kan gøre en menu i denne størrelse let at navigere.
Plus, det tvinger ikke forhandleren til at skjule deres kategorier under en mega kategorier menu eller under et hamburger menu ikon (som mange gør i disse dage).
Udemys linjeafstand
Tag et kig på, hvordan modulerne og lektionerne er delt op Udemy. Kombinationen af letfarvede blokke, fede overskrifter og rigelig afstand mellem hver række giver en elev mulighed for hurtigt at navigere i kurset.
Når der er over 150 kurser tilgængelige på et websted, skal brugerne hurtigt kunne vurdere, om et kursus er det rigtige for dem. Og et godt wiggle room - men ikke for meget - vil hjælpe med det.
Meetup organiseret brugergrænseflade
Meetup er et websted, der hjælper lokalbefolkningen med at finde grupper af mennesker med lignende interesser og planlægge begivenheder omkring dem. I store byer kan et websted som dette blive overvældende for brugere, der tilsyneladende har for mange grupper og begivenheder at vælge imellem.
Takket være den velorganiserede brugergrænseflade og det hvide rum, der bryder det ned, kan brugerne hurtigt filtrere mulighederne øverst på webstedet og sidebjælken til højre. Derefter kan de rette opmærksomheden mod de reducerede daglige resultater i midten.
Margins of Maison De La Luz
House of Luz er et luksus boutique -hotel i New Orleans. Det smukt illustrerede websted er ikke det eneste, der vil imponere sine gæster.
På siden Om vil besøgende først se en illustration af hotellets indre. Når de ruller ned, efterligner det, hvordan deres blik kan bevæge sig op og ned, mens de beundrer hotellet personligt. Selv uden animation ser dette layout meget attraktivt ud takket være de smalle margener i grafikken i teksten herunder.
Fokus for Apple -produkter
Apple har eksisteret længe nok til, at det næsten ikke behøver at sige et ord om sine produkter. Det er derfor, størstedelen af sit websted tillader produkter at tale.
Selv når kopier og CTA'er er til stede, optager de en lille mængde plads i forhold til produkter og de store mængder hvidt rum, der gør besøgende opmærksom på dem.
CTA'er af Lull
Opfordringsknappen spiller en vigtig rolle i brugerens rejse. Det tvinger dem til at tage en pause, overveje, hvad de har lært hidtil, og beslutte, om de er klar til at tage det næste skridt.
For at få folk til at lægge mærke til CTA, skal du bruge mere end en god placering eller en app med farve for at få den til at skille sig ud. Det rigelige hvide rum omkring en CTA giver dig mulighed for at lægge alt andet til side, mens din besøgende træffer sit valg.
Svinghjul prisblokke
Hvis du har mange detaljer at dele på én gang, kan du bruge størrelsen til at etablere hierarkiet og afstanden til at gruppere de relevante detaljer sammen. Dette vil gøre beslutningsprocessen glattere for dine besøgende, da de ikke bare har en tekstmur til at overveje.
Mens det vi ser på her er et eksempel på prisblokke på Svinghjul, denne type luftig afstand er nyttig til enhver form for produkt eller indholdsblokdesign.
Layout af Salesforce -formularen
Uanset hvilken type formularer som din hjemmeside bruger, vil du gerne have, at de er nemme at udfylde. I den gratis prøveform af Salesforce, vi ser, hvordan den rigtige afstand kan gøre en form mere indbydende.
Hvidt mellemrum omkring hvert felt hjælper brugerne med at fokusere på et felt ad gangen. Der er en anden grund til, at denne tilstrækkelige afstand er nyttig. Når nogen begynder at udfylde felterne, flyttes hver etiket oven på. Og hvis der opstår en fejl, vises den relevante meddelelse nedenfor.
Brug dygtigt hvidt rum til at oprette bedre websteder
Hvidt rum kan referere til tomheden på et websted, men der er en masse mening og formål, der lever i den tomhed.
Ved at tage kontrol over afstanden på et websted kan du skabe en bedre oplevelse for alle, der går ind på det.
Selvom vi har vist dig et par måder at gøre dette på, er det en anden historie at anvende det på dine designs.
Men bare rolig. det side builder Elementor gør det nemt at tilføje hvidt mellemrum til dine designs.
Hent Elementor Pro nu!
Konklusion
Her ! Det er det for denne artikel dedikeret til hvidt rum i webdesign. Hvis du er bekymret for, hvordan du kommer dertil flad os vide det i kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...