Makietowanie strony internetowej

Proces makietowania/tworzenia makiet (ang. mock-ups) to bardzo ważny etap w projektowaniu serwisów internetowych czy aplikacji mobilnych. Niestety jest on często lekceważony lub wykonywany przez osoby nie posiadające w jego kierunku żadnych kompetencji i wiedzy, co zazwyczaj mocno odbija się na jakości końcowego produktu lub stwarza wiele problemów w trakcie prac developerskich.

POZIOM TRUDNOŚCI:

Czym jest makietowanie?

Makietowanie polega na utworzeniu w dowolnej formie szkicu, zarysu strony internetowej, który będzie zrozumiały dla wszystkich członków naszego zespołu projektowego. Dobra makieta powinna przedstawiać symboliczny układ naszego finalnego produktu (strona internetowa, aplikacja, interfejs), jego części składowe oraz hierarchię tych elementów. Musi także tłumaczyć funkcjonalności produktu i procesy “krok po kroku” w nim zachodzące. Dobry mock-up stanowi punkt wyjścia do dalszych prac graficznych oraz webmasterskich i funkcjonuje trochę jak instrukcja.

Istnieje wiele narzędzi (zarówno online’owych jak i tradycyjnych) do przygotowywania makiet, o czym w dalszej części artykułu. Prawdą jest jednak to, że makieta przygotowana nawet przy pomocy ołówka i kartki A4 jest po stokroć lepsza od jej braku. Projektowanie serwisu internetowego bez makiety to trochę tak jak gotowanie zupełnie nowego dania bez stosownego przepisu.

Po co mi makieta?

Jak już wspomniałem mockup to nasza instrukcja budowy produktu. Stanowi wsad do etapu prac graficznych oraz webmasterskich. Mock-up pozwala uniknąć sytuacji, w której osoba odpowiedzialna za projekt zmienia w nieskończoność jego zakres, zgłaszając kolejne poprawki. O tym, że takie poprawki wydłużają czas realizacji, a co za tym idzie zwiększają potrzebny na projekt budżet oraz mocno nadszarpują nerwy członkom zespołu oraz klientowi nie muszę chyba wspominać.

W przypadku zwinnych metodyk prowadzenia projektów zakres oczywiście może ulegać zmianie, ale w tym wypadku makieta służy jako pierwotny wzór, do którego zespół powinien się odnosić na każdym etapie projektu.

Kto makietuje serwisy i aplikacje?

Skoro wiemy już, że nie rozpoczynamy prac graficznych czy webmsterskich bez dobrej makiety, to pozostaje odpowiedzieć sobie na pytanie, kto ma ją wykonać. Nie każdą firmę małych czy średnich rozmiarów stać na zatrudnienie pełnoetatowego specjalisty do spraw użyteczności, a właściwie user experience/usability, bo tak prawidłowo powinno określać się osobę odpowiedzialną za makietowanie. Nic jednak nie stoi na przeszkodzie, aby tego typu działania zlecić na zewnątrz. Taki wydatek, w porównaniu z kosztami, jakie mogą spowodować opóźnienia w projekcie wynikające z braku makiet, z pewnością okaże się znacznie niższy.

Makietowanie jako praca zespołowa

Makietowanie to proces, w którym, w miarę możliwości, powinna być zaangażowana każda osoba z zespołu.

1. Po pierwsze tzw. Biznes Owner –  Musi wyraźnie zaznaczyć jakich funkcjonalności potrzebuje do realizacji swoich celów biznesowych lub wizerunkowych.
2. Po drugie webmaster i programista – Muszą wypowiedzieć się, czy funkcjonalności te są w ogóle możliwe do wykonania od strony technologicznej.
3. Po trzecie grafik – Musi wypowiedzieć się w kwestiach wizualnych (np. jak makieta ma się do firmowego CI (Company Identity).

Po zebraniu tych wszystkich informacji projektant, czyli specjalista do spraw użyteczności, przystępuje do połączenia wszystkich wymagań i wizji w finalną makietę, którą akceptują wszyscy zainteresowani.

Przy niedużych projektach makiety często przygotowują sami graficy. Takie rozwiązanie jest akceptowalne, co nie zmienia faktu, że najlepiej w tej roli spełni się osoba o wąskiej specjalizacji projektanckiej, z doświadczeniem, patrząca na stronę internetową inaczej niż grafik.

Czym zatem różni się mock-up od projektu graficznego?

Makieta to jedynie szkic, który, tak jak wspominałem wcześniej, może być wykonany nawet ołówkiem. Chodzi w nim jedynie o zorientowanie się, gdzie ma znajdować się konkretny element, jak działa, co zadzieje się po jego kliknięciu, itp. W makietach rzadko korzystamy z kolorów, grafik, teł czy zdjęć – chodzi o rozłożenie elementów. Jeśli nie wyjaśnimy roli makiet laikowi, to jego pierwszą reakcją będzie „ojej, jakie to brzydkie”. Natomiast makieta taka właśnie musi być, aby zespół projektowy mógł skupić się na samym działaniu, funkcjonalnościach danego serwisu internetowego czy aplikacji, a nie na tym, że pomidor jest za mało pomidorowy.

Narzędzia pomocne przy makietowaniu

Istnieje wiele aplikacji pomocnych przy tworzeniu makiet. Są one zazwyczaj bardzo proste i intuicyjne w obsłudze. W swoim asortymencie posiadają szeroką gamę różnych elementów takich jak button, pole tekstowe czy nagłówek, które możemy metodą “przeciągnij i upuść” dowolnie rozmieszczać na naszym obszarze roboczym, a następnie wydrukować lub wysłać specjalnego linka do drugiej osoby do wglądu. Jedne z najpopularniejszych programów tego typu to Axure, Balsamiq, Moqups czy Mockingbird.

Poza komputerowymi aplikacjami do makietowania istnieją także tradycyjne narzędzia przypominające nieco puzzle, które rozmieszczamy na planszy w postaci okna przeglądarki czy ekranu smartfona. Mogą one stanowić ciekawą atrakcję na spotkaniu z osobami mniej technicznymi (na przykład osoby reprezentujące stronę biznesową), które mogą wnieść coś ciekawego do projektu, ale niekoniecznie dostają wypieków na twarzy na wiadomość o wypuszczeniu nowej, stabilnej wersji Firefoxa ;).

Mam nadzieję, że tym krótkim artykułem udało mi się przekonać Was o tym, że makietowanie to kluczowy etap udanego projektu internetowego.