AKR4: UX/UI design – interaktivní animace a aplikace (zahrnuje kurzy Adobe XD / Adobe Figma, Adobe Animate)

UX/UI design se zaměřením na interaktivní design reklamy je vzrušující kombinací světa grafického, multimediálního a dotykového designu. Absolvent tohoto oboru NAVRHUJE wireframy nebo vizuální prototypy interaktivních obrazovek a následně z nich VYRÁBÍ plně funkční (interaktivní a animované) rozhraní digitálních produktů. Tento vzdělávací program je tedy unikátní tím, že se nezaměřuje jen na čistě teoretické vypracování UX/UI stránky vašeho produktu (v XD, Figma), ale přejdete s ním až do praxe – reálné výroby v aplikaci Adobe Animate, kde můžete svůj produkt reálně vytvořit, naanimovat a naprogramovat v JavaScriptu nebo ActionScriptu.

Interaktivní digitální produkty se v praxi využívají skutečně široce – od tvorby běžných animovaných reklamních bannerů, přes vývoj herního či edukativního obsahu, multimediálních prezentací, až po speciální digitální produkty jako jsou různé uživatelské obrazovky, infokiosky, mapy, navigace, displeje, samoobslužné dotykové obrazovky atd. To vše s výstupem pro webovou stránku jako HTML5 obsah, videoformáty pro web, sociální média, Full HD či 4K, ale také nativní aplikace pro počítače anebo iOS/Android mobilní zařízení.

Uvedený odbor primárně vyučujeme ve dvojici programů Adobe XD + Adobe Animate. V případě zájmu je po dohodě možnost výuky v alternativním softwaru – Adobe Figma (UX/UI složka studia).

INFORMACE

Organizační forma výuky: Kombinovaná, viceformní (PREZENČNĚ V UČEBNĚ nebo PREZENČNĚ ONLINE + DISTANČNĚ v online učebně mLearning LMS)

  • PREZENČNĚ V UČEBNĚ nebo PREZENČNĚ ONLINE – přednášky, nácvik, demonstrace, cvičení, designové rozbory praktických projektů, tipy a triky, konzultace, otázky a odpovědi
  • DISTANČNĚ V ONLINE UČEBNĚ LMS – teoretické předměty, podrobné videokurzy – kompletní přehledy teoretických předmětů a videokurzů

Požadované vstupní vzdělání

  • Minimálně SŠ vzdělání, obvyklá práce s PC
  • Vhodné pro začátečníka v grafice a designu: ano

Jazykové prostředí

  • Během prezenční výuky: čeština nebo slovenština
  • Online systém: čeština a slovenština (teorie), angličtina (videokurzy)

Metody a formy výuky

  • Teoretická příprava v online učebně
  • Startovací a pokročilá softwarová školení v online učebně
  • Přednášky a praktický výcvik prezenčně v učebně nebo prezenčně online
  • Praktické cvičení a zadání (kombinovane)
  • Pokročilá témata a techniky, diskuze (kombinovaná)
  • Podrobněji o formách vzdělávání v sekci: >> Formy vzdělávání

Ceny a přihláška

Rozsah a termíny

  • Rozsah kurzu: 72,00 hodin / 3-6 týdnů (dle intenzity střetek)
  • Vyhlášení termínů: veřejné termíny nebo individuálně dle zájmu, na míru
  • Slevy za více oborů: ano, dohodou

Rozvrh výuky

  • 1 týden: Přístup do vzdělávacího systému, přípravné kurzy, teorie, předměty – distanční LMS
  • 2. týden: Teorie a dovednosti práce v aplikacích – prezenčně + studium v online učebně a domácí úkoly
  • 3. týden: Teorie a dovednosti práce v aplikacích – prezenčně + studium v online učebně a domácí úkoly
  • 4. týden: Řešení praktických úkolů a projektů – prezenčně + studium v online učebně a domácí úkoly
  • 5. týden: Řešení praktických úkolů a projektů – prezenčně + studium v online učebně a domácí úkoly
  • 6. týden: Vypracování projektu, závěrečný test, obhajoba závěrečné práce

Poznámka: rozvrh je přizpůsobitelný požadavkům účastníků, pokud se celá skupina kompromisně dohodne na úvodním online setkáni.

UČEBNÍ OSNOVY A PLÁNY

AKR4: UX/UI design – Interaktivní animace aplikace

Principy UX/UI designu a interakce

  • Co je UX/UI design – specifika designování pro interaktivní obrazovky
  • Co je interaktivní design
  • Ještě dříve než začneme vyrábět produkt – design & prototyping
  • Nejčastěji interaktivní digitální produkty
  • Vývoj a životní cyklus interaktivních digitálních produktů
  • UI: Vizuální složka rozhraní produktu – design, layout
  • UX: Uživatelská složka rozhraní produktu – struktura, navigace, uživatelská přístupnost
  • Teorie interakce pro produkty na mobilních obrazovkách
  • Teorie multimédií – technologické a funkční principy
  • Software a vývojová prostředí pro interaktivní animace a aplikace
  • Praktická doporučení

Adobe XD / Figma I. – základní softwarový trénink se zaměřením na návrh prototyu aplikace

ROZHRANÍ: Design (XD) / Draft (Figma)

  • Rozhraní návrhu návrhu,
  • Vytváření projektů,
  • Oblasti návrhu,
  • Zoming a navigace v dokumentech,
  • Text,
  • Systémový nástroj pro správu písem,
  • Základní nástroje pro geometrické tvary,
  • Nástroj Pero,
  • Kombinování tvarů,
  • Barvy, přechody, výplně,
  • Import grafiky – bitmapy, vektory, nativní soubory AI, PS (XD),
  • Správa objektů Assets, vrstvy,

