Dárkový kupón

PROGRAMOVANI

UX/UI design s AI: od výzkumu k portfoliu

Dvanáctitýdenní program, ve kterém projdete návrhem vybraného uživatelského scénáře: od výzkumu přes prototyp a testování po vizuální rozhraní a předání do vývoje. Ve Figmě a s AI nástroji zpracujete vlastní případovou studii do portfolia a naučíte se zohledňovat digitální přístupnost už při návrhu.

Nejnovější

Certifikát

po dokončení

Každý týden přidáváte do stejného projektu další vrstvu. Na konci programu držíte v ruce dvanáct navazujících výstupů, které dohromady tvoří jednu obhajitelnou případovou studii. Program stojí na jedné případové studii. V průběhu kurzu zpracujete návrh vybrané části digitálního produktu od prvního uživatelského rozhovoru po interaktivní prototyp a podklady pro vývojáře. Každý týden přidáváte k témuž projektu další vrstvu, aby na konci vznikla souvislá práce, kterou obhájíte před lektory i skupinou a předložíte na pohovoru. Pracovat budete ve Figmě, s Figma Make a s AI asistenty, například Claude, ChatGPT nebo Gemini. Důležitý je postup práce, nikoli konkrétní verze modelu.

Osnova kurzu

12 modulů

Úvod do UX designu a role AI v návrhovém procesu

Co má UX designér na starosti, jak vypadá zadání, se kterým se dá pracovat, a ve kterých krocích návrhu AI nástroje zkracují práci.

Rozdíly mezi UX, UI, produktovým a service designem
Výstupy v jednotlivých fázích návrhového procesu
Role designéra v různých typech firem a týmů
Brief a rozsah zadání: co si se zadavatelem ujasnit dřív, než vznikne první obrazovka
Kde AI nástroje zkracují práci (rešerše, syntéza dat, generování variant) a které kroky zůstávají na designérovi: moderování rozhovoru, volba kompromisu mezi cíli, posouzení přístupnosti
Tvorba pracovní hypotézy pro vlastní projekt

Výstup týdne: zadání vybraného scénáře vlastního projektu a výzkumný plán na jedné straně A4

Uživatelský výzkum a syntéza dat

Vyberete vhodnou výzkumnou metodu a zpracujete zjištění, o která můžete opřít návrh. Rozlišíte doložené poznatky, pracovní hypotézy a otázky, které vyžadují další ověření.

Volba výzkumné metody podle fáze projektu a rozpočtu
Hloubkové rozhovory: příprava scénáře, informovaný souhlas účastníka a vedení rozhovoru
Dotazníky a jejich limity
Data o chování uživatelů: webová analytika, nahrávky relací a teplotní mapy jako doplněk k rozhovorům
AI při přepisu a tematické syntéze rozhovorů: kontrola proti původním záznamům a ochrana osobních a důvěrných údajů
Pracovní profily uživatelů: co lze doložit z rozhovorů a co zatím zůstává hypotézou

Výstup týdne: přepisy tří hloubkových rozhovorů, tematická syntéza a pracovní profily uživatelů s rozlišením zjištění a hypotéz

Konkurenční a heuristická analýza

Porovnáte, jak existující řešení podporují vybraný uživatelský scénář, a pojmenujete příležitosti pro vlastní návrh.

Analýza konkurence: co sledovat a jak výstup strukturovat
Nielsenovo desatero použitelnosti v praxi
Srozumitelnost navigace a nároky na pozornost uživatele: co odhalí expertní posouzení a co je třeba ověřit testováním
AI při strukturování srovnání konkurence a kontrola závěrů proti skutečným rozhraním
Jak z nálezů udělat argument pro zadavatele, který o změně rozhoduje

Výstup týdne: srovnání vybraných scénářů tří konkurenčních produktů a tabulka nálezů se zdůvodněným pořadím priorit

Informační architektura

Navrhnete strukturu a navigaci pro svůj projekt a ověříte, zda uživatelé dokážou najít potřebné informace.

Card sorting a jeho vyhodnocení
Tvorba informační architektury a ověření její srozumitelnosti pomocí tree testingu
Uživatelské průchody (user flows) pro klíčové scénáře
Kdy je struktura moc plochá a kdy zbytečně hluboká

