DESB81 Figma: Od návrhu po prototyp

Filozofická fakulta
podzim 2024
Rozsah
0/2/0. 5 kr. Ukončení: z.
Vyučováno synchronně online
Vyučující
Petr Kosnar (přednášející), PhDr. Ladislava Zbiejczuk Suchá, Ph.D. (zástupce)
Bc. Martin Puškáč, MBA (přednášející)
Mgr. Simona Kramosilová (cvičící)
PhDr. Ladislava Zbiejczuk Suchá, Ph.D. (cvičící)
Garance
Petr Kosnar
Katedra informačních studií a knihovnictví – Filozofická fakulta
Kontaktní osoba: Mgr. Alice Lukavská
Dodavatelské pracoviště: Katedra informačních studií a knihovnictví – Filozofická fakulta
Rozvrh
každou lichou středu 16:00–17:40 Virtuální místnost
Předpoklady
Kurz je otvorený pre široké publikum vrátane kreatívcov a dizajnérov, ktorí majú záujem o návrh digitálnych rozhraní pomocou nástroja, ktorý sa stal dnes už prakticky štandardom. Nevyžaduje sa žiadna predchádzajúca skúsenosť s Figma alebo akýmkoľvek iným dizajnovým nástrojom. Predpokladá sa základná znalosť konceptov ako používateľská cesta a informačná architektúra.
Omezení zápisu do předmětu
Předmět je určen pouze studentům mateřských oborů.