ROZHRANÍ: Protoype (XD) / Wireframing (Figma)

  • Jak funguje prototypování,
  • Spojování obrazovek,
  • Propojení obrazovek pomocí objektů,
  • Možnosti časování animací a přechodů,

SPECIÁLNÍ FUNKCE PRO PROTOTYPING

  • UI Kits – hotové ikony prvků a rozhraní – Android, iOS, Windows,
  • Komponenty – koncept, práce,
  • Menu pluginů a rozšíření,
  • Export obsahu,

Ukázka prototypu webu od úplných základů až po funkční prototyp a export.

Adobe Animate I.+II. – rozšířený softwarový trénink se zaměřenm na animované reklamy a interativní design reklamních obrazovek

ZAČÍNÁME S APLIKACÍ ANIMATE

  • Rozhraní, příkazy, nástroje
  • Panely a plochy
  • Vytváření prvního dokumentu – platformy HTML5 Canvas, Adobe AIR
  • Panel Vlastnosti
  • Knihovna zdrojů Library
  • Časová osa
  • Vrstvy
  • Základní ovládání dokumentu – lupa, ručička

KRESLENÍ, VÝPLNE, TEXT

  • O režimech kreslení
  • Režim tvarů
  • Tahy a výplně tvarů – koncept, vybarvování, úpravy
  • Režimy kombinování tvarů
  • Režim objektu – koncept, vybarvovaní, úpravy
  • Zarovnání objektů
  • Přechody a vzorky
  • Průhlednost
  • Práce s textem – statický, dynamický

IMPORT MÉDIÍ

  • Import externí grafiky JPG, PNG
  • Import nativních souborů Illustratoru a Photoshopu
  • Import souborů Premiere Pro a AfterEffects
  • Import audia a videa

ANIMACE – MOTION TWEEN, SHAPE TWEEN

  • Princip animace a pohyblivé grafiky v Animatu
  • Tvorba a typy symbolů – movie clip, button
  • Instance symbolů
  • Motion tween – princip, použití v časové ose
  • Animovatelné vlastností symbolů
  • Editor pohybu
  • Vnořené animace a stavy – symboly, scény
  • Shape tween – animace tvarů
  • Přehled dalších speciálních animací – 3D, Morfing, IK, Warp, Rigs, Camera
  • Praktické tipy na časové ose

INTERAKTIVITA

  • O jazycích a platformách AIR / Action Script 3 a HTML5 Canvas / JavaScript
  • Panel Akce / Actions
  • Vestavěné knihovny skriptů / Code snippets
  • Odkazy (linky) a události tlačítek
  • Akce Stop a GoToFrame – řízení časové osi
  • Skripty pro načítání externího obsahu
  • Vestavěna knihovna komponent
  • Panel Component parameters
  • Knihovny tlačítek a zvuků
  • Knihovna výukových interakcí
  • Publikování obsahu HTML5 Canvas
  • Publikovanie videa – web, full HD, 4K
  • Publikování aplikací pro iOS a Android (Harman AIR)

Praktická a projektová část

  • Projekt 1 – animovaný reklamní banner (proužek), na kterém si procvičíte základní důležité postupy při práci v Adobe Animate – zejména vkládání objektů na časovou osu, jejich časování a základní animování. Export jako loop pohyblivé reklama HMTL5 Canvas, Video .mp4, Animated GIF. Možnosti použití: reklamní animované bannery, pohyblivé reklamy na reklamních obrazovkách, informační panely, animace pro webstránky a sociální média.
  • Projekt 2 – interaktivní reklamní banner (obrazovka mobilu), při kterém jako zdroj grafiky použijeme klasickou grafickou reklamu z Adobe Illustrator, který importujeme jako nativní projekt do Adobe Animate, rozanimujeme objekty a zároveň přidáme první interaktivitu k časové ose a obsluze události tlačítka. Export jako HTML5 Canvas a balíček .OAM. Možnosti použití: jako interaktivní reklamní bannery pro web, mobilní obrazovky a balíčky pro pohodlný export/import do jiných multimediálních projektů (hry, vzdělávací interakce, digitální publikace atd.).
  • Projekt 3 – interaktivní informační a navigační dotyková obrazovka pro návštěvníky a klienty, kteří absolvují interaktivní virtuální prohlídku a získají orientační informace o areálu provozu a službách. Prototyp projektu navrhneme v Adobe XD, který následně převedeme do aplikace Adobe Animate, kde jej prakticky vyrobíme. Projekt obsahuje animace, interaktivní prvky, vnitřní navigaci i multimédia (audio, video). Export jako HTML5 Canvas (verze přehlídky pro přístup z webu nebo pro dotykové obrazovky) a balíčky pro Android / iOS (mobilní aplikace).

Forma závěrečné zkoušky

  • závěrečný test (teorie, požadovaná úspěšnost 85%)
  • obhajoba závěrečné práce na vlastní téma – odvozené z Projektu 3

Studijní materiály

  • interaktivní přednášky, demonstrace, simulace, elektronické testy, podrobné videokurzy o software (slovensky a anglicky), odborná školení
  • >> Přejít do online učebny

Knihovna

Software pro studium našich kurzů

  • ADOBE: Na  stránce www.adobe.com si  nejprve vytvořte bezplatný účet Adobe ID. Jako účastníci řádného státem akreditovaného studia máte nárok na zakoupení studentské verze Creative Cloud za 19,50 € / měsíc, s kompletní funkčností!  Ušetříte až 65% z ceny za celý rok!
  • Pro vzdělávací program AKR4: UX/UI design – interaktivní animace a aplikace si stáhněte a nainstalujte Adobe XD (alebo Adobe Figma) a Adobe Animate z rozhraní Creative Cloud.

VÍCE INFO:
Tel.: 0703 351 198
Email: info@mlearning.cz