// Manuál UI designu

Vizuální
styly
rozhraní

Kompletní přehled UI designových stylů — co jsou, jak vypadají, kdy je použít a co nikdy nekombinovat.

12
Hlavních stylů
~30
Let vývoje
∞
Kombinací
00

Přehled

01 Flat Design 02 Material Design 03 Neumorphism 04 Glassmorphism 05 Brutalism 06 Claymorphism 07 Skeuomorphism 08 Dark UI 09 Bento Box 10 Aurora / Gradient 11 Minimalism 12 Retro / Y2K
01

Flat Design

// živá ukázka
Analýza dat
Přehled výkonnosti za posledních 30 dní. Nárůst o 12 %.
Upozornění
Detekováno 3 nové události vyžadující pozornost.
Hotovo
Všechny úkoly za tento týden dokončeny.

Co to je

  • Žádné 3D efekty, stíny, gradienty
  • Čisté plochy, jasné barvy
  • Ikony jako jednoduché geometrické tvary
  • Maximum bílého prostoru
  • Typografie jako hlavní designový prvek

Kdy použít

  • Dashboardy, admin panely
  • B2B software a nástroje
  • Aplikace s důrazem na čitelnost
  • Když chceš být "bezpečný" a profesionální
  • Mobile-first projekty

Slavné příklady

  • Microsoft Windows 8/10 UI
  • Apple iOS 7+ (přechod od skeu)
  • Google produkty před Material
  • Většina SaaS nástrojů (Notion, Linear)

Typické chyby

  • Příliš málo kontrastu — nečitelné
  • Ploché buttony bez jakéhokoli afformancu
  • Šedá na šedé — nerozlišitelné prvky
  • Sterilní dojmem bez osobnosti
Evergreen Universální 2012–dnes Apple · Microsoft · Google
02

Material Design

// živá ukázka
☰ Přehled účtu
+
JN
Jan Novák
Platba přijata — 2 450 Kč
před 2h
AK
Anna Kovář
Faktura odeslána — 12 000 Kč
dnes

Co to je

  • Systém od Google (2014)
  • Metafora: "digitální papír" — vrstvy s mírným stínem
  • Elevation — každý prvek má svou výšku (z-depth)
  • Pohyb a animace jako součást jazyka
  • Přesná pravidla: 8px grid, typografická škála

Kdy použít

  • Android aplikace (de facto standard)
  • Google produkty a integrace
  • Cross-platform systémy
  • Když potřebuješ řád a konzistenci v týmu

Varianty

  • Material Design 1 (2014) — výrazné stíny
  • Material Design 2 (2018) — jemnější
  • Material You / M3 (2021) — dynamické barvy, zaoblení

Typické prvky

  • FAB (Floating Action Button) — kulatý primární button
  • Cards s elevation stínem
  • Bottom navigation bar
  • Snackbar notifikace
  • Ripple efekt při kliknutí
Systémový Android standard 2014–dnes Google
03

Neumorphism (Soft UI)

// živá ukázka
Kroky dnes
8 420
Denní cíl
65 %
6 500 / 10 000 kroků

Co to je

  • "New skeuomorphism" — 2020, Alexander Plyuto
  • Prvky vypadají jako vytlačené nebo vtlačené do pozadí
  • Dvoustranné stíny: světlý + tmavý ze stejného bg
  • Pozadí = barva prvků (monochrom)
  • Jemné, "hmatatelné" rozhraní

Kdy použít

  • Wellness, health, meditace appky
  • Audiophile / hi-fi aplikace
  • Luxury produkty s monochrom brandingem
  • Dekorativní UI — ne komplexní systémy

Nevýhody

  • Katastrofální přístupnost (kontrast WCAG nesplňuje)
  • Špatně škáluje — hodí se jen pro malé komponenty
  • Obtížně rozlišitelné aktivní vs. neaktivní prvky
  • Trend z 2020 — dnes trochu přežitý

Technicky

  • box-shadow: Xpx Xpx Npx #světlá, -Xpx -Xpx Npx #tmavá
  • inset shadow pro "zmáčknutý" stav
  • Pozadí: šedá nebo pastelová, nikdy bílá/černá
  • Gradient overlay místo flat fill pro "zaoblení"
Trendový (2020) Přístupnost: špatná Wellness · Luxury
04

Glassmorphism

// živá ukázka
Celkové výnosy
243 800 Kč
+18.4 % tento měsíc
Aktivní projekty
7
3 v termínu
Poslední aktivita: 2h zpět

Co to je

  • Prvky jako matné sklo na barevném bg
  • background: rgba(255,255,255,0.1) + backdrop-filter: blur()
  • Průsvitné vrstvy s jemným border
  • Vždy živé pozadí (gradient, foto, animace)
  • Popularity: macOS Big Sur (2020)

