UX a UI design: krátká odpověď
UX a UI jsou dvě vrstvy jednoho návrhu. U firemních webů je obvykle dělá jeden člověk, proto se píšou dohromady jako UX/UI, UI/UX nebo UX&UI. Význam je ve všech zápisech stejný.
- UX design (user experience): návrh toho, jak web nebo aplikace funguje pro člověka: co obsahuje, v jakém pořadí, jak se v něm pohybuje a kde ho něco zdrží. Don Norman a Jakob Nielsen vymezují uživatelský zážitek jako všechny aspekty interakce zákazníka s firmou, jejími službami a produkty.
- UI design (user interface): návrh viditelného rozhraní: rozvržení, typografie, barvy, tlačítka, formuláře, ikony a jejich stavy na počítači i telefonu.
- Jak spolu souvisí: UX určuje, co má stránka udělat. UI rozhoduje, jak to návštěvník uvidí a ovládne. Hezké UI nezachrání špatnou strukturu a dobrá struktura ztrácí, když hlavní tlačítko nikdo nevidí.
UX a UI na jednom příkladu
Vezměme stránku služby na firemním webu, jejímž cílem je poptávka. Totéž místo řeší UX i UI, jen jinou otázkou.
UX: dostane se návštěvník k poptávce?
Je z nadpisu jasné, co firma dělá a pro koho? Najde orientační cenu, reference a postup? Vede ho stránka logicky k formuláři, nebo ho po cestě posílá jinam?
UI: všimne si cesty a zvládne ji?
Je tlačítko poptávky odlišené od ostatních odkazů? Je text čitelný na telefonu? Mají pole formuláře popisky a je chybová hláška srozumitelná?
Kde se obě vrstvy potkají
Formulář s deseti povinnými poli je problém UX, protože se ptá na zbytečné věci. Popisek uvnitř pole, který při psaní zmizí, je problém UI. Návštěvník vnímá jen to, že poptávku neodeslal.
Rozdíl mezi UX a UI designem
Tabulka shrnuje, čím se obě disciplíny liší v praxi webového projektu.
| Hledisko | UX design | UI design |
|---|---|---|
| Základní otázka | Funguje to? Najde člověk, co hledá, a dokončí úkol? | Jak to vypadá a ovládá se? Je jasné, na co kliknout? |
| Předmět práce | struktura, obsah, navigace, uživatelské cesty | typografie, barvy, mřížka, komponenty, stavy prvků |
| Typické výstupy | mapa stránek, uživatelské cesty, wireframy, klikací prototyp, zjištění z testů | vizuální směr, responzivní návrh stránek, design systém, podklady pro vývoj |
| Podle čeho se hodnotí | dokončené úkoly v testech, poptávky a nákupy, místa, kde lidé odcházejí | čitelnost, kontrast, konzistence, přesnost implementace |
| Kdy přichází na řadu | na začátku projektu, před vizuálem | po schválení struktury a wireframů |
| Častá chyba | přeskočit ho a začít rovnou grafikou | zaměnit ho za výběr barev bez systému komponent |
- UX designér, nebo UI designér: ve velkých produktových týmech jde o samostatné role, často doplněné o UX researchera a UX writera. U firemního webu je praktičtější jeden člověk, který drží strukturu i vzhled.
Co dělá UX designér: konkrétní výstupy
Na konci UX fáze máte podklady, nad kterými se dá rozhodovat.
Mapa stránek
Seznam stránek a jejich hierarchie včetně toho, co bude v CMS (blog, reference, kariéra).
Uživatelské cesty
Pro hlavní typy návštěvníků popisuji, odkud přicházejí, co potřebují vědět a kde má cesta skončit: poptávkou, rezervací nebo registrací.
Obsahová hierarchie
Pořadí sekcí na klíčových stránkách a otázky, na které musí každá sekce odpovědět. Slouží zároveň jako zadání pro texty.
Wireframy
Černobílá schémata stránek pro počítač i mobil. Řeší rozložení a priority bez debat o barvách.
Klikací prototyp
Propojené obrazovky, na kterých si web projdete dřív, než vznikne první řádek kódu.
UX audit a testování
U existujícího webu kontrola reálných cest, dat a mobilní verze. U nového webu krátký test prototypu s lidmi z cílové skupiny.
Co dělá UI designér: konkrétní výstupy
UI fáze převádí schválené wireframy do podoby, která odpovídá značce a dá se přesně postavit.
Vizuální směr
Moodboard a ukázková stránka, na kterých se domluvíme na typografii, barvách a fotografiích.
Responzivní návrh
Klíčové stránky pro počítač, tablet a mobil. Mobil navrhuji jako plnohodnotnou verzi, ne jako zmenšený desktop.
Design systém
Knihovna komponent ve Figmě: tlačítka, karty, formuláře, navigace, styly textu a barev. Nové stránky pak vypadají stejně jako ty první.
Stavy prvků
Najetí myší, fokus z klávesnice, chybové a prázdné stavy, načítání. Když chybí, vývojář si je musí domýšlet.
Přístupnost
Kontrast a velikost ovládacích prvků kontroluji podle WCAG 2.2. Na úrovni AA potřebuje běžný text kontrast alespoň 4,5:1 a klikací cíle mají mít aspoň 24 × 24 CSS pixelů, nebo dostatečný odstup od sousedních cílů.
Podklady pro vývoj
Exportované obrázky a ikony, pojmenované styly a poznámky k chování, aby se návrh dal postavit bez odhadování.
Jak probíhá UX/UI design webu krok za krokem
Takový postup používám u firemních webů. U menších projektů se kroky slučují, žádný ale nevynechávám úplně.
1. Zadání a cíle
Co má web přinést (poptávky, nábor, důvěru partnerů), pro koho je a podle čeho poznáme, že funguje.
2. Rešerše
Konkurence, otázky zákazníků z obchodu a podpory, dotazy z Google Search Console a analytika. Výstupem je seznam toho, co návštěvníci potřebují vědět.
3. Struktura a wireframy
Mapa stránek, uživatelské cesty a wireframy klíčových stránek. Tady padá většina důležitých rozhodnutí, proto je schvalujete dřív než vizuál.
4. Vizuální směr
Moodboard a návrh jedné stěžejní stránky. Zbytek navrhuji až po shodě na stylu.
5. UI návrh a prototyp
Všechny šablony stránek pro tři velikosti obrazovky, design systém a klikací prototyp.
6. Test, úpravy a předání
Prototyp projdeme spolu a ideálně i s několika lidmi z cílové skupiny. Po úpravách předám Figmu připravenou pro vývoj.
8 typických UX chyb firemních webů
Tyto problémy nacházím při kontrolách firemních webů nejčastěji. Většinu pokrývá i 10 heuristik použitelnosti Jakoba Nielsena.
1. Není jasné, co firma dělá
Úvodní nadpis typu „Inovativní řešení pro váš růst“ neřekne, co prodáváte a komu.
2. Menu podle organizační struktury
Položky kopírují oddělení firmy, ne otázky zákazníka. Nielsenova heuristika shody s reálným světem říká: mluvte jazykem uživatele.
3. Chybí cena nebo aspoň postup
Bez orientační ceny, rozsahu nebo popisu spolupráce nemá návštěvník podle čeho rozhodnout, jestli se mu vyplatí ozvat.
4. Příliš mnoho výzev k akci
Pět tlačítek se stejnou vahou (Kontakt, Více, Stáhnout, Newsletter, Demo) znamená, že žádné není hlavní.
5. Dlouhý formulář bez nápovědy
Povinná pole, která v první fázi nepotřebujete, zdržují. Chybová hláška musí textem říct, co je špatně; WCAG to požaduje už na úrovni A.
6. Mobil jako zmenšený desktop
Drobné písmo a tlačítka natěsno u sebe. WCAG 2.2 na úrovni AA požaduje, aby se obsah dal číst bez posouvání do stran i při šířce 320 CSS pixelů.
7. Nekonzistentní prvky
Odkazy jednou modré, jindy podtržené, tlačítka v pěti stylech. Uživatel se má učit ovládání jednou; heuristika konzistence a standardů to říká přímo.
8. Text v obrázcích a nízký kontrast
Světle šedý text na bílé nebo nápis vložený do fotky se špatně čte, nejde zvětšit a redaktor ho v CMS neupraví.
- Jak chyby odhalit: často stačí pozorovat pár lidí při úkolu typu „najděte cenu a pošlete poptávku“. Jakob Nielsen v článku Why You Only Need to Test with 5 Users doporučuje testovat s nejvýše pěti uživateli a raději provést více malých kol.
Nástroje UX/UI designéra v roce 2026
Nástroj návrh nevytvoří, ale určuje, jak hladká bude spolupráce a předání do vývoje.
Figma Design
Standard pro UI design webů i aplikací: komponenty, proměnné, auto layout a prototypy v jednom souboru v prohlížeči.
FigJam
Online tabule pro workshopy, mapy stránek a uživatelské cesty v úvodní fázi.
Dev Mode ve Figmě
Režim pro vývojáře: rozměry, styly, exporty a označení částí návrhu, které jsou připravené k vývoji.
AI nástroje
Figma Make a podobné nástroje rychle vygenerují variantu nebo prototyp z textového zadání. Používám je k ověření nápadů; strukturu a obsah ale musí určit vaše zadání a data.
Data o návštěvnících
Google Search Console ukáže, s jakými dotazy lidé přicházejí, analytika a nahrávky relací, kde odcházejí.
Webflow
Platforma, ve které se návrh mění v živý web. Počítám s ní už při návrhu.
UX/UI design a Webflow: od návrhu k živému webu
Návrh má hodnotu, až když je přesně postavený. Protože web navrhuji i vyvíjím, propojuji obě fáze takto:
- Komponenty: design systém ve Figmě skládám tak, aby odpovídal komponentám a třídám ve Webflow.
- CMS už ve wireframech: blog, reference nebo pracovní pozice navrhuji jako šablonu s poli, ne jako jednu vymazlenou stránku. Delší nadpis od redaktora pak nerozbije rozložení.
- Responzivita: velikosti obrazovek ve Figmě odpovídají breakpointům ve Webflow, takže se mobil nedořešuje až při vývoji.
- Převod z Figmy: Webflow nabízí plugin Figma to Webflow, který převádí auto layout rámce na kód a synchronizuje styly. Je to dobrý start; strukturu tříd, CMS a interakce ale dotahuji a kontroluji ručně.
- Navazující služby: celý web od návrhu po spuštění popisuji na stránce tvorba webu ve Webflow. Pokud už hotový návrh máte, zvolte převod Figma do Webflow. Ukázku dokončeného projektu najdete v případové studii Fraxity (anglicky). Rozhodujete se mezi systémy? Pomůže srovnání Webflow vs WordPress.
Kdy si najmout UX/UI designéra
Ne každá úprava webu potřebuje designéra. Tyto situace ano.
Nový web nebo redesign
Změna ve wireframu je levnější než přestavba hotového webu.
Návštěvnost bez poptávek
Lidé na web chodí, ale neozývají se. UX audit ukáže, kde cesta končí a co upravit nejdřív.
Nová značka nebo cílová skupina
Současná struktura už neumí srozumitelně vysvětlit, co a komu nabízíte.
Web se rozpadá na styly
Každá nová stránka vypadá jinak. Pomůže design systém, podle kterého tým přidává obsah.
Kdy designéra nepotřebujete
Na opravu textu, výměnu fotky nebo novou stránku ve stávajícím stylu stačí redaktor v CMS nebo vývojář. S hotovým a schváleným návrhem stačí jeho převod do Webflow.
Kolik stojí UX/UI design webu
Cenu určuje rozsah: počet šablon stránek, hloubka rešerše, jazykové verze a to, jestli navazuje vývoj. Cenu potvrzuji pevnou částkou po kontrole zadání. Nejsem plátce DPH.
| Služba | Cena od | Co obsahuje |
|---|---|---|
| UX/UI design (úvodní balíček) | 52 000 Kč | analýza a rešerše, vizuální směr, wireframy a struktura stránek, responzivní UI design, podpora při předání |
| Návrh + Webflow vývoj | 99 000 Kč | UX/UI design a hotový web ve Webflow s CMS, kontrolou a spuštěním |
| Převod hotového Figma návrhu do Webflow | 52 000 Kč | responzivní Webflow build podle vašeho návrhu, CMS a kontrola před spuštěním |
- UX audit: rozsah potvrdím po prohlídce webu; navazující návrh se řídí ceníkem výše.
- Celkový rozpočet webu: včetně Webflow tarifů v korunách rozepisuji v průvodci kolik stojí web ve Webflow.
- Jak porovnávat nabídky: podle stejného seznamu výstupů: počet šablon, wireframy, mobilní verze, design systém a prototyp.
Časté otázky k UX a UI designu
Co je UX/UI designér?
Člověk, který navrhuje strukturu i vzhled webu nebo aplikace. Na straně UX připravuje mapu stránek, uživatelské cesty a wireframy, na straně UI vizuální návrh, design systém a prototyp pro vývoj.
Jaký je rozdíl mezi UX a UI?
UX řeší, jestli web funguje: co obsahuje, v jakém pořadí a jak se uživatel dostane k cíli. UI řeší, jak rozhraní vypadá a jak se ovládá: typografii, barvy, tlačítka a formuláře. UX se navrhuje dřív, UI na něj navazuje.
Je rozdíl mezi UX/UI a UI/UX?
Není. Zápisy UX/UI, UI/UX, UX&UI i UIUX označují totéž spojení obou disciplín. Pořadí UX a pak UI jen lépe odpovídá postupu práce.
Co je UX research?
Výzkum uživatelů: rozhovory, testy použitelnosti, dotazníky a analýza dat. Odpovídá na otázku, co lidé na webu skutečně potřebují a kde narážejí.
Co je UX writing?
Psaní textů rozhraní: nadpisů, popisků tlačítek, nápověd ve formulářích a chybových hlášek. Dobrý text rozhraní říká, co se po kliknutí stane, a mluví jazykem zákazníka.
Co je wireframe?
Zjednodušené černobílé schéma stránky, které ukazuje rozložení obsahu a priority bez barev a fotografií. Slouží ke schválení struktury dřív, než vznikne vizuální návrh.
Co je design systém?
Sada znovupoužitelných komponent a pravidel: typografie, barvy, mezery, tlačítka, formuláře a jejich stavy. Díky němu zůstane web jednotný i po přidání nových stránek.
Kolik stojí UX/UI design webu?
U mě začíná úvodní balíček UX/UI designu na 52 000 Kč, návrh včetně Webflow vývoje na 99 000 Kč. Pevnou cenu potvrdím po kontrole zadání. Nejsem plátce DPH, k ceně se tedy DPH nepřičítá.
Potřebujete UX/UI design pro svůj web?
Pošlete odkaz na současný web nebo krátký popis toho, co má nový web dělat. Odpovím otázkami k rozsahu a navrhnu postup od struktury po spuštění.
