Odbor UI/UX design sa zameriava na komplexné pracovné postupy pri navrhovaní a prototypovaní rozhraní webstránok a obrazoviek mobilných zariadení – telefónov, smartfónov a tabletov, ale aj iných digitálnych produktov. Absolvent tohto odboru spozná všetky dôležité teórie interaktívneho designu, pracovné postupy, prípravné aj realizačné fázy a na základe nich NAVRHUJE drátové wireframy a vizuálne mockupy rozhraní. Z nich následne VYRÁBA plne funkčné (interaktívne a animované) prototypy digitálnych produktov. Tento proces po celý čas konzultuje s klientom a v záverečnej fáze testuje a exportuje celý design kit pre programátorov.
Tento kvalifikačný odbor primárne vyučujeme v programoch Adobe XD alebo Adobe Figma.
INFORMÁCIE
Organizačná forma vzdelávania: Kombinovaná, Viacformová (PREZEČNE V UČEBNI alebo PREZENČNE ONLINE + DIŠTANČNE v online učebni LMS)
- PREZENČNE V UČEBNI alebo PREZENČNE ONLINE – výučba a výklad, nácvik, ukážky, designérske rozbory praktických projektov, tipy a triky, konzultácie, otázky a odpovede
- DIŠTANČNE V ONLINE UČEBNI LMS – prípravné témy, teórie, predmety, ukážky a simulácie, podrobné videokurzy) – kompletné prehľady predmetov a kurzov – Vstup do online učebne.
- Podrobnejšie o formách vzdelávania v sekcii: >> Formy vzdelávania
Požadované vstupné vzdelanie
- Minimálne SŠ vzdelanie, obvyklá práca s PC
- Vhodné pre začiatočníka v grafike a designe: áno
Jazykové prostredie
- Počas prezenčnej výučby: slovenčina alebo čeština
- Online systém: slovenčina a čeština (teórie), angličtina (videokurzy)
Metódy a formy vzdelávania
- Teoretická predpríprava v online učebni
- Štartovacie aj pokročilé softvérové výcviky v online učebni
- Výklad a praktický nácvik prezenčne v učebni alebo prezenčne online
- Praktické cvičenia a zadania (kombinovane)
- Pokročilé témy a techniky, diskusia (kombinovane)
- Podrobnejšie o formách vzdelávania v sekcii: >> Formy vzdelávania.
Ceny a prihláška
- 328 €
- Prihláška a postup: Prihláška na kvalifikačné štúdium
Rozsah a termíny
- Rozsah kurzu: 40,00 hodín / 3-4 týždňov (podľa intenzity stretiek)
- Vypísanie termínov: verejné termíny alebo individuálne podľa záujmu, na mieru.
- Zľavy za viac odborov: áno, dohodou
Časový rozpis priebehu vzdelávania
- 1 týždeň: Prístup do vzdelávacieho systému, prípravné kurzy, teórie, predmety – dištančne LMS
- 2. – 3. týždeň: Nácvik a zručnosti práce v aplikáciách – prezenčne + štúdium v online učebni a domáce zadania
- 4. týždeň: Vypracovávanie projektu, záverečný test, obhajoba záverečnej práce
Poznámka: časový rozpis je prispôsobovateľný individuálnym požiadavkám účastníkov pri dohode celej skupiny na úvodnej zácvikovej hodine.
UČEBNÉ OSNOVY A PLÁNY
AKR4: UX/UI design – Interaktívne animácie aplikácie
Princípy UX/UI designu a interakcie
- Čo je UX/UI design – špecifiká designovania pre interaktívne obrazovky
- Čo je interaktívny design
- Ešte skôr než začneme vyrábať produkt – design & prototyping
- Najčastejšie interaktívne digitálne produkty
- Vývoj a životný cyklus interaktívnych digitálnych produktov
- UI: Vizuálna zložka rozhrania produktu – design, layout
- UX: Užívateľská zložka rozhrania produktu – štruktúra, navigácia, užívateľská prístupnosť
- Teória interakcie pre produkty na mobilných obrazovkách
- Teórie multimédií – technologické a funkčné princípy
- Ako robiť používateľské testovanie
- Ako pripraviť portfólio v Figme
- Ako pracovať s AI nástrojmi vo Figme (Figma AI, Magician AI)
- Praktické odporúčania
Adobe XD / Figma I.+II. – rozšírený softvérový tréning so zameraním návrh prototypu aplikácie
Úvod do Figmy
- Čo je Figma a na čo sa používa
- Rozdiel medzi Figma, FigJam a Figma Dev Mode
- Prečo je Figma štandard v UI/UX dizajne
- Prehľad rozhrania a základná orientácia
- Typy súborov a projektov
- Tímová spolupráca v cloude
Základy práce v prostredí Figma
- Panely: Layers, Assets, Design, Prototype, Inspect
- Frame vs. Group – rozdiely a správne používanie
- Základné nástroje: Move, Frame, Shape, Pen, Text
- Práca s mriežkami (Layout Grid)
- Import obrázkov, SVG, ikon a externých assetov
- Základy práce s farbami, štýlmi a typografiou
Designové komponenty a knižnice
- Čo je komponent a prečo je kľúčový
- Variants – tvorba stavov (hover, active, disabled)
- Auto Layout – responzívne a flexibilné prvky
- Tvorba dizajn systémov
- Zdieľané knižnice (Team Libraries)
- Najčastejšie chyby pri práci s komponentmi
Práca s Auto Layout (pokročilé)
- Základné princípy Auto Layout
- Vnorené Auto Layouty
- Resizing: Hug, Fill, Fixed
- Tvorba responzívnych sekcií a celých stránok
- Praktické cvičenia: tlačidlá, karty, navigácie, formuláre
Typografia a farby v UI designe
- Tvorba textových štýlov
- Hierarchia textov (H1–H6, body, caption)
- Práca s premennými (Variables) – farby, typografia, spacing
- Tvorba farebnej palety a jej aplikácia
- Kontrast, čitateľnosť a prístupnosť (WCAG)
Tvorba kompletných obrazoviek
- Wireframy vs. high‑fidelity dizajn
- Tvorba layoutov pre desktop, tablet, mobil
- Grid systémy (8‑point grid, 12‑column grid)
- Práca s ikonami, ilustráciami a obrázkami
- Reálne cvičenie: návrh landing page
Prototypovanie vo Figme
- Základy prototypovania
- Prepojenia medzi obrazovkami
- Interakcie: On click, While hovering, Smart Animate
- Microinteractions – animované prvky
- Prezentácia prototypu klientovi
- Export prototypu pre testovanie
Spolupráca s vývojármi
- Dev Mode – čo vidí programátor
- Inspect panel – rozmery, CSS, exporty
- Export assetov (PNG, SVG, WebP, PDF)
- Naming conventions a organizácia súborov
- Handoff proces – ako odovzdať projekt bez chaosu
Pokročilé techniky a workflow
- Variables (premenné) – farby, spacing, breakpoints
- Conditions – adaptívne komponenty
- Tvorba komplexných dizajn systémov
- Pluginy: najlepšie nástroje pre produktivitu
- Integrácie: FigJam, Jira, Slack, Zeplin
- Optimalizácia veľkých projektov
PRAKTICKÉ CVIČENIA A ZADANIA
- Praktické cvičenia v Adobe XD / Figma, z dodaných podkladov
ZÁVEREČNÝ PROJEKT (podľa výberu na vlastnú tému)
- Vytvorenie wireframu (drátového náčrtu)
- Vytvorenie a export funkčného prototypu produktu
Pracovný postup:
- Zadanie a analýza
- Wireframy
- Dizajn systém
- High‑fidelity obrazovky
- Prototyp
- Prezentácia a odovzdanie vývojárom
Forma záverečnej skúšky
- záverečný test (teórie, požadovaná úspešnosť 85 %)
- obhajoba záverečnej práce na vlastnú tému – odvodenej z Projektu 3
Študijné materiály
- interaktívne prednášky, ukážky, simulácie, elektronické testy, podrobné videokurzy k softvérom (slovensky aj anglicky), odborný výcvik
- >> Prejsť do online učebne
Literatúra (všetky publikácie dostupné účastníkom na zapožičanie)
Softvérová výbava pre štúdium našich kurzov
- ADOBE: Na stránke www.adobe.com vytvorte si najprv bezplatné Adobe ID konto. Ako účastníci riadneho štátom akreditovaného štúdia ste oprávnení zakúpiť si študentskú verziu Creative Cloudu za 19,50 € / mesiac, s kompletnou funkcionalitou! Ušetríte tak až 65% ceny na celý rok!
- K vzdelávaciemu programu UX/UI design – interaktívne animácie a aplikácie, si stiahnite a nainštalujte programy Adobe XD /alebo Adobe Figma.
VIAC INFO: Tel. 0948 203 003, info@mlearning.sk
