ONLINE ŽIVÝ KURZ
HERNÍ UX/UI: 2D GRAFIKA
Lukáš Caska
Lead UI/UX designér v herním studiu Bohemia Interactive12. března
09. května
Připrav se na úspěšný start kariéry v gamingu!
Ukaž, co v tobě je, a staň se hvězdou gamedevu. Jestli tě baví grafika, ilustrace nebo prostě miluješ videohry, připrav se na novou kariéru. V kurzu dostaneš všechno, co potřebuješ pro kvalitní prezentaci u pohovoru.
Naučíš se oživit hry skrze 2D assety, které vypadají dobře a taky perfektně zapadnou do herního světa. V rámci UI a UX designu prozkoumáš, jak se tvoří herní interface a jak přemýšlejí hráči. Naučíš se testovat UX, aby hra byla nejenom koukatelná, ale hlavně hratelná. Omrkneš základy game designu, protože UI designéři často pomáhají navrhovat i mechaniky samotné. A taky získáš přesah do animace, microcopy nebo herních enginů.
Software: Adobe Illustrator, Adobe Photoshop, Figma
více informací
12. března
09. května
Lektor
LUKÁŠ CASKA
UI/UX designér z Vysočiny s focusem na gamedev, grafický design a marketingMomentálně pracuje na Arma Reforger a Arma 4 ve studiu Bohemia Interactive.
Vede tým UI designérů, udává vizuální směr Interface a spolupracuje s front-end týmem.
V oborech jako je grafický design, UX a UI se pohybuje okolo 8 let.
Má zkušenosti z agentury, zejména z webového prostředí, a z in-house herního studia.
Jako UX designér, kreativec a grafik pracoval pro klienty, jako jsou Trust Gaming, Česká mincovna, Fann, Sonnentor, CK Metal, Pro-vlasy, Český ráj, T-Led, Nábytek Aldo, Ošatka.cz a další.
Studoval na SUŠG v Jihlavě obor Multimediální tvorba a Marketingová studia ve Zlíně.
Pro zábavu se věnuje indie vývoji, sázení rostlin a vaření.
Kurz UI a UX designu ocení:
UX/UI designéři a weboví designéři s max. 2 lety praxe Tvůj design může oživit i svět gamingu. V kurzu herního designu se naučíš pracovat s Photoshopem a Illustratorem, navrhnout design v souladu s použitelností a UX/UI zásadami a vytvoříš si profi portfolio.
Začínající grafičtí designéři Tohle bude tvoje nejlepší rozhodnutí a první krok ke kariéře v herním průmyslu. Naučíš se tvořit assety, které dokonale zapadnou do hry. Po kurzu se vyznáš v herních mechanismech a propojíš hráče se hrou.
2D ilustrátoři a umělci Najít správný balanc mezi estetikou a herní funkčností může být docela výzva. V kurzu herního designu se to naučíš. Navíc poznáš principy UX/UI a dokážeš podle nich sestavit vhodné prostředí do gamesky.
Program
Úterý
12/03
12/03
Hello world – Úvod do game designu a UI/UX
- Vysvětlení klíčových pojmů a konceptů UI, UX nebo design
- Rozdíl mezi UI, UX designérem a game designérem
- Jak vypadají procesy a tasky UI/UX designéra a koncept kurzu
- Než začneme aneb jak a proč dělat research, ideaci a koncept
- Domácí úkol: Level 1: Vytvoř moodboard pro digitální hru.
Čtvrtek
14/03
14/03
Začínáme s UX a.k.a. player centered design
- Co je UX v kontextu gamedevu
- Proč je UX důležité a proč ho praktikovat žít
- Principy herní User Experience
- Intuitivnost a simplicita – Nenuť je přemýšlet
- Aesthetic usability principle – Hezčí je funkčnější
- Multiplatformnost – Dovol všem hrát
- Jak vydefinovat herní cílovku a jak připravit Player personu
- Design together: definice cílovky a vytvoření Player persony
Úterý
19/03
19/03
Jak na user flow
- Uživatel ve středu problému – Starej se o hráče
- UX „zákony“ – Miller’s Law, Hick’s law, Von Restorff Effect a Occamova břitva
- Flow – Nech hráče se bavit
- Microcopy – co to je a jak na něj?
- Jak vypadá a k čemu je User flow a interakční mapa?
- Jak navrhnout user flow a jak ho používat
Čtvrtek
21/03
21/03
UX testování
- UX testování – nenuť hráče přemýšlet
- Proč testovat UX svojí hry?
- Techniky pro UX testování, kvantitativní vs. kvalitativní testování, playtesty a interview
- Inkluzivita v gamedevu
- Jak přemýšlet nad použitelností/usablitou
- Design pro disability – vjemové, kognitivní a motorické
- Domácí úkol: Level 2: Otestuj libovolnou hru a sepiš feedback.
Úterý
26/03
26/03
UX/UI design 101
- Principy prototypování a wireframingu v gamedevu
- Jak a proč vytvářet wireframy a jak mohou vypadat
- Úvod do software Figma
- Rozhraní Figmy a základní nástroje
- Práce s assety a layouty
- Dynamické chování prvků a layoutů
- Prototypování, jak propojit wireframe dohromady
- Domácí úkol: Level 3: Vytvoř wireframe pro 3 screeny – např. Main menu, Choose your level of difficulty selection.
Čtvrtek
28/03
28/03
UX/UI Design 102
- Principy vizuálního designu
- Layout kompozice a white space
- Typografické minimum a na co dát pozor při výběru písma
- Teorie barev – color coding, priming a asociace
- Tvary a vizuální kódování
- UI skinning – o co se jedná a jak z wireframu vytvořit Mockup
- Vytváření mockupů a na co si dát pozor
- Design Together: UI skinning a tvorba mockupů ve Figmě
- Domácí úkol: Level 4: Oskinuj 3 wireframy z předchozího cvičení.
Úterý
02/04
02/04
Grafika pro UI designéry
- Role grafického designu v UI
- Úvod do Adobe Illustrator
- Rozhraní Adobe Illustrator a základní nástroje.
- Práce s vektory – vektor vs. bitmapa
- Základní nástroje, tvary, plátna, pero, cestář
- Grafické cvičení – tvorba ikony
Čtvrtek
04/04
04/04
Grafika pro UI designéry vol. 2
- Gradienty, vektorizace, symboly a efekty
- Masky, dynamické kopie, globální barvy, perspektivní mřížka
- Design together: set ikon
- Best practices při vytváření ikon a grafiky do hry
- Pixel perfect
- Power of 2/4
- LOD/Mip-mapping
- Domácí úkol: Level 5: Vytvoř set 3 ikon pro herní achievementy.
Úterý
09/04
09/04
Everything comes together
- Jak vytvořit mockup pomocí všeho, co jsme se naučili
- Pipeline tvorby UI od ideace až po polishing
- Paretovo pravidlo při UI/UX designu
- Ovládání, responzivita, lokalizace – na co myslet při navrhování
- Jak dávat a jak dostávat feedback
Čtvrtek
11/04
11/04
Konzultace a feedback k úkolům
- První veřejné feedback kolečko – pojďme se podívat na achievementy a pojďme si dát feedback.
Úterý
16/04
16/04
Mission Bitmapossible – Úvod do Adobe Photoshop
- Rozhraní Adobe Photoshop
- Bitmapová grafika od pixel artu po hyppereal
- Základní nástroje Adobe Photoshop
- Práce s vrstvami, štětcem, tvary a maskam
- Tvorba 2D grafiky
- Design together: pixel art asset
Čtvrtek
18/04
18/04
Mission Bitmapossible 2 – Adobe Photoshop pokračování
- Práce s fotografiemi, maskování a retuš
- Adjustace fotografií
- Jak na fotomontáže
- Compositing, různé nástroje
- Design together: photobashing
- Bonusový domácí úkol: Level 6: Vytvoř koncept artu pro výběr hráče pomocí photobashingu z volně dostupných zdrojů.
Úterý
23/04
23/04
It’s alive – Úvod do animace
- Základní principy animace
- Teorie animace – fázování, frame by frame a techniky
- Animace v Adobe Photoshop
- Práce s časovou osou
- Práce s 2D elementy
- Jednoduché animování 2D elementů
- Design together: animace z předem připravených podkladů
Čtvrtek
25/04
25/04
Systematic design, designatic system
- Tvorba design systému
- Co je design systém
- Proč je potřeba
- Jak ho vytvořit?
- Co je widget library v gamedevu a jak se tvoří
- Stavy elementů
- Color and shape coding
- Responzivita a lokalizace
- Technická příprava a design dokumenty
- iDesign together: tvorba ukázkového widgetu
- Domácí úkol: Level 7: Dokonči design system z hodiny v softwaru Figma – individuální zadání.
Úterý
30/04
30/04
When UI and 2D art comes together
- Různé techniky 2D herní grafiky
- Ukázky assetů z různých her a inspirace
- Přesah UI do herní 2D grafiky
- Tvorba 2D assetů pro digitální hry
- Tvorba 2D propů a assetů pro tvorbu levelu
- Tvorba 2D textur pro assety
- Tvorba jednoduchých levelů
- Domácí úkol: Level 8: Zamysli se nad závěrečným projektem a vymysli si koncept.
- Samostatný projekt – koncept fiktivní hry – individuální zadání, dle schopností účastníka kurzu.
Čtvrtek
02/05
02/05
Projekt a plánování
- Zadání pro závěrečný projekt
- Step by step rekapitulace všeho, co jsme se naučili, a jak to aplikovat v projektu
- Jak projekt začít a plánovat – agilní plánování
- Nástroje pro efektivní plánování
- Různé systémy pro práci
- Spolupráce s dalšími odděleními
Úterý
07/05
07/05
Jak se udržet kreativní
- Ukázka vzorového projektu
- Inspirační okénko nad 2D indie hrami
- Jak se udržet ve flow kreativní práce
- Jak být kreativní na povel
- Proč nemultitaskovat
- Různé kreativní techniky
- Brainstorming a konzultace + otázky
Čtvrtek
09/05
09/05
This is the end – závěrečná hodina
- Feedback a prezentace závěrečných projektů
- Jak se uplatnit v game devu jako UI designér
- Jak probíhá přijímací řízení a jak se na něj připravit
VÍCE
Tohle si odneseš z kurzu UX a UI designu:
Profi portfolio A v něm wireframy a mockupy pro 3 screeny, včetně moodboardu a researche, set 3 ikon pro herní achievementy, design system pro herní UI a závěrečný projekt – koncept fiktivní hry, ke kterému dostaneš Lukášův odborný feedback.
Praktické skills Definuješ cílovku pro herní koncept, vytvoříš personu a navrhneš user flow. Dokážeš se na hru podívat očima hráče, otestovat ji a vytvořit feedback. Navrhneš wireframy i mockup ve Figmě a bitmapový asset ve Photoshopu.
Základy v oboru V kurzu herního designu získáš všechny potřebné základy, které ti pomůžou nastartovat kariéru v gamingu. Navíc jsou znalosti UX hodnotné a univerzální – využiješ je i v dalších oborech (marketing, sales, grafický design, webdesign a další).
Od základů UX/UI designu a 2D grafiky do gamedev!
12. BŘEZNA
09. května
VÍCE INFO
VYPLŇ REGISTRAČNÍ FORMULÁŘ, PŘIPOJ SE K NÁM A BUĎ KREATIVNÍ SKVOTER NEBO SKVOTERKA!
Pro nové skills pojď na SKVOT. Náš sales tým se s tebou spojí ASAP a získáš všechny potřebné informace o obsahu kurzu a jeho ceně.