UX a UI design

UX a UI design aplikací, ve kterých se lidé neztratí

Navrhujeme webové a mobilní aplikace i informační systémy. Od rozhovorů s uživateli a wireframů přes klikací prototyp ve Figmě až po design systém, podle kterého aplikaci rovnou vyvineme. Návrh si projdete dřív, než vznikne první řádek kódu.

Probrat návrh aplikacePodívat se pod povrch
Zkušenosti
Software vyvíjíme od roku 2003
Nástroj
Figma – od wireframu po prototyp
Platformy
Web · iOS · Android
Tým
Návrh i vývoj pod jednou střechou

Anatomie rozhraní

Hezké UI je jen vrchní vrstva

Pod každou obrazovkou, se kterou se dobře pracuje, leží dalších pět vrstev. Uživatel je nevidí, ale pozná, když některá chybí. Pokud budete číst dále, názorně vám to vysvětlíme.

UX design (user experience)
Všechno pod povrchem: komu aplikace slouží, jak je poskládaná a jestli v ní člověk rychle a bez chyb udělá, co potřebuje. To se dá ověřit.
UI design (user interface)
Všechno, co je vidět a na co se kliká: barvy, typografie, ikony a komponenty. Z velké části věc vkusu a vaší značky.

  1. Vrstva 01 · UX

    Lidé a procesy: Pro koho a proč

    Než nakreslíme první obrazovku, zjistíme, kdo bude aplikaci používat, kde a s jakým cílem. Vycházíme z rozhovorů a z toho, jak provoz skutečně funguje, ne z dohadů. Často navazujeme na procesní analýzu.

    Výstup: Role, scénáře, mapa procesů

  2. Vrstva 02 · UX

    Informační architektura: Co kam patří

    Rozvrhneme obrazovky, navigaci a jejich návaznosti tak, aby běžné úkoly byly na pár kliknutí a nic důležitého se neschovalo tři úrovně hluboko.

    Výstup: Mapa obrazovek a navigace

  3. Vrstva 03 · UX

    Wireframe: Kostra bez barev

    Kde bude tabulka, formulář, filtr a detail záznamu. Na wireframu se ladí struktura a obsah, ne vkus. Změna tu trvá minuty.

    Výstup: Wireframy klíčových obrazovek

  4. Vrstva 04 · UX + UI

    Komponenty a stavy: Každý prvek ve všech stavech

    Detailně navrhujeme tlačítka, pole, tabulky a filtry, i když v nich ještě nejsou konkrétní data. Řešíme, jak vypadají během editace, při načítání dat nebo s chybovou hláškou. Stav, který nelze vyřešit v designovém návrhu, řešíme dále během vývoje a uživatelského testování.

    Výstup: Knihovna komponent

  5. Vrstva 05 · UI

    Vizuální design: Rozhraní v duchu vaší značky

    Barvy, typografie a ikony. Hlídáme kontrast a čitelnost, aby aplikace fungovala na slunci v terénu i na starším monitoru v kanceláři.

    Výstup: Finální UI a design systém

  6. Vrstva 06 · UX + UI

    Interakce a prototyp: Obrazovky, které si proklikáte

    Navrhované obrazovky propojíme do prototypu (obvykle ve Figmě), který si budoucí uživatel může proklikat a otestovat na něm maximální přehlednost a použitelnost. Projdete si celé uživatelské scénáře, například otevřít seznam, zobrazit detail a upravit záznam. Připomínky můžete napsat přímo k místu v návrhu pro vzájemnou konzultaci a další odladění.

    Výstup: Klikací prototyp ve Figmě

  7. Když do sebe vrstvy zapadnou

    …vidí uživatel jedinou obrazovku. Nepřemýšlí, kam kliknout, a nic mu nechybí. Přesně tak má dobrý design fungovat.

Proč návrh před vývojem

Změny ladíme již při návrhu. Nemusíte čekat na dokončení aplikace.

Než se napíše první řádek kódu, projdete si aplikaci jako hotovou. Co by se v hotovém systému předělávalo dny, upravíme v návrhu za pár minut – a rozpočet jde do funkcí, ne do oprav.

Příklad: do formuláře objednávky potřebujete přidat nové povinné pole.

Kolik práce dá jedna změna podle fáze projektu

Fáze 03

Prototyp

Co se v této fázi děje
Propojené obrazovky ve Figmě, které si proklikáte.
Co obnáší změna
Upravíte obrazovku a přepojíte scénář. Změnu si hned vyzkoušíte.

Pracnostdesítky minut

Orientační řád pro jednu běžnou změnu, ne naměřená data. Skutečná pracnost závisí na projektu.

Jak navrhujeme ve Figmě

