Szkolenie Visual design i UX – projektowanie wizualne produktów cyfrowych
Poziom
ŚredniozaawansowanyCzas
24h / 3 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie Visual design i UX – projektowanie wizualne produktów cyfrowych
Szkolenie rozwija umiejętności projektowania czytelnych, spójnych i użytecznych interfejsów produktów cyfrowych. Uczestnicy pracują z zasadami komunikacji wizualnej, psychologią poznawczą, modelami mentalnymi, heurystykami użyteczności, typografią, kolorem, kompozycją oraz wzorcami komponentów UI. Podczas warsztatów analizują istniejący produkt, porządkują jego hierarchię wizualną, projektują wybrane elementy interfejsu i przygotowują responsywny prototyp do podstawowej weryfikacji z użytkownikami oraz przekazania zespołowi deweloperskiemu. Program uwzględnia dostępność cyfrową, projektowanie inkluzywne, spójność systemu projektowego oraz ograniczanie ryzyka błędów poznawczych i manipulacyjnych wzorców.
Dla kogo jest to szkolenie?
Dla projektantów UX/UI, grafików i product designerów, którzy chcą rozwinąć warsztat projektowania wizualnego produktów cyfrowych
Dla product managerów, product ownerów i osób decyzyjnych uczestniczących w ocenie interfejsów oraz planowaniu zmian produktowych-
Dla badaczy UX i analityków, którzy chcą przekładać wyniki badań oraz dane zastane na konkretne decyzje dotyczące interfejsu
-
Dla specjalistów marketingu, komunikacji i e-commerce współpracujących przy projektowaniu stron, aplikacji oraz usług cyfrowych
-
Dla osób współpracujących z programistami, które chcą przygotowywać czytelne prototypy, stany komponentów i materiały do przekazania projektu
-
Dla uczestników posiadających podstawową znajomość procesu projektowego oraz umiejętność przygotowania prostej makiety w wybranym narzędziu do projektowania interfejsówtych, którzy mają kontakt z developerami i chcą się dowiedzieć jak poprawnie przygotować prototyp, żeby łatwiej było go wdrożyć na produkcji.
Czego się nauczysz na szkoleniu?
- Przeanalizujesz interfejs z wykorzystaniem zasad Gestalt, modeli mentalnych i heurystyk użyteczności oraz udokumentujesz najważniejsze problemy
- Zaprojektujesz hierarchię wizualną ekranu z wykorzystaniem typografii, koloru, kontrastu, przestrzeni i kompozycji
- Przygotujesz spójne komponenty UI wraz z ich stanami, zachowaniem i podstawowymi zasadami dostępności
- Zaprojektujesz nawigację, formularz, selektory, filtry, alerty, tabelę oraz mechanizm wyszukiwania dopasowane do kontekstu użycia
- Zastosujesz zasady Atomic Design i systemów projektowych do porządkowania komponentów, wzorców i reguł wizualnych
- Przygotujesz responsywne warianty widoku dla urządzeń mobilnych i desktopowych.
- Zbudujesz prototyp wybranego przepływu użytkownika oraz przygotujesz go do podstawowej weryfikacji z użytkownikami
- Zweryfikujesz kontrast, czytelność, kolejność informacji, obsługę klawiaturą i komunikaty błędów na podstawowym poziomie zgodności z WCAG 2.2
- Rozpoznasz manipulacyjne wzorce projektowe, ryzyka wykluczenia użytkowników oraz założenia wymagające dalszej walidacji
- Przygotujesz opis komponentów, stanów i zachowań ułatwiający przekazanie projektu zespołowi deweloperskiemu
Program szkolenia
Dzień 1
Moduł 1 – Podstawy i organizacja procesu
- Definicja designu oraz zakres projektowania produktów cyfrowych
- Komunikacja wizualna oraz jej funkcje informacyjne, nawigacyjne i perswazyjne
- Estetyka i użyteczność – główne role designu oraz kryteria oceny interfejsu
- Psychologia projektowania i zasady Gestalt – bliskość, podobieństwo, ciągłość, domknięcie i figura–tło
- Modele mentalne użytkowników – oczekiwania, wcześniejsze doświadczenia i zgodność z logiką interfejsu
- Heurystyki Nielsena – analiza użyteczności, komunikaty systemowe, kontrola użytkownika i zapobieganie błędom
- Narzędzia do projektowania i prototypowania – zakres zastosowań, poziomy szczegółowości i organizacja plików
- Proces projektowy i rola UI – zależności między badaniami, architekturą informacji, projektowaniem interakcji i warstwą wizualną
- Struktura stron i aplikacji – architektura informacji, hierarchia treści, przepływy użytkownika i kluczowe ekrany
- Percepcja i psychologia komunikacji wizualnej – uwaga, obciążenie poznawcze, skanowanie treści i priorytety informacji
- Typografia cyfrowa – dobór krojów, hierarchia, skala typograficzna, interlinia, długość wiersza i czytelność
Dzień 2
Moduł 2 – Wzorce i zasady komunikacji wizualnej
- Kolor – modele barw, palety, kontrast, znaczenie kulturowe i podstawy dostępności
- Kolor w interfejsach cyfrowych – role semantyczne, stany komponentów, komunikaty systemowe i tryb ciemny
- Spójność wizualna – reguły, komponenty, wzorce, nazewnictwo i konsekwencja między ekranami
- Przestrzeń i kompozycja – siatki, odstępy, marginesy, padding, rytm, wyrównanie i hierarchia
- Obraz i tekst – czytelność, kontrast, kadrowanie, nakładanie treści, tekst alternatywny i dobór materiałów wizualnych
Moduł 3 – Elementy interfejsu UI
- Nawigacja i menu – hierarchia, orientacja użytkownika, stany aktywne, nawigacja mobilna i obsługa klawiaturą
- Przyciski – anatomia, hierarchia akcji, etykiety, rozmiary, stany, informacja zwrotna i dostępność
- Formularze – struktura, etykiety, pola wymagane, walidacja, komunikaty błędów, autouzupełnianie i ochrona danych
- Selektory – pola wyboru, przełączniki, listy rozwijane, radio buttony oraz logika pojedynczego i wielokrotnego wyboru
- Ikony – znaczenie, spójność stylistyczna, rozmiar, podpisy, obszar interakcji i dostępność
- Tabele – hierarchia danych, nagłówki, gęstość informacji, responsywność, zaznaczanie i działania na rekordach
- Filtry i sortowanie – kryteria, stany aktywne, resetowanie, liczba wyników, widoczność zmian i zachowanie na urządzeniach mobilnych
- Alerty – poziomy ważności, kolory, kształty, treść komunikatu, działania użytkownika i komunikacja bez uzależnienia od koloru
- Wyszukiwanie główne i uzupełniające – pole wyszukiwania, podpowiedzi, autouzupełnianie, wyniki, brak wyników i korekta zapytań
Dzień 3
Moduł 4 – Projektowanie
- Analiza wzorców projektowych – dobre i błędne rozwiązania, spójność, użyteczność, dostępność oraz manipulacyjne wzorce interfejsu
- Atomic Design i systemy projektowe – atomy, molekuły, organizmy, szablony, komponenty, tokeny i dokumentacja
- Projektowanie desktopowe i mobilne – różnice kontekstowe, priorytety treści, obsługa dotykowa i ograniczenia ekranów
- Modelowanie i prototypowanie – przepływy użytkownika, makiety, poziomy szczegółowości, stany i interakcje
- Responsive Web Design – punkty przełamania, elastyczne siatki, skalowanie treści i zachowanie komponentów
- Dostępność i inkluzywność – WCAG 2.2, kontrast, fokus, kolejność odczytu, etykiety, komunikaty i różnorodność potrzeb
- Analiza wzorców projektowych – heurystyki, scenariusze użycia, przypadki brzegowe, założenia i ryzyka projektowe
- Makiety i prototypy do badań z użytkownikami – zakres scenariusza, zadania, dane testowe, stany błędów i dokumentacja ograniczeń
