AKR4: UX/UI design – Interaktívne animácie a aplikácie (zahŕňa kurzy Adobe Animate, Adobe XD / Figma)

UX/UI design so zameraním na interaktívny design reklamy je vzrušujúcou kombináciou sveta grafického, multimediálneho a dotykového designu. Absolvent tohto odboru NAVRHUJE wireframy alebo vizuálne prototypy interaktívnych obrazoviek a následne z nich VYRÁBA plne funkčné (interaktívne a animované) rozhrania digitálnych produktov. Tento vzdelávací program je teda unikátny tým, že sa nezameriava len na čisto teoretické vypracovanie UX/UI stránky vášho produktu (v XD, Figma), ale prejdete s ním až do praxe – reálnej výroby v aplikácii Adobe Animate, kde môžte svoj produkt reálne vytvoriť, naanimovať a naprogramovať v JavaScripte alebo ActionScripte.

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 akreditovaný odbor primárne vyučujeme dvojici programov Adobe XD + Adobe Animate. V prípade záujmu je však po dohode možná aj výučba v alternatívnych softvéroch – Adobe Figma (UX/UI zložka štúdia).

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

Rozsah a termíny

  • Rozsah kurzu:  72,00 hodín / 4-6 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. – 5. 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
  • 6. 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
  • Softvéry a vývojové prostredia pre interaktívne animácie a aplikácie
  • Praktické odporúčania

Adobe XD / Figma I. – základný softvérový tréning so zameraním návrh prototypu aplikácie

ROZHRANIE: Design (XD) / Draft (Figma)

  • Vytváranie projektov
  • Návrhové plochy
  • Zoming a navigácia po dokumente
  • Nástroj Text
  • Font management system
  • Nástroje základných geometrických tvarov
  • Nástroj Pero
  • Kombinovanie tvarov
  • Farby, prechody, výplne
  • Import grafiky – bitmapy, vektory, natívne súbory AI, PS
  • Manažment objektov Assets, Vrstvy

ROZHRANIE:  Prototype (XD) / Prototype (Figma)

  • Ako funguje prototypovanie 
  • Prepájanie obrazoviek
  • Prepájanie obrazoviek pomocou objektov
  • Možnosti animácií a časovania prechodov

ŠPECIÁLNE FUNKCIE PRE PROROTYPING

  • UI Kits – hotové ikonky elementov a rozhraní – vzhľad Android, iOS, Windows
  • Komponenty – koncept, práce
  • Ponuka pluginov a rozšírení
  • Export obsahov
  • Ukážka prototypu rozhrania mobilnej aplikácie

Adobe Animate I.+II. – rozšírený softvérový tréning so zameraním na animované reklamy a interaktívny design reklamných obrazoviek

ZAČÍNAME V ANIMATE

  • Rozhranie, príkazy, nástroje
  • Panely a pracovné plochy
  • Vytvorenie prvého dokumentu – platformy HTML5 Canvas, Adobe AIR
  • Panel Vlastnosti / Properties
  • Knižnica prostriedkov Library
  • Časová os
  • Vrstvy
  • Základné ovládanie dokumentu – lupa, ručička

KRESLENIE, VÝPLNE a TEXT

  • O režimoch kreslenia
  • Režim tvarov
  • Ťahy a výplne tvarov – koncept, vyfarbovanie, úpravy
  • Režimy kombinovania tvarov
  • Režim objektov – koncept, vyfarbovanie, úpravy
  • Zarovnávanie objektov
  • Prechody a vzorky
  • Priehľadnosť
  • Práce s textami

IMPORT MÉDIÍ

  • Import externej grafiky JPG, PNG
  • Import natívnych súborov Illustratoru a Photoshopu
  • Import súborov Premiere Pro a AfterEffects
  • Import audia a videa

ANIMÁCIE – MOTION TWEEN, SHAPE TWEEN

  • Princíp animácie a pohyblivej grafiky v Animate
  • Tvorba a typy symbolov – movie clip, button
  • Instancie symbolov
  • Motion tween – princíp, použitie na časovej osi
  • Animovateľné vlastností symbolov
  • Editor pohybu
  • Vnorené animácie a stavy – symboly, scény
  • Shape tween – animácie tvarov
  • Prehľad ďalších špeciálnych animácií – 3D, Morfing, IK, Warp, Rigs, Camera
  • Praktické tipy na časovej osi

INTERAKTIVITA

  • O jazykoch a platformách AIR / Action Script 3 a HTML5 Canvas / JavaScript
  • Panel Kcie / Actions
  • Predvstavané knižnice skripty / Code Snippets
  • Odkazy (linky) a udalosti tlačítka
  • Akcie Stop a GoToFrame – riadenie časovej osi
  • Akcie pre načítanie externých obsahov
  • Vstavaná knižnica komponentov
  • Panel Component parameters
  • Knižnice tlačítok a zvukov
  • Knižnica Learning Interactions
  • Publikovanie videa a HTML5 Canvas obsahov
  • Publikovanie videa – web, full HD, 4K
  • Publikovanie aplikácií iOS a Android (Harman AIR)

Praktická a projektová časť

  • Projekt 1 – animovaný reklamný banner (prúžok), na ktorom si precvičíte základné dôležité postupy pri práci v Adobe Animate – najmä vkladanie objektov na časovú os, ich časovanie a základné animovanie. Export ako loop pohyblivej reklama HMTL5 Canvas, Video .mp4, Animated GIF. Možnosti použitia: reklamné animované bannery, pohyblivé reklamy na reklamných obrazovkách, informačné panely, animácie pre webstránky a sociálne médiá.
  • Projekt 2 – interaktívny reklamný banner (obrazovka mobilu), pri ktorom ako zdroj grafiky použijeme klasickú grafickú reklamu z Adobe Illustrator, ktorý importujeme ako natívny projekt do Adobe Animate, rozanimujeme objekty a zároveň pridáme prvú interaktivitu k časovej osi a obsluhe udalosti tlačítka. Export ako HTML5 Canvas a balíček .OAM. Možnosti použitia: ako interaktívne reklamné bannery pre web, mobilné obrazovky a balíčky pre pohodlný export / import do iných multimediálnych projektov (hry, vzdelávacie interakcie, digitálne publikácie atď).
  • Projekt 3 –  interaktívna informačná a navigačná dotyková obrazovka pre návštevníkov a klientov, ktorí absolvujú interaktívnu virtuálnu prehliadku a zorientujú sa v prevádzke a ponuke služieb. Prototyp projektu navrhneme v Adobe XD, ktorý následne prevedieme do aplikácie Adobe Animate, kde ho prakticky vyrobíme. Projekt obsahuje animácie, interaktívne prvky, vnútornú navigáciu aj multimédiá (audio, video). Export ako HTML5 Canvas (verzia prehliadky pre prístup z webu alebo pre dotykové obrazovky) a balíčky pre Android / iOS (mobilné aplikácie).

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 AKR4: UX/UI design – interaktívne animácie a aplikácie, si stiahnite a nainštalujte programy Adobe XD /alebo Adobe Figma) a Adobe Animate, z rozhrania Creative Cloud.

VIAC INFO: Tel. 0948 203 003, info@digitaldesign.sk