Jak se dělá sexy responzivní web

Po delší době bych se rád pochlubil jedním webovým projektem, protože jsem na jeho výsledek vážně hrdý. Zároveň vás nechám nahlédnout trochu pod pokličku, což vám pomůže, pokud sami přemýšlíte o novém webu nebo redesignu stávajícího.

Zmiňovaným projektem je web www.mojefibaro.cz. Vizuálně přitažlivý a skutečně moderní responzivní web. Jelikož jsme sami partnerem značky Fibaro, nejen, že je nám tematicky velmi blízký, ale zároveň je i v našem zájmu, aby mělo oficiální české zastoupení Fibaro (Yatun s.r.o.) kvalitní on-line prezentaci.

Fibaro je polský výrobce bezdrátového systému pro inteligentní domov. Webové stránky jsou zaměřené především na koncové zákazníky v Česku a na Slovensku, které zajímá jednoduché a elegantní řešení chytré domácnosti.

Na jednom místě zde najdou vše o tom, co Fibaro umí, jak se používá, které moduly nabízí (včetně doplňkových zařízení jiných výrobců) a kolik to stojí. Jsou tu také k dispozici všechny podpůrné materiály a ovládací aplikace. Klíčovou funkcí z hlediska výkonu webu je pak mapa a rozcestník na certifikované partnery.

Vše ve vizuálu navrženému v souladu s designovým jazykem značky, který elegantně a moderně zároveň. Stránky fungují perfektně jak na velkém monitoru s klávesnicí a myší, ale i na tabletu či telefonu. Přitom obsahují technicky náročné prvky jako našeptávané vyhledávání s náhledy produktů nebo třeba videa ve vyskakovacích oknech s autoplay a pamětí pozice.

A teď ke slibovanému procesu:

Analýza

Web je pro firmy především marketingový nástroj. Nemá se tedy líbit, ale má pomáhat dosahovat cílů. A pro designera není dost dobře možné navrhnout něco takového, pokud neví nic o klientovo podnikání, jeho zákaznících a trhu. Solidní agentura se této stránce intenzivně věnuje. Až po vás budou chtít data z Google analytics, ptát se vás na spoustu otázek, chtít kontakty na zákazníky nebo dokonce strávit den na technické podpoře (a čas samozřejmě proplatit), berte to jako dobré znamení. V opačném případě, pokud si převezmou zadaní s tím, že to udělají přesně, jak chcete, přeju hodně štěstí.

Scénáře použití

Uživatel je na prvním místě, nebo ne? Pro koho děláte web? Pro dobrý pocit, že ten váš umí zobrazit počasí a tlačítka se točí, když na ně kliknete? Kdepak! Pro vaše zákazníky.

Než přejdeme k vymýšlení toho, jak co na webu bude fungovat, ptáme se spíš, co tam kdo bude chtít dělat a jakým způsobem mu to ulehčit. Zároveň taky, jak ho přimět, aby udělal i to, co je cílem webu (konverzí) z hlediska klienta. Od scénářů se odvíjí vše ostatní.

Struktura

Víme, k čemu by měl web sloužit. Teď je třeba dát dohromady vše, co tam má být. Zároveň stanovit priority a podle toho uspořádání obsahu a prvků.

Návrhy

Začínáme úplně jednoduše – tužka a papír. Je to rychlé, levné a efektivní. Teprve, když máme ujasněný celkový koncept, přichází na řadu třeba Sketch.

Testování ↔ Přepracované návrhy

Testujeme jak interně v týmu, tak ideálně i přímo se zástupci cílového publika. Můžete mít skvělou představu o tom, jak uživatelé přemýšlí. Ale jakmile začnete své domněnky testovat, nebudete se stačit divit.

Grafika & copywriting

Všimněte si zejména toho, že až tady se bavíme o grafice. To, jak to bude vypadat, je výsledek dlouhého procesu, ne výchozí bod! Proto prosím ve vlastním zájmu nechtějte ani ve výběrovém řízení vidět grafické návrhy dřív, než se projekt skutečně rozjede.

Stejně jako unikátní vzhled je důležitý unikátní a svému účelu podřízený obsah. V LARXu máme štěstí, že máme interního grafika i copywritera, kteří na této fázi pracují společně. Texty a vizuál se musí vhodně doplňovat.