Szkolenie UI
Poziom
PodstawowyCzas
24h / 3 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie z UI
Szkolenie przygotowuje do projektowania czytelnych, spójnych i dostępnych interfejsów stron oraz aplikacji. Podczas trzydniowego warsztatu uczestnicy pracują z architekturą ekranów, typografią, kolorem, nawigacją, formularzami, tabelami, wizualizacjami danych i informacją zwrotną interfejsu. Przygotowują makiety i interaktywny prototyp, analizują wzorce projektowe oraz poznają podstawowe zależności między projektem a jego implementacją w HTML, CSS i Responsive Web Design. Program uwzględnia wymagania dostępności WCAG 2.2, ograniczanie obciążenia poznawczego i eliminowanie manipulacyjnych wzorców.
Dla kogo jest to szkolenie?
Dla początkujących projektantów UI, grafików i osób rozwijających kompetencje w zakresie projektowania produktów cyfrowych
Dla specjalistów UX, marketingu, e-commerce i komunikacji, którzy chcą przekładać potrzeby użytkowników na czytelne rozwiązania wizualne-
Dla product managerów, product ownerów, analityków i osób decyzyjnych uczestniczących w ocenie interfejsów oraz planowaniu zmian produktowych
-
Dla uczestników sprawnie korzystających z komputera i gotowych do pracy w wybranym narzędziu do tworzenia makiet; wcześniejsza znajomość UI, HTML i CSS nie jest wymaganaosób, które chcą wzmocnić swoją wiedzę o tym, jak za pomocą elementów graficznych budować właściwy obraz wizualny.
Czego nauczysz się na szkoleniu?
- Przeanalizujesz strukturę strony lub aplikacji oraz wskażesz problemy związane z hierarchią, czytelnością, spójnością i informacją zwrotną
- Zaprojektujesz ekran z właściwie dobraną typografią, paletą kolorów, kontrastem, siatką i hierarchią wizualną
- Przygotujesz zestaw podstawowych komponentów UI wraz z ich stanami, zachowaniem i zasadami użycia
- Zbudujesz responsywną makietę i interaktywny prototyp wybranego przepływu użytkownika
- Zweryfikujesz projekt pod kątem podstaw dostępności WCAG 2.2, przypadków brzegowych, manipulacyjnych wzorców oraz gotowości do przekazania zespołowi deweloperskiemu
Program szkolenia
Dzień 1
Moduł 1 – Podstawy projektowania interfejsów
- Struktura stron i aplikacji – architektura informacji, hierarchia treści, siatki, sekcje, przepływy użytkownika, kluczowe ekrany oraz warianty responsywne
- Typografia cyfrowa – dobór krojów, skala typograficzna, hierarchia, interlinia, długość wiersza, wyrównanie, czytelność oraz skalowanie tekstu
- Kolor w interfejsie – palety, role semantyczne, kontrast, stany komponentów, tryb jasny i ciemny oraz komunikacja niezależna od koloru
Dzień 2
Moduł 2 – Komponenty i wzorce interfejsu
- Nawigacja oraz menu – hierarchia, orientacja użytkownika, stany aktywne, okruszki nawigacyjne, menu mobilne, fokus oraz obsługa klawiaturą
- Formularze – etykiety, pola wymagane, typy danych, walidacja, komunikaty błędów, autouzupełnianie, pomoc kontekstowa oraz ochrona danych
- Listy i tabele – hierarchia informacji, nagłówki, gęstość danych, zaznaczanie, działania zbiorcze, stany puste oraz warianty mobilne
- Przyciski – hierarchia akcji, etykiety, rozmiary, obszary interakcji, stany aktywne, nieaktywne, ładowania i potwierdzenia
- Kalendarze – wybór daty i zakresu, formaty regionalne, ograniczenia terminów, dostępność klawiaturowa oraz komunikaty walidacyjne
- Ikony – znaczenie, spójność stylistyczna, rozmiar, etykiety tekstowe, obszar interakcji oraz czytelność dla technologii asystujących
- Wyszukiwanie – pole zapytania, podpowiedzi, autouzupełnianie, filtry, korekta błędów, wyniki oraz stan braku wyników
- Paragrafy i treści interfejsu – struktura tekstu, długość bloków, nagłówki, listy, mikrotreści, prosty język oraz czytelność komunikatów
- Zakładki i paginacja – liczba widoków, stany aktywne, zachowanie historii, liczba wyników, przewijanie oraz alternatywne sposoby nawigacji
- Wykresy i wizualizacje danych – dobór typu wykresu, skale, legendy, etykiety, porównania, kolory, dostępność oraz ograniczenie ryzyka błędnej interpretacji
Dzień 3
Moduł 3 – Prototypowanie, implementacja i dostępność
- Prototypy i makiety – przepływy użytkownika, poziomy szczegółowości, połączenia ekranów, stany komponentów, dane testowe oraz scenariusze prezentacyjne
- Podstawy HTML, CSS i Responsive Web Design – semantyczna struktura, model pudełkowy, elastyczne układy, punkty przełamania oraz ograniczenia implementacyjne
- Informacja zwrotna interfejsu – potwierdzenia, postęp, ładowanie, sukces, ostrzeżenia, błędy, operacje odwracalne oraz ciągłość zadania
- Gamifikacja – cele użytkownika, postęp, osiągnięcia, nagrody, motywacja wewnętrzna, dobrowolność oraz ryzyko presji i manipulacji
- Animacje i mikrointerakcje – funkcja informacyjna, przejścia, tempo, ciągłość, wydajność, redukcja ruchu oraz unikanie zbędnych efektów
- Dostępność i elementy UX – podstawy WCAG 2.2, kontrast, fokus, kolejność obsługi, etykiety, obszary interakcji, przypadki brzegowe i projektowanie inkluzywne
Moduł 4 – Analiza wzorców projektowych
- Analiza wzorców projektowych – heurystyki użyteczności, modele mentalne, dobre i błędne praktyki, manipulacyjne wzorce, dostępność, priorytety zmian oraz dokumentacja rekomendacji
