69/
Wireframe
Rozvrhněte si hlavní strukturu stránky.
Wireframe (drátěný model) vám poslouží při navrhování základní kostry webu nebo aplikace. Jednoduchou černobílou skicou zachytíte rozložení obsahu, ovládacích prvků, navigace, ale i jejich vzájemné vztahy a prioritu. Model později využijete k testování svého záměru či jako zadání pro grafický design stránky.
Potřebujete
Čas: 2 hodiny a více, odvíjí se od množství stránek
Lidé: 1–2 designérky, nebo tým
Nástroje: tužku a papír, nebo software
Postup
- Ujasněte si cíle stránky, kterou chcete navrhovat. Připomeňte si také to, co všechno víte z předchozích fází a jaké jsou uživatelské cesty.
- Začněte skicou konceptu, tedy základního rozložení podoby stránky či stránek.
- Zvolte si podklad – mřížku (grid), která vám pomůže s rozvržením jednotlivých prvků a s dodržením mezer mezi bloky.
- Rozmístěte jednotlivé prvky na stránce – menu, texty, obrázky, tlačítka, formuláře apod.:
- Určete si, jaký budou mít prvky formát a hierarchii, abyste napříč stránkou dosáhli konzistence.
- Otextujte nadpisy a podnadpisy – nemusí jít o finální textaci, zkuste zachytit hlavní myšlenky.
- Nepoužívejte výplňkové texty (lorem ipsum), snižují totiž srozumitelnost návrhu.
- Jednotlivé prvky popište a okomentujte jejich funkci.
- Skicu prezentujte, testujte a upravujte. Hotový wireframe vám poté poslouží jako podklad pro tvorbu interaktivního prototypu a následně i pro grafický design.
Tipy
Vyhněte se barvám a grafice. Ve wireframech pouze zbytečně odvádějí pozornost od struktury stránek a obsahu. Bohatě si vystačíte s obrazci, tvary a černobílou paletou.
První koncepty si načrtněte na papír. Pro rozpracování wireframu pak využijte prototypovací nástroje (UXPin, Figma, Miro, Sketch, AdobeXD, Balsamiq).
Čím lepší budete mít podklady z předchozích fází designového procesu, tím lépe se vám bude struktura stránky skládat. Nikdy nezačínejte projekt samotným návrhem.
Příklady a inspirace
O využití wireframe v kontextu celého designového procesu si přečtěte v případové studii k redesignu webu pro Milton Public Library od designéry Mi Huang. Návrh webu stojí na pečlivém porozumění potřeb čtenářů a čtenářek a následném nastavení uživatelských cest, jak si snadno vypůjčit knihu.
Rozdíl mezi wireframem a grafickou podobou webu zdařile ilustruje web Wireframeshowcase. Podívejte se také na různé úrovně propracování wireframu, jejich přednosti a využití.
Více informací
- Experience UX. (2016). What is wireframing? http://www.experienceux.co.uk/faqs/what-is-wireframing/
- Krug, S. (2006). Web design: nenuťte uživatele přemýšlet! Computer Press.
- McCloud, S., & Martin, M. (Eds.). (1994). Understanding comics. William Morrow.
- Řezáč, J. (2014). Web ostrý jako břitva: návrh fungujícího webu pro webdesignery a zadavatele projektů. Baroque Partners.