Przymierzasz się do stworzenia strony internetowej? Jeżeli tak, zacznij od projektowania makiet. Dlaczego makiety UX są tak ważne? Do czego służą i czy rzeczywiście nie można pominąć ich podczas projektowania nowej strony www?
Czym jest makieta UX?
Zacznijmy od krótkiego wytłumaczenia, czym jest makieta strony internetowej. Jest to nic innego jak wstępny szkic strony, prezentujący główne założenia projektu zarówno wersji desktop, jak i aplikacji mobilnej naszej strony internetowej. Dobra makieta strony www prezentuje strukturę tej strony internetowej, wskazuje wszystkie jej najważniejsze elementy, czyli:
- układ elementów strony internetowej,
- hierarchię treści.
Wszystkie elementy strony www są na makiecie wstępnie zaprojektowane, dzięki czemu możemy już na tym etapie sprawdzić, czy taka strona internetowa będzie wygodna dla użytkowników. Na makiecie możemy określić położenie poszczególnych elementów strony, ich rozmiar i odstępy pomiędzy nimi. Również na etapie makiety UX ustalana jest kolorystyka strony internetowej oraz architektura informacji (omawialiśmy tę kwestię w osobnym materiale: Jak stworzyć architekturę informacji strony internetowej, sklepu internetowego czy portalu internetowego?). Makieta UX powinna być tworzona zawsze przed projektem graficznym strony internetowej.
Rodzaje makiet UX
Makiety stron internetowych dzielą się na dwa rodzaje – makiety lo-fi i hi-fi. Czym różnią się te rodzaje makiet? Przede wszystkim stopniem zaawansowania.
Makieta lo-fi (ang. low fidelity)
Ten rodzaj makiety to tzw. paper prototyping, czyli stworzenie prototypu strony internetowej w bardzo podstawowej wersji. Taka makieta UX może zawierać jedynie podstawy architektury informacji, czyli wskazywać, gdzie będzie znajdowało się menu oraz jaki będzie układ pozostałych elementów strony. Zazwyczaj ta makieta tworzona jest w jednej kolorystyce. Makietę lo-fi Klienci często wykonują samodzielnie, tworząc papierowe szkice na kartce lub w prostym programie graficznym i to właśnie tę pierwszą makietę zanoszą do profesjonalisty od tworzenia makiet.
Makieta hi-fi (ang. high fidelity)
Profesjonalista zajmuje się natomiast tworzeniem makiety UX o wyższym stopniu szczegółowości. Tutaj można już wprowadzić docelową kolorystykę projektu graficznego, można przeprowadzić badania z zakresu UI design na grupie docelowej oraz można docelowo zaprojektować wszystkie wymagane pola i architekturę informacji.
Makiety UX – dlaczego warto je zrobić?
Jest mnóstwo powodów do projektowania makiet przed rozpoczęciem projektowania strony internetowej już z zaangażowaniem programisty. Najważniejsze z tych powodów wskazujemy konkretnie poniżej.
Argument nr 1: Weryfikacja swoich pomysłów
Makieta strony internetowej pozwala przede wszystkim zweryfikować własne pomysły na stronę internetową. Celem makiety jest sprawdzenie, czy wymyślona przez nas strona internetowa może spełniać nasze oczekiwania i oczekiwania jej użytkowników. Jeżeli już na etapie makiet pierwsze wrażenie potencjalnego użytkownika będzie niekorzystne, będzie to znak, że projekt musi być poprawiony lub wręcz stworzony od nowa.
Argument nr 2: Oszczędność pieniędzy
Warto stworzyć makietę UX również ze względu na możliwe znaczące oszczędności. Choć wydawać się może, że przecież zatrudnienie projektanta makiety UX będzie dodatkowym kosztem, to warto zwrócić uwagę na to, jakiego (większego) kosztu pozwoli nam to uniknąć. Na makiecie wprowadzanie poprawek jest proste i kosztuje stosunkowo niewiele, a więc zaoszczędza nam niepotrzebnych poprawek na etapie projektowania strony przez programistę, gdzie wszystkie poprawki będą kosztować nas już dużo więcej. Zespół projektowy tworzący makiety UX wprowadzi poprawki dużo szybciej.
Argument nr 3: Szansa na porównanie różnych wersji projektu
Na etapie makiety można stworzyć wiele projektów alternatywnych wobec głównego projektu strony. Korzystając z programów do projektowania makiet można bardzo łatwo np.: skopiować cały wstępny projekt witryny internetowej i zupełnie go przeorganizować, przestawiając różne jego elementy w inne miejsca. W takim projekcie wykonanie tego działania zajmuje zaledwie kilka minut.
Argument nr 4: Oszczędność czasu
Projektowanie witryny poprzez makiety UX pozwala zatem również zaoszczędzić czas. Nawet jeżeli nie jesteśmy specjalistami z branży IT, możemy wyobrazić sobie, jak niewiele trudu kosztuje przesunięcie ręcznie danego elementu w programie graficznym. To po prostu jedno kliknięcie. Czym innym jest natomiast zmiana położenia elementu na etapie napisanego kodu strony – ta zajmuje już znacznie więcej czasu.
Argument nr 5: Precyzyjna wycena wdrożenia strony internetowej
Ten argument może przekonać szczególnie tych, którzy zastanawiają się, ile kosztuje strona internetowa. Koszt jest bowiem bardzo różny, a zależy głównie od stopnia skomplikowania naszego projektu. Dzięki makiecie UX i zaangażowaniu zespołu projektującego już na tym etapie będziemy mogli dowiedzieć się, czy na pewno warto wdrażać niektóre z naszych pomysłów, bo może okazać się, że wywindują one koszty wdrożenia strony o kilkanaście tysięcy złotych w górę. UX designer będzie w stanie doradzić nam dogodne alternatywy projektu, które będą równie efektowne albo będą spełniały podobną funkcję, ale będą mniej kosztowne we wdrożeniu. Dzięki temu już na etapie makiety UX będziemy mogli uzyskać precyzyjną wycenę naszej strony internetowej.
Jak stworzyć makietę UX samodzielnie?
Samodzielnie najłatwiej stworzyć prototyp makiety na zwykłej kartce papieru. O wiele lepszą jakość wykonania zapewni nam projekt graficzny strony stworzony w programie internetowej. Na rynku istnieje wiele programów do tworzenia makiet UX. Jednym z najpopularniejszych jest Figma, której ogromną zaletą jest prostota obsługi. Figma jest intuicyjnym świetnym narzędziem, wykorzystywanym nie tylko przez amatorów, ale i profesjonalistów.
Kolejnym bardzo popularnym programem jest Adobe XD oraz inne, na przykład: Sketch, Axure, Atomic czy InVision. Niektóre wskazane tu programy zapewniają darmowy okres próbny, który zdecydowanie wystarczy nam na zaprojektowanie makiety jednej strony internetowej. Jeżeli chcemy rozpocząć swoją przygodę z projektowaniem na dłuższy czas, będziemy musieli wykosztować się na zakup wybranego programu.
Dlaczego warto tworzyć makietę strony internetowej? Podsumowanie
- Makiety UX pozwalają obniżyć koszty projektu strony internetowej.
- Dzięki zaprojektowaniu makiet UX można uniknąć czasochłonnych i kosztownych poprawek strony na etapie jej programowania lub wdrażania.
- Dzięki makietom UX możemy już na wczesnym etapie projektu stwierdzić, czy spełnia on nasze kluczowe założenia i czy będzie funkcjonalny dla użytkowników.
- Projekt makiety UX pozwala na doprecyzowanie oczekiwań Klienta co do wyglądu i funkcjonalności projektowanej strony.
- Dzięki projektowi UX software house lub freelancer wdrażający stronę jest w stanie dość precyzyjnie wycenić koszt tego wdrożenia.
