Náročnost kurzu: 3/5 – středníPokročilá práce s programem. Předpokládá jistotu v ovládání počítače a základní znalost daného programu z předchozího kurzu nebo praxe. | Délka skupinového kurzu: 12 h, délka individuálního školení: 8 h
Nejbližší termín otevřeného kurzu: termín připravujeme | Další formy: individuální školení · firemní školení
Školení Prototypování a grafika webových stránek ve Figmě je určené začátečníkům, marketingovým pracovníkům, správcům webů, tvůrcům obsahu i všem, kdo chtějí připravovat přehledné návrhy webových stránek. Kurz je vhodný pro účastníky, kteří se podílejí na přípravě nového webu, landing page nebo úpravě stávajících stránek a potřebují své nápady převést do srozumitelného grafického návrhu.
Na školení si vysvětlíme, jakou roli má grafický návrh při tvorbě webu, čím se liší wireframe, vizuální návrh a kliknutelný prototyp a jak Figma pomáhá při komunikaci mezi zadavatelem, grafikem, vývojářem a klientem. Naučíte se pracovat s prostředím Figma, frames, vrstvami, mřížkou, textem, barvami, obrázky, ikonami, komponentami a základními styly.
Důraz je kladený na praktický postup od zadání přes návrh struktury stránky, vizuální styl a opakovaně použitelné prvky až po vytvoření interaktivního prototypu. Součástí kurzu je také příprava podkladů pro předání vývojáři, export grafických prvků a doporučení pro spolupráci mezi grafikem, klientem a kodérem.
Co se naučíte
- zorientovat se v prostředí Figma a používat základní nástroje pro návrh webu,
- pochopit rozdíl mezi wireframem, vizuálním návrhem a kliknutelným prototypem,
- navrhnout strukturu webové stránky nebo landing page podle zadání,
- pracovat s textem, barvami, obrázky, ikonami, mřížkou a vizuální hierarchií,
- vytvářet komponenty, styly a opakovaně použitelné prvky návrhu,
- připravit interaktivní prototyp pro prezentaci, připomínky a testování,
- exportovat grafické podklady a připravit návrh pro předání vývojáři,
- zkontrolovat návrh z pohledu použitelnosti, čitelnosti a responzivního zobrazení.
Osnova školení
U individuálního a firemního školení je možné osnovu přizpůsobit.
- Úvod do návrhu webových stránek ve Figmě
- role grafického návrhu při tvorbě webu
- rozdíl mezi wireframem, vizuálním návrhem a prototypem
- základní principy použitelnosti a čitelnosti webu
- požadavky na responzivní návrh pro různá zařízení
- nejčastější chyby při návrhu webových stránek
- jak Figma pomáhá při spolupráci zadavatele, grafika a vývojáře
- Práce v prostředí Figma
- založení souboru a orientace v pracovním prostoru
- frames, vrstvy, skupiny a zarovnávání objektů
- práce s mřížkou, vodítky a rozvržením stránky
- základní tvary, texty, obrázky a ikony
- organizace návrhu, pojmenování prvků a práce se stránkami
- základní doporučení pro přehlednou strukturu souboru
- Vizuální styl webu
- typografie a hierarchie nadpisů, textů a tlačítek
- barvy, kontrast a základní pravidla přístupnosti
- práce s obrázky, ikonami a jednoduchou grafikou pro web
- rozvržení obsahu, whitespace a vizuální rytmus stránky
- návrh konzistentního vzhledu pro celý web
- kontrola čitelnosti a přehlednosti návrhu
- Wireframy a návrh struktury stránky
- analýza zadání a převod požadavků do návrhu
- návrh informační architektury a logiky stránky
- tvorba nízkoúrovňového a podrobnějšího wireframu
- návrh homepage, podstránky nebo landing page
- kontrola srozumitelnosti, priorit a uživatelské cesty
- úprava návrhu podle cíle webu a potřeb návštěvníka
- Komponenty a efektivní práce s návrhem
- tvorba opakovaně použitelných prvků webu
- práce s komponentami, variantami a stavy prvků
- styly textů, barev a základní design systém
- příprava jednoduché knihovny prvků
- praktická stavba vybraných částí webu
- výhody komponent při úpravách a rozšiřování návrhu
- Interaktivní prototypování
- propojení obrazovek a nastavení interakcí
- tvorba klikatelného prototypu pro prezentaci klientovi nebo týmu
- základní přechody, overlaye a stavy prvků
- testování průchodu stránkou a kontrola logiky návrhu
- sdílení prototypu pomocí odkazu
- komentáře a zpětná vazba ve Figmě
- Příprava podkladů a předání návrhu
- kontrola návrhu před exportem a předáním
- export obrázků, ikon a grafických prvků pro web
- příprava specifikací pro vývojáře
- pojmenování vrstev, komponent a obrazovek pro snadnější orientaci
- praktická doporučení pro spolupráci grafik, klient a kodér
- nejčastější problémy při předání návrhu do realizace
- Praktické cvičení a závěrečný výstup
- návrh jednoduché webové stránky nebo landing page
- vytvoření základního vizuálního stylu
- vytvoření základních komponent
- příprava klikatelného prototypu
- prezentace návrhu a společná zpětná vazba
- shrnutí doporučeného postupu při návrhu webu ve Figmě
Předchozí znalosti a návazná školení
Úvod do tvorby webových stránek
Před školením doporučujeme běžnou uživatelskou znalost internetu a základní orientaci v práci s webem. Výhodou je absolvování kurzu Úvod do tvorby webových stránek, ale není to podmínkou. Zkušenost s Figmou není nutná.
Po absolvování školení můžete pokračovat:Verze programu
Otevřené kurzy probíhají na aktuální verzi programu. Lektor po dohodě s účastníky upozorní na rozdíly starších verzí.