Na začátek je potřeba říct, že tenhle článek není žádný útok na grafiky. Navrhnout dokonalý brand manuál včetně webové grafiky totiž není tak snadné. Důležitá je i specializace. Nebojte se odmítnout přípravu grafiky webu, pokud to běžně neděláte. Do velké míry je to technická činnost a vyžaduje tak i vhled do fungování na pozadí.
Asi nebude žádné překvapení, že se nám nejvíc osvědčilo mít vlastní webové grafiky. Sehraný tým šetří čas, a s tím i rozpočty. Ne vždy je to ale možné, a proto vznikl tento blog. Připravili jsme seznam 15 nezbytných pravidel, jejichž dodržování vyžadujeme u každé webové grafiky a může ušetřit trápení i vám.
1. Style guide
V rámci konzistence při návrhu různých typových stránek doporučujeme vytvořit si základní style guide, který se postupně rozšiřuje/aktualizuje. Měl by obsahovat minimálně níže uvedené prvky. Má-li společnost zpracovaný brand manuál, měl by jej návrh respektovat, případně včas upozorněte na nesoulad a požádejte klienta o výjimku.
Pokud prvek v návrhu grafiky nepoužíváte, neznamená to, že nebude potřeba. Součástí grafického návrhu nikdy nejsou všechny podstránky webové prezentace.
- Logo – musí být vektorové, potřebujeme i čtvercové logo pro faviconu
- Font – všechny řezy písma a zdroj (preferujeme fonty dostupné zdarma např. Google Fonts)
- Nadpisy – velikosti h1 až h6 včetně řádkování
- Běžný text – velikost včetně řádkování (minimální velikost 16px pro hlavní obsah)
- Odkazy – barvy stavu: výchozí, hover, active
- Barvy – definovat seznam použitých barev (ověřit si dostatečný kontrast vůči pozadí dle WCAG 2.0, pozor na používání zbytečně mnoho podobných barev)
- Tlačítka (všechny stavy)
- Hlavní (primary) – používat napříč webem jako hlavní konverzní prvek
- Vedlejší (secondary) – např. tlačítko zpět ve formuláři
- Tabulka – výchozí vzhled tabulky
- Seznam – číslovaný/nečíslovaný seznam včetně více úrovní
- Obecný formulář – preferujeme zachovat výchozí vzhled prohlížeče, případně se dohodnout na rozsahu úprav předem (ne vždy je možné upravovat kód formuláře zcela na míru)
- Ikony – všechny ikony na míru na jednom místě, případně odkaz na použitou ikonkovou sadu
Ukázka style guidu naší sesterské firmy PROFICIO
2. Vizuální řád
Mřížka pomáhá udržet vizuální řád a zároveň usnadňuje kódování grafiky. V rámci webu se nejčastěji pracuje podle Bootstrap (12 vertikálních sloupců, rozestupy 30px). Přípravou vhodné mřížky by měl začínat každý návrh webové grafiky. To ale neznamená, že ji nemůžete nikdy porušit. Pokud k tomu dojde, musíte pro to mít dobrý důvod.
Máte-li připravenou mřížku, druhým krokem by měl být návrh horizontálních rozestupů mezi prvky. Dost často se setkáváme s tím, že každá mezera má odlišnou výšku, a tím vzniká chaos, který pak musíme srovnat při kódování. Jako inspirace mohou sloužit Spacing utility v rámci Bootstrap – 4px, 8px, 16px, 24px a 48px. Není problém navrhnout vlastní, musíte je ale pak dodržovat.
Ukázka rozložení gridu do sloupců
3. Nebojte se opakovat
Častou chybou při vytváření grafického návrhu je obava prvky opakovat. Proto se již v rámci návrhu wireframu snažíme definovat komponenty, které chceme mít shodné napříč celým webem. Výjimky jsou možné, ale vždy by měly být předem konzultovány, protože jsou to spojené nádoby a o to déle pak trvá kódování.
Komponenta je blok, který se může libovolně opakovat. Může mít rozdílný obsah a někdy se může lišit i vzhled (viz obrázek vlevo a vpravo). Opakovat se může nejen na stránce, ale i v rámci celého webu. Toho je dobré využívat.
Možnost výběru pravé/levé varianty a změna pozadí = velká variabilita
Dobrou ukázkou je také komponenta pro výpis náhledu produktu. Šířka komponenty se pouze přizpůsobuje místu použití a použité mřížce. Tím získáme konzistentní vzhled napříč celým webem a snížíme náročnost kódování.
Dalším typickým opakováním komponent je stejný výpis produktů na homepage i na produktové stránce.
4. Přemýšlejte responzivně
V dnešní době používá nadpoloviční část návštěvníků mobilní zařízení pro přístup na web. Proto se posledních roky stále víc klade důraz na mobilní verzi webu. Pokud není součástí grafický návrh pro menší zařízení, navrhujte komponenty tak, aby byly snadno upravitelné i pro malé rozlišení.
Jak se budou chovat ikony na mobilu? Využijeme accordion nebo je zobrazíme jednoduše pod sebou?
5. Upravitelný obsah
Pokud bude obsah komponenty pevně pozicovaný, nepůjde při kódování převést na běžný text. To je potřeba vyřešit pomocí SVG obrázků na míru a není tak možné jednoduše upravit obsah v rámci redakčního systému. Nasazení dalších stránek nebo jazykových mutací je pak nákladné a neobejde se bez spolupráce s grafikem.
Detail (kolečko VÁŠ) hezky funguje hezky pro 1 variantu rozlišení, ale u dalších nemusí fungovat správně
Text je přímo v obrázku, takže pokud budeme chtít přidat jiný jazyk, nestačí jen přeložit text, ale bude potřeba změnit celý obrázek. Tím se úpravy prodražují
6. Web nekončí na hraně plátna
Je důležité myslet na to, že na rozdíl od grafického návrhu web koncem plátna nekončí. Jak prvek pokračuje dál? Jak se bude chovat při jiném rozlišení? Při kódování počítáme s rozlišením od 320px do neomezeně. V případě rizikových prvků je potřeba již při návrhu respektovat specifika responzivní optimalizace. V rámci kódování pracujeme pouze s dodanými podklady.
Obrázek se špatně přizpůsobuje velikosti displeje – problém vzniká na malém i velkém rozlišení
7. Ikony a loga jedině vektorově
Ikony a loga exportujte výhradně jako vektory ve formátu SVG. Pozor na to, že tento formát může obsahovat i vloženou bitmapu, což je špatně. Nemáte-li k dispozici vektorový formát, doporučujeme se pokusit jej získat z veřejných zdrojů. Pokud ho nenajdete, poproste klienta o zaslání.
V případě zobrazení log vedle sebe je potřebujeme exportovat všechna na stejný rozměr plátna a jeho vizuální střed.
Zvažte, jestli je nutné vytvářet ikony na míru, když existuje mnoho volně dostupných (případně za malý poplatek) ikonkových sad. Můžete si tím ušetřit náklady na budoucí aktualizace obsahu.
Loga jsou sice ve formátu SVG, ale nejsou v křivkách – jsou rozmazaná.
Ikony mají stejnou velikost, ale opticky tak nepůsobí
8. Velikost, formát a komprese obrázků
Obecně by bitmapové zdroje použité v grafice měly mít dostatečnou kvalitu, aby bylo možné exportovat obrázky ve 2–3 násobném rozlišení. Při kódování potřebujeme vyšší rozlišení kvůli responzivní a retina optimalizaci. Při exportu zdrojů používejte minimální kompresi, protože finální poměr velikost/kvalita se stanovuje až v rámci optimalizace rychlosti webu.
Pokud nepotřebujete průhlednost, je optimální využívat JPG, v opačném případě formát PNG. Další potřebné formáty WEBP nebo nejnovější formát AVIF vygenerujeme automaticky.
Pro různé varianty komponenty potřebujeme mít exportované obrázky ve stejné velikosti a stejném výřezu jako v návrhu grafiky. Pokud komponenta obsahuje víc obrázků stejného typu (slider), musí být vyexportované na stejnou velikost plátna.
Obrázky pro stejnou komponentu musí mít stejnou velikost
9. Dostatečný kontrast a velikost textů
Veškeré texty na webu by měly splňovat WCAG 2.0 standard a mít dostatečný kontrast i velikost. Obecně by se na webu nemělo vyskytovat písmo menší než 16px, ale vždy záleží na zvoleném fontu a řezu písma. Pro některé typy webů jsou tyto pravidla závazná (úřady).
V ukázce je špatně zvolený kontrast i velikost písma
10. Prvky evokující akci
Některé prvky svým vzhledem evokují, že je možné na ně kliknout a následně se spustí nějaká akce (něco se otevře, někam uživatele přesměruje, stránka scrolluje níže a podobně). To je pro uživatele matoucí, pokud se nic nestane. Tyhle nedostatky pak nejvíc vyniknou při nasazení heatmapy (sledování kam uživatelé klikají) v rámci UX auditu.
Na šipku se nedá kliknout, jedná se pouze o vizuální prvek
11. Grafické odlišení odkazu
Odkazy by měly být vždy odlišné od zbytku textu tak, aby uživatel na první pohled věděl, že se jedná o odkaz a může na něj kliknout. Zároveň by toto zvýraznění mělo být konzistentně používané v rámci celého návrhu. V běžném textu z hlediska pravidel přístupnosti je nejjednodušší používat podtržení.
Na první pohled není patrné, co jsou odkazy a co ne (měly by být telefon a e-mail)
12. Nezapomeňte na textovou stránku
Jaká je stránka na kterou se nejčastěji zapomíná při návrhu grafiky? Je to obecná textová stránka, kterou potřebuje mít každý web (Ochrana osobních údajů). Dodatečně ji pak ani není bývá složité vytvořit, když hlavička webu propojená s obsahem.
Nezapomínejte vytvořit grafický návrh i pro ty nejběžnější textové stránky
13. Video na pozadí s mírou
Video na pozadí je populární oživení webů. Doporučujeme ho ale především u klientů, kde stejné sdělení nezvládne statický obrázek. Pokud se pro něj rozhodnete, doporučujeme, aby mělo maximálně 30 sekund a dalo se spustit ve smyčce. Počítejte s tím, že video musí být v poměrně nízké kvalitě, aby se stihlo průměrnému návštěvníkovi načíst, než přejde na jinou část webu. Snažíme se, aby video mělo mezi 10–20 MB a vždy bylo bez zvuku.
U klienta jsme využili video na pozadí, které ale nijak neupozaďuje další (důležitější) prvky
14. Masky přenechejte kodérům
Používáte v grafice různé ořezy obrázků? Nejčastější případ je kruhový výřez obličeje. Tento efekt lze snadno vytvořit při kódování (border-radius: 50 %). To znamená, že ideální je exportovat čtvercový obrázek a kulatý výřez ponechat až na kodérovi. Dosáhneme tak menší velikosti a ostřejší hrany. Obrázek pak půjde i snadno upravovat přes redakční systém.
Jdou vytvořit i složitější tvary, jejich použití ale doporučujeme nejdříve konzultovat s kodérem. Přenesením masky do kódu je možné vytvářet i různé dynamické transformace a efekty při průchodu webem.
Myslete na to, co udělají ořezy s původním obrázkem
15. Vzhled neviditelných prvků
Málokterý grafický návrh se obejde bez skrytých prvků. Ideálním příkladem je hover menu nebo různé tooltipy a rozevírací nabídky. Často v grafice narážíme na to, že je návrh těchto částí opomenut.
Nezapomínejte na zdánlivé detaily. Co se má stát po klinutí na plus?
Aktualizace: 16. Pracujte ve vrstvách
Na základě zpětné vazby ještě doplňujeme, že neméně důležité je udržovat pořádek ve vrstvách v grafickém programu. Při kódování pracujeme s nástroji jako je Avocode, Zeplin případně Adobe XD a mnohdy si grafik neuvědomí, že jeho výstupem není jen rastrový obrázek, ale promyšlená skladba vrstev. Proto velmi záleží na udržování pořádku jako je správné pojmenování vrstev, odstranění nepotřebných vrstev případně i správného formátu vrstvy (např. aby šla exportovat jako vektor). V tomto ohledu má výhodu grafik, který má alespoň základní zkušenosti s kódováním.
Pečlivá práce s vrstvami ušetří čas na kódování
Bonus: Připravit náhledové obrázky pro Facebook, LinkedIn nebo Twitter
Na tento bod se často zapomíná a když už se spustí web v nové grafice, tak by mohl dělat parádu i na sociálních sítích. Dá se samozřejmě připravit náhledový obrázek pro každou stránku zvlášť, ale nic do začátku nezkazíte, když budete mít alespoň 1 hlavní obrázek výchozí pro všechny stránky rozlišení 1200x628px, abyste při sdílení nedělali ostudu.
Nezapomínejte přidat výchozí náhledový obrázek pro sociální sítě.
Závěrem
Doufáme, že vám naše tipy pomůžou dělat weby efektivně a nezapomenete na žádnou důležitou maličkost, která by vás zbytečně zasekala.
