Dlaczego projektowanie stron i aplikacji zaczynam od makiet UX?

Dlaczego projektowanie stron i aplikacji zaczynam od makiet UX?
Makiety UX to wstępny zarys strony internetowej lub aplikacji mobilnej. Przygotowywane są zwykle w monochromatycznej kolorystyce, bez zdjęć i z użyciem podstawowej typografii. To nie dzieła sztuki, ale też nie taki jest ich cel.

Zadaniem makiet jest wstępne zwizualizowanie informacji zawartych w briefie pod kątem układu różnych elementów i architektury informacji. Podczas prezentacji makiet UX, warto na wstępie wyjaśnić to klientowi. Unikniesz w ten sposób ewentualnych uwag dotyczących braku kolorów, zdjęć lub innych graficznych elementów.

Najpierw makieta, potem projekt

Po co tworzyć makiety, gdy można od razu przejść do projektowania? Można, jednak w przypadku rozbudowanych serwisów internetowych lub aplikacji takie podejście jest mało efektywne. Projektowanie zajmuje znacznie więcej czasu niż przygotowanie makiet. Zawsze pojawiają się też poprawki, które w niektórych przypadkach znacznie szybciej można wprowadzić we wstępnej makiecie niż w gotowym projekcie.

Projektowanie makiet UX pozwala szybciej wyeliminować ewentualne problemy związane np. z nawigacją czy hierarchią informacji. W zależności od umiejętności projektanta i oprogramowania makiety mogą przybierać statyczną lub interaktywną formę. Ta druga jest znacznie ciekawsza, ponieważ pozwala lepiej zwizualizować sposób działania finalnego projektu. Użytkownicy mogą przechodzić pomiędzy różnymi działami strony, zobaczyć podgląd mikrointerakcji (np. po najechaniu na wybrane elementy) i sprawdzić, czy przedstawiony user flow jest rzeczywiście prawidłowy.

Wiele programów do tworzenia makiet pozwala też na ich udostępnienie online. W ten sposób możemy łatwo skonsultować szkic strony z klientem, testerem lub programistą.

Po lewej fragment makiety UX, a po prawej - finalny projekt strony internetowej, które zaprojektowaliśmy dla jednego z naszych klientów. Mimo widocznych kilku różnic ogólny układ strony został dopracowany już na etapie projektowania makiet.

Fragment makiety UX i finalnego projektu strony internetowej, które zaprojektowaliśmy dla jednego z naszych klientów. Mimo widocznych kilku różnic ogólny układ strony został dopracowany już na etapie projektowania makiet.

Zalety makiet UX:

  • pozwalają poprawić user flow i użyteczność projektowanej strony lub aplikacji
  • są szybkie w przygotowaniu
  • przyspieszają realizację rozbudowanych stron internetowych i aplikacji
  • nie wymagają specjalistycznej wiedzy z zakresu designu
  • do ich stworzenia można wykorzystać bezpłatne oprogramowanie (np. Adobe XD)

Programy do tworzenia makiet UX

Na rynku istnieje bardzo dużo programów do projektowania makiet stron i aplikacji. Najpopularniejsze to: Adobe XD, Sketch, InVision, Axure, Webflow, Framer czy Atomic. Który z nich jest najlepszy? Dużo zależy od preferencji samego projektanta, ponieważ pod kątem ilości funkcji większość programów oferuje podobne możliwości.

Osobiście do projektowania makiet UX wykorzystuję Adobe XD. Jest to bardzo łatwy w obsłudze program, z którym poradzi sobie każdy projektant i programista. Pozwala też na płynne przejście od makiet do projektowania finalnych projektów. Adobe XD jest bowiem doskonałym narzędziem zarówno do projektowania makiet, jak i finalnych projektów stron internetowych i aplikacji. Na uwagę zasługuje także możliwość zapisywania projektów w chmurze oraz udostępniania ich online, co znacznie ułatwia pracę zespołową.

Ile to kosztuje?

Tu małe zaskoczenie. Adobe XD to całkowicie darmowy program. Inny darmowy program to Origami Studio. Jest on niestety dostępny tylko dla systemu MacOS. Doskonała większość pozostałych tego typu programów jest zwykle płatna. Zazwyczaj dostępne są jednak wersje trial, które pozwalają poznać możliwości systemu i podjąć decyzję o ewentualnym zakupie wersji komercyjnej.

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.