Vytváření maket aplikace, tzv. wireframing, je klíčovou fází procesu návrhu mobilní aplikace a webové stránky. Wireframe je počáteční náčrt nebo obrys uživatelské rozhraní (UI), které umožňuje zobrazit strukturu aplikace nebo webové stránky bez grafické detailů nebo barvy. Jedná se o zjednodušený model projektu, který znázorňuje uspořádání a funkce klíčových prvků na stránce, jako jsou nabídky, tlačítka, vyhledávací pole, nadpisy a další.

Proč vytvářet makety?

Wireframing umožňuje rychlou transformaci myšlenky do vizuálního prototypu, který je

výchozí bodem pro další fáze návrhu. Tento proces je nesmírně důležitý, protože poskytuje příležitost

ověřit a upřesnit nápady v rané fázi. Představení kostry aplikace nebo stránky jednoduchým způsobem pomáhá pochopit strukturu i logiku navigace uživatele. Tím se ušetří čas a zdroje, protože se vyhnete nákladným změnám v pozdějších fázích, jako je tvorba vizuálního návrhu nebo kódování.

Hlavní výhody wireframingu

Rychlé ověření nápadů: Jednoduché náčrty umožňují testovat různá řešení a jejich účinnost

porovnání, což skupině pomáhá vybrat nejlepší možnosti a rychle je upravit.

Optimalizace cesty uživatele: Wireframing ukazuje, jak se uživatelé budou pohybovat v aplikaci

nebo na webu, což umožňuje zlepšit použitelnost a naplánovat optimální cesty uživatele.

Včasná identifikace problémů: Při navrhování rozvržení stránky nebo aplikace můžete rychle

identifikovat možné problémy s navigací a rozhraním a zavést potřebné změny předtím, než projekt dospěje do fáze vizuálního návrhu.

Lepší komunikace ve skupině: díky wireframingu mohou všichni členové skupiny – od navrhářů, přes vývojáře až po klienta - mít jasnou představu o předpokladech projektu. To je zvláště důležité u složitých projektů, kde je klíčová dobrá komunikace a konzistentnost koncepce.

Nástroje pro tvorbu maket

Pro tvorbu maket existuje řada specializovaných nástrojů, které umožňují snadno a rychle vytvářet

připravit odborné projekty. Zde jsou některé z oblíbených aplikací, které se používají

podle designérů:

Figma: Oblíbená aplikace pro návrháře, která umožňuje spolupráci na projektu v reálném čase. Figma je ceněna zejména pro svou schopnost rychle vytvářet interaktivní prototypy.

Adobe XD: Profesionální nástroj pro návrh rozhraní se širokou škálou funkcí

pro tvorbu maket a interaktivních prototypů.

Sketch: Nástroj pro návrháře rozhraní v systémech macOS, který nabízí

rozsáhlé možnosti návrhu uživatelského rozhraní a UX.

Balsamiq: Aplikace zaměřená na jednoduchou a rychlou tvorbu základních maket s využitím technologie minimálního grafického stylu. Umožňuje vytvářet schematické návrhy, které umožňují

zaměřit se na funkčnost a rozvržení webu.

Axure RP: Profesionální nástroj, který vám umožní vytvářet složitější prototypy interakčních prvků a logiky, což je užitečné pro rozsáhlé a pokročilé projekty.

Příklady použití wireframingu

Wireframing se hojně využívá v malých i velkých technologických projektech.

Například:

Elektronické obchodování: internetové obchody, jako je Amazon a Allegro, používají wireframing pro

plánování struktury produktových stránek, cesty k nákupu nebo rozhraní nákupního košíku, aby se uživatelům zajistil jednoduchý a intuitivní nákupní proces.

Mobilní aplikace: Společnosti jako Uber a Spotify při vytváření nových funkcí nejprve projektují jejich rozvržení a navigaci na wireframech, což jim umožňuje optimalizovat mobilní rozhraní.

Firemní webové stránky: Webové stránky velkých společností, jako je Google nebo Microsoft, využívají wireframing pro zpracování optimálního rozvržení domovské stránky a podstránek se zaměřením na uživatelský komfort a informační transparentnost.

Typy wireframů

Wireframing lze rozdělit do několika kategorií v závislosti na úrovni detailů a

destinace:

Low-fidelity wireframes: Jedná se o jednoduché, obecné náčrty, často vytvořené jako kresby na papíře nebo na základních nástrojích, jako je Balsamiq. Zaměřují se na strukturu a rozložení prvků bez podrobností.

Mid-fidelity wireframes : Podrobnější návrhy, které již obsahují některé textové informace a vizuální prvky, jako jsou ikony nebo tlačítka.

High-fidelity wireframy: Velmi podrobné náčrty, které se blíží konečné podobě aplikace, které zahrnují specifický obsah, typografii a interaktivní prvky.

Vytvoření makety aplikace je prvním a velmi důležitým krokem v procesu návrhu.

Tento nástroj vám umožní vizualizovat a testovat vaše nápady, bez potřeby rozsáhlých zdrojů.

Díky wireframingu mohou designéři, vývojáři a zákazníci lépe porozumět,

jak bude hotový výrobek vypadat a fungovat. Vytváření jednoduchých náčrtů maket předtím, než se přejde k dalšímu postupu na plnou grafickou verzi pomáhá optimalizovat proces navrhování, šetří čas a zabraňuje chybám, takže tvorba wireframingu je nezbytnou fází každého projektu aplikace nebo webové stránky.

Rozdělte se do čtyř skupin. Každá skupina připraví maketu aplikace na zvolené téma,

s ohledem na strukturu, navigaci a klíčové prvky uživatelského rozhraní. Každá skupina se zaměří na různé aspekty, aby důkladně pochopila všechny podstatné prvky tvorby makety.

Skupina 1: Porozumění Wireframingu a Nástrojů

Zaměří se na vysvětlení toho, co je wireframing, jeho výhody a také na Nástroje dostupné pro tvorbu maket, například Figma, Adobe XD a Balsamiq.

Skupina 2: Rozložení a Hierarchie Informací v Aplikaci

Zaměří se na strukturu a rozvržení obsahu na obrazovkách. Budou pracovat na maketě, která zobrazuje, jak hierarchie informací pomáhá uživatelům při navigaci v aplikaci.

Skupina 3: Interaktivita a Akční Prvky v Wireframingu

Bude se zabývat interaktivními prvky, jako jsou tlačítka, textová pole a navigace. Skupina

navrhne interaktivní uživatelský tok a ukáže, jak lze plánovat činnosti uživatele v aplikaci.

Skupina 4: Přizpůsobivost maket - Vzhled na Různých Zařízeních

Zaměří se na přizpůsobení makety různým obrazovkám, od počítačů po mobilní zařízení.

Bude analyzovat, jak navrhovat makety, aby byly responzivní a vypadaly dobře na různých zařízeních.

Každá skupina vypracuje svou část, kterou pak představí třídě a ukáže detaily

vybraných řešení, která použili, a diskutovat o různých projektových rozhodnutích.