Dobrý webdesign by měl vždy začít u klienta a podstaty jeho činnosti. My začínáme vždy tím, že se seznamujeme s oborem, ve kterém se pohybujete. V rámci úvodních setkání Vás vyzpovídáme a snažíme se co nejlépe pochopit specifika oboru, Vaše konkurenční výhody, postoje a přístup k marketingu, ale také business procesy ve firmě. Analyzujeme také prostředí, trendy a Vaší konkurenci v online světe. Až poté pokročíme dál. Získané informace se promění v hrubý návrh, jaký obsah a prvky bude web nebo aplikace obsahovat.
Wireframe nebo "drátěný model", jak se nazývá tato fáze webdesignu, je zatím v podobě bez jakékoli estetiky. Pomocí wireframů se demonstruje návrh rozložení obsahu, grafických i ovládacích prvků. To poukazuje také na strukturu stránek (nebo aplikace, systému,...) a navigaci mezi nimi. Wireframe je zpravidla černobílý náčrtek znázorňující rozvržení (layout) jednotlivých stavů (stránek). Na wireframe se díváme primárně optikou struktury obsahu a marketingu (co chceme kde komunikovat uživateli). Zohledňujeme ale také očekávané uživatelské scénáře a obecně UX, tedy aby uživatel uměl web nebo aplikaci použít a docílit intuitivně toho, co potřebuje. Díky wireframům jsme odstíněni od finální grafické podoby a můžeme tak řešit jádro problému, a tím je definování cesty návštěvníků při pobytu na stránkách a jejich vedení ke konverzi nebo kýžené akci.
Poté je možno vytvořit prototyp stránek, který je prakticky shodný s podobou wireframů s tím rozdílem, že prototyp již je "oživen" a funguje tak struktura odkazů a některé akce jako odkrývání panelů. Výsledkem jsou tedy ideálně stránky, které se obsahově, rozložením, a částečně i funkcionalitou shodují s výslednou aplikací. U jednodušších nebo menších webů tuto část obvykle přeskakujeme. Z wireframu by v ideálním případě mělo být chování aplikace patrné. U větších a složitých aplikací už prototyp může být vhodnou investicí, jelikož bez něj je nudné připravit jako alternativu např. diagramy popisující každý proces interakce uživatele. Jakmile je i prototyp doladěn a odsouhlasem, teprve poté přichází na řadu grafický design.
V rámci grafického návrhu je vstupem wireframe nebo prototyp a výstupem je nějaký formát, ze kterého lze exportovat jednotlivé prvky pro kódování. Dříve to bylo nejčastěji psd, dnes díky nástrojům jako Figma se do grafiky oblékne právě už prototyp. Nástroje jako Figma nebo Adobe XD navíc připravují pro export pro kodéry i informace použitelné ve stylování pro prohlížeče.
Pozor! Grafický design pro web je úplně odlišný od designu pro tisk! Často se bohužel setkáváme s tím, že grafik bez zkušeností s webdesignem připraví grafiku webu, která ale je velmi náročná pro nakódování anebo je doslova nemožné web na jejím základě připravit.
Co tedy má webdesign splňovat, aby byl dobrý?
- webdesign by měl být založený na znalosti činnosti klienta
- měl by být originální, odrážet brand identitu a zároveň se odlišovat od konkurence
- měl by být odladěn pro cílovou skupinu uživatelů, kteří budou aplikaci používat
- měl by zohledňovat cíle projektu jako např. SEO nebo přípravu na TV a jiné kampaně (aby reklamní kampaň neměla úplně jiný grafický styl a uživatel by byl zmatený, kde se ocitl)
- výstup pro kódování by měl být dobře připraven pro export - kvalitní exportovatelné ikony a obrázky, licencované fonty atd.
- měl by splňovat UX standardy a best-practices
- webdesign musí počítat se zobrazením na mobilních zařízeních (optimálně být připravován jako tzv. "mobile-first" webdesign)
- webdesign by také měl brát v potaz uživatele s různými handicapy, zejména zraková postižení. Základem jsou v tomto ohledu kontrast a čitelné texty)
- jedním z hlavních úkolů webdesignu je dovést uživatele kam potřebuje, jeho cestu případně upravovat podle marketingových cílů
