5 tipů, jak vylepšit design vašeho webu

Design za posledních pár let udělal obrovský krok kupředu.  Začíná se totiž projevovat nasycení trhu a konkurence je na každém rohu. O tom, kde návštěvník nakonec zůstane, rozhoduje nejenom obsah, který na webu najde, ale tak to, jak se na webu cítí. Právě pohodlnost a jednoduchost webu zajišťuje design webu a díky tomu se návštěvník na web rád vrací a tím se zvyšuje pravděpodobnost nákupu. V tomto článku si ukážeme pár triků a tipů, jak vylepšit váš design, aby byl více přehledný a přívětivější pro vaše návštěvníky.

Menu

Když u mě poptává službu nějaký klient, abych mu sestavil nový web, pošle staré stránky. Z většiny případů mají tyto starší stránky jeden společný problém – menu je rozděleno na několik částí. Viděl jsem u dvě nebo tři horizontální menu, potom jedno svislé a půlku horizontálního.. no prostě všechny možné kombinace, které by mě ani v nejdivočejším snu nenapadly. Ale taková prostě byla doba. Jenže to už je pryč, dnešní weby se soustředí na jedno menu. Většinou jde o horizontální menu vedle loga nebo pod logem, ve výjimečných případech ho potom můžeme najít jako vyjížděcí menu ze strany stránky.

Pokud se tedy podíváme na menu horizontální vedle loga, tak do něj byste měli být schopni zařadit všechny vaše stránky. Důležitou součástí je udělat menu přehledně, takže první úroveň menu ponechte pro největší kategorie a stránky jako například „O nás“, „Kontakt“ nebo „Reference“. Pokud prodáváte například auta i motorky, další položkou bude buďto položka s názvem „Prodej“ nebo dvě záložky „Auta“ a „Motorky“. Záleží na místa v první úrovni. Do podkategorií (rozbalovací menu) poté můžete zařadit například u aut „benzínové“ a „naftové“. Nikdy by se vám nemělo stát, že tyto podkategorie budou hned na první úrovni a to i v případě, že prodáváte pouze auta.  Menu tak vlastně trochu simuluje filtr, protože skrze něj si návštěvník může najít pouze to, co chce.

Mezery mezi řádky

Opět se trochu dostaneme ke starším webům. Ty jsou zpravidla sestaveny tak, že veškeré obrázky i texty jsou nalepené úplně na sobě. Nevím, proč tomu tak bylo. Asi se šetřilo místem… Takový byl prostě trend, jenže dnes už je to jiné.

Doporučují se dělat větší mezery. Často od klientů slýchávám, že jim přijde web takový roztahaný a že by mezery o 75% zmenšili. Zmenšením mezer bychom ale dosáhli pouze toho, že oko návštěvníka bude přebíhat z odstavce na odstavec, soustředit se víc na obrázek než na text a nakonec si z vašeho obsahu neodnese vůbec nic. Tím, že dáváte webu vzdušnost díky mezerám zajistíte to, že se lidé více budou soustředit na obsah v daném odstavci. Kladně to také přispěje k designu webu, protože vzdušné weby jsou mnohem hezčí, než weby přeplněné. Osobně používám mezery mezi řádky o velikosti 80px až 120px. Jak se říká, web se díky tomu krásně provzdušní a plní hlavní funkci – předává informace.

Barevné přechody

Do nedávna se zdálo, že přechody jsou mrtvé. Dříve často používaný prvek pro vyjádření nejen 3D efektů, se ještě minulý úplně stahoval ze scény. Jistě si pamatujete na „dobu 3d“ Všechno co šlo, tak mělo nějaký efekt 3D, tedy například menu se dělala vypouklá, všechny prvky měly tvrdé stíny a za každou cenu prostě muselo být znázorněné, že tento web je moderní se stylem 3D. Všechny tyto prvky byly ale tvořeny pomocí barevných přechodů. Chcete vypouklé menu? Není problém. Potřebujete k tomu dvě barvy. Například světlejší červenou a tmavší červenou. Tmavší dáte k okrajům a světlejší do středu. Lidské oko si pak okraje přebere jako stíny a střed, protože je světlejší, bere jako, že je v popředí a najednou máte 3D efekt.

Jenže asi tak 5 let zpátky už tomu tak nebylo. Tento trend začal ustupovat a do popředí se dostaly jednoduché jednolité barvy, které jsou moderní i dnes. Proto vám radím nedělat žádné přechody a už vůbec ne svislé nebo do jiných barev. Viděl jsem pozadí, které přecházelo ze žluté na červenou.. To samé u tlačítek. To je jednoduše špatně. Volte raději jednu barvu a na přechody se vykašlete. V tomto roce jsou moderní přechody horizontální, ale ty většina šablon, ani mioweb neumí, takže nejlepší volbou je jedna barva pro prvek.

Barvy

Než začnete vytvářet web, rozhodněte se kolik barev budete mít a jaké barvy. Nebo vytvořte hlavní stránku a na ní se o barvách rozhodněte. Je důležité, aby váš web měl ucelené barvy a vaše stránky byly stejné. Osobně většinou dělám druhou variantu a tedy na hlavní stránce a po konzultaci s klientem, se rozhodnu o barvách, které web ponese. Barvy vybírám takto:

  • Barva webu – barva, která vychází z vašeho brandu. Například u nás je to barva oranžová
  • Barvy pozadí – volí se většinou neutrální barvy, tedy bílá a světlé odstíny šedi
  • Barva nadpisů – buďto černá, tmavý odstín šedi nebo podle barvy webu
  • Barva podnadpisů – v drtivé většině jde o světlý odstín šedi, tak aby se ale neztrácel na pozadí
  • Barva nadpisů na pozadí – z 99% jde vždy o bílou barvu
  • Barva podnadpisů na pozadí – bílá s mírným nádechem pozadí
  • Barva tlačítek – většinou barva webu. Jde o „nedůležitá“ tlačítka, která nemusejí být až tak vidět
  • Barva CTA tlačítek – Důležitá tlačítka. Používají se viditelné barvy, kontrastní s barvou webu, například u modré barvy webu se použijí žlutá tlačítka

Všechny tyto barvy byste měli znát než se pustíte do stavby webu. Tento přehled vám bude sloužit také pro pozdější rozšiřování webu.

Kvalitní obrázky

Dalším důležitým prvkem designu jsou kvalitní obrázky. Samozřejmě v nejlepším případě jde vždy o obrázky upravené grafikem nebo ve spolupráci s fotografem. Grafik dokáže udělat rámečky obrázků tak, aby zapadly do designu webu. Pokud jde o postavy, je zase lepší mít fotky bez pozadí. K tomu je zapotřebí fotograf, který vás vyfotí na zeleném plátně.

Fotky vás, pokud jste hlavní postavou projektu, byste určitě měli mít. Prosím, nemyslím tím selfie, ale opravdu kvalitní profesionální fotografie. Investujte pár stovek do fotografa a nechte se vyfotit. Fotky můžete používat rok nebo dva a rozhodně se vám tato investice vrátí.

Ostatní fotografie je možné si buď vyfotit nebo použít ty, které najdete na free fotobankách. Doporučuji používat pouze fotky vlastní nebo z fotobank, protože ty obsahují volnou licenci, pro jakékoliv úpravy a použití. Na webu fotografie nesmějí být rozmazané, ale naopak ostré, barevně vyvážené a hlavně datově optimalizované. Fotografie na pozadí by měla mít maximálně 300kb. Ilustrativní fotografie vedle textů by pak měla být zhruba do 150kb. Datová optimalizace je velmi důležitá, protože fotografie jsou to největší, co na web většinou nahráváte a zásadně tím ovlivňujete načítání webu a asi nemusím říkat, že čím rychlejší, tím lepší.

Závěr

Předal jsem vám 5 tipů na lepší design, ale samozřejmě u čísla 5 to nekončí. Je spousta detailů a prvků, které zlepšují design a na které je potřeba si dát pozor. Pokud nejste v designu nijak zvlášť honění, doporučuji se vždy poradit s grafikem nebo ho alespoň požádat o konzultaci, aby vám web zhodnotil, případně poradil.

5 tipů, jak vylepšit design vašeho webu
5 (100%) 1 Hodnocení
Honza Tipmann
Grafik, webař a UX designér. Grafika mě jednoduše baví a pokud jí smícháme ještě s psychologií, jsem ve svém živlu :)
Komentáře

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře.