Prost prostor v spletnem oblikovanju. 9 mest za navdih

Prazen prostor ni vedno slab.

Svetovne izkušnje s spletnim oblikovanjem so pokazale: veliko boljše je, če je v dizajnu veliko zraka in praznega prostora.

Obiskovalci spletnega mesta se uporabljajo za hitro brskanje po straneh in posnetke po delovnih mestih. Preobremenjene postavitve, kjer so razvijalci poskušali umestiti preveč informacij, zmedejo te uporabnike. Preprostost je ključ do nepodeljene pozornosti uporabnikov. In ta preprostost se začne z učinkovito uporabo prostega prostora.

Naj na kratko analiziramo, zakaj je prostor tako pomemben, kot poveča konverzijo, kot tudi razmislimo o devetih lokacijah in kako učinkovito njihovi ustvarjalci uporabljajo prosti prostor in spodbujajo obiskovalce k ukrepanju.

Prostor v spletnem oblikovanju je zrak med različnimi elementi. Vizualno loči postavitev spletnega mesta in informacije na odseke, s čimer opozori obiskovalce na najpomembnejše.

Področja, ki so namerno prazna, so prijetna za oči. Poleg estetike imajo pomemben vpliv na to, kako možgani zaznavajo in obdelujejo nove informacije. Preveč informacij ali vizualnih podatkov, tesno zapakiranih v majhen prostor, povzroča kognitivno utrujenost - informacije je težje zaznati. Za oblikovanje ni nič slabše od zastojev.

Zakaj potrebujete prost prostor

Ne pozabite, kako težko so strani abecednega telefonskega imenika. Vsi ti drobni besedilni stolpci se združijo v neprebavljivi tok informacij. V takih referenčnih knjigah je zelo težko najti potrebne.

Na srečo, za razliko od telefonskih imenikov, ustvarjenih za zagotavljanje največje možne količine informacij, ki zasedajo najmanj prostora, večina tiskanih publikacij aktivno uporablja prosti prostor, kar olajša zaznavanje.

Spodaj je v načrtih storitev digitalnih črnil prikazan zgled, kako učinkovita uporaba prostega prostora olajšuje zaznavanje informacij:

Vidiš razliko? Na postavitvi na levi strani se uporablja večina prostega prostora, zato je besedilo masivno in preobremenjeno. Stran ne povzroča zanimanja. Tudi s hitrim pogledom je jasno, da bo branje dolgočasno.

Na postavitvi na desni pa je razdalja med stolpci in odstavki veliko večja. Enostavne spremembe v oblikovanju so naredile besedilo bolj berljivo in privlačno.

Poleg tega, da prosti prostor poenostavlja razumevanje besedila, ga lahko uporabimo za poudarjanje še posebej pomembnih točk: pritegniti pozornost bralca na najpomembnejše. Z razdelitvijo postavitve in oblikovanjem majhnih odsekov naredite stran bolj uteženo in izpopolnjeno.

Oglejte si razpredelnice tiskanih vizitk:

Na vizitki na levi je prazen prostor, vendar so elementi še vedno stisnjeni v en kotiček, zaradi česar vizitka izgleda nestrokovno. Vizitka na desni kaže učinkovito uporabo prostega prostora: elementi so na precej oddaljenosti drug od drugega, veliko jih je lažje zaznati.

V spletnem oblikovanju je prost prostor ključni element tako za estetiko kot za optimizacijo konverzij. Pravilna uporaba prostega prostora vam bo omogočila lažjo navigacijo prek spletnega mesta, omogočila razumljivo in priročno uporabo ter nevsiljivo vodila uporabnike k pozivom k dejanjem, kar bo povečalo pretvorbo storitve.

To so pokazale klasične raziskave Human Factors International uporaba prostega prostora za poudarjanje pomembnih elementov spletne strani je povečala doseg obiskovalcev za skoraj 20%.

Oglejte si ti dve postavitvi:

Na levi postavitvi je gumb poziva k dejanju stisnjen z drugimi bloki: ločevalniki in gosto postavljeno besedilo. Obiskovalcu je težko izbrati najpomembnejšo stvar, saj je na strani preveč motenj

Na postavitvi na desni je gumb klic na dejanje obdan z prostim prostorom. Takoj takoj pritegne pozornost obiskovalca.

Z dodajanjem nekaj prostega prostora okoli elementov, ki pozivajo k dejanju, premaknete drugo vsebino spodaj. Toda s tem ni nič narobe. Ne poskušajte prilagoditi vse vsebine na strani brez pomikanja. Zaradi tega je lahko mesto veliko in preobremenjeno.

9 mest, ki učinkovito uporabljajo prosti prostor

1) Shopify

Glavna stran platforme za e-trgovino Shopify je oblikovana tako, da obiskovalcem ponuja prijavo za brezplačno demo verzijo.

V ta namen je bil prijavni obrazec z enim profilom obdan z zadostno količino prostega prostora, kar je zmanjšalo motnje. Tako bodo uporabniki zagotovo opazili glavno sporočilo te strani. Pisava glavne navigacije je bistveno manjša kot v naročniški ponudbi. Blok menija se premakne na sam vrh zaslona, ​​da ne bo odvrnil uporabnikov od glavnega obrazca.

2) Everlane

Prosto mesto ne mora biti čisto belo ozadje. Glavna stvar je, da so elementi strateško locirani na veliki razdalji drug od drugega, kar vam omogoča, da se izognete zastojem na straneh in preprečite, da bi se obiskovalci zmedli v preveliki količini vsebine.

Za predstavitev najnovejše modne kolekcije je Everlane izbral minimalen dizajn. V ozadju je fotografija jopiča "GoWeave". In v samem središču zaslona je spretno postavljen gumb s pozivom k dejanju - "Kupi zdaj". Idealen primer, kako uporabniku ponuditi nakup in ne izgledati agresivno.

3) Wistia

Vse, kar potrebujete za strateško uporabo prostega prostora, je, da se prepričate, da je gumb poziv k dejanju opazno ločen od vse druge vsebine. Tako preprosta sprememba igra pomembno vlogo pri tem, kako uporabniki dojemajo vaše spletno mesto.

Video platforma Wistia predstavlja uporabnikom fiksno domačo stran s prijaznim vprašanjem in spustnim seznamom. Dva osrednja gumba za poziv k dejanju sta glavni točki celotne strani. Hkrati pa so precej ločeni od glavne navigacije in slike ozadja.

4) Welikesmall

Digitalna agencija Welikesmall dokazuje, da prosti prostor ni nujno dolgočasen, prazen ali statičen. Na glavni strani njihove strani je demo video z najnovejšimi projekti. Kratke epizode takoj pritegnejo pozornost uporabnika.

Celozaslonski video v katerem koli drugem kontekstu se zdi preveč agresiven in preobremenjen. Toda oblikovalci so poskrbeli za zadostno količino prostega prostora, zato ta rešitev izgleda elegantno. Poudarek je na videu v ozadju, besedilne informacije pa so minimalne. V enem kotu strani je logotip podjetja, v drugem pa meni "hamburger". Slogan »Verjamem v izdelavo«, skupaj z gumbom »poziv k dejanju«, ki vodi do celotnega demo posnetka, je osredotočen na stran.

5) Simpla

Domača stran Simpla dokazuje, kako močna je marketinško orodje lahko prazen prostor brez pomikanja. Ta preprosta in minimalistična stran uporabnika prisili, da se pomakne po strani.

Veliko strani pod logotipom in menijem je ostalo popolnoma prazno. Vendar pa del fotografije, ki je videti od spodaj, in majhen del besedila, kot da povabi uporabnika, da prebere več in se seznani z zgodovino in cilji podjetja.

Takšna rešitev ne le izgleda prefinjeno, temveč tudi opozarja uporabnike na spletno stran.

6) Muzej umetnosti Harvard

Umetniški muzeji na Harvardu so znani po prikazu starih slik. Vendar pa njihova domača stran izgleda kot odličen primer sodobnega oblikovanja. Tu prosti prostor postane idealno ozadje za umetniška dela: nič ne odvrača uporabnika od kontemplacije lepote. Popolna digitalna razstava umetnosti.

Postavitev v obliki kamna privablja uporabnika, da se pomakne še dlje, in zagotavlja, da se nobena od slik ne izgubi v množici. Da bi ostala minimalistična, je meni mesta popolnoma skrit, dokler se ne premaknete nad vrh strani.

7) Burnkit

Ko delate s prostim prostorom na glavni strani, se morate odločiti, da je raznolikost informacij dovolj pomembna za prikaz. Toda ta oblikovalska agencija nam kaže, da je tudi minimalistična postavitev sama po sebi sposobna prilegati precejšnjo količino vsebin, in zasnova ne bo izgledala kot kup smeti z bloki, ki tečejo drug nad drugim.

Glavna vsebina bloga, ključni izvlečki iz portfelja in nekaj zakulisnega dela agencije na Burnkitovi glavni strani. Kako so uspeli vse to namestiti na eno stran, ne da bi mesto spremenili v preobremenjeno skupino informacij? Prosti prostor. Veliko prostega prostora. Vsak članek je ločen s širokimi zamiki. Uporabnik se lahko pomakne po strani, da vidi nov material.

8) Srednje

Srednja storitev zelo spretno uporablja prosti prostor, kar bralce prisili, da se pomaknejo navzdol po strani in jih vključijo v interaktivno statistiko: koliko ljudi je ocenilo to objavo, koliko jih je komentiralo in kakšne podobne vsebine lahko berejo.

Prostor omogoča uporabnikom, da se osredotočijo na osrednji stolpec zaslona, ​​kjer so predstavljeni naslov in slika naslova.

9) Ahrefs

Spletna stran Ahrefs je še en primer dejstva, da prosti prostor ne sme biti brez barv. Ustvarjalci strani nam pokažejo, kako pravilno uporabiti prostor in oblikovanje besedila, da bi pritegnili pozornost obiskovalca. Njihova rešitev je preprosta in jasna: svetlo oranžen gumb, ki ponuja preskusno različico.

S krepkim, velikim besedilom, Ahrefs označuje temeljno vrednost svoje programske opreme. Nato sledi manjše besedilo, ki je poravnano s središčem, obdano s prostim prostorom, ki uporabnika vodi neposredno do gumba za poziv k dejanju. Pametno, kajne?

Članek prevede Tatiana Musihina, Agencija za spletno trženje m2b.space.

Izvirni članek po referenci.

Oglejte si video: Revolution OS - movie about GNULinux history English subtitle (December 2019).

Loading...

Pustite Komentar