Výstup týdne: mapa struktury produktu a tři uživatelské průchody v diagramu, který uvedete do prezentace případové studie

Wireframy a interaktivní prototyp

Ze skici vytvoříte prototyp vybraného scénáře a připravíte jej pro testování s uživateli.

Tvorba wireframů ve Figmě: layout grid, auto layout, komponenty
Figma Make při tvorbě funkčních prototypů pomocí AI: rozdíl oproti návrhu ve Figmě a kontrola souladu se zadáním a výzkumem
Stavba interaktivního prototypu pro testování
Příprava scénáře uživatelského testování

Výstup týdne: klikací prototyp s funkčním průchodem klíčovým scénářem

Uživatelské testování a vyhodnocení

Prototyp otestujete s lidmi odpovídajícími cílové skupině a zjištění využijete k jeho úpravě.

Realizace testování: moderované i nemoderované
Nábor účastníků testování: koho pozvat, kde je hledat a jak vymezit možnosti i limity jednoho kola
Časté chyby při vedení testování a jak se jim vyhnout
Vyhodnocení zjištění, stanovení priorit a úprava prototypu podle výsledků
Prezentace výsledků týmu nebo klientovi

Výstup týdne: zpráva z testování na dvě strany A4 s prioritami a zdůvodněním úprav prototypu

Vizuální jazyk rozhraní

Typografie, barva, mřížka a pohyb jako prostředky, kterými řídíte pozornost uživatele a srozumitelnost obrazovky.

Typografická hierarchie a čitelnost napříč zařízeními
Barevná paleta: kontrastní poměry podle WCAG ověřené už při jejím sestavování
Mřížka, rozvržení obrazovky a práce s prostorem
Ikony, obrazový materiál a stavy prvků rozhraní (výchozí, aktivní, načítání, chyba, prázdný stav)
Mikrointerakce a animace: kdy pomáhají orientaci, kdy zdržují a jak respektovat nastavení omezeného pohybu
Vizuální hierarchie: podle čeho se rozhoduje, co uživatel uvidí jako první

Výstup týdne: vizuální koncept vlastního projektu: moodboard, typografická škála a barevná paleta s ověřeným kontrastem

Návrh UI a základní sada komponent

Vizuální koncept převedete do klíčových obrazovek a základní sady opakovaně použitelných komponent.

Struktura Figma souboru a pojmenování vrstev pro týmovou spolupráci
Komponenty, varianty a design tokens ve Figmě
Jak z vizuálního konceptu vznikne finální UI a jak při iteraci pomáhají reference a AI nástroje
Práce se stávajícím produktem: co se z existujícího design systému přebírá a co se vyplatí přepsat
Dokumentace komponent pro konzistenci napříč produktem

Výstup týdne: UI tří klíčových obrazovek a základní sada komponent s pravidly použití

Digitální přístupnost: kontrola a opravy návrhu

Odhalíte bariéry v návrhu a rozlišíte, co lze ověřit ve Figmě a co až na funkčním webu nebo v aplikaci. Právní rámec zasadíte do souvislostí své práce.

Přístupnost v návrhu a základní právní rámec: vybrané služby a subjekty, výjimky a hranice odpovědnosti designéra
Kontrast, čitelnost a velikost ovládacích prvků podle vybraných kritérií WCAG
Formuláře a stavy rozhraní: popisky, chybová hlášení a srozumitelnost bez spoléhání pouze na barvu
Pořadí ovládání, viditelné zaměření prvku a omezení pohybu: co lze popsat v návrhu a co musí ověřit vývoj a testování
Kontrola vlastního návrhu, oprava bariér a záznam požadavků k ověření klávesnicí a čtečkou obrazovky po implementaci
Možnosti a limity nástrojů axe, WAVE a Lighthouse při kontrole funkčních webových stránek; proč samotný automatický výsledek nepotvrzuje přístupnost

Výstup týdne: záznam kontroly přístupnosti návrhu podle vybraných kritérií WCAG, opravený prototyp a seznam bodů k ověření po implementaci