Vkus a UX

O barvách se dá diskutovat. O tom, jestli lidé najdou tlačítko, ne.

Vizuální design je z velké části věc vkusu a vaší značky – tam rozhodujete vy. UX věc vkusu není: jestli se lidé v aplikaci vyznají, se dá ověřit. Tuhle část hlídáme za vás a nemusíte o ní nic vědět.

  1. Rozhodujete vy

    Připravíme návrh v duchu vaší značky a doladíme ho s vámi, dokud se vám nebude líbit.

    • Barvy
    • Písmo
    • Ikony a ilustrace
    • Celková nálada

  2. Vyberete si, my ohlídáme

    Vzhled je na vás, ale musí zůstat čitelný a ovladatelný pro každého. To měříme.

    • Kontrast
    • Velikost písma
    • Velikost tlačítek

  3. Rozhodují fakta

    Najdou lidé, co hledají? Pochopí formulář? Udělají práci bez chyb? To není věc názoru – ověříme to na klikacím prototypu.

    • Navigace
    • Formuláře
    • Počet kroků
    • Srozumitelné texty
    • Chybové stavy

Tři věci, které hlídáme za vás

Znát je nemusíte. Kdo je zvědavý, může si je vyzkoušet.

Fittsův zákon

Důležité tlačítko je velké a tam, kde ho čekáte

Čím je tlačítko menší a dál, tím déle ho člověk trefuje – platí to pro každého. Hlavní akce proto dostávají velkou plochu a místo, kde je uživatel hledá. V mobilních aplikacích počítáme s ovládáním palcem a jednou rukou.

Pro zvídavé

T = a + b · log₂(D / W + 1)T je čas, D vzdálenost cíle, W jeho šířka.

Standard WCAG 2.2 požaduje pro ovládací prvky klikací plochu alespoň 24 × 24 px.

Zdroj: P. M. Fitts (1954); formulace I. S. MacKenzie (1992); W3C WCAG 2.2, kritérium 2.5.8

Klikejte střídavě na rozsvícený terč – co nejrychleji, ale přesně. Vystřídají se čtyři velikosti a vzdálenosti.

Test se ovládá myší nebo dotykem.

Design systém a předání vývoji

Aplikace, která drží pohromadě. I po letech rozvoje.

U aplikací, které se budou dál rozvíjet, připravíme design systém: sadu barev, písma a hotových prvků, ze kterých se skládá každá obrazovka. Nová funkce za dva roky pak vypadá, jako by v aplikaci byla od začátku, a vývojáři nic nedomýšlejí. Zkuste změnit barvu nebo zaoblení.

Nastavení design systému
Barva značky
Hustota
Režim

Bílý text na této barvě by byl špatně čitelný (2,4 : 1), a tak systém sám použije tmavší odstín.

tokens.css – přesně tohle dostanou vývojáři
:root {
  --color-brand: #19BCB3;
  --color-brand-fill: #11827B;
  --color-brand-text: #11827B;
  --radius-control: 12px;
  --space-unit: 12px;
  --color-surface: #FFFFFF;
  --color-text: #080F3A;
}

  • Komponenty ve všech stavech

    Výchozí, najetí, chyba, prázdný stav i načítání. Nic se neimprovizuje.

  • Přesné hodnoty místo dohadů

    Barvy, písmo, mezery a zaoblení jako pojmenované hodnoty, které sdílí návrh i kód.

  • Specifikace přímo ve Figmě

    Vývojář otevře obrazovku a vidí rozložení, strukturu formuláře i chování tabulky.

Návrh a vývoj u jednoho stolu

Návrh u nás nekončí předáním obrázků. Designérka, která aplikaci navrhla, pak jako Product Owner vede i její vývoj, a frontendový vývojář, který ji staví, hlídá detaily rozhraní. Nic se tak neztratí v překladu.

Poznejte náš tým
  • Lucie Vystrčilová

    Lucie Vystrčilová

    Product Owner & UX designérka

    Navrhuje aplikace ve Figmě a staví interaktivní prototypy, takže si systém proklikáte dřív, než padne první řádek kódu.

  • Jiří Dušek

    Jiří Dušek

    Senior frontend developer

    Převádí návrhy do skutečného rozhraní. Má smysl pro detail a komfortní ovládání aplikací.

Reference

Návrhy, se kterými lidé pracují každý den

V honitbě, na plavecké lekci i na stavbě. Aplikace, na jejichž návrhu a vývoji pracujeme.

Všechny reference
Kvalita služeb výborná a obecné domýšlení funkcí je naprosto perfektní.
Rudolf Kinc · AMCA, recenze na Googlu

Časté dotazy k UX a UI designu

UX design (user experience) řeší, jestli uživatel v aplikaci rychle a bez chyb dosáhne svého cíle: strukturu obrazovek, navigaci, scénáře a stavy. To se dá ověřit. UI design (user interface) řeší, jak rozhraní vypadá: barvy, typografii, ikony a komponenty. To je z velké části věc vkusu a značky. Dobrá aplikace potřebuje obojí, a proto v iQuestu navrhujeme UX i UI společně. Podrobněji je rozlišujeme v článku Rozdíl mezi UI a UX.
Ne. Stačí vědět, co má aplikace dělat a kdo s ní bude pracovat. Zbytek je naše práce: aplikaci navrhneme, projdete si ji jako hotovou a řeknete, co se vám líbí a co ne. O vzhledu rozhodujete vy, na použitelnost dohlížíme my.
Ve Figmě – od wireframů přes klikací prototyp až po finální UI a design systém. Na jednom návrhu může současně pracovat analytik, vývojář i klient a každý může připsat komentář přímo k místu, kterého se týká. Jak s Figmou pracujeme, popisujeme v článku Jak navrhujeme aplikace ve Figmě.
Design tvoříme my, tým iQuestu, podle našich znalostí a dlouholetých zkušeností. Umělou inteligenci (AI) používáme k inspiraci a kontrole. Důležité pro nás ale je, aby finální produkt pocházel od našeho týmu.
Protože změna v návrhu je rychlá, zatímco změna v hotovém kódu znamená úpravu databáze, logiky, testů i nové nasazení. Když si klikací prototyp projdete, objeví se chybějící tlačítko, nelogický krok nebo neřešený stav obrazovky dřív, než se začne programovat.
Ano. Respektujeme zvyklosti obou platforem a počítáme s ovládáním palcem a jednou rukou i s prací v terénu na menší obrazovce telefonu. Víc o tom, jak vyvíjíme mobilní aplikace.
Design systém je sada znovupoužitelných komponent, barev, typografie a pravidel, ze kterých se skládá každá obrazovka. Vyplatí se hlavně u rozsáhlých a dlouhodobě rozvíjených aplikací: nové funkce pak vypadají a fungují stejně jako zbytek systému a vývojáři nemusí nic domýšlet.
Vývojář si otevře návrh ve Figmě a vidí rozložení prvků, strukturu formulářů, chování tabulek a filtrů i všechny stavy obrazovky, například prázdný stav, editaci nebo chybu. Designérka navíc zůstává v týmu po celou dobu vývoje, takže se nic neztratí v překladu.
Ano. Při návrhu hlídáme kontrast textu a ovládacích prvků, velikost klikacích ploch a čitelnou typografii s ohledem na standard WCAG 2.2. Od 28. června 2025 platí v EU akt o přístupnosti (European Accessibility Act), v Česku zákon č. 424/2023 Sb., a u řady služeb, například e-shopů, je přístupnost povinná.
Ano. Projdeme aplikaci s lidmi, kteří ji používají, najdeme místa, kde ztrácejí čas nebo chybují, a navrhneme úpravy jako klikací prototyp. Ty pak můžeme rovnou vyvinout.
Záleží na rozsahu – na počtu obrazovek, uživatelských rolí a scénářů. Návrh je obvykle součástí vývoje softwaru na míru. Orientační cenu celého projektu spočítáte v našem cenovém kalkulátoru.

Pojďme navrhnout aplikaci, ve které se lidé neztratí

Nemusíte znát nic z toho, co je na této stránce. Stačí nám říct, co má aplikace umět a kdo s ní bude pracovat – o design i UX se postaráme. Na první konzultaci probereme váš nápad, nebo systém, se kterým se lidem špatně pracuje.

Domluvit konzultaci
Kontakt

Na iQuest se můžete spolehnout

S našimi zákazníky spolupracujeme dlouhodobě. Jsme jim oporou od první myšlenky vybudovat software až po dlouhodobou podporu a provoz hotového produktu.

Vladimír Charvát, iQuest

Ozve se vám Vladimír Charvát

Zakladatel a jednatel · obvykle do 1 pracovního dne

+420 777 314 768

Zanechte nám kontakt a my se ozveme

* Povinné pole. Odesláním formuláře berete na vědomí zpracování svých osobních údajů podle Zásad ochrany osobních údajů.

Nastavení soukromí

Souhlas se statistikami a marketingem

Prosíme o odsouhlasení použití Cookies. Slouží nám to k lepšímu porozumění vašich potřeb. Bez vašeho souhlasu tyto služby nepoužijeme. Děkujeme.

Podrobnosti najdete v Zásadách ochrany osobních údajů.