Co je wireframe: Průvodce dráťákem

Zuzana Blinková
UX designérka
Zveřejněno:
27.4.2024

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.

Co je wireframe

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

  1. 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.
  1. 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:

  1. Provádí analýzu konkurence
  2. Sbírá a vyhodnocuje data 
  3. Opírá se o hloubkové rozhovory
  4. Věnuje se tree testingu/card sortingu
  5. Připravuje návrh struktury webu
  6. 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

Doporučené články