Pravidla webového designu pro grafiky

1. Typografie: čitelnost nadevše

Text je nejdůležitějším prvkem webu. Pokud se špatně čte, uživatel odchází.

• Velikost písma: Minimální velikost těla textu na webu je 16px. Menší písmo sice vypadá úhledně v grafickém programu, ale na reálné obrazovce – zvláště na mobilu – způsobuje, že uživatel musí text přibližovat. To je jeden z nejčastějších chyb začínajících webových grafiků.
• Délka řádku: Ideální délka řádku pro pohodlné čtení na desktopu je 45–75 znaků včetně mezer. Příliš dlouhé řádky unavují oči, příliš krátké nutí oko skákat na začátek nového řádku příliš často.
• Výška řádku (line-height): Standardem je zhruba 1,5násobek velikosti písma. Text pak opticky „dýchá" a čtení je méně namáhavé.
• Výběr fontu: Používejte maximálně 2–3 rodiny písem. Jeden font pro nadpisy (může být výraznější a osobitější) a jeden pro tělo textu (musí být perfektně čitelný i v malých velikostech). Kombinace více než tří rodin působí chaoticky.

2. Barevný kontrast a přístupnost

Barvy nejsou jen o vkusu – jsou o přístupnosti (accessibility). Web, který nesplňuje základní kontrastní požadavky, je pro část uživatelů doslova nečitelný.

• Pravidlo kontrastu (WCAG 2.1): Kontrastní poměr mezi textem a pozadím musí být u běžného textu alespoň 4,5:1. Pro velká písma – konkrétně 18px a větší, nebo tučné písmo od 14px – postačuje poměr 3:1. Tyto hodnoty nejsou doporučení, ale standard, na který se odvolávají zadavatelé i legislativa v řadě zemí.
• Jak kontrast ověřit: Neodhadujte kontrast od oka. Používejte nástroje jako WebAIM Contrast Checker (kontrastní poměr přímo v prohlížeči) nebo Colour Contrast Analyser (desktopová aplikace). Oba jsou zdarma a jejich použití vám ušetří zpětné úpravy po předání projektu.
• Pravidlo 60–30–10: Pro vyváženou barevnou paletu využijte 60 % dominantní barvy (obvykle neutrální tón – bílá, světle šedá), 30 % sekundární barvy a 10 % akcentní barvy pro tlačítka a výzvy k akci.

3. Vizuální hierarchie

Hierarchie říká uživateli, co je nejdůležitější a kam se má dívat nejdříve. Bez jasné hierarchie se uživatel ztrácí a stránka působí jako nepřehledná plocha.

• Nadpisy (H1–H6): Musí být jasně odlišeny velikostí a tučností. H1 je na každé stránce pouze jednou a jasně říká, o čem daná stránka je – je to primárně signál pro vyhledávače, ale také vizuální kotva pro uživatele.
• Jak lidé čtou – vzorce F a Z: Uživatelé web nečtou, ale skenují. Výzkumy sledování pohybu očí ukazují dva opakující se vzorce. Vzorec F se typicky objevuje u textově bohatých stránek – uživatel přečte první řádky celé, pak postupně kratší úseky doleva. Vzorec Z je charakteristický pro landing pages s grafikou – pohled cestuje z levého horního rohu doprava, pak diagonálně doleva a zase doprava. Tyto vzorce určují, kam na stránce umísťovat nejdůležitější informace a výzvy k akci.

4. Grid a konzistence

Konzistentní design není jen estetická kategorie – je to podmínka efektivní spolupráce s vývojáři a klíč k tomu, aby web vypadal profesionálně na všech zařízeních a rozlišeních.

• 12-sloupcový grid: Nejrozšířenějším základem pro webové layouty je 12-sloupcový grid. Dvanáct sloupců lze snadno dělit na půl, třetiny i čtvrtiny, což dává designu maximální flexibilitu při zachování vizuálního řádu.
• 8px spacing systém: Všechny mezery, odsazení a rozestupy mezi prvky by měly být násobky čísla 8 (8px, 16px, 24px, 32px...). Tento systém zajišťuje vizuální harmonii napříč celým designem a výrazně usnadňuje implementaci – vývojáři s ním pracují přirozeně, protože odpovídá fungování většiny CSS frameworků.
• Komponenty a opakování: Tlačítka, formuláře, karty a další UI prvky by měly mít v celém projektu jednotný styl. Každá odchylka bez záměru uživatele mate a design opticky roztříští.

5. Rozmístění prvků a konvence

Uživatelé mají zažité určité konvence z tisíců webů, které navštívili před tím, než přišli na ten váš. Experimentovat se nevyplácí tam, kde lidé očekávají standard.

• Logo: Standardně patří do levého horního rohu, případně na střed. Slouží jako vizuální kotva a kliknutím na něj se uživatel vždy dostane zpět na úvodní stránku.
• Navigace: Horní část stránky nebo pravý horní roh. Na mobilních zařízeních se navigace skrývá pod tzv. hamburger menu (ikona tří vodorovných čar).
• Kontakt: Rychlý kontakt patří do pravého horního rohu jako tlačítko, nebo do paty webu (footer).
• Call to Action (CTA): Tlačítko s hlavní akcí – „Koupit", „Poptat", „Zjistit více" – musí být nejvýraznějším prvkem na první obrazovce (tzv. above the fold, tedy v části viditelné bez scrollování). Pokud uživatel musí hledat, kde na webu provést hlavní akci, design selhal.

6. Práce s prostorem (white space)

Prázdné místo není nevyužitý prostor – je to aktivní designový nástroj. White space (negativní prostor) odděluje sekce, vytváří dýchání mezi prvky a zabraňuje pocitu vizuálního zahlcení. Stránky, kde jsou prvky nahuštěné příliš blízko u sebe, jsou pro uživatele stresující a nepřehledné. Méně je v tomto případě skutečně více.

7. Mobile-first: navrhujte od nejmenší obrazovky

Více než polovina veškerého webového provozu dnes pochází z mobilních zařízení. Mobile-first není módní slogan – je to základní metodika moderního webdesignu. Znamená to, že design začínáte navrhovat pro nejmenší obrazovku a postupně ho rozšiřujete pro větší, nikoliv naopak.

• Breakpointy: Jsou to body, ve kterých se layout přizpůsobuje velikosti obrazovky. Nejběžnější hodnoty jsou 480px (malý mobil), 768px (tablet), 1024px (menší desktop) a 1280px (standardní desktop). Konkrétní hodnoty se vždy přizpůsobují obsahu projektu.
• Dotykové cíle: Veškeré interaktivní prvky – tlačítka, odkazy, položky menu – musí mít na mobilních zařízeních minimální klikatelnou plochu 44×44px (doporučení Apple) nebo 48×48px (doporučení Google). Menší prvky uživatel na dotykové obrazovce spolehlivě minutí.
• Škálování typografie: Velikost písma, délka řádků i výška řádku se na mobilu liší od desktopu. To, co na monitoru vypadá jako komfortní čtení, může být na telefonu příliš malé nebo naopak příliš rozkročené. Vždy testujte na reálném zařízení, ne jen v emulátoru v prohlížeči.

Závěr

Webový design není dekorace, ale komunikace. Dobrý webový grafik nemyslí primárně na to, jak návrh vypadá v grafickém programu, ale jak se v něm bude orientovat uživatel, který má v ruce mobil, málo času a žádnou trpělivost s nepřehledným rozhraním. Pravidla uvedená výše nejsou omezením kreativity – jsou jejím základem.