Voľný priestor vo web dizajne. 9 miest pre inšpiráciu

Prázdne miesto nie je vždy zlé.

Svetová skúsenosť s web-dizajnom ukázala: je to oveľa lepšie, keď je v dizajne veľa vzduchu a prázdneho priestoru.

Návštevníci webových stránok sa používajú na rýchle prepínanie stránok a skim prostredníctvom príspevkov. Preťažené rozloženia, kde sa vývojári pokúšali prilepiť príliš veľa informácií, zamieňajú takýchto používateľov. Jednoduchosť je kľúčom k úplnej pozornosti užívateľov. A táto jednoduchosť začína efektívnym využívaním voľného priestoru.

Stručne analyzujme, prečo je voľný priestor tak dôležitý, ako sa zvyšuje konverzia, ako aj zvažujeme deväť stránok a ako efektívne využívajú ich tvorcovia voľný priestor, čo povzbudzuje návštevníkov, aby konali.

Voľný priestor v dizajne webu je vzduch medzi rôznymi prvkami. Vizuálne oddeľuje rozloženie stránky a informácie do sekcií a upozorňuje návštevníkov na najdôležitejšie.

Oblasti, ktoré sú zámerne prázdne, sú pre oko príjemné. Okrem estetiky majú významný vplyv na to, ako mozog vníma a spracúva nové informácie. Príliš veľa informácií alebo vizuálnych údajov, ktoré sú pevne zabalené do malého priestoru, spôsobuje kognitívnu únavu - je ťažšie vnímať informácie. Pre dizajn nie je nič horšie ako preťaženie.

Prečo potrebujete voľné miesto

Pamätajte si, aké ťažké sú stránky v abecednom telefónnom zozname. Všetky tieto malé textové stĺpce sa zlúčia do jedného nestráviteľného prúdu informácií. Je veľmi ťažké nájsť v takýchto referenčných knihách potrebné informácie.

Našťastie, na rozdiel od telefónnych zoznamov, vytvorených s cieľom poskytovať maximálne informácie, zaberajúce minimum miesta, väčšina tlačových publikácií aktívne využíva voľné miesto, čo uľahčuje vnímanie.

Nižšie sú v rozložení služieb digitálneho atramentu živý príklad toho, ako efektívne využívanie voľného miesta uľahčuje vnímanie informácií:

Vidíte rozdiel? Na rozložení vľavo sa používa väčšina voľného miesta, takže text vyzerá masívne a preťažený. Stránka nespôsobuje záujem. Aj s rýchlym pohľadom je jasné, že čítanie bude únavné.

A na rozložení vpravo, vzdialenosť medzi stĺpcami a odsekmi je oveľa väčšia. Jednoduché zmeny dizajnu urobili text čitateľnejším a atraktívnejším.

Okrem toho, že voľný priestor zjednodušuje porozumenie textu, môže byť použitý na zvýraznenie obzvlášť dôležitých bodov: pritiahnuť pozornosť čitateľa k najdôležitejším. Rozdelením rozloženia a vytvorením malých častí urobíte stránku váženejšou a rafinovanejšou.

Pozrite sa na tieto rozvrhnutia vizitiek:

Na vizitke vľavo je prázdne miesto, ale prvky sú stále stlačené do jedného rohu, preto vizitka vyzerá neprofesionálne. Vizitka vpravo ukazuje efektívne využitie voľného priestoru: prvky sú v značnej vzdialenosti od seba, je oveľa ľahšie ich vnímať.

Vo web dizajne je voľný priestor kľúčovým prvkom estetiky a optimalizácie konverzie. Správne používanie voľného miesta vám umožní uľahčiť navigáciu cez stránku, urobiť ju zrozumiteľnou a pohodlnou a nenápadne viesť používateľov k výzvam na akciu, čím sa zvýši konverzia služby.

Klasický výskum Human Factors International to ukázal Využitie voľného miesta na zvýraznenie dôležitých prvkov webovej stránky zvýšilo návštevnosť o takmer 20%.

Pozrite si tieto dve usporiadania:

Na ľavej strane je tlačidlo call-to-action stlačené inými blokmi: oddeľovačmi a husto umiestneným textom. Pre návštevníka je ťažké vybrať si tú najdôležitejšiu vec, pretože na stránke je príliš veľa rozptýlení

Na rozložení vpravo je tlačidlo volania na akciu obklopené voľným priestorom. Okamžite priťahuje pozornosť návštevníka.

Pridaním trochy voľného miesta okolo položiek výzvy na akciu presuniete ďalší obsah uvedený nižšie. Ale na tom nie je nič zlého. Nepokúšajte sa prispôsobiť celý obsah stránky bez rolovania. V dôsledku toho môže byť miesto masívne a preťažené.

9 lokalít, ktoré efektívne využívajú voľné miesto

1) Shopify

Hlavná stránka platformy e-commerce Shopify je navrhnutá tak, aby návštevníkom ponúkla bezplatnú demo verziu.

Na tento účel bol jednorazový registračný formulár obklopený dostatočným množstvom voľného priestoru, čo minimalizovalo rozptyľovanie. Užívatelia si tak určite všimnú hlavnú správu tejto stránky. Písmo hlavnej navigácie stránky je podstatne menšie ako v ponuke predplatného. Blok menu je posunutý na samom vrchu obrazovky tak, aby neodvádzal užívateľov od hlavného formulára.

2) Everlane

