Gratis plass i webdesign. 9 steder for inspirasjon

Tomt rom er ikke alltid dårlig.

Verdensopplevelsen av webdesign har vist: det er mye bedre når det er mye luft og tomt plass i designet.

Nettsted besøkende er vant til å raskt bla gjennom sider og skumme gjennom innlegg. Overbelastede layouter, der utviklere har forsøkt å passe for mye informasjon, forvirre slike brukere. Enkelhet er nøkkelen til brukernes udelte oppmerksomhet. Og denne enkelheten begynner med effektiv bruk av ledig plass.

La oss kort analysere hvorfor ledig plass er like viktig som den øker konvertering, samt vurdere ni nettsteder og hvor effektivt deres skapere bruker ledig plass, og oppfordrer besøkende til å gjøre noe.

Det frie rommet i webdesign er luften mellom de ulike elementene. Det adskiller visuelt nettstedoppsettet og informasjonen i seksjoner, og trekker oppmerksomheten til besøkende til de viktigste.

Områder som forsiktig er tomt, er behagelige for øyet. I tillegg til estetikk har de en betydelig innvirkning på hvordan hjernen oppfatter og behandler ny informasjon. For mye informasjon eller visuelle data, tett pakket inn i et lite mellomrom, forårsaker kognitiv tretthet - det blir vanskeligere å oppleve informasjon. For design er det ingenting verre enn overbelastning.

Hvorfor trenger du ledig plass

Husk hvor vanskelig sidene i den alfabetiske telefonkatalogen er. Alle disse små tekstkolonnene smelter sammen i en ufordøyelig strøm av informasjon. Det er ekstremt vanskelig å finne det nødvendige i slike referansebøker.

Heldigvis, i motsetning til telefonkataloger, opprettet for å gi maksimal informasjon, opptar et minimum av plass, bruker de fleste trykte publikasjoner aktivt ledig plass, noe som letter oppfattelsen.

Nedenfor, i Digital Ink serviceoppsettene, er det et levende eksempel på hvordan effektiv bruk av ledig plass letter informasjonsforståelsen:

Se forskjellen? På layouten til venstre brukes det meste av ledig plass, og derfor ser teksten massiv og overbelastet ut. Siden forårsaker ikke interesse. Selv med et raskt blikk er det klart at lesing vil være kjedelig.

Og på layouten til høyre er avstanden mellom kolonnene og avsnittene mye større. Enkle designendringer gjorde teksten mer lesbar og attraktiv.

I tillegg til det faktum at ledig plass forenkler forståelsen av teksten, kan den brukes til å markere spesielt viktige punkter: for å tiltrekke seg leserens oppmerksomhet til det viktigste. Ved å bryte layoutet fra hverandre og danne små seksjoner, gjør du siden mer vektet og raffinert.

Ta en titt på disse utskriftskortoppsettene:

På visittkortet til venstre er det tomt rom, men elementene er fortsatt presset inn i ett hjørne, på grunn av hvilket visittkortet ser uprofesjonelt ut. Visittkortet til høyre viser effektiv bruk av ledig plass: elementene ligger i betydelig avstand fra hverandre, det er mye lettere å oppleve dem.

I webdesign er ledig plass et nøkkelelement for både estetikk og når det gjelder konverteringsoptimalisering. Riktig bruk av ledig plass vil tillate deg å lette navigasjonen gjennom nettstedet, gjøre det forståelig og praktisk og diskret føre brukere til å ringe til handling, og øke konverteringen av tjenesten.

Klassisk forskning fra Human Factors International viste at bruken av ledig plass til å markere viktige elementer på nettstedet økte rekkevidden av besøkende med nesten 20%.

Ta en titt på disse to layoutene:

På venstre oppsett presses kall-til-handling-knappen av andre blokker: separatorer og tett plassert tekst. Det er vanskelig for en besøkende å plukke ut det viktigste, fordi det er for mange distraksjoner på siden

På oppsettet til høyre, er handlingsknappen omgitt av ledig plass. Hun tiltrekker umiddelbart oppmerksomheten til den besøkende.

Ved å legge til litt ledig plass rundt handlingsobjektene, flytter du det andre innholdet under. Men det er ingenting galt med det. Ikke prøv å passe på alt innholdet på siden uten å bla. Som et resultat kan nettstedet være massivt og overbelastet.

9 nettsteder som effektivt brukte ledig plass

1) Shopify

Hovedsiden av e-handelsplattformen Shopify er designet for å tilby besøkende å registrere seg for en gratis demoversjon.

Til dette formål ble enkeltprofilregistreringsformen omgitt av en tilstrekkelig mengde ledig plass, minimering av distraksjoner. Så brukere vil helt sikkert legge merke til hovedmeldingen til denne siden. Skriften til hovednavigeringsnavigasjonen er betydelig mindre enn i abonnementstilbudet. Og menyblokken blir flyttet til toppen av skjermen for ikke å distrahere brukere fra hovedformen.

2) Everlane

