Vytvořit bezchybnou grafiku pro web není úplně jednoduché. Celý proces s sebou totiž přináší nutnou řadu důležitých kroků, které byste na své cestě za perfektním designem neměli nikdy minout. Co by měl tedy navrhovaný web obsahovat, aby byl pro uživatele zajímavý a přínosný?

Style guide jako bible každého grafika

Style guide (neboli style manual) by se opravdu dal označit za bibli každého designéra. Najdete v něm totiž kompletní informace o použitém vizuálu, funkcích a pravidlech, ze kterých je webová stránka složena.

Správně vytvořený style guide vám navíc ušetří mnoho starostí i v případě, že je nutné předat web novému člověku.

Co standardně obsahuje style guide:

Bez mřížky ani ránu

Každý webový návrh by měl začínat přípravou správné mřížky. Mřížka totiž usnadní kódování grafiky a zároveň pomáhá v zarovnání objektů. Dnes se nejčastěji pracuje podle Bootstrap nástroje.

Zvláštní pozornost byste však měli věnovat i rozestupům mezi jednotlivými sloupci. Pro bezchybný vzhled je nutné dodržet vždy stejné mezery! Pro tento účel vám skvěle poslouží například Spacing utility, který využívá přednastavené mezery. V rámci nástroje není problém navrhnout i vlastní řešení, které však nesmíte zapomenout dodržovat.

Nastolte webu vizuální řád

Správně navržený webdesign působí na člověka přirozeně. Jakákoli nesourodost či změna vede k podvědomému narušení, zmatení a následnému zastavení/odchodu.

Berte v potaz, že se dnes nikomu nechce dlouho přemýšlet a nastavte si v rámci webu ucelený styl, který budete dodržovat. Pokud má váš web oblá tlačítka, kopírujte tento nápad i do dalších prvků, které budou váš návrh podporovat.

Opakovat prvky není ostuda

Každý člověk chce být při návrhu webu přirozeně originální a nápaditý. I přesto byste však neměli nikdy zapomenout na to, že chcete budoucím návštěvníkům webu jejich práci co nejméně ztěžovat. A to znamená, že byste se neměli bát opakovat jisté prvky.

V rámci návrhu wireframu proto definujte komponenty, které budou shodné napříč celým webem. Opakující se jevy působí z pohledu UX velmi přitažlivě a vlastníkovi webu zvýší pravděpodobnost, že se u něj bude potenciální zákazník cítit příjemně a nakoupí.

Opakování komponentů navíc ušetří čas ve vývoji. Čím méně budete mít na webu unikátních prvků, tím více ušetříte práci při kódování.

Upoutejte pozornost pomocí kontrastu

Některé grafiky jistě napadne otázka, jak v rámci minimalistického designu upoutat zákazníkovu pozornost. Pro tento účel skvěle slouží nastavení kontrastu.

Díky kontrastu můžete lidem předat nejdůležitější informace a skvěle je navést tam, kam zrovna potřebujete.

Kde se hodí používat kontrast?

Myslete minimalisticky

I když to pro designéry nemusí být tou nejlepší zprávou, pravda je, že dnešní zákazníci chtějí na webu strávit co nejméně času. V praxi to znamená, že se jim nezavděčíte propracovanou grafikou, která v sobě bude ukrývat desítky drobných detailů, ale jednoduše tím, že jim to nejpodstatnější zvládnete sdělit do 8 vteřin.

Z toho důvodu je třeba navrhovat web tak, aby obsahoval, co možná nejméně rušivých elementů. Poukazovat byste měli vždy na účelné informace, které mají vést ke konverzi.

Pozor na písmo

Volba správného typu písma může webu dodat na osobitosti, ale zároveň potenciálním zákazníkům pěkně znepříjemnit přístup k informacím. Z toho důvodu byste s písmem měli nakládat velmi obezřetně.

Je absolutně v pořádku zvolit napříč celým webem pouze dvě různá písma. Vždy myslete na to, aby bylo písmo dobře čitelné, a to i v případě zobrazení menší velikosti. Jednotný styl vám pomůže k tomu, aby web působil příjemně a uceleně.

Přemýšlejte responzivně

Poslední bod je zde spíš pro pořádek, jelikož se jedná o věc, se kterou počítá snad každý.

Statistiky jasně hovoří o tom, že valná většina návštěvníků webu přichází z mobilních zařízení, a proto byste měli klást na mobilní verzi zatraceně velký důraz.

V dnešní době už se celkem rozmáhá i tak zvaný Mobile first přístup, který upřednostňuje návrh uživatelského rozhraní webu pro mobilní zařízení a upozaďuje klasický postup webdesignu.

TIP: V případě, že se musíte obejít bez mobilní verze, ujistěte se, že je celý web opravdu jednoduchý a obsahuje pouze ty nejdůležitější informace.