Potřebujete snadno a rychle vizualizovat vaše nápady na web nebo aplikaci? Pak určitě vyzkoušejte vytvořit wireframy, díky kterým své myšlenky konkretizujete.
Wireframy jsou poměrně známou technikou, v češtině jsou známé jako drátěné modely. Tato technika umožňuje vytvořit modely stránek či obrazovek pro web nebo aplikaci. Wireframy se používají v případech, kdy nepotřebujete ještě tolik řešit některé detaily, ale spíš věci většího rázu jako je například:
- Struktura stránky a obsahu
- Rozdělení obsahu na stránce
- Navigační prvky
A jak to vlastně celé zapadá dohromady. Hlavním účelem wireframu je vlastně vytvořit základy pro další kroky návrhu webu.
Pomocí wireframů můžete tedy zjistit:
- Jak by na vás rozložení prvků působilo? Bude případný návrh zapadat do toho, co člověk potřebuje a očekává?
- Jak by rozložení prvků vypadalo? Je vše jasné, přehledné?
- Jak by rozložení prvků fungovalo? Fungovaly by jednotlivé části dohromady, půjde něco takového vyrobit?
Wireframy jsou často statické a bez barev. Výjimečně se používají barvy pro akcentování důležitých prvků, jako jsou například výzvy k akci nebo oddělování jednotlivých bloků obsahu.
Jak můžete vidět na příkladu výše, wireframy nemusí nutně obsahovat nejrůznější detaily. Smyslem je právě vizualizovat především strukturu a detaily dořešit později. Omezená míra detailů je velkou výhodou wireframů. Nemusíte řešit přesné pozicování prvků, barvy, velikosti fontů, atd. Stačí pouze určitý základ a máte hotovo.
Jak na to
Vytvořit wiframe stránky je poměrně snadné a zvládne to každý. Pokud to chcete udělat správně, tak ještě než se do toho pustíte, tak se zamyslete nad několika věcmi, konkrétně:
- Co je cílem dané stránky?
- Kdo bude stránku používat?
- S jakým úmyslem či cílem na danou stránku přijde?
- Co je primární informace, kterou si chce člověk odnést?
Je potřeba si ujasnit, co tvoříte a proč a pro koho. To zásadně ovlivní strukturu dané stránky, resp. návrhu celého webu.
Ohledně tvorby samotné si můžete vybrat, jak na to. Můžete totiž wireframe:
- Načrtnout v ruce
- Využít některý z dostupných digitálních nástrojů
Principem wireframů je, jak již bylo zmíněné, typicky nižší míra detailů. Při návrhu tedy:
- Nepoužívejte barvy. Využívejte spíš odstíny šedé a barvy využijte pouze v nutných případech, jako je odlišení odkazů nebo akcentování výzev k akci.
- Nepoužívejte obrázky. Nahraďte je zástupným místem (placeholderem). Zbytečně by ubírali pozornost důležitějším věcem, které potřebujete pomocí wireframu vyřešit. Využívejte je pouze výjimečně, pokud mají významnou roli v rámci návrhu či struktury. Ikonky se typicky používají.
- Využijte pouze jeden font, ale různé velikosti. Na stránce chcete řešit strukturu, což se týče i typografie, tedy nadpisů. Proto si rozdělte různé velikosti písma, ale nepoužívejte zbytečně příliš mnoho fontů, je to spíš na jinou diskuzi.
Je poté na vás, zda budete využívat již i reálný obsah či nikoliv. Je dobrým pravidlem, že wireframy obsahuje reálný text kvůli rozložení, případným délkám stránek, atd. Ale v prvních momentech, kdy teprve stavíte kostru obsah podle mě mít nemusíte a dodáte jej později, například pro testování.
Příklad
Pro ilustraci a lepší pochopení tvorby wireframu si představme, že chceme vytvořit nějakou stránku webu. Definovali jsme si co je vlastně cílem webu, kdo je cílová skupina a že cílem námi navrhované stránky je lidem (seřazeno podle priority):
- Ukázat náš produkt, jak vypadá
- Popsat jeho vlastnosti a výhody
- Ukázat jej v rámci kontextu použití
- Říct kolik stojí a kde se dá koupit
- Dát lidem možnost se na cokoliv zeptat
S těmito informacemi poté v rámci tvorby wireframu pracujeme.
Kroky mohou být následující:
- Definujete si základní mřížku pro ohraničení obsahu. Podlé té budeme alespoň přibližně obsah na stránku sázet pro lepší organizaci.
- Položíte základní stavební prvky stránky, jako je titulek a hlavní obrázek produktu
- Definujete primární a sekundární akce
- Definujete podnadpisy pro jednotlivé sekce a podsekce, ale vlastně obecně strukturu textu
- Přidáte zástupné bloky pro případné další obrázky či multimediální prvky či texty
- Uzavřete informace do smysluplných skupin, ideálně s využitím gestalt principů
- Protože ale bude stránka součástí webu, přidáme i hlavní navigaci a patičku
Stejný postup ale využijete i v případě, kdy budete wireframe malovat v ruce. (Což je typicky rychlejší). Samozřejmě se konkrétní podoba a postup bude lišit web od webu, stránka od stránky. Ale princip bude podobný.
Důležitost informací jsme mohli nastavit podle nejlepšího vědomí a svědomí, nebo je získat v rámci prvotního uživatelského výzkumu. Nikdy si ale nemůžeme být jistí, zda jsme na něco nezapomněli či zda lidé daný návrhu pochopí, proto bychom jej měli nějakým způsobem ověřit.
Níže se můžete podívat na to, jak mohou wireframy také vypadat
Kdy wifeframy využít
Jak bylo řečeno v úvodu, hlavním účelem wireframu je položit pevné základy finálnímu návrhu webu nebo aplikace. Vyplatí se je tedy vytvořit v případech, kdy chcete:
- Rozmyslet různé nápady
- Nápady snadno a rychle ověřit, například s využitím testování použitelnosti
- Komunikovat a spolupracovat na návrhu s dalšími lidmi
Vyplatí se je tedy vytvářet co nejdříve v rámci designového procesu řešení. Jejich tvorbou totiž nestrávíte tolik času a je velice snadné je v případě potřeby měnit – například po diskuzi se stakeholdery, testování použitelnosti, atp.
Nástroje
Protože wireframes můžete také vytvářet ve formě skic, mohou se hodit také nástroje pro kreslení:
Pro tvorbu wifremů v nástroji Sketch pak můžete využít i předpřipravené šablony:
