Odbor UX/UI 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.
Interaktívne digitálne produkty sa v praxi využívajú skutočne široko – od tvorby bežných animovaných reklamných bannerov, cez vývoj herného či edukatívneho obsahu, multimediálnych prezentácií, až po špeciálne digitálne produkty ako sú rôzne užívateľské obrazovky, infokiosky, mapy, navigácie, displeje, samoobslužné dotykové obrazovky atď. To všetko s výstupom pre webovú stránku ako HTML5 obsah, videoformáty pre web, sociálne médiá, Full HD či 4K, ale aj natívne aplikácie pre počítače a iOS / Android mobilné zariadenia.
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
- 428 €
- 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
