Wireframe, mockup i prototyp - Czyli od szkicu do interakcji

Projektowanie stron internetowych i aplikacji to wieloetapowy proces. Jednym z nich jest etap projektowania user experience, w którym kluczową rolę odgrywają wireframy, mockupy i prototypy. Tylko co to właściwie jest i czym się różni?


Co to jest wireframe?

Szkielet widoku, dzięki któremu obrazujemy strukturę i schemat działania strony lub aplikacji. Prezentuje tylko najważniejsze elementy, jego ideą jest zobrazowanie w prosty sposób produktu końcowego. Na tym etapie nie przedstawiamy szczegółów, ponieważ cała uwaga powinna być skupiona na podstawowych i najważniejszych funkcjach. Wireframe służy także do zweryfikowania założeń produktu, czy są one potrzebne i realne. Możemy wyłapać nieprawidłowości w strukturze systemu, które po wdrążeniu byłyby trudne do zmiany. Mając gotowy wireframe, również możemy oszacować koszty i ustalić plan pracy nad projektem.



Najprostszym sposobem na stworzenie wireframe jest odręczny szkic. To jedna z lepszych i polecanych metod na tym etapie. Oczywiście można to wykonać w programie graficznym np. Axure lub Balsamiq, jednak tam na wstępie musimy zdecydować o kilku rzeczach, na których nie powinniśmy się skupiać w tym momencie, np. wielkość fontu, kształt figur czy grid. W czasie projektowania można to zmienić, jednak już zaczynamy zastanawiać się nad tymi elementami i przyzwyczajać się do nich, co może przyćmić inne ważniejsze funkcje. Wireframe powinien zostać wykonany całkowicie w szarości i nie musi on wyglądać dokładnie jak finalny produkt.



Czym jest mockup?

Mockup to statyczne przedstawienie wyglądu gotowego produktu, skupia się na wizualnej części, ustalając w jaki sposób użytkownicy będą interpretować finalną stronę lub aplikacje. Mockup powinien prezentować szczegóły i detale projektu oraz być łatwy do zrozumienia dla klienta i użytkownika. W przeciwieńswie do wirefram’ów powinniśmy skupić się tutaj na kolorach, typografi, ikonach tak, aby zachować spójność w całym projekcie. Na tym etapie jeszcze nie tworzymi interakcji, pojawią się dopiero w czasie prototypowania.



Do stworzenia mockup’ów potrzebujemy już profesjonalnych narzędzi, dzięki którym możemy zprezentowac nasze makiety. Najpopularniejszymi są Sketch, Figma, Adobe XD, a pomocny w grafikach jest Photoshop. Są to rozbudowane programy posiadające funkcje niezbędne do projektowania stron internetowych i aplikacji.


Do czego służy prototyp?

Prototyp jest wierną prezentacją gotowego produktu. Jest to mockup wzbogacony o elementy UX, interakcje i animacje, w ten sposób można zobrazować wygląd i pracę całego systemu. Prototyp sprawia wrażenie gotowej aplikacji, chociaż jeszcze brakuje mu zaplecza. Jest to etap, na którym możesz zobaczyć jak połączone są ekrany i faktycznie wchodzić w interakcje ze swoim produktem. Dzięki prototypom można przeprowadzić bardzo efektywne badania interfejsu użytkownika, ocenić które elementy działają najlepiej, a także daje możliwość wyłapania problemów z użytecznością przed zakodowaniem. Dodatkowo prototyp może wpływać na odbiór klienta czy inwestora w bardziej wydajny sposób niż makiety.

Istnieje wiele programów do prototypowania jest to min. Invision Studio, Figma, Adobe XD, UXPin. Posiadają one funkcje tworzenia animacji I interakcji między ekranami, ale także między pojedynczymi elementami.


Podsumowanie

Reasumując wirefremy, mockupy i prototypy nie są tym samym ale są ściśle powiązanymi elementami, które tworzą proces projektowy. Oczywiście bazują one na sobie, jednak nie powinny być mieszane tak, aby nie zaburzyć odbioru i skupienia na danym etapie. Istotne jest, aby rozpatrzyć, która część projektowa jest dla nas najważniejsza, oznacza to, że nie musimy na każdym etapie projektować dokładnie wszystkich ekranów. Jeśli tworzymy wireframe, to ważne jest, aby przedstawić strukturę i szkielet strony, wystarczające będzie zaprezentowanie tych kilku widoków, które to obrazują. Podobnie jest z prototypami, kiedy mamy bardzo rozbudowana stronę czy aplikację tworzenie interakcji i animacji wszystkich ekranów i elementów jest bardzo pracochłonne i niekonieczne, ponieważ z pewnością większość z nich się powtarza. Jedynie mockup’y, to etap, na którym powinny być wykonane wszystkie widoki, ponieważ jest to podstawa do zakodowania całej strony, daje też pewność, że wszystko będzie wyglądało tak, jak projektant to zaplanował.


Software Development Company Top Eastern European Software Development Companies