Předání do vývoje a příprava kontroly implementace

Připravíte srozumitelné podklady pro vývojáře a postup pro následnou kontrolu implementace. Vlastní projekt končí návrhem a specifikací; jeho vývoj není součástí slíbeného výstupu.

Předání přes Dev Mode ve Figmě: rozměry, stavy komponent a chování na různých šířkách obrazovky
Ukázka Figma MCP a Code Connect: přínos pro tým, potřebné podklady a omezení podle tarifu; samostatné zprovoznění není cílem programu
Checklist pro předání a nejčastější třecí body v komunikaci s vývojem
Kontrola implementace po nasazení: podle čeho porovnáte hotovou obrazovku s návrhem a jak nález popsat, aby se dal opravit
Údržba design systému: verzování komponent a evidence změn, když produkt dál roste
Jak obhájit designové rozhodnutí před vývojářským týmem

Výstup týdne: specifikace vybraného scénáře pro vývoj, připravená v Dev Mode nebo pomocí šablony, a kontrolní seznam pro revizi implementace

Ekonomika designérské práce, portfolio a vstup do kariéry

Vymezíte rozsah zakázky, odhadnete práci a uspořádáte případovou studii tak, aby ukazovala váš postup i důvody rozhodnutí.

Jak nacenit zakázku: hodinová sazba, sazba za celý rozsah a paušál za průběžnou péči o produkt
Z čeho se skládá čas projektu, který zadavatel na první pohled nevidí: revize, koordinace s vývojem, předání a kontrola implementace
Základní orientace ve smlouvě o dílo a licenci k návrhu: která ustanovení si projít (počet revizí v ceně, předání zdrojových souborů, rozsah užití díla)
Jak stavět portfolio kolem jedné dotažené případové studie a co do něj nepatří
Příprava na pohovor: obhajoba rozhodnutí včetně toho, co byste dnes udělali jinak
Kde hledat volné pozice a jak číst požadavky inzerátů

Výstup týdne: cenová nabídka vlastního projektu s rozpadem hodin a osnova portfolia

Závěrečná obhajoba

Prezentujete ucelenou případovou studii před lektory a skupinou ve struktuře, kterou můžete využít také při pracovním pohovoru.

Prezentace návrhového procesu od výzkumu po předání do vývoje
Obhajoba designových rozhodnutí a odpovědi na dotazy
Zpětná vazba od obou lektorů a specialisty na přístupnost
Individuální plán dalších kroků: co v portfoliu dotáhnout a jaké pozice odpovídají vaší úrovni

Výstup týdne: obhájená případová studie, certifikát o absolvování

Co se naučíš

Postavit návrh na datech z vlastního uživatelského výzkumu a zdůvodnit klíčová rozhodnutí i omezení získaných dat

Navrhnout a otestovat informační architekturu i interaktivní prototyp

Použít ve Figmě komponenty, varianty a design tokens při zpracování vlastního návrhu

Zapojit AI nástroje do výzkumu, ideace i iterace tam, kde zkracují práci, a poznat, kde jejich výstup neobstojí

Zkontrolovat návrh podle vybraných kritérií WCAG a opravit bariéry, které lze odhalit před vývojem

Zorientovat se v právním rámci přístupnosti a poznat, co musí ověřit poskytovatel služby nebo příslušný odborník

Připravit podklady pro vývoj, které popisují stavy a chování navrženého scénáře

Připravit kontrolní seznam pro porovnání implementace s návrhem a zaznamenávat změny komponent

Nacenit vlastní zakázku, odhadnout potřebný čas a obhájit rozsah před klientem nebo nadřízeným

Prezentovat případovou studii na pohovoru včetně rozhodnutí, která byste dnes udělali jinak

Pro koho je kurz

Lidé měnící obor - získáte základy návrhového procesu pro vstup do UX/UI designu a jednu dotaženou případovou studii, kterou předložíte na pohovoru místo prázdného portfolia.

Začínající UX/UI designéři - propojíte jednotlivé návrhové kroky na jednom projektu a procvičíte zdůvodnění vlastních rozhodnutí.