Kdy použít

  • Landing pages s wow efektem
  • Overlay panely a modaly
  • Crypto, finance, gaming UI
  • Dark themed aplikace s gradientem

Technicky

  • backdrop-filter: blur(10px) — klíčové
  • background: rgba(255,255,255,0.1–0.2)
  • border: 1px solid rgba(255,255,255,0.2)
  • Nutné živé pozadí — na bílém nefunguje
  • Výkon: GPU-intensive, opatrně na mobile

Nevýhody

  • Přečtenost textu závisí na pozadí
  • Safari: starší verze nepodporovaly
  • Trend z 2020-21 — dnes přesycený
  • Nepřístupné bez dostatečného kontrastu textu
Trendový (2020–21) Finance · Crypto · Landing pages macOS
05

Brutalism

// živá ukázka
NOVÝ PROJEKT
HOT
Otevřeme přihlášky 15. dubna. Nepropásni to.
VÝSLEDKY
847
Registrovaných

Co to je

  • Záměrně "ošklivé" — odmítnutí standardů "dobrého designu"
  • Inspirováno brutalistickou architekturou (surový beton)
  • Tučné bordery, výrazné stíny (offset), systémová písma
  • Žluté nebo neonové akcenty na bílém bg
  • Bez border-radius nebo velmi ostré rohy

Kdy použít

  • Portfolio designérů a vývojářů
  • Underground / kultura / hudba
  • Startupy, které chtějí vyčnívat
  • Když záměrná provokace je součást brandingu
  • Gig economy, marketplacy (Craigslist efekt)

Slavné příklady

  • Bloomberg Businessweek online
  • Dribble UI portfolia
  • Gumroad (historicky)
  • Notion API docs (raná fáze)
  • Vercel Geist — moderní varianta

Typické prvky

  • border: 2–4px solid #000
  • box-shadow: 4–6px 4–6px 0 #000
  • background: #ffec3e nebo #ff3e3e nebo bílá
  • font-weight: 800–900, uppercase
  • Monospace nebo condensed display font
Portfolio · Underground Záměrná provokace 2015–dnes
06

Claymorphism

// živá ukázka
🌱
Ranní rutina
3 z 5 splněno dnes
🎯
Cíl týdne
Dokončit pitch deck
💧
Hydratace
1.8 L ze 2 L

Co to je

  • 3D "hliněné" prvky — jako z modelovací hmoty
  • Výrazný offset spodní stín (box-shadow dolů)
  • Pastelové barvy, silné zaoblení (24px+)
  • Jemný vnitřní border pro hloubku
  • Moderní trend: 2022–dnes

Kdy použít

  • Wellness, produktivita, lifestyle appky
  • Dětské a vzdělávací produkty
  • Playful SaaS (správce úkolů, habit trackery)
  • Marketingové stránky moderních startupů

Technicky

  • box-shadow: 0 8px 0 #barva-stínu
  • border-radius: 20–28px
  • border: 1–2px solid rgba(barva, 0.15)
  • Bílé nebo velmi světlé karty na pastel bg
  • Soft drop shadow navíc pro hloubku

Slavné příklady

  • Duolingo (ikony)
  • Notion marketingový web
  • Loom UI redesign
  • Stripe press materials
Aktuální trend 2022–dnes Wellness · Edu · Lifestyle
07

Skeuomorphism

// živá ukázka
Volume
Bass
POWER ON
RECORD
SIGNAL
CLIP

Co to je

  • Digitální objekty imitují fyzické předměty
  • Kalendář vypadá jako papírový, poznámky jako žlutý lísteček
  • Detailní textury, realistické stíny, lesky
  • Dominovalo Apple iOS 1–6 (Steve Jobs éra)
  • Cíl: snížit kognitivní práh pro nové uživatele

Kdy použít

  • Audio/video nástroje (DAW, mixážní pulty)
  • Hry se simulací fyzického světa
  • Retro nebo nostalgické produkty
  • Specializované nástroje, kde metafora pomáhá

Proč vymizel

  • Uživatelé digitální svět pochopili — metafory nepotřebují
  • Vysoké náklady na design a vývoj
  • Špatně škáluje na různé displeje
  • iOS 7 (2013) ho zabil, flat design vyhrál

Slavné příklady

  • iOS 6 Newsstand, Passbook
  • GarageBand (stále skeuomorfní)
  • Logic Pro — mixing board view
  • Starší Mac OS X aplikace
Historický styl 2000–2013 Apple éra Jobse Hry · Audio tools
08

Dark UI

// živá ukázka
PRO účet
📈
Celkové výnosy
Duben 2026
+284 500 Kč
🔮
Volatilita
7-denní průměr
2.4 %

