UI/UX Design Masterclass

UI/UX Úvod a základy

• 1.1 Proces návrhu UI/UX

  Krok za krokem projdeme celý návrhový proces – od prvotního nápadu přes skicování až po testování. Naučíš se pracovat efektivně a vyhnout se nejčastějším chybám.

• 1.2 Základy FIGMA

  Doba tvorby závisí na rozsahu projektu, ale obvykle trvá 4–8 týdnů. Vždy se přizpůsobujeme vašim časovým požadavkům.

• 1.3 Web a rozvržení

  Proč některé weby vypadají skvěle a jiné jsou chaos? Naučíš se, jak správně skládat prvky na stránce, aby byla přehledná, funkční a vizuálně atraktivní.

UX výzkum

• 2.1 Design Brief

  Nezačínej design bez jasného cíle! Ukážeme si, jak definovat zadání, aby se projekt nerozpadl a měl jasnou vizi.

• 2.2 Project Canvas

  Naučíš se, jak si správně vymezit rozsah projektu, aby ti neutekl pod rukama. Prakticky si vyzkoušíš techniku Project Canvas, kterou používají profíci.

• 2.3 Analýza uživatelů

  Jak zjistit, co uživatelé skutečně chtějí? Naučíš se sbírat relevantní data a správně je interpretovat, aby design odpovídal reálným potřebám lidí.

• 2.4 Uživatelská persona

  Vymyslíme si pár „virtuálních“ uživatelů, kteří ti pomohou pochopit, jak lidé přemýšlejí. Díky tomu budeš vědět, pro koho vlastně designuješ.

• 2.5 Mapa empatie / emocí

  Design není jen o logice, ale i o emocích. Ukážeme si, jak se vcítit do uživatele a pochopit jeho frustrace i radosti při používání produktu.

• 2.6 Cesta zákazníka

  Nakreslíme mapu, která ukáže, jak uživatel prochází tvým produktem – od prvního setkání až po finální interakci. Odhalíš tak slabá místa, která by ho mohla odradit.

Prototyping a tok uživatele

• 3.1 Navigační design

  Naučíš se vytvářet intuitivní navigaci, která uživatele povede správným směrem. Už žádné ztrácení na webu!

• 3.2 Informační architektura

  Zjistíš, jak strukturovat obsah tak, aby byl přehledný a logický. Uživatelé se na webu snadno zorientují a rychle najdou, co hledají.

• 3.3 Tok uživatele

  Pochopíš, jak uživatelé přemýšlí a jak jim usnadnit cestu k cíli. Naučíš se vytvářet plynulé a přirozené uživatelské zážitky.

• 3.4 Wireframes – Drátové modely

  Osvojíš si základy tvorby wireframů a naučíš se, jak efektivně vizualizovat strukturu stránky. Díky tomu bude tvůj design funkční a promyšlený.

Psychologie designu

• 4.1 Vizuální principy

  Proč některé designy vypadají skvěle a jiné tě ruší? Pochopíš základní principy vizuálního uspořádání – kontrast, rovnováhu, hierarchii – a naučíš se je používat správně.

• 4.2 Moodboard

  Dáme dohromady inspiraci pro tvůj projekt! Naučíš se vytvářet moodboardy, které pomáhají definovat atmosféru a celkový vizuální styl.

• 4.3 Ikonografie

  Ikony jsou malé, ale jejich význam je obrovský. Ukážeme si, jak je vybírat a navrhovat tak, aby byly jasné, čitelné a dokonale zapadaly do designu.

• 4.4 Obrázky / grafika

  Naučíš se vybírat a upravovat obrázky tak, aby podporovaly tvůj design a neodváděly pozornost. Ukážeme si, jak správně pracovat s grafikou v rozhraní.

• 4.5 Barvy

  Co o produktu řekne jeho barevnost? Pochopíš, jak kombinovat barvy tak, aby byly nejen estetické, ale i funkční a podporovaly čitelnost a uživatelskou zkušenost.

• 4.6 Typografie

  Naučíš se, jak vybrat správné písmo a jak s ním pracovat, aby bylo dobře čitelné na různých zařízeních. Už žádné nevhodné fonty!

• 4.7 Onboarding

  První dojem rozhoduje. Naučíš se, jak vytvořit onboarding proces, který uživatele provede aplikací nebo webem tak, aby se cítili jako doma.

Design systém

• 5.1 Atomický design

  Ukážeme si, jak rozdělit UI do malých částí, které pak poskládáš do kompletního rozhraní. Tím ušetříš spoustu času a usnadníš si práci.