Grafičtí a weboví designéři - doplníte si k vizuálnímu řemeslu výzkumnou vrstvu, práci s responzivitou a přípravu srozumitelných podkladů pro spolupráci s vývojářem.

Produktoví manažeři a lidé z navazujících profesí - program využijete, pokud chcete návrhový proces sami prakticky vyzkoušet. Není určený jako specializované rozšíření pro zkušené UX výzkumníky.

Frontend vývojáři - projdete návrhovým procesem z pohledu designéra a ujasníte si, jaké informace potřebuje tým při předání do vývoje.

Lidé odpovědní za firemní web a digitální služby -naučíte se posuzovat použitelnost návrhu, rozpoznávat bariéry a popsat zjištění dodavateli. Program nenahrazuje odborný audit přístupnosti ani právní posouzení služby.

Časté dotazy

Potřebuju už znát Figmu?

Ne. Ve Figmě začínáme v pátém týdnu u wireframů a prototypu a postupujeme od základů: layout grid, auto layout a komponenty. Pokud už s Figmou pracujete, poslouží vám tyto lekce k doplnění pokročilejších technik, jako jsou design tokens, varianty komponent a Figma Make.

Proč je v programu UX/UI designu blok o přístupnosti?

Přístupnost pomáhá navrhovat rozhraní, která mohou používat lidé s různými potřebami. Ovlivňuje kontrast, čitelnost, formuláře, ovládání i chybové stavy, proto patří do návrhového procesu. U vybraných služeb a subjektů je také zákonnou povinností. Naučíte se kontrolovat návrh a rozlišovat, co je potřeba ověřit až v hotové implementaci.

Co když zmeškám lekci?

Každá lekce se nahrává a záznam dostanete do 24 hodin. Na příští živé lekci můžete navázat i s otázkami z té zmeškané. Podmínkou pro vydání certifikátu je odevzdání všech dvanácti týdenních výstupů a živá účast na uživatelském testování v sedmém týdnu a na závěrečné obhajobě ve dvanáctém týdnu, protože obě probíhají s dalšími účastníky a nedají se nahradit záznamem.

Jak vypadá závěrečná případová studie?

Je to případová studie návrhu vybraného scénáře digitálního produktu: od výzkumu přes prototyp a testování po UI klíčových obrazovek, kontrolu přístupnosti návrhu a podklady pro vývoj. Prezentujete ji ve dvanáctém týdnu před lektory a skupinou ve struktuře, kterou můžete využít také při pracovním pohovoru.

Jak je přístupnost zařazena do programu?

Jeden týden ze dvanácti, tedy tři hodiny živé výuky plus samostatná práce na kontrole přístupnosti vlastního návrhu. Přístupnost je součástí případové studie, na které pracujete po celý program.

Dostanu zpětnou vazbu i mimo lekce?

Ano. V komunitním kanálu můžete sdílet rozpracované výstupy průběžně a lektoři na ně reagují i mezi lekcemi.

Jaký software budu potřebovat a co si k němu musím pořídit?

Většinu programu odpracujete ve Figmě na bezplatném plánu. Dev Mode, se kterým pracujeme v desátém týdnu, je funkce placených plánů Figmy a vyžaduje placené pracovní místo; pokud ho nemáte, projdeme předání do vývoje na sdílené obrazovce a dostanete hotovou šablonu specifikace. Z AI asistentů používáme například Claude, ChatGPT nebo Gemini. Jejich bezplatné tarify i AI funkce Figmy mají proměnlivé limity, proto nelze předem slíbit neomezenou práci bez placeného tarifu. Základní nástroje axe, WAVE a Lighthouse lze používat zdarma při kontrole funkčních webových stránek; nenahrazují úplné odborné posouzení. Seznam s odkazy a doporučeným nastavením dostanete týden před startem.

Garantujete, že po programu najdu práci v UX/UI designu?

Pracovní uplatnění negarantujeme. Program vám pomůže zpracovat jednu případovou studii a nacvičit vysvětlení vlastního postupu, rozhodnutí i limitů návrhu. Výsledek při hledání práce závisí také na vašich dalších zkušenostech, kvalitě portfolia, požadavcích zaměstnavatele a situaci na trhu.