Kurs projektowania UX/UI

Dlaczego: To biblia użyteczności, która uczy, jak projektować intuicyjne nawigacje.

Jak to zrobić:

• Skup się na rozdziałach dotyczących hierarchii wizualnej i skanowania stron przez użytkowników.
• Zanotuj 3 kluczowe zasady tworzenia jasnych komunikatów.
• Zastosuj zdobytą wiedzę do analizy dowolnej strony głównej banku.

Warunek ukończenia: Przeczytanie książki i sporządzenie notatek z głównymi wnioskami.

Dlaczego: Pozwalają one zrozumieć, jak ludzkie oko grupuje elementy, co jest kluczowe dla czytelności interfejsu.

Jak to zrobić:

• Przestudiuj zasady: bliskości, podobieństwa, domknięcia i kontynuacji.
• Znajdź przykłady każdej zasady w aplikacji Spotify lub Instagram.
• Naszkicuj na kartce prosty układ listy zadań, wykorzystując zasadę bliskości.

Warunek ukończenia: Potrafisz wskazać i nazwać 5 zasad Gestalt w istniejącej aplikacji.

Dlaczego: Tekst to 90% UI; dobra typografia decyduje o profesjonalizmie projektu.

Jak to zrobić:

• Naucz się różnicy między fontami szeryfowymi a bezszeryfowymi (używaj bezszeryfowych dla body text).
• Zrozum pojęcie 'line-height' (ustawiaj na ok. 1.5 dla czytelności) oraz 'tracking'.
• Wybierz darmową parę fontów z Google Fonts (np. Inter + Playfair Display).

Warunek ukończenia: Stworzenie skali typograficznej (H1, H2, Body, Caption) z zachowaniem hierarchii.

Dlaczego: Figma to obecnie najpopularniejsze narzędzie do projektowania interfejsów, umożliwiające współpracę w chmurze.

Jak to zrobić:

• Pobierz aplikację desktopową (działa płynniej niż wersja przeglądarkowa).
• Załóż konto 'Starter' (bezpłatne dla projektów indywidualnych).
• Dołącz do społeczności 'Figma Community', aby przeglądać darmowe zasoby.

Warunek ukończenia: Aplikacja zainstalowana i gotowa do pracy.

Dlaczego: To najważniejsza funkcja pozwalająca tworzyć responsywne komponenty, które dopasowują się do treści.

Jak to zrobić:

• Stwórz przycisk (tekst + ramka) i naciśnij Shift+A.
• Przetestuj ustawienia 'Padding' oraz 'Gap between items'.
• Zbuduj prostą listę menu, która automatycznie przesuwa elementy przy zmianie ich kolejności.

Warunek ukończenia: Stworzenie w pełni responsywnego komponentu karty produktu.

Dlaczego: Zapewnia to spójność projektu i pozwala na szybką zmianę kolorystyki w całym pliku.

Jak to zrobić:

• Zdefiniuj kolory: Primary, Secondary, Success, Error oraz 5 odcieni szarości.
• Użyj narzędzia 'Color Contrast Checker', aby upewnić się, że tekst jest czytelny (standard WCAG AA).
• Zapisz kolory jako 'Styles' w panelu bocznym Figmy.

Warunek ukończenia: Panel 'Local Styles' zawiera kompletną paletę kolorów.

Dlaczego: Projektowanie bez celu to tylko dekorowanie; musisz wiedzieć, dla kogo budujesz.

Jak to zrobić:

• Wybierz temat (np. aplikacja do adopcji psów).
• Opisz fikcyjnego użytkownika: jego cele, frustracje i techniczne umiejętności.
• Skup się na 'Job to be Done' (np. 'Chcę szybko znaleźć psa pasującego do małego mieszkania').

Warunek ukończenia: Jednostronicowy dokument PDF z opisem Persony.

Dlaczego: Pozwala to uniknąć 'ślepych zaułków' w aplikacji i logicznie połączyć ekrany.

Jak to zrobić:

• Narysuj ścieżkę od otwarcia aplikacji do osiągnięcia celu (np. rezerwacja wizyty).
• Użyj prostych kształtów: prostokąt (ekran), diament (decyzja).
• Uwzględnij ścieżki błędów (np. niepoprawne hasło).

Warunek ukończenia: Diagram przepływu zawierający minimum 8 kroków.

Dlaczego: Pozwalają skupić się na strukturze i użyteczności bez rozpraszania się kolorami.

Jak to zrobić:

• Używaj tylko odcieni szarości i prostych kształtów.
• Zastosuj zasadę 'Mobile First' (projektuj najpierw na telefon).
• Skup się na rozmieszczeniu przycisków akcji (CTA) w zasięgu kciuka.

Warunek ukończenia: Zestaw 5 kluczowych ekranów aplikacji w formie czarno-białych makiet.

Dlaczego: Prototyp pozwala przetestować aplikację tak, jakby była gotowym produktem.

Jak to zrobić:

• Nałóż style kolorystyczne i typografię na makiety Low-Fi.
• Użyj zakładki 'Prototype' w Figmie, aby połączyć przyciski z odpowiednimi ekranami.
• Dodaj proste przejścia typu 'Dissolve' lub 'Smart Animate'.

Warunek ukończenia: Link do prototypu, który można 'przeklikać' od początku do końca.

Dlaczego: Rekruterzy chcą widzieć Twój proces myślowy, a nie tylko ładne obrazki.

Jak to zrobić:

• Struktura: Wyzwanie -> Badania -> Rozwiązanie -> Wynik.
• Dodaj zrzuty ekranu z procesu (szkice, wireframes).
• Opisz, czego się nauczyłeś podczas tego projektu.

Warunek ukończenia: Opublikowany projekt na platformie Behance.

Dlaczego: LinkedIn to główne miejsce pozyskiwania ofert pracy w IT.

Jak to zrobić:

• Dodaj nagłówek: 'Junior UX/UI Designer | Figma | User-Centered Design'.
• W sekcji 'Featured' dodaj link do swojego Case Study na Behance.
• Ustaw status 'Open to Work' widoczny dla rekruterów.

Warunek ukończenia: Profil uzupełniony o portfolio i słowa kluczowe.

Dlaczego: Informacja zwrotna od doświadczonego projektanta przyspieszy Twój rozwój o miesiące.

Jak to zrobić:

• Zarejestruj się na adplist.org (darmowy mentoring).
• Znajdź mentora z min. 3-letnim doświadczeniem.
• Przygotuj 3 konkretne pytania dotyczące Twojego portfolio.

Warunek ukończenia: Odbyta 30-minutowa sesja mentoringowa.