Mockup

Co je mockup?

Mockup je detailní vizuální návrh webu nebo aplikace, který ukazuje přesně, jak bude finální produkt vypadat. Na rozdíl od jednoduchého wireframu, který je pouze černobílý náčrt struktury, mockup obsahuje všechny vizuální detaily – skutečné barvy, fonty, fotografie, ikony, loga a grafické prvky. Mockup je jako fotorealistická vizualizace domu před stavbou – vidíte přesné barvy fasády, typ oken, rozmístění místností, ale dům ještě neexistuje.

Mockup je klíčovým nástrojem v procesu webdesignu, protože umožňuje klientovi vidět, jak bude web vypadat, ještě před tím, než začnu programovat. To výrazně šetří čas a peníze – změny v mockupu jsou otázkou několika kliků, zatímco přeprogramování hotového webu může trvat hodiny nebo dny. Mockup slouží jako most mezi abstraktním wireframem a funkčním webem – ukazuje, jak bude UI (uživatelské rozhraní) vypadat, ale zatím není interaktivní.

V moderním webdesignu vytvářím mockupy v nástrojích jako Figma, Adobe XD nebo Sketch. Tyto nástroje umožňují nejen navrhnout design, ale také sdílet mockup s klientem přes odkaz, získat komentáře a iterovat design na základě zpětné vazby. Kvalitní mockup výrazně zlepšuje komunikaci mezi designérem, klientem a vývojářem – všichni vidí stejnou vizi a rozumí, jak má finální produkt vypadat.

Rozdíl mezi wireframe, mockup a prototypem

V procesu tvorby webu se používají tři klíčové nástroje, které často lidé zaměňují. Wireframe je jednoduchý černobílý náčrt ukazující strukturu a rozmístění prvků na stránce. Neobsahuje žádné barvy, fotografie nebo finální texty – používá šedé boxy, Lorem Ipsum placeholder texty a základní tvary. Wireframe odpovídá na otázku "co bude kde?" a "jak bude web fungovat?". Je to jako půdorys domu – vidíte, kde bude kuchyně, kde ložnice, ale nevidíte barvy stěn nebo nábytek.

Mockup je detailní vizuální návrh s přesnými barvami, fonty, obrázky a všemi grafickými prvky. Mockup vypadá jako hotový web, ale není klikací – je to statický obrázek nebo sada obrázků. Mockup odpovídá na otázku "jak bude web vypadat?" a řeší vizuální identitu, typografii a estetiku. Pokračujeme v analogii s domem – mockup je jako 3D vizualizace s přesnými barvami, texturami a osvětlením.

Prototyp je interaktivní verze mockupu, kde lze klikat na tlačítka, procházet mezi stránkami a testovat uživatelskou zkušenost (UX). Prototyp neobsahuje skutečný kód nebo databázi, ale simuluje chování webu pomocí klikacích odkazů mezi jednotlivými obrazovkami. Prototyp odpovídá na otázku "jak se bude web používat?" a slouží k testování UX s reálnými uživateli. V domovní analogii – prototyp je jako virtuální prohlídka domu, kde můžete "projít" jednotlivými místnostmi.

Pořadí vývoje je typicky: wireframe → mockup → prototyp → web. Wireframe navrhuji za hodiny nebo dny, mockup za dny, prototyp za dny až týdny, a funkční web za týdny až měsíce. Každá fáze má svůj účel a přeskočení některé může vést k nedorozuměním nebo zbytečným nákladům. Pro menší projekty lze kombinovat – například vytvořit mockup s prototypovými funkcemi v jednom kroku (high-fidelity interaktivní mockup).

Nástroje pro tvorbu mockupů

• Figma – nejpopulárnější nástroj

Figma je cloudový nástroj pro UI/UX design, který dominuje trhu v roce 2025. Největší výhoda je možnost týmové spolupráce v reálném čase – více designérů může pracovat na stejném mockupu současně. Klient může mockup otevřít v prohlížeči bez nutnosti instalace softwaru. Figma je zdarma pro individuální uživatele a malé týmy. Obsahuje komponentové knihovny, auto-layout systém pro responzivní design, prototypování a předání vývojářům pomocí inspect mode. Je k dispozici na Windows, macOS i jako webová aplikace.

• Adobe XD