Co to je

  • Není styl — je to barevné schéma (mode)
  • Tmavé pozadí (#0a0a0a–#1e1e1e), světlý text
  • Redukuje únavu očí při dlouhé práci
  • OLED displeje: tmavé pixely = nulová spotřeba
  • Může kombinovat s jakýmkoli stylem

Kdy použít

  • Developer tools, IDE, terminály
  • Finance a trading platformy
  • Aplikace pro noční použití
  • Gaming a entertainment
  • Premium / luxusní branding

Klíčové principy

  • Nepoužívej čistou černou (#000) — příliš drsná
  • Vrstvy: bg (#0a0a), surface (#111), elevated (#1a1a)
  • Akcentová barva: jasná, ale ne neonová
  • Šedá hierarchie pro text (primary / secondary / muted)
  • Bordery: rgba(255,255,255,0.08) — jemné

Chyby v dark UI

  • Příliš tmavý text na tmavém bg — nečitelné
  • Čistá bílá (#fff) na tmavém bg — moc kontrastní, bolí
  • Invertovaný light mode — nevypadá dobře
  • Nedostatečné odlišení vrstev (vše splyne)
Standard Dev tools · Finance · Gaming OLED friendly
09

Bento Box Layout

// živá ukázka
Výkonnostní
přehled Q2
Duben – Červen 2026
+47%
Růst
128
Klientů
4.9★
Hodnocení

Co to je

  • Layout inspirovaný japonskou krabičkou s přihrádkami
  • Mřížka karet různých velikostí na společném gridu
  • Každá karta = jeden soustředěný obsah
  • Apple to popularizoval na WWDC 2023
  • Není to styl — je to kompoziční vzor

Kdy použít

  • Landing pages a hero sekce
  • Dashboardy a přehledy dat
  • Portfolia a "o nás" sekce
  • Product marketing (ukázka funkcí)
  • Prezentace — Apple Keynote styl

Pravidla kompozice

  • Hlavní karta: 2x2 nebo 2x1 — tvoří vizuální kotvu
  • Barvy karet: max 3–4 různé, ne rainbow
  • Každá karta: jeden datový bod nebo idea
  • Gap mezi kartami: 8–12px — rozhoduje o "vzduchu"
  • Čtení: Z nebo F pattern

Technicky (CSS Grid)

  • grid-template-columns + grid-template-rows
  • grid-column: span 2 pro velké buňky
  • grid-row: span 2 pro vysoké buňky
  • Responsive: přechod na 1 sloupec pod 600px
  • aspect-ratio na buňky pro konzistenci
Aktuální trend 2023–dnes Apple · Dashboardy · Marketing
10

Aurora / Gradient UI

// živá ukázka
AI Workspace Pro
Inteligentní prostředí pro tvorbu a analýzu. Powered by nové generace modelů.
GPT-4o
Vision
Audio

Co to je

  • Amorfní barevné "záblesky" na tmavém bg
  • filter: blur() na velké kruhové divy
  • Kombinuje se s glassmorphism
  • Živé, pohyblivé gradienty (CSS animace)
  • Asociace: AI, tech, futurismus

Kdy použít

  • AI a tech produkty (OpenAI, Anthropic styl)
  • Startupy — hero sekce
  • SaaS landing pages
  • Crypto a Web3 projekty

Technicky

  • Velký div s bg-color + filter: blur(80px) + opacity: 0.4
  • position: absolute, mimo flow obsahu
  • Animace: @keyframes rotate/pulse na glows
  • Pozadí: #000 nebo #05050f (ne pure black)
  • Obsah: position: relative, z-index nad glows

Nevýhody

  • GPU-náročné na mobile
  • Přesycený — každý AI startup vypadá stejně
  • Špatná čitelnost bez glassmorphism karet
  • Obtížně udržitelné v komponentovém systému
Trendový (2022–dnes) AI · SaaS · Web3 Hero sekce
11

Minimalism / Editorial

// živá ukázka
Studio Novák — Architektura
Prostory, které
dýchají.
Navrhujeme místa, kde forma slouží životu — ne naopak. Každý projekt začíná tichem a otázkou: co zde opravdu potřebujete?
Zobrazit portfolio →

Co to je

  • "Less is more" — Mies van der Rohe
  • Typografie jako hlavní designový prvek
  • Extrémní whitespace
  • Max 2 barvy (často černá + bílá + 1 akcent)
  • Každý prvek musí opodstatnit svou existenci

Kdy použít

  • Architektura, design, foto studia
  • Luxury branding
  • Literární a kulturní projekty
  • Portfolia s důrazem na obsah, ne obal
  • Novinové a editoriální weby

Typografická pravidla

  • Serif pro editorial (Playfair, EB Garamond)
  • Sans-serif pro interface (Helvetica Now, Neue Haas)
  • Velké titulky s negativním kerningem
  • Řádkování 1.6–1.8 pro čtivost
  • Maximálně 2 řezy — regular + bold

Slavné příklady

  • Apple.com produkt stránky
  • ARC Browser web
  • Teenage Engineering produkty
  • Swiss Style plakáty (Müller-Brockmann)
  • Linear.app
Nadčasový Luxury · Editorial · Portfolio Swiss Design roots
12

Retro / Y2K

// živá ukázka — Windows 98 styl
📁 Nová zpráva
_
□
✕
Komu:
Zpráva:
Připraveno | Internet Explorer 6.0

Co to je

  • Záměrná nostalgie za erou Windows 95–XP
  • Beveled buttony, system gray (#c0c0c0)
  • Neonové barvy, pixel fonty, scanlines
  • Y2K: futurismus z přelomu tisíciletí (metallic, chrome)
  • Dnes: ironie a kulturní komentář

Kdy použít

  • Portfolio vývojářů a designérů (humor)
  • Hry, interaktivní fikce
  • Kulturní nebo umělecké projekty
  • Generace Z nostalgie branding
  • Purposefully kitsch kampaně

Podkategorie

  • Windows 98 UI — systemová šedá, beveled border
  • Y2K / Chrome — metalické povrchy, lentikulární efekty
  • Vaporwave — fialová/růžová, antikva, řecké sochy
  • Pixel art UI — 8-bit font, chunky pixely
  • Terminal / CRT — zelený text na černé

Slavné příklady

  • Poolsuite.net
  • Windows93.net
  • Jodi.org
  • Cameron's World
  • Mnoho indie game UI
    • Nostalgie · Ironie Hry · Umění · Portfolio Gen Z trend
    13

    Základní principy UX/UI

    👁
    Vizuální hierarchie
    Oko sleduje kontrast a velikost. Co je největší a nejkontrastnější, to vidí uživatel první. Vše ostatní musí tomuto řádu sloužit.
    ⚡
    Affordance
    Prvek musí vypadat jak se chová. Button musí vypadat klikatelně. Input musí vypadat editovatelně. Bez nápovědy nic nefunguje.
    🔲
    Blízkost (Proximity)
    Věci, které spolu souvisí, musí být blíže u sebe. Mezera = vztah. Velká mezera = oddělení. Mozek čte whitespace jako sémantiku.
    🔁
    Konzistence
    Button je vždy button — stejná barva, stejný radius, stejné chování. Variace bez důvodu ničí důvěru a zvyšuje kognitivní zátěž.
    ♿
    Přístupnost (a11y)
    WCAG kontrast: text na pozadí min 4.5:1 (AA). Klikatelné prvky: min 44×44px. Alt texty pro obrázky. Tab navigace musí fungovat.
    📱
    Responsivita
    Nejdřív mobile, pak desktop. Breakpointy: 375px (mobile), 768px (tablet), 1280px (desktop). Grid musí kolabovat, ne přetékat.
    🎯
    Fittsův zákon
    Čím větší a blíže cíl, tím snazší kliknutí. Primární CTA má být velký a na dostupném místě. Neboj se velkých buttonů.
    🧠
    Kognitivní zátěž
    Méně voleb = lepší rozhodnutí (Hickův zákon). Uživatel nemá přemýšlet. UI musí být tak zřejmé, že instrukce nepotřebuje.
    14

    Kdy co použít — rychlý přehled

    Styl Ideální pro Vyhni se, když Dnes?
    Flat Design SaaS, dashboardy, B2B, mobile Potřebuješ emoci nebo "wow" faktor ✓ Vždy relevantní
    Material Design Android appky, Google ekosystém iOS appky nebo non-Google produkty ✓ Standard
    Neumorphism Wellness, hi-fi, luxury, dekorativní UI Komplexní systémy, přístupnost je požadavek ~ Selektivně
    Glassmorphism Landing pages, overlay panely, dark hero sekce Světlé pozadí, nebo výkon na mobilu ~ Přesycené
    Brutalism Portfolia, underground, záměrná provokace Enterprise, korporát, health, finance ✓ Niche relevantní
    Claymorphism Lifestyle appky, edu, playful SaaS Finance, B2B, serious tools ✓ Aktuální trend
    Skeuomorphism Audio/video tools, hry, simulátory Téměř vše ostatní ✗ Historický
    Dark UI Dev tools, trading, gaming, premium Dětské appky, přístupnost senioři ✓ Vždy relevantní
    Bento Box Landing pages, hero, dashboardy, prezentace Dlouhé formuláře, lineární flow ✓ Na vrcholu trendu
    Aurora / Gradient AI startupy, SaaS hero, Web3 Přesycené — bez uniqueness nevyčníváš ~ Opatrně
    Minimalism Luxury, editorial, architektura, portfolio Komplexní aplikace s mnoha features ✓ Nadčasový
    Retro / Y2K Hry, umění, ironie, nostalgie branding Seriózní produkty, korporát, zdravotnictví ✓ Gen Z nostalgie