20 Eksempler på White Space-bruk i webdesign

La oss si at du er på et bibliotek. Det ville ikke vært hyggelig i det hele tatt om du ikke kunne bevege deg rundt på grunn av de overfylte hyllene og salene, mens bibliotekaren kontinuerlig ba deg om de siste bøkene som kom. Det er det samme med hvitt mellomrom som brukes i webdesign: det gir rom for å puste til mange nettstedelementer.

White space er ekstremt viktig i webdesign for brukervennlighet og lesbarhet, og det legger vekt på spesielle elementer. Tenk deg hvordan det ville vært hvis det var mange ord hengende sammen. Brukeropplevelsen vil definitivt være svært ubehagelig, og det vil kreve mye innsats for å forstå meldingene på et nettsted.

Hvitt mellomrom er også kjent som «negativt mellomrom» og refererer til det tomme rommet rundt og mellom flere elementer i et design eller sideoppsett. Det er også kjent som «pusterom». Og det trenger ikke å være hvitt. Faktisk kan alle farge ville passe så lenge det skaper et rent og pent design.Selv om negativt rom ikke inneholder noe, kan det definere og forsterke det positive rommet.

White space – et aktivt element

Negativ plass har blitt ansett som et passivt element, men det spiller en ekstremt viktig rolle i å forbedre merkevareeksponeringen og forbedre hele den visuelle layouten. Å skape og levere en god brukeropplevelse innebærer mer enn å bruke hvitt mellomrom, men vi kan ikke benekte den enorme betydningen av dette elementet. Den veileder brukere på en side, skaper sofistikert og harmonisk layout, kommuniserer det som trenger mer oppmerksomhet på en nettside og letter skanbarheten.

White space brukes mellom flere elementer som sidefelt, tekster, bunntekster, topptekster og bilder. En rotete side, spesielt hvis det ikke er hierarki i teksten, forverrer lesehastigheten og forståelsen.

Negativ plass kan bli like verdifull som selve innholdet. Dette gjelder spesielt viktige merker fordi det tilfører en tone av eleganse.

Rollen til hvitt rom i webdesign

Det er to typer hvite mellomrom: mikro- og makrohvite områder. Mikrohvitt mellomrom er mellomrommet mellom de mindre elementene: mellom bokstaver, ord, listeelementer, mellom et bilde og en bildetekst. Tenk for eksempel på en nettavis. Den må ha plass rundt tegn og mellom avsnitt for å gjøre innholdet lettlest og gi avisen en ren og lett følelse.

Makroplass betyr mellomrommet mellom større elementer, som er veldig brukt for for eksempel Google-nettsteder. Den har et rent design, med fokus på hovedformålet med siden, mens andre aspekter ikke er så vektlagt.

For å teste hvordan nettstedet du bygger ser ut når det gjelder farger, er Adobe Kuler det rette verktøyet. Du kan opprette, redigere og laste opp ulike fargeskjemaer.

I tillegg, hvis du er i tvil og ikke vet hvilke fonter som er mer passende, prøv Google Webfonts. Velg forskjellige fonter og se hvordan de fletter seg sammen med mellomrom.

Hvis du ikke er sikker på hvor og hvordan du skal bruke mellomrom når du bygger og tilpasser et nettsted, kan Balsamiq være nyttig. Det hjelper deg å jobbe raskere og enklere ved å reprodusere en skisse på en tavle, men gjennom datamaskinen.

Ettersom alle nettsider har nettskjemaer. Det er ekstremt viktig hvor du plasserer dem og hvordan du bruker negativ plass i denne sammenhengen. Og ettersom å lage nettskjemaer vanligvis innebærer koding, trenger du et verktøy for å forenkle arbeidet ditt og spare tid. 123ContactForm webskjemabygger krever ingen koding og er ideell også når du bruker mellomrom til å bygge et webskjema.

White space kan være aktivt og passivt. Aktiv negativ plass leder en leser fra ett element til et annet, skaper harmoni og kan posisjonere en merkevare mye bedre. Passiv mellomrom er faktisk det hvite rommet som omgir utsiden av en side eller tomme områder inne i innholdet, som noen ganger blir sett på som dårlig design.

Negativ plass skaper balanse, en god generell flyt og påvirker leserne, slik at de holder seg mer på en side. Og dette gjelder ikke bare en nettavis, men alle nettsider. Noen ganger står webdesignere overfor ulike plattformer, skjermoppløsninger eller nettlesere. Derfor er det komposisjonsøvelser for webdesignstudenter. Disse øvelsene hjelper dem å innse viktigheten av negativ plass og hvordan de kan bruke den effektivt.

Negativt rom har stor innflytelse. Finn ut hvorfor!

White space gir hjernen visuelle signaler om hvilke elementer som er atskilt og hvilke som hører sammen. Det beste eksemplet består av flere linjer med telefonnumre eller e-postadresser på et nettsted atskilt med mellomrom, som signaliserer hjernen din at hver sekvens er en annen og ikke et veldig langt nummer.

Hvis det er mer hvitt mellomrom, vil et nettsted se mer stilig ut. Denne bruken av negativ plass er vanlig i dyre og stilige magasiner for kvinner. Nesten alle annonser har mye hvit plass, det er nok plass til bakgrunnsbilder og tekster er knappe.

Et motsatt eksempel er en direkte e-postannonse som vi alle har fått minst én gang. Husker du at det var så lite negativ plass kombinert med mange og store tekstblokker som ikke så bra ut? Så det har stor innflytelse. Det er derfor webdesignere må jobbe med det i tankene før de oppretter og tilpasser et bestemt nettsted.

