UX/UI DESIGN

• Co dělá UX designér
• Kouzlení s triky UX (aneb metodika)
• Role UX designéra v agentuře, SaaSu, e-shopu
• Freelance vs. in-house
• Jak a kde ulovit ty nejlepší informace
• Vytváření a testování hypotéz (analýza/výzkum)
• Tvorba dokonalého briefu

Výstup z modulu:

• Chápu, co dělá UX designér a jak se liší in-house a freelance spolupráce
• Vím, kde lovit ty nejlepší informace pro start celého projektu
• Umím definovat hypotézy a ověřit je pomocí výzkumu a analýzy

• Vytváření person: kdo je kdo?
• PowerBi, Google Data Studio a další: věrní spojenci při práci s daty
• Google Analytics: kámoš nebo nekámoš?
• Data z ERP (enterprise resource planning): tajná přísada
• Smartlook – co, proč, jak?
• Kvantitativní a kvalitativní výzkum
• Hloubkové rozhovory s cílovkou
• Jak na dotazníky?
• Vyhodnocení a prezentace dat managementu/klientovi

Výstup z modulu

• Vytvářím persony na základě tvrdých dat (ne jen divokých odhadů)
• Mám základní přehled o nástrojích pro vizualizaci dat (ale vážně jen základní)
• Vím, kdy mrknout do Google analytics a k čemu je mi Smartlook
• Znám všechny možnosti UX výzkumu a umím zvolit tu správnou
• Dokážu připravit, vést a vyhodnotit hloubkové rozhovory
• Dokážu připravit, vést a vyhodnotit dotazníkové šetření
• Prezentuju výsledky jako superDATA(wo)man

• K čemu slouží informační architektura
• Jak sbírat feedback na informační architekturu
• Papír vs. Figma: ultimátní souboj – zvolíme vítěze?
• Low-fi vs. High-fi wireframe
• Na co si dát pozor při tvorbě wireframů
• Interaktivní prototyp: kdy ho dělat a kdy zase ne
• UX designér a AI? Cože? Jak?
• Sbírej feedback jako PRO
• Jak pracovat s feedbackem
• Jak připravit podklady pro úspěšný handoff

Výstup z modulu

• Tvořím informační architekturu jako základ projektu
• Umím vytvořit low-fi wireframy a rychle iterovat se stakeholdery
• Umím vytvořit high-fi wireframy ve Figmě
• Umím připravit interaktivní prototyp pro testování nebo prezentaci
• Umím aktivně sbírat feedback od stakeholderů a pracovat s ním
• Umím připravit podklady pro UI designéry, developery, management a klienta

• Prostředí
• Nastavení účtu
• Spolupráce

Výstup z modulu

• S Figmou si rozumím a dokážu s ní efektivně pracovat
• Umím si připravit strukturu projektů a souborů pro budoucí projekt

• Seznámení s UI
• UI vs. UX design: jaký je mezi nimi rozdíl?
• Prozkoumání světa UI: kde všude se s ním setkáš?
• Designérský proces pod drobnohledem
• Hledání vizuálního stylu
• Moodboard: co, jak a proč?

Výstup z modulu

• Vím, co je to UI a co všechno se za tím pojmem skrývá
• Chápu, proč je tak důležité mít skvělé UI
• Znám designérský proces a workflow UI designéra
• Vím, co je to moodboard, proč je důležitý a jak ho vytvořit
• Umím najít vizuální styl pro připravovaný projekt

• Size, Weight, Hiearchy: svatá trojice typografie
• Různá použití typografie
• Titles, Body, Callout, Truncation
• Typografické styly
• Kombinace typografie a dalších prvků
• Systémové fonty
• Metody výběru barev
• Barevný kontrast, accessibility
• Primární, sekundární a terciární barvy
• Strategická definice barev
• Gradients, shades of gray
• White & almost white, black & almost black
• Fenomén jménem dark mode

Výstup z modulu

• Ovládám základní typografický slang
• Znám charakteristiku a pravidla dobrého písma
• Umím vybírat a kombinovat písma a vyhýbám se fontovým faux pas
• Chápu, jak jednotlivé parametry ovlivňují celý design
• Vnímám typografické nuance na počítačích a telefonech
• Znám nejčastější typografické patterny pro aplikace a weby
• Kombinuju písma bezchybně jako PRO

BONUS: Pečlivě připravený short-list skvělých fontů s ukázkami

• Chápu barevný svět HSB (odstín, sytost, jas)
• Znám tajnou přísadu „luminosity“ a vím, jak mi právě tento parametr pomůže s výběrem správných barev
• Vím, proč je šedá barva nejdůležitější barvou celého UI
• Vím, jak vybírat barvy, aby i z minimálního množství odstínů vzniklo skvělé UI
• Umím nastavit primární, sekundární a terciární barvy
• Vím, jak UI přizpůsobit populárnímu dark-mode a taky vím, kdy je fajn ho použít

BONUS: Připravené ukázky barevných palet

• Box
• Grids
• Negative space
• Alignment
• Optical vs. Mathematical Alignment
• High – low density
• Sizing
• Hiearchy, Direction, Radius, Dividers, Shadows
• Depth-lighting shadows
• Opacity
• Blur
• Photography
• Iconography
• Elementy (úvod do komponentů)

Výstup z modulu

• Poznám, kdy použít grid a jakou variantu zvolit pro konkrétní projekt
• Vím, jak do designu dostat volný prostor
• Vím, jak zarovnat všechny prvky a proč to vůbec dělám
• Znám nejdůležitější pravidla a principy spacingu
• Umím tvořit konzistentní a jednoduchý design a zároveň vím, kdy je dobré porušit pravidla a design trochu rozbít
• Umím pracovat se stíny, blurem i průhledností jednotlivých prvků
• Vím, jakou roli v UI hrajou obrázky, fotografie a ikony a jak s nimi pracovat
• Vím, jaké jsou základní prvky UI (navbar, tlačítka, formuláře) a rozumím jim

• Úvod
• Co jsou to design systémy a proč mají smysl
• Z čeho se design systém skládá a kdo do něj má co mluvit
• Naming
• Layout a responzivita
• Struktura designu
• Struktura souborů
• Foundations
• Typografie
• Barvy
• Styly
• Komponenty
• Úvod do komponentů a responzivního designu
• Základní komponenty
• Pokročilejší komponenty
• Auto-layout, komponenty, varianty a properties
• Tokeny

Výstup z modulu

• Vím, co je to design systém, jak a proč se vytváří a kdo za tím stojí
• Vím, jak v design systémech udržovat pořádek
• Umím tvořit foundations od barev přes písmo až po styly
• Umím pracovat s komponenty a vytvářím své vlastní, od jednoduchých až po složitější a komplexnější celky
• Vím, co je to tokenizace a kdy dává smysl

BONUS: Knihovna připravených komponentů

• Experimentuj
• Designuj mobile-first
• Design v iOS
• Design v Material Design
• Organizace designu a dokumentace
• Kritika a reviews designů
• Prototyping
• Hand-off vývojářům

Výstup z modulu

• Vím, jak se díky exploraci návrhů dostanu k ideálnímu řešení
• Navrhuju mobile-first a umím design rozšířit o další zobrazení
• Znám rozdíly mezi designem pro iOS a Android
• Jsem mistr*yně organizace designu a dokumentace výstupů
• Umím svůj design obhájit, ohodnotit, dokážu efektivně spolupracovat s dalšími designéry a předávat kvalitní feedback
• Chápu, proč musím být v úzkém kontaktu s vývojářem, a umím zajistit hladké předání designu

• Pracovní trh

Výstup z modulu

• Hledám práci tam, kde to má smysl
• Mám vymazlené portfolio