Adobe XD je součástí Adobe Creative Cloud a ideální volba, pokud už používáte Photoshop nebo Illustrator. Nabízí hladkou integraci s Adobe ekosystémem – můžete importovat grafiku přímo z Illustratoru nebo fotografie z Photoshopu. Obsahuje funkce pro prototypování, animace přechodů a sdílení mockupů s klienty. Výhodou je offline režim a rychlý výkon i na slabších strojích. Nevýhodou oproti Figmě je omezená týmová spolupráce v real-time.

• Sketch – legendární nástroj pro macOS

Sketch byl průkopníkem moderního UI designu a dlouho dominoval trhu. Je exkluzivně pro macOS s nativním výkonem a čistým rozhraním. Sketch má obrovskou komunitní ekosystém s tisíci pluginů a šablon. V posledních letech ztrácí pozici ve prospěch Figmy kvůli absenci real-time spolupráce a cloudové synchronizace. Stále je ale oblíbený mezi designéry na Macu, kteří oceňují jeho rychlost a jednoduchost.

• Canva – pro jednoduché projekty

Canva je uživatelsky přívětivý nástroj s tisíci šablon, vhodný pro začátečníky nebo rychlé mockupy jednodušších webů. Není to profesionální UI design nástroj jako Figma, ale pro prezentační landing page nebo osobní weby může postačit. Výhodou je velmi nízká learning curve – během pár hodin lze vytvořit slušný mockup. Nevýhodou je omezená kontrola nad detaily a absence pokročilých funkcí jako komponentové knihovny nebo pixel-perfect positioning.

• Framer – moderní nástroj s kódem

Framer kombinuje vizuální design s možností psát kód – můžete vytvořit mockup drag-and-drop způsobem nebo naprogramovat vlastní komponenty v JavaScriptu. Framer umožňuje vytvořit téměř plně funkční web přímo v nástroji bez nutnosti předávat design vývojářům. Je ideální pro interaktivní prototypy s komplexními animacemi a mikrointerakcemi. Vyžaduje však znalost programování pro využití plného potenciálu.

Proces tvorby mockupu

Tvorba kvalitního mockupu začíná výzkumem a plánováním. Nejprve analyzuji cíle projektu, cílovou skupinu a konkurenci. Shromažďuji inspiraci z podobných webů, ale nekopiruji – hledám trendy, vzory a osvědčené postupy. Důležité je pochopit brand (značku) klienta – jaké jsou barvy, hodnoty, tone of voice. Mockup musí vizuálně odpovídat identitě značky a oslovit správnou cílovou skupinu.

Následuje vytvoření wireframu jako základu. Wireframe definuje strukturu, hierarchii obsahu a umístění klíčových prvků. Po schválení wireframu klientem přecházím k mockupu. Začínám definicí designového systému – vybírám barevnou paletu (primární, sekundární, akcent barvy), typografii (nadpisové a textové fonty), velikosti, rozestupy (spacing), tlačítka, formuláře a další komponenty. Tento systém zajišťuje konzistenci napříč celým webem.

Poté vytvářím mockup klíčových stránek – typicky homepage, podstránky, kontaktní formulář a případně speciální sekce. Používám skutečný obsah, pokud je k dispozici – reálné texty, fotografie, loga. Pokud obsah ještě neexistuje, používám Lorem Ipsum a placeholder obrázky, ale snažím se být co nejblíže realitě. Mockup vytvářím pro různé breakpointy – desktop, tablet, mobil – aby bylo jasné, jak bude web vypadat na všech zařízeních díky responzivnímu designu.

Prezentace mockupu klientovi je kritický moment. Sdílím mockup přes Figma odkaz nebo exportuji jako PDF. Vysvětluji designová rozhodnutí – proč jsem vybral tyto barvy, proč je navigace umístěna zde, jak design podporuje konverze. Sbírám zpětnou vazbu a iteruji design. Typicky jsou 2-3 kola revizí normální. Po finálním schválení předávám mockup vývojářům s detailní specifikací – odstupy, velikosti fontů, barevné kódy, responzivní chování. Moderní nástroje jako Figma mají funkci "inspect mode", kde vývojář vidí všechny CSS hodnoty přímo v mockupu.

Výhody použití mockupů

Proč jsou mockupy důležité:

• Úspora času a nákladů

