Wireframy
Tok říká, jaké obrazovky web potřebuje. Wireframe ukáže, co na každé z nich bude a v jakém pořadí. Je to nákres obrazovky bez barev, písem a fotek, který vznikne za pár minut a za pár vteřin se dá zahodit.
Schválně nahrubo
Low-fidelity wireframe, zkráceně low-fi, je nákres v černé a šedé, často tužkou na papíře. Hrubost je záměr. Nad hotovým návrhem se debata stočí k odstínu modré a velikosti písma, nad čarami a obdélníky zbude jen to podstatné: co na obrazovce je, v jakém pořadí, a co je na ní hlavní akce.
Druhý důvod je cena změny. Přesunout formulář na papíře znamená ho přeškrtnout a nakreslit znovu. Přesunout ho v hotové stránce znamená přepsat HTML, styly a možná i obslužný skript. Chyby v navrženém toku a rozvržení se proto hledají na papíře, dokud jsou levné. Architekt taky nezačíná barvou fasády, ale půdorysem: kde budou dveře a kudy se chodí z kuchyně do obýváku.
Opakem je high-fidelity návrh, zkráceně high-fi: skutečné barvy, písma, obrázky i texty, takže vypadá jako hotová stránka. Dělá se až na konec, když je jasné, co na stránce bude a kde.
Značky
Wireframy se kreslí zavedenými značkami, kterým rozumí každý, kdo je čte:
- obdélník s křížem přes celou plochu je obrázek,
- vodorovné čáry jsou odstavec textu, na jehož znění teď nezáleží,
- obdélník s popiskem je tlačítko nebo políčko formuláře,
- nadpisy, tlačítka a položky menu nesou skutečný text.
Poslední pravidlo je nejdůležitější. Nadpis „Lorem ipsum“ nic neřekne, ale „Poslední vlak do Ostravy“ a tlačítko „Pokračovat k platbě“ ukážou, jestli obrazovka dává smysl. Text tlačítka je součást návrhu, ne výplň. Hlavní akci, tedy prvek, který uživatele posune o krok dál, je zvykem odlišit, třeba vyplněním.
Nejdřív úzká obrazovka
Wireframe se kreslí nejdřív pro úzký displej telefonu. Do jednoho sloupce se vejde jen to, na čem opravdu záleží, a vynutí si pořadí: co je nahoře, uvidí uživatel jako první. Pořadí prvků na obrazovce je tak přímo hierarchie z minulé lekce. Pro široké okno se pak obsah rozloží do sloupců, ale nic podstatného nepřibude.
Každý krok toku dostane jeden wireframe. Když wireframy seřadíme podle šipek z toku, dá se tok projít prstem: na každé obrazovce ukážeme, kam klikneme, a hned vidíme, jestli tam potřebné tlačítko vůbec je.
Čím kreslit
Nejrychlejší je papír a tužka. Když chceme nákres sdílet nebo upravovat, hodí se Excalidraw, kreslicí tabule v prohlížeči, která funguje bez účtu a obdélníky schválně kreslí jako od ruky. Návrhy, které se z wireframu dál dotahují do high-fi podoby, vznikají ve Figmě a k ní se dostaneme příště.