Co je to wireframe, prototyp a mockup?

Nedávno jsem musel tyto tři věci dopodrobna popisovat. A jelikož je tímto tématem většina z vás nepolíbena, rozhodl jsem se udělat menší průzkum.

Věřím tomu, že by si lidé měli vědomosti předávat dál. A tak jsem pro vás sepsal krátký článek, který je o rozdílech mezi wireframem, mockupem a prototypem.

Základní rozdíl mezi wireframem a mockupem není takový oříšek. Ovšem kde je ona pomyslná linka mezi wireframem a prototypem? Žil jsem v tom, že wireframe je statická verze a prototyp je naopak interaktivní výstup wireframu. Bohužel žádný učený z nebe nespadl –  není tomu tak. I wireframe může být interaktivní.

Co je to wireframe?

Abychom si mohli popsat rozdíly, musíme nejprve pochopit jednotlivá témata trošku blíže.

Wireframe je nejznámější článek z této trojice. Často se s ním setkáte jak v online světě (návrhy webů a e-shopů), tak v offline světě (návrh produktu). Jak už je asi každému jasné, wireframe je návrh webu nebo aplikace. Jedná se o “polografický” návrh. Je vyobrazen elementy na papíře nebo obrazovce. Většinou se volí šedé čtverečky a placeholdery. Je totiž nutné ukázat, že wireframe není finální návrh webu. To je až finální návrh například od grafika.

Wireframe slouží jako blueprint (návod) na stavbu webu. Dále s ním pracují grafici, copywriteři a další online kouzelníci.

Hlavní funkce wireframu jsou:

• Ukázat rozložení základních informací, které má web sdělovat.
• Vytvořit a přiblížit uživateli strukturu celého webu.
• Vytvořit prostředí pro první a rychlou zpětnou vazbu od klienta nebo samotných uživatelů (i když uživatelské testování doporučuji až u prototypu).
• Podklad pro další práci grafika, UX designera, copywritera…

Když jsme si popsali jeho funkce, je dobré si přiblížit i nástroje, kterými se wireframe tvoří. Považujte to jako takový seznam nástrojů, se kterými se setkáte pokud budete pracovat s UX designerem.

Nástroje jsem rozdělil do dvou hlavních skupin. Staré a nové. Nástroje se totiž rychle vyvíjejí a občas se setkáte s někým kdo připravuje wireframy v programu, který je určen na něco jiného.

Staré (nevyhovující)

• Photoshop
• Illustrátor
• Malování (ano, i zde lidé tvoří wireframy)

Nové (ideální)

• Figma (momentálně můj favorit)
• Sketch
• Adobe XD
• Axure RP
• A dalších tisíc nástrojů nových startupů, které jsou úplně stejné jako výše zmíněné.
• Tužka a papír (nejlepší na první nástřel na schůzce nebo workshopu)

Jak je to tedy s interakcí? Může ji wireframe obsahovat? Ano, může. V omezené formě. Wireframe by měl být co nejvíce statický, ale často obsahuje základní interakci, a to je přesun po kliku na novou stránku. 

Pro podpoření a správné pochopení struktury je důležité přidat do menu a na CTA (call to action = buttony) správné odkazy. Webem se bude pak snadněji procházet a klient nebo kolega (grafik, copywriter, však už to znáte….) pochopí, co bylo zamýšleno každým prvkem. Tak se UX designer vyhne nadměrnému vysvětlování a tím ušetří čas i peníze sobě a především pak vám.

Co je to prototyp?

Prototyp je wireframe na steroidech. Jedná se o přesnější návrh. Často je už doplňen o UI (user interface) a texty. Prototypy slouží často k testování toho, jestli je web intuitivní a srozumitelný pro uživatele. Jedná se o plně „rozpohybovanou“ verzi návrhu obsahující klikatelné, dynamické prvky a animace.

Mezi jeho hlavní funkce tedy patří:

• Testování danou cílovou skupinou‍
• Optimalizaci před samotným programováním
• Zapracování připomínek ze strany klienta (šedé čtverečky je složité si představit, ale hotové UI je už jednodušší)

Jelikož prototyp simuluje vztah mezi webem a uživatelem je nutné používat nástroje, které tuto interakci umožní. Na první pohled je asi jasné, že tužka a papír zde stačit nebudou. Některé nástroje jsou na tvorbu prototypu lepší než jiné, i když plno jich umožňuje přetvořit wireframe na prototyp.

• Figma
• Sketch
• Adobe XD
• Framer
• Invision Studio
• Webflow (prototyp může být i celý nakodovaný)

Co je to mockup?

Konečně se dostáváme k poslednímu z naší trojice – k mockupu. Mockup je čistě vizuální ukázka finálního produktu. Většinou nepočítá s interakcí uživatele, a je proto předem připravená na každou možnou situaci. V každé situaci vypadá dobře, protože je neinteraktivní. 

Klasickým příkladem jsou nové iPhony nebo jiné telefony, které vypadají na plátně konference úžasně. Často se používají výrazné barvy, aby byl zesílený celkový pocit z produktu. A to je i jeho hlavní funkce. Nabudit pocit, který má uživatele přesvědčit o tom, že potřebuje ten stejný telefon, který už má. Jen s novou cenovkou.  

Možná někdo z vás zná spojení mockup i u předpřipravených souborů do Photoshopu na prezentaci log a jiných grafických prací. I to je mockup, jen ho můžete upravit pro své účely. Většinou ale vždy slouží k tomu stejnému, a to “hezké” prezentaci vaší práce klientovi nebo zákazníkovi.

Hlavní rozdíl mezi wireframem, prototypem a mockupem

Wireframe je první nástřel, který má zamezit tomu, aby se pracovalo na něčem, co je úplně mimo představu klienta nebo vaší. Je primárně statický, a to proto, aby byl co nejjednodušší na případné větší zásahy a opravy.

Prototyp je propracovanější návrh, který má v sobě už zapracované grafické prvky a texty. Jedná se o poslední náhled finálního produktu před kodováním a programováním. Slouží pro uživatelské testování a připomínky klienta, který má před sebou už defakto finální produkt.

Mockup je čistě prezentační obrázek/video s náhledem finálního produktu. Slouží k navození emocí a ukázky produktu v různých situacích (například u loga).  

Poznámka: Pokud hledáte nějaký nový design nástroj doporučuji https://digitaldesign.tools/