Figma očima grafika / UI designera a vývojáře
„Pokud jste začínající vývojář, zkuste najít systém v daném designu. Palety barev, styly písem a tak dále. Z toho si pak vytvořte komponenty, které používejte.“.
wireframe
Luky vždy první kreslí základní stránky. Na e-shopu to je detail produktu, výpis produktů a homepage. Z toho vytáhne všechny elementy a začne přemýšlet nad kompletní hierarchií fontů. Samozřejmě mu k tomu do velké míry pomáhá dobře připravený <anchor>wireframe</anchor> od UX designera, který danou hierarchii nastíní přes celý web. Poté vezme stránky, ze kterých vycházel a odladí je podle nového design systému.
Wireframe, prototyp, mockup: Svatá trojice UX
Wireframe, prototyp, mockup: Svatá trojice UX

[Velká narozeninová sleva -40%! Zjistit více](https://www.simonjun.cz/kurzy/figma)

[![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/6204d46fc027cfd717493e1c_sj-new-logo.svg)](/) [O mně](http://simonjun.cz/#About) [Blog](/blog) [Newsletter](/newsletter) [Blog](/blog) [Newsletter](/newsletter)

Naučte se design

###### Online kurzy

[Figma MasterClass](/kurzy/figma) [Figma Pro manažery](/kurzy/figma-pro-manazery) [🔗 Přihlášení do kurzů](https://kurzy.simonjun.cz/)

###### Mentoring

[Design Mentoring](/mentoring)

###### Povídání nejen o designu

[UX Friendly Podcast](/ux-friendly-podcast)

Produkty

[UX Design Kit 2.0](/produkt/ux-kit) [Moodboard Business Pack](/produkt/moodboard-sablona)

[Ke stažení](/ke-stazeni)

Naučte se design

###### Online kurzy

[Figma MasterClass](/kurzy/figma) [Figma Pro manažery](/kurzy/figma-pro-manazery) [🔗 Přihlášení do kurzů](https://kurzy.simonjun.cz/)

###### Mentoring

[Design Mentoring](/mentoring)

###### Povídání nejen o designu

[UX Friendly Podcast](/ux-friendly-podcast)

Produkty

###### Produkty

[UX Design Kit 2.0](/produkt/ux-kit) [Moodboard Business Pack](/produkt/moodboard-sablona)

[Ke stažení](/ke-stazeni) [Kontakt\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/6204d5d7421aaa225ba8cef6_Vector-arrow.svg)](/kontakt)

[**Design**](http://www.simonjun.cz/kategorie/ux-design)

# Co je to wireframe, prototyp a mockup?

![](https://cdn.prod.website-files.com/61f03d5bae823d3235ecc12a/62190184d5f88dabd5bb95a3_5e0de54b6de938390b266e9b_co%2520je%2520to%2520wireframe.svg)

[![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d8cf9ecc148_Vector-5.svg)\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d8cf9ecc148_Vector-5.svg)](#Blog-Post)

Osnova

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](/blog/proc-je-figma-dar-z-nebes/) (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](/blog/uzivatelske-testovani-pro-laiky/) ‍
- 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](/blog/proc-je-figma-dar-z-nebes/)
- 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í](/blog/uzivatelske-testovani-pro-laiky/) 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/_](https://digitaldesign.tools/)

##### Tagy

[Návody](http://www.simonjun.cz/tagy/navody)

[Mockup](http://www.simonjun.cz/tagy/mockup)

[Wireframe](http://www.simonjun.cz/tagy/wireframe)

[Prototyp](http://www.simonjun.cz/tagy/prototyp)

[Figma](http://www.simonjun.cz/tagy/figma)

### Největší online kurz na Figmu v Česku

MasterClass jsem postavil jako komplexní hub vědomostí. Najdete v něm vše o Figmě a práci v ní. Od jednoduchého nastavení po složitější prototypy a aplikace.

Kurz obsahuje 14+ hodin contentu. Konkrétně 127 videolekcích, díky kterým se rychle naučíte to, co zrovna potřebujete.

[Zjistit vše o kurzu\
\
Let’s talk now!](/kurzy/figma)

#### Osnova

###### Blog

## Další články

[Přejít na blog\
\
Let’s talk now!](/kontakt)

[**Design**\
\
**Jak se stát UX designerem**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/jak-se-stat-ux-designerem)

[**Design**\
\
**Hloubkové rozhovory step by step guide**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/guide-hloubkove-rozhovory)

[**Design**\
\
**Figma dost možná právě umřela!**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/figma-dost-mozna-prave-umrela)

[**Design**\
\
**Proč designeři musí umět s Power BI a Google Data Studio**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/ux-product-designer-a-nastroje-na-vizualizaci-dat)

[**Design**\
\
**Figma Config 2022: Novinky ve Figmě**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/figma-config-konference-2022)

#### Newsletter

### Moje know-how do vaší schránky.

Přihlaste se k newsletteru a získejte best practices a tipy z oblasti UX & Product designu a života designera.

Jméno \*

E-mail \*

Let’s talk now!

Vyplňte prosím všechna pole. Nebo si zkontrolujte, jestli máte e-mail ve správném tvaru.

###### FAQ

## Na co se nejčastěji ptáte

Na jakých projektech nejčastěji pracujete?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Zaměřuji se především na e-commerce projekty nebo nástroje, které úzce pracují s e-commerce zákazníkem.

E-commerce se věnuji přes 6 let. Za tu dobu jsem spolupracoval s několika velkými, mezinárodními klienty na redesignu, výzkumu, expanzi a mobilních aplikacích.

Jaký je typický timeline projektu?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Stejně jako u ceny i timeline je jiná projekt od projektu. Poté co mě kontaktujete se snažím do pár dnů naplánovat kick-off meeting.

Na něm probereme váš projekt dopodrobna – očekávání, budgety, termíny a vše potřebné. Po meetingu už vám budu schopný vykopnout timeline projektu, pod kterou se podepíšu.

Jak vypadá celý design proces?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Ať už se jedná o design nového produktu (webu, e-shopu, mobilní aplikace) nebo redesign, vždy postupuji takto:

- Kick-off meeting

- Proposal

- Úvodní briefing

- Analýza dat

- Výzkum

- Návrh řešení

- Validace řešení

- Dohled na implementaci


Jaká je vaše hodinová sazba?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

To se odvíjí podle toho, jestli se jedná o jednorázovou konzultaci nebo dlouhodobý projekt.

- Za konzultaci se má sazba pohybuje od 3 500 Kč / h.

- Školení přesně pro vaše potřeby připravené na míru (nezáleží na poštu účastníků) se pohybuje kolem 50 000 Kč. Zahrnuje kick-off meeting, přípravu školení na míru a celý den školení.

- Hodina mé práce na projektu se pohybuje od 2 500 Kč / h.


Vše je ale o detailech a domluvě. Každý projekt naceňuji individuálně a předem. Vždy tedy víte, do čeho jdete.

Kdy můžeme začít spolupracovat?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Vše záleží na mém aktuálním vytížení a náročnosti projektu. Vždy se snažím do pár dní od doby kontaktu naplánovat kick-off meeting, kde vše probereme dopodrobna.

Je možné si objednat školení na míru?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Ano. Momentálně nabízím 2 školení – Figmu a zákaznický výzkum.

‍

Zjistil jsem, že obecná školení nejsou zdaleka tak efektivní jako ta na míru. Proto si nejdříve sednu s celým týmem a dívám se detailně na to, co je trápí a jak zlepšit jejich workflow.

‍

Poté potřebuji čas na přípravu školení, aby odpovídalo potřebám vaší firmy a týmu. To mi zabere kolem 2 až 3 týdnů.

Po školení nabízím i další support nebo pravidelné check cally, kde společně sledujeme implementaci nově nabytých vědomostí.

## Připravujete projekt?

[Pojďme si o něm popovídat](/kontakt)

[Všeobecné obchodní podmínky](/vseobecne-obchodni-podminky) a [Podmínky ochrany osobních údajů](/podminky-ochrany-osobnich-udaju)

Copyright © 2024 I don't know OÜ