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

Specjalista wie, jak przebiega proces projektowy strony. Natomiast klient czy po prostu początkujący UX designer na pewno zastanawia się, w jaki sposób zamienić szkic w prototyp. Właśnie z myślą o takich osobach powstał ten artykuł – przedstawiam w nim swój proces projektowy.

Jak wygląda projektowanie strony?

Szkicowanie na kartce

Prace projektowe zaczynam od wykonania prostego szkicu na kartce. Ustalam w ten sposób ogólny zarys widoków i uwzględniam jedynie podstawowe funkcjonalności. Unikam szczegółowości. Szkic ma ułatwić późniejsze prace dzięki posegregowaniu funkcjonalności w grupy i stworzeniu “wyobrażenia” ekranów aplikacji. Co istotne, robię to oczywiście po rozmowie z klientem. Wstępny szkic mówi bowiem więcej niż najlepszy opis.

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. Pracę tę wykonuję już w całości cyfrowo i od tego momentu pracuję jedynie na komputerze. Do stworzenia szkieletu używam Adobe XD, ale istnieją też specjalne aplikacje do wykonania szybkich makiet np. Balsamiq.

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

Mockup

W momencie wykonywania mockupu zaczynam skupiać się na szczegółach. Opracowuję finalną wersję tego, jak aplikacja ma wyglądać, ale nie uwzględniam interakcji. Wraz z zespołem dyskutujemy o elementach graficznych. Przygotowujemy koncepcję, która potem trafia do klienta. Jeśli ją zaakceptuje, rozpoczynają się prace programistyczne, jednak jeśli istnieje potrzeba zaprezentowania działania produktu, wykonuję także prototyp.

Prototyp

To rodzaj działającej już 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 dany problem jest właściwie rozwiązany. Klient widzi natomiast, w jaki sposób działa aplikacja i jak się po niej poruszać. Minusem jest jednak to, że przygotowanie klikalnego prototypu zajmuje dużo czasu.

Warto podkreślić, że proces projektowy nie zawsze składa się z tych czterech etapów. Doradzam jednak 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.

Chcesz dowiedzieć się więcej? Wpadnij na nasz kanał YouTube, aby zapoznać się z serią UX bez żargonu w formie video. Ten artykuł możesz zaś udostępnić znajomym – na pewno przyspieszy to prace nad kolejnymi materiałami! ;)