Det er noen grunnleggende prinsipper for å lage en god nettsidedesign. Negativ plass skal skille elementer som topptekst, bunntekst og navigasjon. Og neste gang du designer en side, analyser marginene og utfyllingen mer i stedet for å lure på hvor mye plass du trenger til litt tekst.

Kunder bør også forstå viktigheten av hvitt mellomrom

Hvis du er i tvil eller hvis kundene dine ikke helt forstår viktigheten av negativ plass, er dette hva du kan gjøre: bygge designet ditt på to forskjellige måter. Den ene har mindre negativ plass for å formidle en mer praktisk og down-market tone, og den andre med mer hvit plass for en sofistikert følelse. Husk at du bør bruke de samme elementene i de to designene dine. Det eneste du bør gjøre annerledes er å endre avstanden mellom alle disse elementene.

Den kanskje beste måten å se hvordan hvitt mellomrom brukes og lære mer om viktigheten er å ta en titt på flere nettsteder. De kan inspirere og hjelpe deg med dine fremtidige prosjekter. Bare ta en titt på følgende nettsteder, frigjør fantasien din, og resultatene vil være utmerket!

Madebysofa.com bruker hvit plass for å skape et rent, minimalistisk utseende. På denne måten er det lagt vekt på nettsidekategorier og lenker.

Vertigo Visual holder det enkelt og bruker rikelig med hvit plass for å legge til et snev av stil og personlighet.

Cultured Code er et eksempel der hvitt mellomrom ikke er hvitt, men lyseblått. Det er også noen fargede geometriske elementer som forbedrer visse kategorier.

Philip House NYC har mye hvit plass. Hensikten her er å fange blikket og forbedre noen bilder og kategorier på nettsiden.

Bygget av Buffalo bruker hvit plass veldig klokt. Den legger vekt på alle kategorier og logo. I midten av siden er det flere fargede deler som leder til viktig informasjon. Mens du blar nedover, kan du legge merke til at mellomrom fortsatt dominerer, men fokus er fortsatt på andre seksjoner.

Ditto er også et nettsted som bruker hvitt mellomrom for å legge til raffinement og eleganse. Samtidig brukes negativ plass for å vise frem produktene bedre.

Metta Skincare har et elegant design. Fokus er på produkter, USP og nettsidekategorier.

Fell Swoop inkluderte white space for å skape følelser og øke brukerengasjementet.

Attitude Design kombinerer hvitt rom med «farget» hvitt rom for å få oppmerksomhet til noen få nøkkelpunkter på nettstedet. Enkelt men effektivt!

Super Real -nettstedet har et snev av eleganse og raffinement på grunn av hvit plass. Negativ plass brukes her for å forbedre hovedkategoriene.

Handiemail har en enkel, hvit layout som holder besøkende interessert. Alt er så lett å lese på grunn av et så rent design.

Suki er et nettsted som fanger oppmerksomheten din nesten umiddelbart. Det er utrolig hvordan negativ plass veksler med bilder, videoer og oppfordringer til handling. Bare ta en titt!

Tom Reinert er et nettsted der overvekten av hvitt mellomrom skiller flere elementer. Helhetsinntrykket er en ren, vakker og lettlest side.

Webydo utnytter negativ plass ved å bruke den rundt bilder, spalter og handlingsfremmende uttrykk for å vise frem ulike deler av nettstedet, kontaktdetaljer og mer.

PlainWhite er et annet godt eksempel på whitespace brukt i webdesign. Som vi kan se her, veileder den øynene dine og bidrar til et pent og luftig design. På denne måten vises alle nettstedkategorier vakkert.

Bønnestengel er et godt eksempel på hvordan hvit plass ikke bare er «hvit». Det skaper harmoni, balanse, får nettsiden til å se ryddig ut og fremhever innholdet.

Pulp Fingers demonstrerer også effektiviteten til «farget» negativ plass. Her har vi en dristig farge som fremhever meldingene, handlingsfremmende oppfordringer, knapper på sosiale medier, kontaktfelt og nettstedskategorier.

No Leath har white space, som faktisk er en lys grå nyanse kombinert med stor grafikk for å vise produktene deres så godt som mulig.

Dropbox er en forkjemper for negativ plass. Denne nettsiden viser at mindre er mer. Og dette oppnås ved å beholde bare de elementene som er virkelig viktige. White space her øker lesbarheten og brukervennligheten, noe som gjør alt på nettstedet ekstremt enkelt å lese og forstå.

Something Splendid har mye hvit plass kombinert med fargerike elementer. Dette gjør siden ekstremt enkel å navigere. I tillegg er det en hyggelig opplevelse å samhandle med en slik nettside. Hver kategori er mer merkbar, uten å gjøre designet rotete.

Dette er bare noen få av de nettstedene som utnytter det hvite rommet godt. Selv om hvitt mellomrom er et kontroversielt element, vil du finne flere nettsteder som bruker det, på grunn av fordelene. Hvis den brukes som den skal, bidrar negativ plass til gode brukeropplevelser.

White space forårsaker ofte friksjon mellom webdesignere og deres kunder. Noen ganger ønsker ikke klienter å se noen tom plass på nettstedet deres, og tenker at det må være dekket med innhold. Det er derfor designere må forklare sine kunder rollen som negativ plass.

Det kan være vanskelig, i det minste for nybegynnere, å artikulere påvirkningen av det. Ikke desto mindre ikke tenk på hvitt rom som «tomt rom», uten mening. Ja, det kan se tomt og vanlig ut, men husk at du har brukt det spesielt fordi det virkelig forbedrer det generelle designet, ikke fordi det ikke var noe annet å legge til der. Det kan være vanskelig å forklare det til kundene dine, men jeg håper denne artikkelen vil hjelpe deg med det.