Organizačně
| Podzim | Jaro |
|---|---|
| Discovery & Design | Design & Deliver |
| inspirace | design specifického projektu |
| analýza | testování, validace |
| základy vizuální komunikace | argumentace, obhajoba |
| přehled procesů, přístupů, nároků | technické aspekty UI |
Hodiny
- každé liché pondělí 12–16 h (s výjimkou čtecího týdne)
- datumy: 21. 9., 5. 10., 19. 10., 2. 11., 30. 11., 14. 12.
- teorie + softwary, nástroje a procesy + konzultace a individuální projekty
Termíny a úkoly
Odevzdání vždy do půlnoci daného dne, do příslušné složky na Odevzdávárně.
5. 10. 2026
Analýza a zpětné zadání pro art direkci existujícího produktu nebo digitálního média
2. 11. 2026
Technické cvičení a experimentace ve Figmě nebo jiném vizuálním nástroji
Zkouška (termín TBD)
- Rešerše, proces nastavení vizuálního stylu a moodboard pro svůj zvolený projekt
- Prezentace
V prezentaci představíte vámi zvolený projekt, jeho art direction brief a dílčí ukázky z procesu nastavování vizuálního stylu. Prezentace musí vizuálně navazovat na zvolený projekt a jeho zamýšlenou art direkci, forma se může lišit dle preferencí a potřeb projektu – slideshow (např. Figma Slides, Powerpoint, Canva), plakát(y) nebo motion video.
Kdo jsem a co dělám(e)?
Klára
Vystudovala jsem ateliér Digitálního designu na UTB ve Zlíně, aktuálně už více než dva roky pracuji jako mid-level UI designerka s přesahem do UX v Proof & Reason. Věnuji se tedy hlavně přetváření wireframů v hi-fi prototypy, hledání vizuálních řešení na míru a procesům v rámci toho — design systémům, pravidlům přístupnosti, handoffu s dev týmem a podobně.
Proof & Reason
P&R se soustředí na celkové CX se značkou/e-shopem a design služeb, UX, UI a softwarový vývoj řešení, včetně marketingové strategie, datové analytiky a dalšího rozvoje. Primárně se jedná o dlouhodobé projekty, ve kterých můžeme jít do hloubky a mít rozhodnutí podložená daty a výzkumem.
Art direction digitálních médií
Art direktor má na starosti koncepci a nastavení vizuálního směru svého projektu s ohledem na jeho požadovanou message, cílovou skupinu a potřeby klienta. Dohlíží na to, aby výsledek komunikoval správné emoce a dojmy a poskytuje zpětnou vazbu dalším členům týmu projektu – ať už dalším designerům, nebo vývojářům a projekťákům.
Čemu se budeme věnovat
- Aspekty a nároky různých médií nebo digitálních projektů
- Vizuální komunikaci, její teorii a nastavování vizuálních stylů
- Trendům a nástrojům pro tvorbu digitálních médií
- Pojmům, dojmům a názvosloví pro kreativní proces
- Technikám pro návrhy, validaci a argumentaci rozhodnutí
- Praktickým výstupům a získání skills pro jejich tvorbu
- Zlehka: zapojení AI do procesu vizuální explorace
Čemu se tu věnovat nebudeme
- UX (pouze tam, kde ovlivňuje rozhodnutí o vizuálu), uživatelskému testování a jeho metodám
- Kódování a vývoji nebo vibecodingu (pro teď)
- Copywritingu, UX writingu (nebo pouze minimálně)
Kdo jste a co děláte vy?
Každé médium nebo projekt má jiné požadavky na svou artdirekci
Jeden web, prosím -klient
Všechny tyto ukázky jsou weby, přesto každá z nich klade na designéra i celý tým jiné nároky
Být generalistou, nebo specialistou?
Hedonický vs utilitární design
E-commerce
Cílem e-shopu je jednoduše prodat. V závislosti na typu e-shopu a zboží se liší míra, do které si lze vyhrát v rozhraní s brandem nebo chutnými easter eggy – přednost dostává přehlednost, informativnost rozhraní a snadná orientace v něm (především jak rychle a snadno lze najít tlačítko Přidat do košíku).
V Česku máme nejvyšší počet e-shopů na počet obyvatel v Evropě. Meziročně toto číslo stoupá o 3 %. Česká e-commerce
Základní požadavky a omezení
- Brandovost, která je rozpoznatelná, ale nepřebíjí produkty
- Funkční průchod košíkem a zcela jasná vizuální komunikace hlavních akcí (Add-to-cart tlačítka) nebo stavů vyplňování formulářů
- Velmi zřetelná vizuální hierarchie a logika barev
- Sezónnost, vazby na akce a kampaně, které ovlivňují časovou osu projektů, typ dostupných podkladů
- Splňování pravidel přístupnosti pod pohrůžkou sankcí (mimo mikropodniky)
- Podle typu e-shopu velmi různorodé zdrojové obrázky – pokud to není proprietární e-shop, nelze je ovlivnit. Mají přitom vliv na load time a tím výkon e-shopu
- Často mobile-first přístup (podle analýzy návštěvnosti)
- Zákaz dark patterns, potřeba absolutní transparentnosti cen podle směrnice Omnibus
- E-shopy se v rámci vizuálních asociací musí intenzivně zabývat důvěryhodností (autorita, transparentnost, srozumitelnost)
Srovnání obsahu popisu produktu na proprietárních (Fabini, Made In) a reseller (Alza) e-shopech
Příležitosti a radosti
- Konfigurátory, chytré funkce
- Mikrointerakce
- Minihry
- Microcopy
- Art direkce fotografií a dalších vizuálních assetů mimo rozhraní webu
- Hledání příležitostí k tomu, jak pomoct lidem co nejlépe a nejjednodušeji vybrat ideální produkt (vizualizace, konfigurace, srovnávače, info materiály…)
Řešení prázdného košíku na Amazonu, Alze, Nazubech
Kam se koukat po vzorech pro e-commerce
Fabini | Kulina | IKEA | Notino | Crate&Barrel | kategorie E-commerce na Awwwards | Apple.com
Prezentační web
Spadá sem vše od klasického korporátního webu a portfolií různé míry modernosti až ke scrollytellingu, kde se pak prolíná hranice s imerzními zážitky.
Prezentační web má za úkol představit službu nebo produkt, který prodáváte. Kvůli nástupu AI a answer machines nově také k podpoření vaší autority a pozice odborníka.
Podle průmyslu, ve kterém podnikáte, se zde drasticky liší míra konzervatismu, nebo naopak moderních přístupů a využití vizuálních prvků jako 3D, scroll animace, nebo jen přechodů mezi jednotlivými stránkami.
Srovnání dvou prezentačních webů – firma Universal Robots a bavič Trevor Noah
Universal Robots | Trevor Noah
Základní požadavky a omezení
- Tady se často objevuje požadavek být unikátní, vymezit se vůči konkurenci nebo být vizuálně a technologicky inovativní
- Maximální komunikace brandu, nebo jeho posunutí (často mají firmy, které teprve digitalizují, nebo redesignují, pouze nějaký minimální logomanuál bez nastavené podoby digitální komunikace)
- Podléhá trendům
- Velmi často se jedná o stejnou strukturu a architekturu webu, i typy sekcí a obsahu (O nás, Kontakt, Služby, Homepage, Newsletter…)
- Je nutné myslet na to, aby forma přežila i odchod designera – klient si web bude následně spravovat po svojí ose (nutná intuitivní práce, nebo kvalitní dokumentace, aby mohl klient dělat edukovaná designová rozhodnutí)
Příležitosti a radosti
- Práce s moderními nástroji a principy, jako jsou GSAP knihovna animací, WebGL, WebGPU, Three.js, scroll animace, 3D a další
- Prostor být vizuálně vynalézavý s velmi stereotypním obsahem
- Velmi kreativní a hravé prostředí, prostor pro vizuální hrátky (především u portfolií a firem v oblasti designu a technologií)
- Možnost hrát si s navigací, layoutem nebo celkovým průchodem webem (oproti e-shopům úplný opak)
Kam se koukat po vzorech pro prezentační weby
Bertch Capital | projekty studia Offbrand | kolekce Design Agencies na Awwwards | kategorie Business & Corporate na Awwwards | GSAP knihovna
Mobilní aplikace
Opět velmi široká paleta typů – nástroje (notepads, trackery, čtečky knih), vzdělávání a hry, zážitkové a lokalitou specifické aplikace (Geocaching, aplikace v galeriích a muzeích), ale i bankovnictví, dopravní aplikace nebo mobilní verze e-shopů.
Proto se cílem i požadavky na design mohou lišit, technickými požadavky a obecnými principy jsou si ale velmi podobné. Navíc žijí unvitř existujícího operačního systému, který má vlastní zažitá očekávání a ovládání.
Uživatelé tráví většinu času v jiných aplikacích než ve vaší – a čekají, že ta vaše bude fungovat stejně. Jakobův zákon, Laws of UX
Základní požadavky a omezení
- Respektování platformních konvencí (Apple HIG, Material Design 3) a rozhodnutí, zda jít cestou nativního vzhledu pro každou platformu, nebo jednotného vlastního UI
- Podpora Dark i Light módu (nejen invertované barvy, ale i upravené stíny, ilustrace a fotografie)
- Čitelnost obsahu při silném světle a podpora zvětšování písma, aniž by se layout rozbil
- Dostatečné touch targets pro snadné ovládání (iOS min. 44 × 44 pt, Material 48 × 48 dp) a hlavní akce v dosahu palce
- Jasná navigace, která se nekříží s ovládáním zařízení a respectuje safe areas (výřezy displeje, Dynamic Island, gesto zpět)
- Aplikace pro určité služby (e-commerce, bankovnictví, doprava…) spadají stejně jako weby pod povinnosti přístupnosti podle EAA
Příležitosti a radosti
- Push notifikace, které osloví (ale neobtěžují)
- Widgety, vstupy do aplikace jiné, než skrz ikonu aplikace
- Atraktivní a informativní onboarding do aplikace
- Práce se zvukem a haptikou, motion efekty navázanými na gesta
- Gamifikace a osobnost aplikace
Kam se koukat po vzorech pro mobilní appky
Duolingo | Mobbin (placený) | Apple Design Awards | Apple HIG | Material Design 3
Nástroj, software
Jedná se o rozhraní, ve kterých lidé tráví hodiny denně a potřebují v nich odvést práci. V rámci art direkce se tu moc nehledí na výrazné vizuální prvky a vyjádření, spíše je třeba ošetřit stavy prvků, chování tabulek, čitelnost ikon nebo to, jak předat dokumentaci tak, aby na nástroji mohl pracovat i tým, který jej nenavrhoval od základů.
Jako příklad tu mohou sloužit různé webové a desktopové aplikace, interní softwary pro management výroby a zásobování, CRM e-shopů, nebo přímo programy jako Creative Cloud, Figma nebo Office Suite.
Srozumitelné ikony jsou základ
Základní požadavky a omezení
- Brand je v pozadí, efektivita práce v popředí – zvláště, pokud například brandové barvy kolidují s barvami, které běžně používáme pro stavy inputů a prvků (zelená, červená, oranžová)
- Náročné na dokumentaci a technickou hygienu předávaných designů
- Často extrémně hustá informační struktura, málo prostoru pro delightful momenty
- Hlavně v technických odvětvích, které se mění v rámci procesů pomalu, jsou uživatelé zvyklí na své postupy a jakékoliv vizuální změny ovlivňují jejich výkon (a netýká se to pouze přímo redesignu nástroje z v1 na v2)
- Je třeba dbát na přístupnost a možnost ovládání pouze klávesnicí
Příležitosti a radosti
- Řešení ikon pro pokročilé funkce
- Návrhy interakcí, přechodů a animací při zanořování a vynořování v úrovních softwaru, které usnadňují orientaci v něm
- Onboarding do softwaru a prázdné stavy, které mohou komunikovat osobnost nástroje
- Kreativní vizualizace dat, dashboardy a infografiky
- Dlouhodobá životnost designérem nastaveného design systému
- Komunikace různých typů obsahu (standardní obsah, čerpaná data, chytré funkce, personalizace, AI nástroje…)
UI aplikace Vercel
Kam se koukat po vzorech pro nástroje a softwares
Mobbin (placený) | Linear | Notion | Raycast | Figma | IBM Carbon Design System | Atlassian Design System | Vercel Geist
Immersive experience
Jako imerzní zážitek označujeme situaci, v níž dochází k hlubšímu a silnějšímu propojení mezi návštěvníkem či uživatelem a digitálním médiem, které je mu v ten moment prezentováno.
Cílem takových zážitků je smazat vnímatelnou hranici mezi naším fyzickým prostředím a digitálními médii, často zprostředkovanými pomocí digitálních zařízení. Pro dosažení kvalitní imerze je klíčové zapojit do prožitku co nejvíce smyslů a dát tak návštěvníkovi pocit, že je média přímo součástí, nejen jeho pasivním konzumentem. Často využívají i herních principů, nebo přímo obsahují hry a úkoly, jako například Manifesto studia Offbrand
Typicky se tu bavíme o kampaních, product launches, nebo projekty v kultuře, muzejnictví a vzdělávání – projekty s vysokým důrazem na dojem a zapamatovatelnost (kampaně navíc mají kratší životnost a mohou si dovolit být více experimentální). Art direkce tu přesahuje standardní vymezení UI rozhraní, řídí také světlo, materiály, kameru, zvuk, či tempo vyprávění.
Ukázka imerzní webové zkušenosti Inside Kristallnacht
Hedonické nebo utilitární?
Tyto typy zážitků bychom zařadili spíše na hedonickou stranu škály, nicméně rozšířená realita má své využití i v utilitárních scénářích – zaměření místnosti pomocí AR, VR pro trénink zdravotníků a lékařů nebo průmyslová školení.
Ukázka tréninkových VR programů pro školení zdravotníků v těžko simulovatelných situacích (Obrázek: Onix Systems)
Základní požadavky a omezení
- Vyšší rozpočet a hůř měřitelná návratnost
- Jiné složení týmu a jiné nástroje – Figma ke spolupráci s 3D artisty, creative developery nebo sound designery nestačí (Blender, Spline, Cinema 4D, Unity/Unreal, prototypování přímo v kódu)
- Čitelnost textu v prostoru – větší velikosti, dostatečná tloušťka písma, kontrast vůči proměnlivému pozadí (u AR vůči reálnému prostředí)
- Je třeba hlídat technické aspekty (výkon, stabilní snímková frekvence, velikost assetů, doba načítání a smysluplný preloader) a nabízet alternativy (fallbacks pro slabší zařízení, prefers-reduced-motion uživatele nebo zcela alternativní cesta k obsahu v rámci přístupnosti)
- Uživatelé nemají zažité konvence, je potřeba je navést srozumitelným ovládáním
- Ve VR/MR je třeba myslet na fyzický komfort a fakt, že silné pohyby kamerou vedou k vertigu a nevolnosti (UI v pohodlné vzdálenosti a v přirozeném zorném poli, žádné prvky „přilepené“ k hlavě)
Příležitosti a radosti
- Spousta příležitostí pro hrátky s prostorem, pohybem v něm, nebo interaktivitu pomocí pohybů těla nebo očí
- Možnost ukázat unikátní kombinace skills – storytelling, spatial design, sound design, kamera a set design a další…
- Často bývají poměrně viditelné a medializované nebo oceňované
- Možnost experimentovat s generativním obsahem, nebo netradičními shadery a simulacemi
- Hledání smysluplných způsobů propojení fyzického a digitálního světa
Kam se koukat po vzorech pro imerzní zkušenosti
projekty studia Active Theory | projekty studia Immersive Garden | projekty studia Broken Egg | projekty studia MakeMePulse | projekty firmy AV Media | projekty studia Media Apparat | Instalace od Sila Sveta | portoflio Bruna Simona | projekty studia TeamLab
Tipy na výlety
| Česko | Svět |
|---|---|
| Krajská galerie výtvarného umění ve Zlíně | Nxt Museum, Amsterdam |
| Muzeum nové generace, Žďár nad Sázavou | Nemo Museum, Amsterdam |
| Lumia Gallery, Praha | Cleveland Museum of Art, Ohio, US |
| Portál do lesa, Bruntál | Johann Strauss Museum, Vídeň |
| Zámek Kinských, Valašské Meziříčí | Naturhistorisches Museum, Vídeň |
Infografika
Vizuální vysvětlení dat, procesů nebo souvislostí – od statické infografiky, orientačních systémů a schémat přes datové vizualizace a dashboardy až po interaktivní datové příběhy v médiích. Art direkce se tu potkává s editorialem a odpovědností: forma nesmí zkreslit obsah, nebo působit neadekvátně.
Základní požadavky a omezení
- Na screenu stále musí zůstat zřejmá hlavní informace – to můžou být hodnoty grafů, ale i primární tlačítka v rozhraní, nebo text
- Je třeba dodržovat informační best practises – uvádět zdroje, metodiku, datum aktualizace a lokalizovat formáty dat podle lokality (zápis data, desetinné čárky, jednotky a pod.)
- Závislost na kvalitě a dostupnosti dat, časté změny na poslední chvíli (zejména v médiích)
- Umělecké vyjádření podléhá situaci a nesmí zkreslovat nebo deformovat data
Příležitosti a radosti
- Možnost vymýšlet vlastní vizuální metafory a piktogramy nebo netradiční formy grafů tam, kde je sdělení unese (často showreels, marketingové výstupy)
- Digitální médium umožňuje data zobrazovat interaktivně – k dispozici máme filtrování, hover efekty, porovnání s vlastní situací (kalkulačky) nebo zanořování a hlubší exploraci podle vlatních zájmů
- Scrollytelling a animované přechody mezi stavy dat
- Motion infografika pro sociální sítě a video
- Knihovna grafů jako součást design systému produktu nebo redakce
Ukázka interaktivní inforgrafiky Who killed the world
Kam se koukat po vzorech pro infografiku
The Pudding | Information is Beautiful | Reuters Graphics | Our World in Data | blog Datawrapper | DataRozhlas | Data Viz Catalogue | Flourish