Voľné miesto nemusí byť obyčajné biele pozadie. Hlavná vec je, že prvky sú strategicky umiestnené vo veľkej vzdialenosti od seba, čo vám umožní vyhnúť sa preťaženiu stránky a zabrániť návštevníkom, aby sa zmiasť v nadmernom množstve obsahu.

Pre demonštráciu najnovšej módnej kolekcie si predajca oblečenia Everlane vybral minimálny dizajn. Na pozadí je fotografia sakra "GoWeave". A v samom strede obrazovky je tlačidlo s výzvou na akciu - "Kúp teraz". Ideálny príklad, ako ponúknuť užívateľovi nákup a nie vyzerať agresívne.

3) Wistia

Všetko, čo potrebujete na strategické využitie voľného miesta, je uistiť sa, že tlačidlo výzvy na akciu je zreteľne oddelené od všetkých ostatných obsahov. Takáto jednoduchá zmena hrá významnú úlohu v tom, ako používatelia vnímajú vašu stránku.

Video platforma Wistia predstavuje užívateľom pevnú domovskú stránku s priateľskou otázkou a rozbaľovacím zoznamom. Hlavným bodom celej stránky sú dve centrálne tlačidlá „call-to-action“. Zároveň sú celkom oddelené od hlavnej navigácie a pozadia.

4) Welikesmall

Digitálna agentúra Welikesmall dokazuje, že voľný priestor nemusí byť nudný, prázdny alebo statický. Na hlavnej stránke ich stránky je demo video s najnovšími projektmi. Krátke epizódy okamžite priťahujú pozornosť používateľa.

Celé zobrazenie videa v akomkoľvek inom kontexte sa môže zdať príliš agresívne a preťažené. Dizajnéri sa však postarali o dostatočné množstvo voľného priestoru, takže toto riešenie vyzerá elegantne. Zameranie je na pozadí videa a textové informácie sú minimálne. V jednom rohu stránky je logo spoločnosti av druhom menu "hamburger". Slogan „Viera v stvorenie“, spolu s tlačidlom výzvy na akciu, ktoré vedie k úplnému demu, sa sústreďuje na stránku.

5) Simpla

Domovská stránka Simpla dokazuje, aký silný marketingový nástroj môže byť prázdny priestor bez rolovania. Táto jednoduchá a minimalistická stránka núti používateľa posúvať stránku.

Väčšina stránok pod logom a menu zostala úplne prázdna. Časť fotografie, ktorá sa pozerá zdola a malá časť textu, ako by vyzvala používateľa, aby si prečítal a zoznámil sa s históriou a cieľmi spoločnosti.

Takéto riešenie nielenže vyzerá dômyselne, ale aj upozorňuje používateľov na stránku.

6) Múzeum umenia v Harvarde

Umelecké múzeá na Harvarde sú známe pre zobrazovanie starých obrazov. Ich domovská stránka však vyzerá ako najlepší príklad moderného dizajnu. Voľný priestor sa tu stáva ideálnym zázemím pre umelecké diela: nikto neodvádza užívateľa od kontemplácie krásnej. Dokonalá výstava digitálneho umenia.

Rozloženie vo forme kamenných prác láka užívateľa k posúvaniu ďalej, a zabezpečuje, že žiadny z obrázkov sa nestratí v dave. Ak chcete, aby bola stránka minimalistická, ponuka lokality je úplne skrytá, kým neprechádzate nad hornú časť stránky.

7) Burnkit

Ak pracujete s voľným miestom na hlavnej stránke, musíte sa rozhodnúť, že množstvo informácií je dostatočne dôležité na zobrazenie. Ale táto dizajnová agentúra nám ukazuje, že aj minimalistické usporiadanie dokáže do seba zapracovať značné množstvo obsahu a dizajn nebude vyzerať ako hromada odpadu s blokmi, ktoré sa navzájom prechádzajú.

Hlavný obsah blogu, kľúčové výňatky z portfólia a niektoré zákulisné práce agentúry na hlavnej stránke Burnkitu. Ako sa im to všetko podarilo na jednej stránke bez toho, aby sa stránka zmenila na preťaženú informáciu? Voľné miesto. Veľa voľného miesta. Každý výrobok je oddelený širokými zarážkami. Používateľ si môže prezerať stránku a vidieť nový materiál.

8) Médium

Stredná služba veľmi šikovne využíva voľné miesto a núti čitateľov, aby prechádzali po stránke a zapájali sa do interaktívnej štatistiky: koľko ľudí tento príspevok ohodnotilo, koľko komentárov a aký podobný obsah si môžu prečítať.

Voľný priestor umožňuje používateľom dávať pozor na centrálny stĺpec obrazovky, kde je prezentovaný názov a obrázok titulu.

9) Ahrefs

Webová stránka Ahrefs je ďalším príkladom toho, že voľné miesto by nemalo byť bez farby. Tvorcovia stránky nám ukazujú, ako správne využiť voľné miesto a formátovanie textu na prilákanie pozornosti návštevníka. Ich riešenie je jednoduché a jasné: jasne oranžové tlačidlo, ktoré ponúka skúšobnú verziu.

S tučným, veľkým textom označuje Ahrefs základnú hodnotu svojho softvéru. Potom prichádza menší stredovo zarovnaný text, obklopený voľným priestorom, ktorý vedie používateľa priamo k tlačidlu výzvy na akciu. Smart, že?

Článok preložil Tatiana Musihina, špecialista agentúry Internet Marketing m2b.space.

Pôvodný článok v odkaze.

Zanechajte Svoj Komentár