Změny v mockupu jsou otázkou minut až hodin. Změny v hotovém kódu mohou trvat dny. Mockup umožňuje experimentovat s různými designovými směry bez nutnosti programování. Klient vidí výsledek dopředu a neexistují nepříjemná překvapení po spuštění webu. Podle studií může mockup snížit náklady na vývoj o 30-50 % díky eliminaci zbytečných iterací v kódu.

• Lepší komunikace s klientem

Mockup je vizuální jazyk, kterému rozumí každý – i netechnický klient. Místo abstraktních popisů "web bude moderní a čistý" vidí klient konkrétní podobu. Eliminuje to nedorozumění a nespokojenost. Klient má pocit kontroly nad projektem a může aktivně přispívat k designu. Mockup slouží jako reference po celou dobu vývoje – kdykoli vznikne nejasnost, vrátíme se k schválenému mockupu.

• Testování UX před programováním

Mockup umožňuje odhalit problémy s uživatelskou zkušeností dříve, než vznikne kód. Můžete mockup ukázat testovacím uživatelům a získat zpětnou vazbu – jsou tlačítka dostatečně velká? Je navigace intuitivní? Je vizuální hierarchie jasná? Prototypové verze mockupu (klikací) můžete použít pro user testing bez nutnosti vyvíjet funkční web. Díky tomu zjistíte problémy v době, kdy jsou ještě levné na opravu.

• Jednotná vizuální identita

Mockup definuje designový systém – barvy, fonty, komponenty – který zajišťuje konzistenci napříč celým webem. Vývojář má jasnou specifikaci, jak by každý prvek měl vypadat. Pokud v budoucnu přidáváte nové stránky nebo funkce, mockup slouží jako reference pro zachování konzistentního vzhledu. Design system v mockupu může být použit i pro další marketingové materiály, aplikace nebo produkty.

• Předvedení dovedností pro portfolio

Pro freelance designéry nebo agentury jsou mockupy důležitou součástí portfolia. Ukazují, jak designér přemýšlí, jakou má estetiku a jak řeší problémy. Mockup můžete prezentovat i když finální web nebyl nikdy vytvořen (například pokud se projekt zrušil). Pro hledání práce jsou mockupy často důležitější než finální weby, protože ukazují čistě designérské schopnosti bez vlivu kompromisů z implementace.

Nejčastější chyby při tvorbě mockupů

• Nedostatek reálného obsahu

Mockup s Lorem Ipsum a stock fotkami vypadá krásně, ale nereflektuje realitu. Když se naplní skutečným obsahem, může se rozpadnout – nadpisy jsou příliš dlouhé, fotografie nevhodné, texty neladí s designem. Vždy se snažím používat co nejrealističtější obsah nebo alespoň simulovat pravdivé délky textů a typy obrázků.

• Ignorování mobilní verze

Mockup pouze pro desktop je v roce 2025 nepoužitelný. Více než 60 % návštěvnosti přichází z mobilů, takže mobilní verze je kritická. Vytvářím mockupy minimálně pro 3 breakpointy – mobil (375px), tablet (768px), desktop (1440px). Mobilní mockup často odhalí problémy s navigací, velikostí klikacích prvků nebo čitelností.

• Přílišná kreativita na úkor použitelnosti

Krásný mockup, který ignoruje UX principy, je zbytečný. Například navigace umístěná na neobvyklém místě, velmi nízký kontrast textu kvůli estetice, nebo složité animace, které rozptylují. Mockup musí být nejen vizuálně přitažlivý, ale i funkční a intuitivní. Vždy se řídím pravidlem: forma následuje funkci.

• Absence konzistence

Když každá stránka mockupu vypadá jinak, web působí neprofesionálně. Tlačítka by měla mít jednotný styl, nadpisy stejné velikosti hierarchie, odstupy konzistentní. Proto vždy vytvářím designový systém a komponentovou knihovnu na začátku – definuji všechny opakující se prvky jednou a pak je používám konzistentně.

• Nerealistická očekávání implementace

Někdy mockup vypadá skvěle, ale je technicky velmi náročný nebo nemožný implementovat v daném rozpočtu. Například komplexní animace, custom ilustrace pro každou sekci, nebo pixel-perfect responzivní chování. Vždy konzultuji s vývojářem, zda je mockup realisticky implementovatelný v rámci časového a rozpočtového rámce projektu.

Související pojmy