Gratis plass trenger ikke å være en vanlig hvit bakgrunn. Det viktigste er at elementene er strategisk plassert i stor avstand fra hverandre, slik at du unngår sidebelastning og hindrer besøkende i å bli forvirret i for mye innhold.

For å demonstrere den nyeste moteinnsamlingen har klærhandler Everlane valgt en minimal design. På bakgrunnen er et bilde av "GoWeave" blazer. Og i selve senteret på skjermen er knappen med et anrop til handling - "Kjøp nå" på en dyktig måte. Et ideelt eksempel på hvordan du kan tilby brukeren å foreta et kjøp og ikke se aggressivt ut.

3) Wistia

Alt du trenger for å utnytte strategisk bruk av ledig plass er å sørge for at samtaleknappen er merkbart atskilt fra alt annet innhold. En slik enkel forandring spiller en viktig rolle i hvordan brukerne oppfatter nettstedet ditt.

Wistia Video Platform presenterer brukere med en fast hjemmeside med et vennlig spørsmål og en rullegardinliste. De to sentrale kall-til-handling-knappene er hovedfokuspunktet for hele siden. Samtidig er de ganske adskilt fra hovednavigasjonen og bakgrunnsbildet.

4) Welikesmall

Digitalbyrå Welikesmall beviser at ledig plass ikke trenger å være kjedelig, tom eller statisk. På hovedsiden på nettstedet deres er en demo-video med de nyeste prosjektene. Korte episoder tiltrekker øyeblikkelig brukerens oppmerksomhet.

Fullskjermvideo i en annen sammenheng kan virke for aggressiv og overbelastet. Men designerne tok seg av tilstrekkelig mengde ledig plass, så denne løsningen ser elegant ut. Fokus er på bakgrunnsvideoen, og tekstinformasjonen er minimal. I et hjørne av siden er firmaets logo, og i en annen - menyen "hamburger". Sloganet "Belief in the Making", sammen med en kall-til-handling-knapp som fører til full demo, er sentrert på siden.

5) Simpla

Simpla hjemmeside viser hvor kraftig et markedsføringsverktøy kan være tomt plass uten å bla. Denne enkle og minimalistiske siden tvinger brukeren til å bla siden.

Mye av nettstedet under logoen og menyen forblir helt tomt. Imidlertid ser den delen av bildet som ser ut under og et lite fragment av teksten som om brukeren skal lese videre og bli kjent med selskapets historie og mål.

En slik løsning ser ikke bare sofistikert ut, men trekker også brukerens oppmerksomhet til nettstedet.

6) Harvard Art Museums

Kunstmuseer på Harvard er berømte for å vise gamle malerier. Men deres hjemmeside ser ut som et godt eksempel på moderne design. Her blir ledig plass den ideelle bakgrunnen for kunstverk: ingenting distraherer brukeren fra kontemplasjonen til den vakre. Den perfekte digitale kunstutstillingen.

Layout i form av murverk tiltrekker brukeren å rulle videre, og sikrer at ingen av bildene går tapt i mengden. For å holde det minimalistisk, er nettstedmenyen helt skjult til du svinger over toppen av siden.

7) Burnkit

Når du jobber med ledig plass på hovedsiden, må du bestemme at informasjonen er viktig nok til å vise. Men dette designbyrået viser oss at selv en minimalistisk layout er i stand til å passe en betydelig mengde innhold i seg selv, og designet vil ikke se ut som en haug med søppel med blokker som kjører over hverandre.

Hovedinnholdet i bloggen, viktige utdrag fra porteføljen og noen backstage-arbeid i byrået på Burnkit-hovedsiden. Hvordan klarte de å passe alt dette på en side uten å sette området i en overbelastet klump med informasjon? Gratis plass. Masse ledig plass. Hver artikkel er adskilt av brede innsnitt. Brukeren kan bla siden for å se det nye materialet.

8) Middels

Middels tjeneste bruker veldig ledig plass, og tvinger leserne til å bla nedover siden, engasjerer dem i interaktiv statistikk: hvor mange som har vurdert dette innlegget, hvor mange kommenterte og hvilket lignende innhold de kan lese.

Det frie rommet gjør at brukerne tar hensyn til sentralkolonnen på skjermen, der tittelen og tittelbildet presenteres.

9) Ahrefs

Ahrefs nettsted er et annet eksempel på det faktum at ledig plass ikke skal være uten farger. Skaperne av nettstedet viser oss hvordan du bruker riktig ledig plass og tekstformatering for å tiltrekke besøkende oppmerksomheten. Deres løsning er enkel og klar: en lys oransje knapp som tilbyr å få en prøveversjon.

Med fet, stor tekst angir Ahrefs kjerneverdien av programvaren. Deretter kommer en mindre senterjustert tekst, omgitt av ledig plass, som fører brukeren direkte til handlingsknappen. Smart, ikke sant?

Artikkel oversatt av Tatiana Musihina, Agency Internet Marketing Specialist m2b.space.

Original artikkel ved referanse.

Se på videoen: Responsive Design with Bootstrap by Neel Mehta (November 2019).

Loading...

Legg Igjen Din Kommentar