Overlap StudioWiedza UXCzym są tak naprawdę makiety UX i jak je tworzyć?

Czym są tak naprawdę makiety UX i jak je tworzyć?

5
minut
Share

Aby lepiej poznać znaczenie tworzenia makiet UX, niezbędnym jest na początku zrozumienie, czym tak właściwie jest makieta. Najprościej mówiąc-makieta to wizualna reprezentacja elementów na ekranie produktu, np. strony www lub aplikacji, prezentująca ich rozmieszczenie, wielkość i zależności między nimi.


Rozróżniamy 2 podstawowe typy makiet:

Lo-fi -(makieta o niskim poziomie szczegółowości)-powstaje najczęściej w początkowej fazie projektowania. Prezentuje spojrzenie na ekran z dużego oddalenia, obejmując jedynie podstawowe i kluczowe elementy danego ekranu, zwykle służy jako punkt kontrolny dla zespołu produktu i klienta. Najczęściej powstaje na kartce.

Hi-fi -(makieta o wysokim poziomie szczegółowości)-powstaje zazwyczaj w oparciu o wcześniej stworzone makiety lo-fi i jest bardzo zbliżona do wersji końcowej produktu. Podczas tworzenia makiety hi-fi znacznie większy nacisk kładziony jest już na szczegóły poszczególnych elementów. 


Tworzenie użytecznych makiet powinno być poprzedzone fazą badawczo-koncepcyjną.

Zacznijmy od etapu poprzedzającego tworzenie makiety, czyli zbudowania koncepcji produktu. Przeprowadzenie badania UX, pomoże nam dowiedzieć się więcej o grupie docelowej, dla której tworzymy produkt. Pomoże nam to poznać  oczekiwania i sposób, w jaki użytkownicy będą korzystać z naszego produktu. Pominięcie tego kroku może skutkować pojawieniem się poważnych błędów, których skutkiem może być zupełne minięcie się z potrzebami użytkowników.

Dobrym punktem wyjścia do zbudowania koncepcji produktu jest analiza konkurencyjnych rozwiązań.

W oparciu o zebrane informacje tworzona jest architektura informacji oraz tzw. flow produktu (diagram przedstawiający zależności między poszczególnymi ekranami), będący bazą do rozpoczęcia prac nad makietami produktu.

Paper prototyping pozwala na szybką walidację danego pomysłu

Często stosowaną techniką, pozwalającą szybko zwalidować jakiś pomysł, jest tzw. paper-prototyping, czyli tworzenie reprezentacji projektu na kartce papieru, o niskim stopniu złożoności.

Paper prototyping pozwala na weryfikację, czy wszystkie ścieżki użytkowników są obsłużone (czy wzięliśmy pod uwagę wszystkie możliwe interakcje użytkownika z produktem i nie ma żadnych ślepych uliczek). Jest również bardzo dobrą bazą do dalszej pracy nad makietami, poprzez ich rozbudowywanie na kolejnych krokach.

Dlaczego tworzenie makiet jest ważne?

Często zadawanym pytaniem jest - “Po co tak właściwie są makiety, skoro cały proces tworzenia będziemy powtarzać przy tworzeniu designu? ”.Przede wszystkim, wytworzenie makiety zajmuje znacznie mniej czasu, niż przygotowanie całego wyglądu docelowego produktu. Kolejną, bardzo istotną kwestią z punktu widzenia UX Designera jest fakt, że cała jego uwaga skupiona jest na projektowaniu interakcji pomiędzy użytkownikiem a systemem, a nie na designie, a na tym etapie procesu projektowania jest to kluczowa materia. Po trzecie, co ważne z punktu widzenia UI Designera-od tej pory może w pełni się skupić na efektach wizualnych projektu. Nie musi więc tracić czasu na zastanawianie się nad elementami, które muszą znaleźć się na ostatecznym widoku.

Taki model pracy stwarza najbardziej efektywne warunki do osiągnięcia satysfakcji zarówno klienta, dla którego tworzymy projekt, jak i przede wszystkim-przyszłego użytkownika systemu. 


Anatomia makiety UX

Co powinieneś wziąć pod uwagę przy tworzeniu makiety?

-sposób wyświetlania wartości-na tym etapie powinniśmy już wiedzieć, jakie treści i ile elementów rozmieścimy na każdym ekranie. 

-ilość kolorów-dobra makieta jest spójna kolorystycznie.  O wiele lepszym rozwiązaniem będzie stworzenie szaro-białej makiety, niż dodanie kolejnych kolorów-pozwoli nam to na lepszą identyfikację przeznaczenia poszczególnych elementów na stronie.

-elementy nawigacyjne

-odstępy pomiędzy elementami-należy pamiętać, że pusta przestrzeń nie zawsze oznacza braki w projekcie. Wręcz przeciwnie-często jest odpowiedzialna za poprawienie zrozumienia i czytelności treści prezentowanych użytkownikowi. Warto także korzystać ze stałych elementów, dostępnych w programach do tworzenia makiet i nie szukać własnych ikon i obrazów - dzięki temu zachowamy czas i zachowamy spójność projektu.


Jakie narzędzia są wykorzystywane do tworzenia makiet?

Stojąc przed wyborem najlepszego narzędzia do tworzenia makiety witryny, warto rozpatrzyć kilka aspektów:


Odwzorowanie: Jak rozbudowane jest narzędzie w kontekście projektowania wizualnego i interakcji?

Spójność: Jakie funkcje zapewniają spójność projektu w pracy?

Współpraca: Czy możesz współpracować z interesariuszami lub innymi projektantami?

Przekazywanie deweloperom: W jaki sposób narzędzie generuje specyfikację dla programistów?


Obecnie najczęściej używanymi narzędziami do tworzenia makiet są: Sketch, Figma, Adobe UX, Axure. 

Wybór najlepszego narzędzia należy do Ciebie !



Chcesz wiedzieć co możemy dla Ciebie zrobić?

Skontaktuj się mailowo
office@overlap.studio
lub zostaw nam swój numer, oddzwonimy w ciągu 24h.
Dziękujemy!
Wkrótce się odezwiemy.
Ups! Coś poszło nie tak. Spróbuj wysłać ponownie.

Marta Śledź

Project Manager

Porozmawiajmy o Twoim projekcie

Napisz do nas office@overlap.studio lub przyślij swoje dane kontaktowe, a my się odezwiemy.

Dziękujemy! Otrzymaliśmy Twoją wiadomość i niebawem się odezwiemy!
Oops! Something went wrong while submitting the form.

Psst: Nikomu nie udostępnimy Twoich danych. Zresztą sprawdź naszą politykę prywatności.