Wireframe, v české hantýrce pojmenovaný jako dráťák, je výstupem práce UX designera. Představte si to jako plán webu nebo aplikace, ukazující rozložení prvků a základní funkce. Samotnému wireframu předchází informační architektura a site mapa..

Je to základní náčrt, který pomáhá designérovi, vývojářům a klientovi chápat, jak bude stránka nebo aplikace strukturovaná a jak budou jednotlivé prvky fungovat dohromady.

A co wireframe není

Na barvy, kulaté rohy, fotky a chytlavý strukturovaný text ještě zapomeňte. Wireframe není finální grafika, která čeká na poslední posvěcení od klienta. Je to promyšlenej návrh struktury webu v souladu s byznysem klienta a použitelností pro uživatele.

2 důvody, proč wireframe potřebujete

Plán je čas, čas jsou peníze
Díky němu víte, co a kde na webu bude. Vyhnete se pracnýmu předělávání designu nebo kódu webu. Šikne se pri komunikaci s týmem i klientem. Ten si může ze svého pohledu říct, co se mu líbí, a co ne.

Uživatelé a leady, vítejte
Dobrý wireframe se zaměřuje na přívětivost pro uživatele - UX. Soustředí se na uspořádání prvků a použitelnost. Pod lupou je i byznys klienta. Uživatel najde, co hledá, klient získá lead.

Jak se připravuje wireframe webu

Wireframe vychází z dílny UX designera. Opírá se o fakta, profi nástroje, testování a … zase testování. Podívejte se mu pod ruce:

Provádí analýzu konkurence
Sbírá a vyhodnocuje data
Opírá se o hloubkové rozhovory
Věnuje se tree testingu/card sortingu
Připravuje návrh struktury webu
Testuje s uživateli navržená i nová řešení

Jaké nástroje UX designer používá

K analýze dat

Hotjar, Google Analytics a Lyssna

K prezentaci wireframu

Figma, Sketch nebo Adobe XD

V současnosti nejvíc využíváme Figmu. Je to cloudový nástroj, který nemusíte instalovat. Přístup udělíte na dálku každému. Figma umožňuje přehledné komentování a podporuje tvorbu prototypů. Za tenhle nástroj palec nahoru.

Zuzana Blinková

UX designérka

Wireframe v kostce

Wireframe umožňuje skvěle ukázat na potenciální problémy a otestovat uživatelskou přívětivost. To vede k úsporám času a zdrojů v dalších fázích vývoje. V konečném důsledku wireframe nejen zvyšuje efektivitu vývojového procesu, ale také přispívá k vytvoření kvalitnějšího a uživatelsky přívětivějšího produktu.