Prototypování a grafika webových stránek ve Figma

Cíle kurzu

Obsah kurzu

• Ú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ředpoklady

Návaznosti