🎨 UX/UI design

První kroky (30 minut)

Základní principy dobrého designu

Design není umění - je to komunikace. Dobrý design má 4 základní principy (CRAP - Contrast, Repetition, Alignment, Proximity).

1. Contrast (Kontrast)

Co to je: Důležité prvky musí být vidět na první pohled. Používejte kontrast barvy, velikosti, tloušťky.

Špatně: Tlačítko "Koupit" má stejnou barvu jako pozadí (šedá na šedé).
Dobře: Tlačítko "Koupit" je jasně zelené na bílém pozadí - vidíte ho okamžitě.

Pravidlo: Primary akce (CTA - Call To Action) = nejvyšší kontrast. Sekundární akce = nižší kontrast.

2. Repetition (Opakování)

Co to je: Konzistentní styly napříč aplikací (stejné buttony, stejné font sizes, stejné spacing).

Špatně: Na každé stránce jiný styl tlačítka (jednou modré, jednou zelené, různá velikost).
Dobře: Všechna primární tlačítka jsou modrá, 16px padding, font 16px bold.

Pravidlo: Vytvořte si design system (komponenty ve Figmě) - button, input field, card. Používejte je všude.

3. Alignment (Zarovnání)

Co to je: Všechny prvky musí být zarovnané - na levý okraj, na střed, nebo na grid.

Špatně: Text začínající náhodně 20px, 25px, 18px od kraje.
Dobře: Všechny texty začínají na 24px od kraje (konsistentní margin).

Pravidlo: Používejte layout grid ve Figmě (12 sloupců, 16px gutter). Vše zarovnávejte na grid.

4. Proximity (Blízkost)

Co to je: Prvky, které patří k sobě, musí být blízko sebe. Nepříbuzné prvky = větší mezera.

Špatně: Nadpis článku je 50px od textu, ale text je 10px od další sekce (vypadá to, že nadpis patří k druhé sekci).
Dobře: Nadpis je 8px od textu (patří k sobě), ale 32px od další sekce (oddělení).

Pravidlo: Používejte spacing scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px. Ne náhodné hodnoty (11px, 23px).

Figma - nástroj designéra

Figma je jako "Word pro designéry" - tvoříte v ní wireframy, mockupy, prototypy. Bez Figmy nemůžete dělat UI design (jako bez editoru nemůžete programovat).

Co se naučit první (týden 1-2)

