Projektowanie stron WWW wiele osób łączy wyłącznie z grafiką czyli logotypem, banerami i ikonkami. Bardziej zaznajomieni skojarzą projektowanie jeszcze z szablonem, skórką (od ang. 'skin’). Projektowanie grafiki to część pracy, odpowiadam również za dobór typografii, wygodę nawigacji, logikę interfejsu, responsywność czyli dopasowanie do różnych ekranów itd. Projektowanie strony jest podzielone na etapy.
Wireframe – wstępny szkic
Określenia właściwie oddające sens angielskiego 'wireframe’ w języku polskim to makieta lub szkielet strony. Często spotykanym określeniem w odniesieniu do terminu wireframe jest szkic – opisujący najważniejsze elementy treści, strukturę informacji oraz elementy interfejsu czy interakcji ale bez drobiazgowych szczegółów. W moim przepływie pracy wireframe najczęściej zaczyna się i kończy właśnie jako odręczny szkic sporządzany w trakcie rozmowy z klientem. W zdalnej współpracy lub pracy zespołowej wykorzystywane może być specjalne oprogramowanie do projektowania UX/UI.
Często wireframe przedstawiany jest jako zestaw szarych prostokątów z krótkimi opisami. Nie musi posiadać wielu szczegółów, ponieważ jego istotą jest zaprezentowanie układu najważniejszych elementów serwisu internetowego. Podobnie jak przy makietowaniu tradycyjnych publikacji w wireframe wykonuję uproszczoną wizualizację bez nagromadzenia wielu szczegółów, które na wstępnym etapie mogą tylko zaciemnić docelową wizję.
Wireframe ma pomóc klientowi w wizualnym skonkretyzowaniu informacji które chce przekazać poprzez swoją stronę. Często na etapie szkicowania takiej makiety wyjaśniam klientowi jakie elementy (nagłówek, body, stopka, banner, box, slider itd.) można wykorzystać oraz jak jest ich rola. Takie statyczne przedstawienie uproszczonej informacji graficznej wraz z krótkimi notatkami stanowią wstępną i podstawową dokumentację każdej realizacji. Często już na tym etapie uzyskuję tzw. feedback czyli informacje zwrotne oraz akceptacje klienta.
Mockup – projekt graficzny
Mockup jest już projektem graficznym w pełnym znaczeniu tego słowa, chociaż jeszcze nie musi całkowicie odpowiadać końcowemu wyglądowi strony. W przeciwieństwie do niżej opisywanego prototypu jest statyczny i nie zawiera interakcji. Mockup jest odzwierciedleniem wstępnego projektu, a bywa, że nawet projektu końcowego.
Dobrze przygotowany mockup przedstawia strukturę informacji, wizualizuje zawartość oraz podstawowe funkcje w statycznej formie, a także zachęca do przeanalizowania wizualnej strony projektu. Klientowi zostaje przedstawiony online jako obrazek lub zestaw obrazków przypominających zrzuty ekranowe. Często przesyłane są one na email klienta. Przygotowanie mockup’u bywa wstępem do stworzenia prototypu strony WWW. Przedstawienie klientowi mockup’u pozwala skutecznie zebrać feedback i dołączyć do dokumentacji projektu.
Do przygotowania mockup’u wykorzystuję głównie Figmę oraz Affinity Designera, przy czym za pomocą Designera w moim przepływie pracy sprawniej mi się opracowuje oraz eksportuje ikony w różnych wersjach, wariantach i wielkościach. Kolejna aplikacja Affinity Photo służy do końcowego dopracowania i optymalizacji bitmap na stronę. Prawidłowa optymalizacja grafiki polega na odpowiednim zapisaniu plików obrazków pikselowych z zachowaniem równowagi pomiędzy jakością a objętością umożliwiającą jak najszybsze pobieranie grafik.
Prototyp – projekt graficzny częściowo interaktywny
Prototyp charakteryzuje się większą dokładnością niż mockup. Pozwala na sprawdzenie podstawowych interakcje w sposób podobny do tego jak w pełni funkcjonalna strona internetowa. Prototyp symuluje interakcje użytkownika z interfejsem, przy czym nie musi dokładnie odwzorowywać każdej funkcjonalności czy uwzględniać każdego odniesienia do innej podstrony. Powinien być bardzo podobny do tego, co chcemy uzyskać na końcowym etapie. Klient może zobaczyć jak będą wyglądać reakcje podstawowych elementów interfejsu – zmiany statusów przycisków, animacje menu czy banerów.
Do tego również stosowane jest specjalistyczne oprogramowanie – w moim przepływie pracy ponownie jest to Figma – oprócz narzędzi do projektowania graficznego różnych elementów interfejsu oferuje narzędzia do łączenia ich ze sobą oraz animacje symulujące interakcje. Ponadto Figma umożliwia udostępnianie efektów pracy online klientowi czy współpracownikom. Zobacz przykładowy prototyp dla wersji desktop (kliknięcie w obszarze projektu podświetla elementy aktywne).
Prototypowanie doskonale sprawdza się podczas testów użyteczności interfejsu, zanim rozpocznie się wdrażanie strony www. Prototyp wymaga więcej wysiłku w przygotowanie niż mockup ale jest najatrakcyjniejszą formą prezentacji projektu i pozwala klientom na lepszą ocenę wyglądu strony WWW. Warto zapamiętać że prototypowanie jest drogą i czasochłonną formą komunikacji projektowej. Dlatego często tworzy się prototypy, które można wykorzystać wielokrotnie na różnych etapach rozwoju projektów. Jest to ekonomiczne rozwiązanie przy mniej skomplikowanych realizacjach.
Wszystkie powyższe etapy mogą być wykonywane w oczekiwaniu na dostarczenie przez klienta docelowych treści jak teksty, obrazy oraz inne dane lub po częściowym ich przekazaniu. Po zakończeniu etapu projektowania i akceptacji klienta rozpoczyna się wdrożenie, czyli zaimplementowanie projektu w szablonie strony wraz z podłączeniem do tzw. back-end’u czyli zestawu skryptów tworzących silnik strony. Wtedy rozpoczyna się praca nad kodem strony.