• 5.2 Design systémy

  Naučíš se sestavit efektivní designový systém, který ti pomůže udržet konzistenci napříč celým produktem.

• 5.3 Vstupní stránka

  Jak přimět uživatele, aby na stránce zůstal? Naučíš se vytvářet atraktivní a funkční vstupní stránky, které dokážou konvertovat návštěvníky na zákazníky.

• 5.4 Grid - Mřížka / Responsive

  Zjistíš, jak správně používat gridy a navrhovat rozvržení, které bude vypadat skvěle na jakémkoli zařízení.

• 5.5 Tlačítka

  Tlačítka jsou klíčovým prvkem interakce – naučíš se je navrhovat tak, aby byla jasná, funkční a vizuálně přitažlivá.

• 5.6 Animace / interakce

  Trocha pohybu neuškodí! Naučíš se používat animace a mikrointerakce, které dodají tvému designu šmrnc a usnadní uživatelům orientaci.

• 5.7 Formulářové prvky

  Formuláře jsou všude, ale ne každý je umí udělat správně. Naučíš se, jak navrhovat přívětivé a efektivní formuláře, které nebudou uživatele frustrovat.

• 5.8 Tokeny

  Zjistíš, jak vytvářet designové tokeny, které ti pomohou udržet konzistenci a usnadní implementaci designu v kódu.

• 5.9 Tmavý režim

  Dark mode je dnes populární a ty se naučíš, jak ho správně navrhnout, aby byl nejen estetický, ale i funkční.

• 5.8 Tokeny

  Zjistíš, jak vytvářet designové tokeny, které ti pomohou udržet konzistenci a usnadní implementaci designu v kódu.

UI Rozvržení - Výzvy

• 6.1 E-commerce

  Naučíš se, jak navrhnout přehledné rozhraní pro online obchody, které zákazníky neodradí, ale naopak je provede až k dokončení nákupu.

• 6.2 Blog

  Jak správně navrhnout blog, aby byl čitelný, přehledný a vizuálně zajímavý? Ukážeme si nejlepší postupy pro tvorbu magazínového rozvržení.

• 6.3 Portfolio

  Tvůj design může být skvělý, ale pokud ho neumíš dobře prezentovat, nikdo si ho nevšimne. Naučíš se, jak vytvořit vlastní UX/UI portfolio, které zaujme.

• 6.4 Chat

  Navrhování chatovacích aplikací má svá pravidla. Ukážeme si, jak pracovat s bublinami, indikátory zpráv a interakcemi, aby chatování bylo co nejpřirozenější.

• 6.5 Music Player

  Jak vytvořit přehrávač hudby, který bude snadno ovladatelný, vizuálně atraktivní a přehledný? Naučíš se principy návrhu interaktivních multimediálních aplikací.

• 6.6 Aplikace taxi

  Navrhneš aplikaci pro objednávání taxi – od mapy až po detaily objednávky. Důraz bude na jednoduchost a rychlost celého procesu.

• 6.7 Dashboard

  První dojem rozhoduje. Naučíš se, jak vytvořit onboarding proces, který uživatele provede aplikací nebo webem tak, aby se cítili jako doma.

Soft-skills dovednosti

• 7.1 Přístupnost v HTML

  UX musí být pro každého – i pro lidi se zrakovým nebo pohybovým omezením. Ukážeme si, jak navrhovat rozhraní, která budou skutečně inkluzivní.

• 7.2 Použitelnost

  Jak poznáš, že tvůj design funguje? Naučíš se metody testování použitelnosti a triky, jak zlepšit uživatelský zážitek na základě zpětné vazby.

• 7.3 CV životopis / LinkedIn

  Nestačí být skvělý UX/UI designér – musíš to umět i prodat. Ukážeme si, jak vytvořit poutavé CV a optimalizovat LinkedIn profil, aby tě firmy našly samy.

• 7.4 Export souborů, spolupráce s programátorem

  Nestačí být skvělý UX/UI designér – musíš to umět i prodat. Ukážeme si, jak vytvořit poutavé CV a optimalizovat LinkedIn profil, aby tě firmy našly samy.

Závěrečná prezentace projektu

• 8.1 Případová studie

  Case study je něco, co tě může dostat do práce snů. Ukážeme si, jak ji správně sestavit – od výzkumu až po finální řešení.

• 8.2 Prezentace finálních projektů

  Na závěr celého kurzu představíš svůj projekt, dostaneš zpětnou vazbu a odneseš si cenné zkušenosti, které využiješ v reálném světě.