Proces projektowania strony internetowej – od szkicu do prototypowania

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.

Wireframing w projektowaniu to proces tworzenia prostego szkicu struktury i układu strony internetowej, aplikacji lub innego produktu cyfrowego. Szkic ten, nazywany również szkieletem, ma na celu przedstawienie koncepcji układu elementów nawigacyjnych, treści oraz interakcji, które mają być dostępne na stronie lub w interfejsie użytkownika. Wireframing pomaga w organizacji i planowaniu projektu, umożliwiając projektantom, deweloperom i interesariuszom lepsze zrozumienie funkcjonalności i struktury końcowego produktu.

Wireframing odbywa się we wczesnych etapach procesu projektowania i zwykle ma formę niskiej szczegółowości, co pozwala na skupienie się na układzie, funkcjonalności i hierarchii treści, zamiast na estetyce. Szkice te mogą być tworzone ręcznie za pomocą papieru i ołówka, ale często wykorzystuje się również specjalistyczne oprogramowanie do tworzenia wireframe’ów, takie jak Balsamiq, Axure czy Sketch.

Korzyści wynikające z procesu wireframing to m.in.:

1. Łatwiejsza komunikacja i współpraca między zespołem projektowym oraz interesariuszami.
2. Szybkie tworzenie, modyfikowanie i testowanie różnych koncepcji układu i funkcjonalności.
3. Wczesne wykrywanie potencjalnych problemów związanych z użytecznością, strukturą i nawigacją.
4. Skupienie się na priorytetach projektowych i eliminacja niepotrzebnych funkcji.
5. Osłona przed wysokimi kosztami zmian wprowadzanych na późniejszych etapach projektowania i wdrożenia.

Mockup

Makieta jest wizualną reprezentacją lub prototypem projektu, często używaną na etapach planowania projektu. Makiety pomagają projektantom, programistom i interesariuszom wyobrazić sobie produkt końcowy, zapewniając szczegółowy widok jego układu, interfejsu użytkownika i estetyki. Są powszechnie używane w witrynach internetowych, aplikacjach, opakowaniach produktów i materiałach drukowanych.

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ć.

Aby tworzyć skuteczne makiety, które ułatwiają przejrzystą komunikację i wydajne iteracje projektu, postępuj zgodnie z tymi najlepszymi praktykami:

1. Zdefiniuj cele i zadania – przed utworzeniem makiety ustal cele i założenia projektu. Dzięki temu Twój projekt koncentruje się na potrzebach użytkownika końcowego i spełnia kluczowe wymagania dotyczące funkcjonalności.
2. Zacznij od makiet o niskiej szczegółowości – rozpocznij od makiet lub makiet o niskim stopniu skomplikowania, które są prostymi, często ręcznie rysowanymi reprezentacjami Twojego projektu. Pozwala to skupić się na układzie i funkcjonalności, ułatwiając powtarzanie i udoskonalanie koncepcji przed zainwestowaniem czasu w makiety o wysokiej wierności.
3. Używaj spójnych elementów interfejsu użytkownika – wykorzystaj spójny zestaw elementów interfejsu użytkownika (UI), takich jak przyciski, ikony i pola wprowadzania, w całej swojej makiecie. Ustanawia to spójny język projektowania i poprawia użyteczność.
4. Włącz realistyczne treści – dołącz realistyczną treść, w tym tekst i obrazy, aby pomóc zainteresowanym stronom lepiej zwizualizować produkt końcowy. Używanie tekstu zastępczego (lorem ipsum dolor) lub obrazów może prowadzić do błędnej interpretacji lub nieprzewidzianych problemów projektowych.
5. Użyj systemu siatki – zastosuj system siatek (grid), aby mieć pewność, że Twój projekt jest dobrze zorganizowany i wizualnie zrównoważony. Systemy siatek zapewniają ramy do organizowania i wyrównywania treści, co zapewnia czysty i profesjonalny wygląd.
6. Iteruj i udoskonalaj – gdy otrzymasz informacje zwrotne od interesariuszy, iteruj i udoskonal swoją makietę, aby rozwiązać problemy i ulepszyć projekt. Ten proces pomaga wcześnie wykryć potencjalne problemy, oszczędzając czas i zasoby na dłuższą metę.
7. Wykorzystaj narzędzia do makietowania – wykorzystaj narzędzia i oprogramowanie do tworzenia makiet, takie jak Sketch, Adobe XD, Figma lub InVision, aby usprawnić proces tworzenia i ułatwić współpracę między członkami zespołu.
8. Współpracuj i komunikuj się – zachęcaj do otwartej komunikacji i współpracy z interesariuszami w całym procesie tworzenia makiety. Dzięki temu wszyscy są na tej samej stronie i pomaga identyfikować i rozwiązywać problemy na wczesnym etapie procesu projektowania.

Postępując zgodnie z tymi najlepszymi praktykami, możesz tworzyć skuteczne makiety, które prowadzą do udanych projektów zorientowanych na użytkownika.

Prototyp

Prototyp to interaktywna i funkcjonalna reprezentacja projektu, często używana do testowania i sprawdzania doświadczenia użytkownika, użyteczności i funkcjonalności produktu przed ostatecznym opracowaniem. W przeciwieństwie do makiet, które koncentrują się na wizualnych aspektach projektu, prototypy pozwalają użytkownikom na interakcję z produktem i dostarczają cennych informacji zwrotnych na temat jego działania. Prototypy są powszechnie używane w przypadku stron internetowych, aplikacji i innych produktów cyfrowych podczas procesu projektowania.

To rodzaj działającej już strony lub aplikacji, ale bez podłączenia funkcjonalności (“nieobkodowana”), czyli np. bez przesyłania danych w formularzach.

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.

W tabeli przedstawiliśmy różnice między makietą a prototypem w projektowaniu. Makietka koncentruje się na aspektach wizualnych, podczas gdy prototyp umożliwia testowanie i walidację funkcjonalności produktu. Oba mają kluczowe znaczenie w procesie projektowania, pomagając projektantom i interesariuszom tworzyć produkty skoncentrowane na użytkowniku.

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.