Nejdůležitější prvky při designu webu

...a na co si u nich dát pozor

Design každého webu se skládá z mnoha částí. Tím, že si na podstatných prvcích dáte opravdu záležet, můžete svou stránku nejen zkrášlit, ale zároveň i přímo zvýšit zisk. Celkový vzhled webu vaší značky má totiž obrovský dopad na dojem zákazníků. I malé drobnosti v designu mohou znamenat rozdíly mezi okouzlujícími a nudnými stránkami.

Tvorba webu je komplexní úkol, který se skládá z několika menších částí – od výběru písma a barev přes správné použití vizuálního obsahu a logické rozvržení až po sepsání čtivého textu. Pojďme si tedy design webu rozkouskovat a prozkoumat jednotlivé prvky trochu detailněji.

Fonty

Správná volba písma je pro celkový design stránek důležitější, než jste si možná mysleli. Použití vhodného fontu pomáhá udržovat jednotnost webu, zlehčuje čitelnost a přispívá k celkové profesionalitě vzhledu.

Základním pravidlem je nepřehánět to s diverzifikací. Ano, do různých částí webu se můžou hodit různé fonty, obecně ale platí, že byste se měli snažit počet různých stylů písma minimalizovat. Napříč celou stránkou by tak měly být použity maximálně tři fonty. Méně je však někdy více, a proto je lepší využít možností řezu a velikosti jednoho fontu. Webové stránky s jedním použitým fontem působí konzistentně. Další font může být vhodným doplňkem k celkovému designu. Výběr je hodně individuální záležitost a přímo souvisí s celkovou koncepcí webu.

Dnes máme na výběr z opravdu obrovského množství druhů písma a rozhodně se nemusíme omezovat jen na ty z Wordu. Pokud nevíte kde hledat, můžete se inspirovat například na Google Fonts, kde najdete přes 1300 originálních stylů. Starým a dávno okoukaným fontům, jako je Courier New, Times New Roman, nebo dokonce Comic Sans, už dávno odzvonilo.

Pro delší texty s menší velikostí písma, cca do 16 pixelů, se skvěle hodí lépe čitelnější serif (patkové) fonty typu Merriweather či Roboto Slab. Pokud však preferujete novodobější vzhled, můžete sáhnout po moderních sans serif (bezpatkových) stylech, jako je Roboto, Open Sans nebo Raleway. Ty jsou však vhodné spíše pro kratší texty či nadpisy.

Záhlaví a menu

Menu v záhlaví stránky (header) je často první věc, kam zákazníci upřou své oči. Proto je potřeba, aby tato část byla co nejpřehlednější, a návštěvník by zde měl hned najít proklik na stránku, kterou hledá.

Zatímco někde se experimentování vyplácí, u menu zůstaňte raději konzervativní. Pozadí a barva písma by měly být v kontrastu (tmavá x světlá barva), aby šlo vše dobře přečíst. Skvělým doplňkem je pak například zvýraznění té stránky v menu, na které se uživatel zrovna nachází, aby se vždy orientoval. Dále se určitě vyvarujte použití příliš uměleckých nebo těžko čitelných fontů.

Záhlaví, ostatně jako celý web, musí být dnes již vždy responzivní pro zobrazování na menších zařízení. Skvěle funguje třeba tzv. „hamburger menu“, kdy nabídka zmizí a místo toho se na jedné straně objeví tři horizontální čárky nad sebou, které výběr podstránek rozbalí po kliknutí. Díky tomu bude uživatelská zkušenost čistší a zvýší se šance, že zákazník dokončí akci, kterou začal, protože nebude vyrušován dalšími možnostmi.

Barevná paleta

Barvy na vaší stránce by neměly být rozházené náhodně. Kvalitní web pravděpodobně nebude vypadat jako duha, a nejspíš nebude ani černobílý (byť je minimalistický design s použitím dvou barev stále populárnější). Před barvením jednotlivých prvků byste si měli vytvořit svou digitální barevnou paletu, jíž se budete při designu webu výhradně držet. To není nic náročného. Naopak, můžete při tom probudit svou kreativitu.

Nejdříve byste si měli vybrat jednu primární barvu (u nás je to například modrá) a k té několik doplňkových barev (v našem případě šedá), které k sobě vhodně ladí. Použít můžete třeba i barvu, která je naopak v naprostém kontrastu k ostatním. Ty lze použít k vybarvování CTA tlačítek a jiných výrazných prvků. Přemýšlet musíte i nad pozadím webu – na bílých stránkách jsou potřeba jiné barvy než na černém podkladu. V zásadě by však vaše barevná paleta měla obsahovat co nejméně barev (ideálně tři), aby byl web jasně přehledný, konzistentní a nevypadal jako cirkus.

Skvělým způsobem tvoření barevného schématu je vycházet ze svého loga, nebo se řídit podle toho, jaké barvy v zákaznících vyvolají správné emoce. Zelená se často používá ve spojení se zdravím a přírodou, tedy se skvěle hodí ke komunikaci ekologie nebo prodej léků. Červená zase vzbuzuje vzrušení a energii, takže se hodí…no, k nejrůznějším druhům obchodů. Na internetu naleznete rádce s výběrem nejvhodnějších barev pro daný obor podnikání.

Přebytečné prvky

Když někdo přijde na váš web, máte zhruba 15 sekund na to, abyste jej zaujali a získali – jinak pravděpodobně odejde. V takto krátkém intervalu neexistuje čas pro žádné zbytečné prvky, které možná na první pohled mohou vypadat líbivě, ale ve skutečnosti pouze kradou pozornost od jiných důležitých částí stránky.

Nejčastějšími problémy jsou například příliš svítivé obrázky v pozadí nebo zvýrazňování nedůležitých frází. Snažte se tyto prvky eliminovat. Díky tomu vyniknou ty části, které mají pozornost upoutat doopravdy – tlačítka vyzývající k nějaké akci, nadpisy, atd. Ty se naopak vybarvit nebo podtrhávat snažte. Buďte struční a nezatěžujte čtenáře hned na první stránce tunami textu. K tomu se může v případě zájmu kdykoliv proklikat.

Pokud například prodáváte boty a oblečení, nesnažte se hned na první stránce návštěvníkům popsat vznik vaší společnosti nebo detailně vysvětlit způsob výroby produktů. Místo toho v pár slovech uveďte vaše největší přednosti (př. „české boty od českých návrhářů“, „voděodolné bundy na hory i do města“ apod.) a přidejte k tomu tlačítko, které zákazníka dostane přímo do obchodu.

Vizuální obsah

Videa, obrázky, infografiky a další vizuální obsah jsou při designu webu velmi silnou zbraní. Jenže je potřeba je správně uchopit. Video například lidský mozek zpracovává až 60 000krát rychleji než psaný text. Tak proč ho nepoužít k vysvětlení svého produktu či filozofie?

Dobré video dnes už natočíte i na mobilním telefonu. Postačí minutové video objasňující nejdůležitější věci o vašich produktech, vaší značce nebo filozofii, umístěné hned pod záhlavím na hlavní stránce. Jakmile návštěvník přijde, může se zmáčknutím tlačítka „přehrát“ dozvědět všechny potřebné informace. A zároveň tím ušetříte spoustu textu, který byste jinak museli vypisovat.

Podobnou funkci mohou zastat i kvalitní fotky vašeho produktu. Web restaurace může hned na hlavní stránce zobrazit reálný obrázek některého ze svých pokrmů či prostředí podniku. Pokud tvoříte software, ukažte zase návštěvníkům co nejdříve reálný screenshot ze své aplikace. I to zákazníkům pomůže s rychlejším pochopení vaší značky. I zde však platí: Všeho s mírou. Vizuální obsah pečlivě prokládejte psaným textem (třeba jen frázemi nebo krátkými odstavci) a dostatečným volným prostorem mezi jednotlivými prvky a okraji stránky, ať uživatele úplně nezahltíte.

S tvorbou webů máme mnoho zkušeností. Nebojte se zeptat, rádi vám poradíme.