UI design webu a aplikací

Vizuální design je místo, kde se výzkum mění v pixely. Navrhujeme rozhraní, která jsou krásná v den spuštění a díky design systému zůstanou konzistentní i po dvou letech a čtyřiceti obrazovkách. Sporné obrazovky si před kódem proklikáme v prototypu, takže se o nich rozhoduje dřív, než je někdo postaví.

Od15 000 Kčza projekt

Začít projektZjistit cenu
  • 5uživatelů odhalí asi 80 % problémů
  • 1-2 týd.ke klikacímu prototypu
  • 2 kolapřipomínek v ceně návrhu
  • 0 Kčza změnu, dokud je to návrh

UI design jsou hotové obrazovky webu nebo aplikace: barvy, typografie, tlačítka, formuláře a jejich stavy na mobilu i počítači. Návrh obrazovek stojí od 25 000 Kč, design systém od 30 000 Kč. Každá obrazovka odchází se všemi stavy, takže ji vývojáři postaví jednou a správně.

Každá obrazovka má stavy najetí, chyby, prázdného seznamu i načítání, aby vývojáři nemuseli nic domýšlet.

Každá obrazovka má stavy najetí, chyby, prázdného seznamu i načítání, aby vývojáři nemuseli nic domýšlet.

Komponenty kreslíme ve Figmě a stavíme v kódu ve stejné partě, takže hotový web vypadá jako návrh.

Komponenty kreslíme ve Figmě a stavíme v kódu ve stejné partě, takže hotový web vypadá jako návrh.

U redesignu změříme konverzi před a po, aby bylo vidět, jestli se změna vyplatila.

U redesignu změříme konverzi před a po, aby bylo vidět, jestli se změna vyplatila.

Rozvržení navrhujeme nejdřív pro mobil, protože odtud dnes přichází většina návštěv.

Rozvržení navrhujeme nejdřív pro mobil, protože odtud dnes přichází většina návštěv.

