Od szkicu do prototypu – jak wygląda projektowanie strony? | UX bez żargonu #12

Niejeden klient, czy po prostu początkujący UX designer, na pewno zastanawia się, w jaki sposób zamienić swój szkic w działający prototyp. Jak wygląda proces projektowy stron Internetowych i aplikacji, krok po kroku?

Szkicowanie na kartce

Prace projektowe warto zacząć od wykonania prostego szkicu na kartce. Ustalamy w ten sposób ogólny zarys widoków i uwzględniamy podstawowe (tylko!) funkcjonalności. Unikaj dużej szczegółowości. Szkic ma ułatwić późniejsze prace dzięki posegregowaniu funkcjonalności w grupy i stworzeniu “wyobrażenia” ekranów aplikacji.

Wstępny szkic mówi więcej niż najlepszy opis, więc sprawdza się idealnie w rozmowie z klientem.Szkic jest też dobrym wstępem do zaprezentowania zespołowi wyglądu i funkcjonalności aplikacji. Może być podstawą do przeprowadzenia burzy mózgów.

Wireframe – szkielet projektu

Drugim etapem jest przygotowanie wireframe, czyli szkieletu projektu. Istnieją specjalne aplikacje do wykonania szybkich makiet np. Balsamiq.

Na szkielecie znajdują się wszystkie elementy interfejsu i informacje na temat grafik oraz interakcji. Zazwyczaj wireframe wykonuje się jedynie w odcieniach szarości. Dzięki temu elementy wizualne nie odwracają uwagi od oceny funkcjonalności.

Mockup

W momencie wykonywania mockupu zaczynamy skupiać się na szczegółach. Opracowujemy finalną wersję tego, jak aplikacja ma wyglądać, ale nie uwzględniamy jeszcze interakcji. Na tym etapie najważniejsze są elementy graficzne, kolorystyka i wizualizacja tego, jak ostateczny produkt ma się prezentować.

Prototyp

To rodzaj działającej już strony lub aplikacji, ale bez podłączenia funkcjonalności (“nieobkodowana”).

Jest wersją służącą do prezentacji i przeprowadzenia testów. Dzięki niej możemy upewnić się, czy nie występują niespodziewane błędy lub dany problem jest właściwie rozwiązany. Na tym etapie widać już, w jaki sposób działa aplikacja i jak się po niej poruszać. Przygotowanie klikalnego prototypu zajmuje jednak dużo czasu i etap ten jest często pomijany.

Jak przyspieszyć proces projektowania?

Warto podkreślić, że proces projektowy nie zawsze składa się z tych czterech etapów. Niezbędne będzie wykonanie co najmniej dwóch – makiety i mockupu.

Pierwszy umożliwia szybkie rozrysowanie funkcjonalności bez skupienia się na wyglądzie aplikacji.

Drugi dostarcza informacji o finalnym wyglądzie produktu.