• Frames: Základní plocha (jako artboard v Illustrator). Cmd/Ctrl + F → vyberte velikost (Desktop 1440, Mobile 375).
• Shapes: Rectangle (R), Circle (O), Line (L). Každý UI prvek je kombinace shapes.
• Text: T → klikněte, píšete. Font size, line height, letter spacing - důležité pro čitelnost.
• Colors: Fill (výplň), Stroke (ohraničení). Používejte HEX kódy (#000000 = černá, #FFFFFF = bílá).
• Auto Layout: Nejdůležitější feature - prvky se automaticky zarovnávají a spacing je konzistentní. Shift + A.

Co se naučit druhé (týden 3-4)

• Components: Opakující se prvky (button, input) vytvoříte jako component. Změníte jednou = změní se všude.
• Variants: Button má stavy (default, hover, disabled) - vytvořte varianty.
• Prototyping: Propojte screeny šipkami - simulujte flow aplikace (klik na button → další stránka).
• Plugins: Unsplash (fotky zdarma), Iconify (ikony), Content Reel (fake data).

Klávesové zkratky (musíte znát)

User research - základ UX

UX design není "co si myslím, že je hezké", ale "co funguje pro uživatele". User research = ptát se lidí, pozorovat je, testovat.

1. User interview (rozhovory s uživateli)

Co: Sednete si s uživatelem (15-30 min) a ptáte se na jejich problémy, workflow, bolestivá místa.

Špatné otázky: "Líbil by se vám tento design?" (odpověď: "jo, hezké" - nic se nedozvíte).
Dobré otázky: "Ukažte mi, jak teď děláte XYZ. Co vás na tom štve?" (konkrétní data).

Pravidlo: Ptejte se na minulost (co dělali), ne budoucnost (co by chtěli). Lidé špatně predikují vlastní chování.

2. Usability testing (testování použitelnosti)

Co: Dáte uživateli úkol (např. "Najdi a kup produkt XY"), pozorujete, kde se zasekne.

Jak:

1. Vytvořte prototyp ve Figmě (interaktivní).
2. Najděte 5 lidí (známí, rodina - stačí).
3. Řekněte úkol ("Najdi položku X a přidej do košíku").
4. Mlčte - pozorujte, kde se zaseknou.
5. Zapište problémy (neklikli na button, nenašli menu, nečitelný text).

Pravidlo: 5 uživatelů odhalí 85 % problémů. Víc není potřeba (diminishing returns).

3. Heuristic evaluation (heuristické hodnocení)

Co: Zkontrolujte design podle 10 Nielsenovych heuristik (standardy použitelnosti).

10 heuristik (zkrácené):

1. Viditelný stav systému: Uživatel musí vědět, co se děje (loading spinner, progress bar).
2. Konzistence: Stejné akce mají stejný výsledek (button vždycky stejně vypadá).
3. Prevence chyb: Radši zabránit chybě než zobrazit error (validace formuláře před odesláním).
4. Rozpoznání místo vzpomínky: Uživatel nemusí pamatovat (ikony + text, ne jen ikony).
5. Flexibilita: Podpora pro začátečníky i experty (klávesové zkratky pro pokročilé).

Zdroj: nngroup.com/articles/ten-usability-heuristics (Jakob Nielsen - guru UX).

Designový proces - krok za krokem

Junior designéři skáčou rovnou do Figmy a dělají "hezký design". Profesionálové jdou procesem: research → wireframes → mockupy → prototyp → testování.

Fáze 1: Research (1-2 dny)

• Definice problému: Co má aplikace řešit? Jaký je hlavní use case?
• User interviews: Povídání s 3-5 uživateli (15 min/osoba).
• Competitor analysis: Jak to řeší konkurence? Screenshoty 3-5 podobných appek.

Fáze 2: Wireframes (1 den)

Co: Low-fidelity návrh (černobílé boxy, bez detailů). Zaměření na strukturu, ne vizuál.

Nástroj: Figma (nebo tužka + papír - rychlejší pro iterace).
Proč wireframes: Rychle otestujete flow bez plýtvání času na barvy/fonty.

Fáze 3: Mockupy (2-3 dny)

Co: High-fidelity design (barvy, fonty, ikony, spacing). Vypadá jako finální aplikace.

Proces:

1. Vyberte color palette (3 barvy: primary, secondary, neutral). Použijte coolors.co.
2. Vyberte typography (2 fonty: heading + body). Doporučení: Inter, Roboto, Open Sans (bezpatkové).
3. Vytvořte komponenty (button, input field, card) - budete je opakovat.
4. Navrhněte všechny screeny (homepage, detail, formulář).

Fáze 4: Prototyp (1 den)

Co: Propojte screeny ve Figmě (klik na button → další stránka). Simulujte reálné používání.

Jak: Prototype tab ve Figmě → klikněte na button → táhněte šipku na další frame → vyberte animaci (Instant, Dissolve, Slide).

Fáze 5: Testování (2 dny)

Co: Usability testing s 5 lidmi. Zapište problémy, opravte design, testujte znovu.

Iterace: Design je iterativní proces. První verze je vždycky špatná - važné je opravit podle feedbacku.

Jak vytvořit portfolio (pro hledání práce)

Portfolio je důležitější než CV. Zaměstnavatelé chtějí vidět vaše práce, ne číst "znalost Figmy". 3-5 projektů stačí.

Co dát do portfolia

• Case studies: Ne jen screenshoty, ale process (problem → research → wireframes → mockupy → testování → výsledek).
• Před/po: Ukažte, jak jste redesignovali existující UI (zdůrazněte zlepšení).
• Diverse projekty: Web, mobile app, dashboard - ukažte, že umíte víc než jeden typ designu.

Jak vytvořit portfolio, když nemáte klienty

Redesign existujících aplikací:

1. Najděte špatně navržený web/app (např. vládní weby, starší e-shopy).
2. Analyzujte problémy (nepřehledné menu, špatný kontrast, nečitelné texty).
3. Vytvořte redesign (wireframes → mockupy).
4. Napište case study: "Problém → Proces → Řešení → Výsledek".

Daily UI challenge: dailyui.co - 100 dní, každý den 1 UI úkol (signup form, landing page, settings). Udělejte prvních 10, dejte do portfolia.

Kde portfolio hostovat

• Behance: Adobe platforma, specializace na design. Zdarma.
• Dribbble: Komunita designérů, vyžaduje invite (ale můžete používat bez invite).
• Vlastní web: Nejlepší (ukážete, že umíte i web design). Použijte Webflow (no-code) nebo Framer.

Časté chyby začátečníků

1. Skipování research fáze

Chyba: "Já vím, co uživatelé chtějí" → designujete podle sebe, ne podle dat.
Realita: Vy nejste uživatel. Vaše preference ≠ preference cílové skupiny.

Řešení: I 3 rozhovory po 15 minutách = obrovský rozdíl. Dělejte research vždycky.

2. Příliš mnoho fontů/barev

Chyba: 5 různých fontů, 10 barev → vypadá to jako Word dokument z roku 2005.
Pravidlo: Maximum 2 fonty (heading + body) a 3 barvy (primary, secondary, neutral).

3. Špatný kontrast (nečitelný text)

Chyba: Světle šedý text na bílém pozadí (#CCCCCC na #FFFFFF) - nikdo to nepřečte.
Pravidlo: Kontrast ratio minimálně 4.5:1 (text), 3:1 (UI prvky). Testujte: webaim.org/resources/contrastchecker.

4. Ignorování mobilní verze

Chyba: Navrhují desktop design, mobile "nějak doděláme".
Realita: 60-70 % trafficu je z mobilu. Mobile-first design = standard.

Řešení: Navrhujte mobile první (375px širka), pak expandujte na desktop (1440px).

5. Kopírování trendů bez pochopení

Chyba: "Všude vidím glassmorphism, použiju to taky" → nevíte proč, jen to vypadá "moderně".
Realita: Trendy jsou nástroj, ne cíl. Dobrý design řeší problém, ne následuje módu.

Závěr

UX/UI design je řemeslo - 80 % je naučitelné principy (CRAP, typografie, barvy, layout), 20 % je praxe a cit. Není to o talentu nebo vkusu.

Co vzít z článku:

• Stáhněte Figma, projděte si základní tutorial, zkopírujte jeden design (učení pozorováním).
• 4 principy dobrého designu: Contrast, Repetition, Alignment, Proximity (CRAP) - 90 % designu je tohle.
• User research není optional - 5 usability testů odhalí 85 % problémů.
• Designový proces: Research → Wireframes → Mockupy → Prototyp → Testování. Neskákejte rovnou do mockupů.
• Portfolio: 3-5 case studies s procesem (problem → solution) > 20 screenshotů bez kontextu.

První akce (30 minut): Stáhněte Figma, projděte si "Get Started" tutorial (20 min), najděte screenshot jednoho login screenu a zkuste ho překreslit. Hotovo - máte první design.

Zdroje pro pokračování:

• Figma Learn: help.figma.com/hc/en-us (oficiální tutoriály)
• Laws of UX: lawsofux.com (21 psychologických principů UX)
• NN Group: nngroup.com/articles (výzkumy a best practices)
• Refactoring UI: Kniha (25 USD) - nejlepší praktický průvodce UI designem