Každá služba v této kategorii, srozumitelně

  • Detailní design

    Hotové obrazovky se skutečným obsahem, připravené ke kódu.

    Začít projektSpočítej si cenu

    V kostce UI design hotových obrazovek připravených k naprogramování: skutečný obsah, skutečné délky textů, světlý i tmavý režim a stavy, na které se obvykle zapomíná. Dlouhé jméno, chybějící fotka, prázdný seznam i tabulka o tisíci řádcích jsou vyřešené předem.

    Jak postupujemeNavrhujeme na mřížce a v komponentách, takže se stejné tlačítko chová na dvacáté obrazovce stejně jako na první. Ke každé obrazovce doděláváme okrajové případy. Kontrast a čitelnost měříme už v návrhu a předáváme se specifikacemi rozměrů, barev a chování, aby vývojář neodměřoval z obrázku.

    Co si odnesešHotové obrazovky ve světlém i tmavém režimu, se stavy, okrajovými případy a specifikacemi rozměrů, barev a chování. K tomu exportované assety a zdrojový soubor ve Figmě, který zůstává tvůj.

    Co je v ceně

    • Skutečný obsah a skutečné délky textů
    • Světlý i tmavý režim
    • Okrajové případy vyřešené v návrhu
    • Specifikace místo odměřování z obrázku

    Design systémy

    Barvy, písma a komponenty na jednom místě pro každou obrazovku.

    Začít projektSpočítej si cenu

    V kostce Jeden zdroj pravdy pro vzhled produktu, ze kterého vzniká každá další obrazovka. Nová stránka se skládá z hotových dílů v řádu hodin a nikdo u ní znovu nerozhoduje o velikosti nadpisu. Dává smysl ve chvíli, kdy obrazovek přibývá rychleji, než je stíháš kontrolovat.

    Jak postupujemeVytáhneme z hotových obrazovek to, co se opakuje, a popíšeme to jako tokeny: barvy, písma, odstupy, poloměry, stíny. Z nich pak vzniká UI. Figma a kód se staví naráz, aby si neodešly. Nakonec dopíšeme pravidla, kdy se která komponenta používá.

    Co si odnesešSadu tokenů a komponent ve Figmě i v kódu, s pravidly použití a s ukázkovou stránkou, na které jsou všechny díly vidět pohromadě. Změna hlavní barvy nebo poloměru rohu je pak jedna úprava a navázat na systém může i tvůj vlastní tým.

    Co je v ceně

    • Tokeny místo natvrdo zapsaných hodnot
    • Nová obrazovka za hodiny, bez dnů čekání
    • Figma i kód držené v souladu
    • Pravidla, kdy se co používá

    Redesign

    Poradíme, jestli stačí nový vzhled, nebo je potřeba přestavba.

    Začít projektSpočítej si cenu

    V kostce Řekneme ti na rovinu, jestli potřebuješ nový vzhled, nebo přestavbu, protože to jsou dvě různě drahé práce. Moderní design webu má smysl tehdy, když se na něm zároveň opraví to, co lidem dnes brání dojít k poptávce.

    Jak postupujemeNejdřív z auditu a z dat zjistíme, co lidé na webu skutečně dělají, které stránky nesou poptávky a kde se ztrácejí. Rozhraní pak modernizujeme po částech, aby se stálí uživatelé nemuseli přeučovat všechno naráz. Adresy a obsah, které fungují, párujeme jedna ku jedné.

    Co si odnesešNové rozhraní postavené na tom, co v datech funguje, s přenesenými adresami a obsahem a s mapou přesměrování. K tomu srovnání čísel před a po tam, kde se dá měřit, takže se o výsledku nemusí spekulovat.

    Co je v ceně

    • Na rovinu: facelift, nebo přestavba
    • Vychází z auditu a dat, bez dojmu
    • Zachová návyky stálých uživatelů
    • Přesměrování 1:1, aby nespadly pozice

    Součástí balení

    Tohle si neobjednáváš zvlášť: je to v každé zakázce a děláme to my.

    Knihovna komponent

    Design systém převedený do dílů, které se dají rovnou použít. Vývojáři přestanou stavět totéž tlačítko pěti způsoby, designéři přestanou kreslit to, co už existuje, a nová obrazovka vzniká skládáním místo kreslení od nuly.

    Každou komponentu popisujeme zvlášť: k čemu slouží, jaké má varianty a stavy a kdy se místo ní použije jiná. Figma a kód vznikají proti stejnému popisu a kontrolují se proti sobě. Zavedeme i postup, jak se do knihovny přidává nový díl, aby rostla řízeně.

    VýstupDokumentované komponenty ve Figmě a stejné komponenty v kódu, ukázkovou stránku se všemi díly pohromadě a psaný postup pro přidání nového dílu. U každé komponenty najdeš varianty, stavy a poznámku, kdy ji nepoužívat.

    • Stejné komponenty ve Figmě i v kódu
    • Popsané varianty a stavy
    • Ukázková stránka pro kontrolu
    • Postup pro přidávání nových dílů

    Stylové manuály

    Kompaktní pravidla pro každého, kdo na produkt sáhne po nás: typografie, barvy, odstupy, práce s obrazem. Píšeme je pro člověka, který není designér, protože bannery podle nich sází marketér nebo asistentka. Grafika webu i tiskovin tak drží úroveň i bez nás.

    Vycházíme z toho, jak design webu vypadá dnes, a vybíráme jen ta pravidla, která se v praxi opravdu porušují. U každého stavíme příklad správně vedle příkladu špatně. K tomu rovnou připravíme hotové exporty a šablony, aby byla správná cesta kratší než improvizace.

    VýstupKompaktní pravidla pro typografii, barvy, odstupy a práci s obrazem, u každého ukázku správně a špatně. K tomu hotové exporty a šablony, se kterými marketér nebo asistentka vysází banner bez studia.

    • Psané pro nedesignéry
    • Příklady správně a špatně u každého pravidla
    • Hotové šablony a exporty
    • Drží kvalitu i bez nás

    Responzivní design

    Moderní design webu, který funguje na telefonu stejně dobře jako na velkém monitoru. Rozvržení navrhujeme zvlášť pro mobil, tablet i desktop, takže se žádná stránka nemačká do úzkého okna. Většina tvé návštěvnosti přijde z telefonu.

    Začínáme u mobilu a k větší obrazovce přidáváme. Řešíme věci, které na malé šířce rozhodují: velikost cílů pro palec, tabulky, dlouhá česká slova a formuláře, kde klávesnice zakryje půl displeje. Návrhy zkoušíme na skutečných zařízeních a se zvětšeným systémovým písmem.

    VýstupNávrhy pro telefon, tablet i velký monitor s určenými zlomovými body a s popisem, co se na kterém z nich přeskládá. K tomu řešení problémových míst a záznam z ověření na skutečných zařízeních.

    • Návrh od mobilu nahoru
    • Otestované na skutečných zařízeních
    • Formuláře a tabulky na úzké obrazovce
    • Funguje i při zvětšeném písmu

    Technologie

    Znáš to?

    Pan Novákprvní hovor

    1. Web vypadá jak z roku 2015 a stydíme se ho poslat

    2. Zastaralý vzhled podkopává důvěru dřív, než si člověk přečte první větu. Redesign postavíme na tom, co na webu funguje, a vzhled posuneme k tomu, jak dnes vypadá tvoje firma.

    3. Každá stránka vypadá trochu jinak

    4. Bez design systému si každý přidává vlastní tlačítka a odstíny. Postavíme knihovnu komponent s pravidly, takže nová stránka vznikne z hotových dílů a vypadá stejně jako ostatní.

    5. Na mobilu se web skoro nedá používat

    6. Rozvržení z počítače zmenšené na telefon nefunguje. Navrhujeme nejdřív pro mobil, s tlačítky pro palec a čitelným písmem, a pro větší obrazovky rozvržení rozšiřujeme.

    7. Vývojáři to postavili jinak než v návrhu

    8. Obrázek obrazovky nestačí, vývojář pak hádá. Předáváme komponenty se stavy, rozměry a tokeny barev, a protože vývoj dělá stejná parta, návrh se po cestě neztratí.

    Ve které situaci jsi ty?

    Vyber si svůj případ a dosaď svoje čísla. Obrazovka spočítá, co tím ztrácíš nebo získáváš.

    Lidi mi odcházejí a nevím proč

    Návštěvníků za měsíc2 000
    Kolik návštěvníků nakupuje1,5 %
    Průměrná objednávka2 900 Kč

    Aby se audit UI/UX vrátil za 3 měsíce, stačí

    +8,4 % ke konverzi

    Teď ti web vydělává zhruba 87 000 Kč za měsíc: 2 000 návštěvníků, z toho 1,5 % nakupuje za 2 900 Kč. Audit UI/UX obvykle stojí 22 000 Kč.

    Cena „obvykle“ je z ceníku studia. Tržby bez marže. Jde o práh návratnosti, růst konverze předem nikdo negarantuje.

    Začít projekt

    Stavím něco nového

    Rozpočet na vývoj490 000 Kč
    Kolik obrazovek podle tebe bude nutné předělat25 %

    V ohrožení kvůli předělávce po spuštění je

    122 500 Kč z rozpočtu

    Předělat 25 % obrazovek po spuštění znamená zaplatit navíc 122 500 Kč z 490 000 Kč. Klikací prototyp u nás obvykle stojí 30 000 Kč, a tyhle úpravy se dělají v něm ještě před kódem.

    Podíl předělávek zadáváš ty. Cena prototypu „obvykle“ je z ceníku studia.

    Začít projekt

    Produkt se mi rozjel do nekonzistence

    Kolik lidí dělá rozhraní4
    Hodin týdně u každého na sjednocování obrazovek3 h
    Kolik stojí tvoje hodina750 Kč

    Nejednotnost tě stojí

    38 970 Kč za měsíc

    4 lidé po 3 h týdně po 750 Kč na hodinu. Design systém obvykle stojí 65 000 Kč a vrátí se za 1,7 měsíce.

    Hodiny a sazbu zadáváš ty. Odhad shora: počítáme, že systém sjednocování odstraní úplně. Cena „obvykle“ je z ceníku studia.

    Začít projekt

    Koupit šablonu za pár stovek?

    Hotová šablona stojí pár stovek a vypadá hezky v náhledu. Pro začátek to může být rozumná volba. Rozdíl přijde ve chvíli, kdy do ní vložíš vlastní obsah, značku a funkce, se kterými šablona nepočítala.

    Kdy ti šablona stačí

    • Potřebuješ jednoduchou prezentaci na pár měsíců, než se rozjedeš
    • Obsah se do šablony vejde, jak je, bez úprav rozvržení
    • Značka zatím nemá vlastní vizuální styl, na který by se navazovalo
    • Nevadí ti, že stejný vzhled používají stovky jiných webů

    Kdy tě začne brzdit

    • Každá úprava rozvržení znamená boj s kódem, který psal někdo jiný
    • Šablona tahá desítky skriptů a efektů, které web zpomalují
    • Nové funkce, třeba kalkulačka nebo rezervace, do ní nezapadnou
    • Konkurence vypadá stejně, protože koupila tutéž šablonu

    Od návrhu k obrazovkám připraveným na kód

    1. Víš, co navrhujeme

      Hovor a podklady

      Projdeme značku, obsah, wireframy nebo stávající web a cíle. Domluvíme počet obrazovek a dostaneš pevnou cenu.

    2. Vidíš, jak to bude vypadat

      Vizuální směr

      Na dvou až třech klíčových obrazovkách ukážeme směr: typografii, barvy, rytmus. Rozhodneme se na skutečném obsahu místo moodboardu.

    3. Máš celý návrh

      Obrazovky a stavy

      Dokreslíme všechny obrazovky pro mobil i počítač, se stavy najetí, chyby, načítání a prázdného seznamu.

    4. Každý díl má pravidla

      Design systém

      Z obrazovek vytáhneme komponenty a tokeny: barvy, písma, rozestupy, stíny. Nová stránka pak vzniká z hotových dílů.

    5. Návrh sedí

      Kontrola a úpravy

      Dvě kola připomínek jsou v ceně. Návrh projdeme i s vývojáři, aby se nic nedalo postavit jinak, než je nakreslené.

    6. Obrazovky jsou připravené

      Předání nebo vývoj

      Předáme soubory Figmy se specifikacemi, nebo web postavíme sami. U redesignu po spuštění porovnáme konverzi s výchozím stavem.

    Kolik stojí UI design

    Návrh obrazovek od 25 000 Kč, design systém od 30 000 Kč, knihovna komponent od 15 000 Kč, redesign od 25 000 Kč. Dvě kola připomínek v ceně. Cena je konečná, nic se k ní nepřičítá.

    Zjistit cenu

    Kde jsme to dělali

    • 3Dscéna přímo v prohlížeči, bez pluginu
    • 0,10 sodezva serveru, měřeno 8/2026

    Výuková platforma o investování, kde se složené úročení nevysvětluje odstavcem, ale nástrojem, do kterého si člověk sáhne.

    Otevřít případovku
    Spectrum Interactive
    Finanční vzdělávání · 2026

    Spectrum Interactive

    • ×5návštěvníků z organiky, rok na rok
    • ×20zobrazení stránek, rok na rok
    • 100+stran pro celou skupinu firem
    • 0,17 sodezva serveru, měřeno 8/2026

    Textilní továrna z roku 1987 (netkané textilie, konopná izolace Konsulate™, bytový textil UKONO™) s webem zaseknutým o deset let zpět.

    Otevřít případovku
    Fabrika Sumy
    Textilní výroba · 2025

    Fabrika Sumy

    • 100+rezidentních firem, od Coca-Coly po Kyivstar
    • 85 000m² hal, kanceláří a skladů k pronájmu
    • 0,26 sodezva serveru, měřeno 8/2026

    Průmyslový park na pozemcích textilní továrny z roku 1987. Pronajímá výrobní, skladové a kancelářské prostory firmám.

    Otevřít případovku
    Industrial Park Patriot
    Průmyslové nemovitosti · 2024

    Industrial Park Patriot

    01 / 03

    Nejdřív důkazy, potom vkus

    Designujeme podle důkazů: výzkum řekne, co opravit, prototyp to ověří na skutečných lidech a analytika po spuštění ukáže, jestli to zabralo. Všechno stojí na design systému, jednom zdroji pravdy pro barvy, písmo, odsazení a komponenty, takže nové obrazovky vznikají v hodinách místo dnů a produkt zůstává konzistentní, jak roste. A při předání nemizíme: designér zůstává na telefonu během vývoje, aby se hotový produkt shodoval s tím, který jsme otestovali.

    Na co se lidé ptají nejčastěji

    Co je UI design?

    UI design (user interface) je návrh vzhledu obrazovek: rozvržení, typografie, barvy, tlačítka, formuláře a jejich stavy. Navazuje na UX, které řeší, jak se člověk po webu pohybuje. Výsledkem jsou obrazovky připravené pro vývojáře.

    Kolik stojí UI design webu?

    Návrh obrazovek od 25 000 Kč, u běžného firemního webu kolem 60 000 Kč podle počtu šablon stránek. Design systém od 30 000 Kč, redesign od 25 000 Kč. Cenu víš po prvním hovoru. Cena je konečná, nic se k ní nepřičítá.

    Co je design systém a potřebuju ho?

    Design systém je sada komponent a pravidel: tlačítka, formuláře, karty, barvy, písma a rozestupy. Vyplatí se u webu nebo aplikace, která bude růst a na které pracuje víc lidí. U jednorázové prezentace stačí styl na obrazovkách.

    Navrhujete i mobilní verzi?

    Vždy. Rozvržení navrhujeme nejdřív pro mobil a pak ho rozšiřujeme pro tablet a počítač. Každá obrazovka má obě verze, žádná se nedopočítává až při vývoji.

    Dostanu zdrojové soubory?

    Ano, celé soubory Figmy s komponentami a styly patří tobě. Můžeš s nimi pracovat dál sám nebo je předat jinému designérovi či vývojáři.

    Kdy dává smysl redesign?

    Když struktura webu funguje, ale vzhled zestárl nebo neodpovídá značce. Když lidé na webu nenacházejí, co hledají, nestačí vzhled a začínáme výzkumem. Redesign vždy měříme před a po, aby bylo vidět, co přinesl.

    Jak dlouho návrh trvá?

    Firemní web s pěti až osmi šablonami stránek dva až tři týdny. Design systém pro aplikaci tři až pět týdnů. Termín řekneme po hovoru a držíme ho.

    Postavíte web i podle cizího návrhu?

    Ano. Když máš hotový návrh, projdeme ho, doplníme chybějící stavy a mobilní verze a postavíme ho. Často přitom najdeme místa, kde by se návrh v kódu choval jinak, a vyřešíme je předem.

    Kolik kol připomínek je v ceně?

    Dvě kola. Připomínky sbíráme najednou k celé várce obrazovek, aby se návrh nerozpadal na dílčí úpravy. Další kola jdou podle hodin a domluvíme je předem.

    Sousední kategorie

    Všechny služby

    Výzkum

    3 služby

    Prototypování

    2 služby

    Testování a předání

    3 služby

    Jdeme postavit něco pořádného?

    Napiš nám pár vět. Ozveme se do několika hodin a domluvíme krátký hovor.

    1. 1Do pár hodin: odpoví ti člověk: první myšlenky, možná pár otázek.
    2. 2Do pár dnů: 30minutový hovor. Ty mluvíš, my posloucháme. Zdarma, bez závazků.
    3. 3Po hovoru: písemná pevná nabídka, nebo upřímná odpověď, že pro tebe nejsme ti praví, a tip, na koho se obrátit.

    Žádné obchodní skripty. Budeš mluvit s lidmi, kteří to skutečně postaví.

    Alergie na formuláře? Chápeme.info@chronicles.cz+420 773 230 278

    Odesláním formuláře souhlasíš se zpracováním vyplněných údajů za účelem odpovědi na tuto poptávku. Ochrana osobních údajů. Údaje slouží jen k odpovědi. Neprodáváme je a do newsletteru nepřidáváme.