Předmět si smí zapsat nejvýše 18 stud.
Momentální stav registrace a zápisu: zapsáno: 19/18, pouze zareg.: 5/18
Mateřské obory/plány
Cíle předmětu
Cieľom tohto kurzu je zoznámiť účastníkov s nástrojom Figma – od základov až po tvorbu jednoduchého, no funkčného prototypu pripraveného na používateľské testovanie.
Výstupy z učení
Počas modulu budú účastníci pracovať na návrhu mobilnej aplikácie alebo webovej stránky podľa vopred stanoveného zadania, s cieľom vytvoriť na záver funkčný prototyp obsahujúci aspoň jednu používateľskú cestu.
- Komplexné zoznámenie s Figma a FigJam: Naučíte sa základy aj pokročilé funkcie, ktoré vám umožnia efektívne navrhovať digitálne rozhrania.
- Dizajnové princípy: Spoznáte, ako pracovať s farbami, štýlmi a efektmi, aby váš dizajn vynikol.
- Praktické zručnost: Vytvoríte vlastné návrhy a prototypy pripravené na používateľské testovanie.
- Pokročilé nástroje: Naučíte sa pracovať s komponentmi, symbolmi a ako efektívne organizovať svoje projekty.
- Interakcie a animácie: Ovládnete základné a pokročilé techniky, ktoré oživia vaše návrhy.
- Spätná väzba: Získate cenné poznatky od lektora a ostatných účastníkov, čo vám pomôže v ďalšom zlepšovaní vašich zručností.
Osnova
  • 1. Úvod a predstavenie lektora - Začneme ľahko a príjemne - krátkym zoznámením sa s kurzom a jeho lektorom. Zistíte, aké sú ciele kurzu a čo všetko vás čaká. Nastavíme účty v nástroji Figma, aby ste boli pripravení pustiť sa do práce. Taktiež vám lektor predstaví spôsob vedenia kurzu a poskytne tipy, ako z neho vyťažiť maximum. - Základné predstavenie celého kurzu, harmonogramu a cieľov pre splnenie kurzu - Predstavenie lektora, Martin Puškáč, a spôsobu vedenia kurzu a komunikácie počas aj mimo hodín kurzu - Vytvorenie účtov v nástroji Figma
  • 2. Figma a FigJam - čo to vlastne je (1 hodina) - Ponorte sa do sveta Figma a FigJam - spoznáte základné nástroje, ich rozdiely a praktické využitie. Ukážeme si, ako sa navigovať v základnom rozhraní (UI 2 / UI 3) a aké funkcie vám môžu uľahčiť prácu. Predstavíme si aj FigJam ako nástroj na brainstorming a tímovú prácu. - Predstavenie základných nástrojov a ich rozdielov a využití - Ukážka základného rozhrania - Využitie nástroja FigJam v praxi
  • 3. Dizajnové princípy a ich aplikácia (4 hodiny) - Čaká nás hlbší pohľad na dizajnové princípy. Prejdeme si nástroje, panely a postupy, ktoré vám pomôžu pri práci s objektmi, vrstvami a mriežkami. Naučíte sa efektívne využívať farby, štýly a efekty, aby váš dizajn vynikol a zaujal. - Prehliadka nástrojov a panelov - Práca s objektami, vrstvami a mriežkou pre rozloženie obsahu - Farby, štýly, efekty
  • 4. Vytvorenie základného návrhu (4 hodiny) - Teraz sa pustíme do praxe! Spoločne vytvoríme návrh podľa zadania alebo vlastného projektu. Naučíte sa, ako používať interakcie a animácie, a ako pracovať s externými zdrojmi a komunitnými rozšíreniami. Tento blok je o skutočnom vytváraní a experimentovaní. - Praktická tvorba návrhu podľa zadania alebo vlastného projektu - Použitie interakcií a animácií, práca s externými zdrojmi a komunitnými rozšíreniami
  • 5. Pokročilejšie funkcie (1 hodina) - Zameriame sa na to, ako organizovať projekty a súbory, pracovať s komponentmi a symbolmi. Naučíte sa, ako efektívne exportovať a prezentovať svoje dizajny. Tento krátky, ale dôležitý modul vám pomôže zvládnuť aj tie najpokročilejšie úlohy v Figme. - Organizácia projektov a súborov - Práca s komponentmi a symbolmi - Export a prezentácia dizajnov
  • 6. Prototypovanie a testovanie (3 hodiny) - Vytvoríme plne funkčný prototyp s minimálne jednou používateľskou cestou. Zameriame sa na to, ako zdieľať svoje návrhy a prototypy, aby sme získali hodnotnú spätnú väzbu. Tento modul vás pripraví na reálne testovanie a prezentáciu dizajnov. - Vytvorenie prototypu s aspoň jednou používateľskou cestou. - Zdieľanie návrhov a prototypov pre feedback
  • 7. Prezentácia a spätná väzba (2 hodiny) - Záverečný blok je venovaný prezentácii vašich projektov. Dostanete priestor ukázať, čo ste vytvorili, a získate cennú spätnú väzbu od lektora aj ostatných účastníkov. Spoločne sa pozrieme na to, čo bolo super, a kde je ešte priestor na zlepšenie. - Prezentácia projektov účastníkov a spätná väzba od lektora a ostatných účastníkov - Diskusia o vylepšeniach a ďalších krokoch
Výukové metody
Interaktívne prednášky s praktickými ukážkami.
Workshopová práca a individuálne projekty.
Skupinová diskusia a spätná väzba.
Metody hodnocení
Pre úspešné absolvovanie je nutné odovzdať funkčný prototyp podľa navrhnutej používateľskej cesty, zvládnutia praktických cvičení medzi lekciami. Treba vytvoriť:
• jednotlivé obrazovky pre zadaný user flow
• minimálne štyri štýly písma
• minimálne štyri komponenty
• minimálne štyri prvky využívajúce auto-layout
• klikateľný prototyp
Použite pluginy na vkladanie obrázkov (Unsplash) a ikon (Material Symbols, Icofinder alebo iné)
Další komentáře
Studijní materiály
Předmět je vyučován každoročně.
  • Statistika zápisu (nejnovější)
  • Permalink: https://is.muni.cz/predmet/phil/podzim2024/DESB81