1. Od szkicu do wizualizacji: Makieta (Mockup)
Makieta to wizualne odzwierciedlenie strony, które powstaje po zaakceptowaniu struktury (Wireframe). Jest to statyczny obraz, który pokazuje, jak strona będzie wyglądać – zawiera kolory, czcionki, grafikę i finalne treści.
Projektowanie prostej makiety (Wymaganie Podstawowe)
- Definicja kolorów i czcionek: Makieta wprowadza warstwę wizualną (UI – User Interface).
- Elementy graficzne: Wstawienie finalnego logo, zdjęć i ikon.
- Narzędzia: Do tworzenia makiet najczęściej używa się programów graficznych, takich jak Figma, Adobe XD, Sketch lub proste narzędzia graficzne (np. GIMP, Photoshop) do przygotowania statycznego obrazu.
🚧 Wireframe (Szkic): Koncentruje się na strukturze i układzie. Jest czarno-biały.
🖼️ Mockup (Makieta): Koncentruje się na wyglądzie i wizualnym designie (kolory, typografia). Jest statyczny.
2. Tworzenie interaktywnych prototypów (Wymaganie Ponadpodstawowe)
Prototyp to makieta, która została ożywiona. Jest to symulacja gotowej strony, umożliwiająca klikanie, przechodzenie między widokami i testowanie interakcji bez pisania kodu.
Zalety prototypowania
- Wczesne wykrywanie błędów: Znajdujesz problemy w nawigacji, zanim włożysz czas w kodowanie.
- Wizualizacja Flowchart: Prototypy weryfikują założenia ze Schematu Funkcjonalnego w praktyce.
- Testy Użyteczności (UX): Możesz przeprowadzić testy z rzeczywistymi użytkownikami.
Kluczowe narzędzia do prototypowania:
| Narzędzie | Typ | Funkcja |
| Figma | Online (Chmura) | Najpopularniejsze; łączy makietowanie i interaktywne prototypowanie. |
| Adobe XD | Program desktopowy | Dobry dla ekosystemu Adobe. |
| InVision | Online (Chmura) | Specjalizuje się w łączeniu statycznych makiet w klikalne prototypy. |
3. Podstawy testowania UX/UI
Testowanie Usability (Użyteczności) to ocena, jak łatwo użytkownik może korzystać z interfejsu (UI) i osiągnąć swoje cele (UX).
Metodyka testowania UX (User Experience)
- Testy z Użytkownikami: Poproś kilka osób z grupy docelowej, aby wykonały na prototypie określone zadania (np. "Dodaj produkt do koszyka i przejdź do płatności"). Obserwuj ich i notuj problemy.
- Testy A/B: Porównywanie dwóch wersji elementu (np. kolor przycisku, tekst nagłówka) w celu sprawdzenia, która działa lepiej (np. generuje więcej kliknięć).
- Heurystyki Nielsena: Zestaw 10 ogólnych zasad użyteczności (np. widoczność statusu systemu, kontrola i wolność użytkownika, spójność i standardy).
4. Ćwiczenia praktyczne i zadania
Zadanie 1: Projektowanie prostej makiety (Wymaganie Podstawowe)
Na podstawie Wireframe'u (szkicu z poprzedniej lekcji) stwórz statyczną makietę strony głównej. Wykonaj następujące kroki:
- Wybierz paletę kolorów (maksymalnie 3 kolory główne) i font.
- Zaprojektuj logo.
- Użyj programu graficznego (lub nawet prezentacji PPT/Google Slides) do wizualizacji, jak Twoje bloki z Wireframe będą wyglądać z kolorami, grafiką i tekstem.
Zadanie 2: Tworzenie prototypu i testowanie (Wymaganie Ponadpodstawowe)
- Zainstaluj lub zarejestruj się w narzędziu do prototypowania (np. Figma).
- Przenieś swoją makietę do programu i utwórz interaktywny prototyp. Połącz linkami główne elementy menu (np. kliknięcie "O nas" prowadzi do widoku strony "O nas").
- Przeprowadź prosty test użyteczności: Poproś kolegę/koleżankę, aby spróbował/a znaleźć określoną informację na Twoim prototypie. Zanotuj, gdzie pojawiły się problemy z nawigacją.