Marcin Lewandowski
Marcin Lewandowski
Programista PHP ( Symfony ), blogger, trener oraz miłośnik kawy. Na co dzień pracuję z Symfony, RabbitMQ, ElasticSearch, Node.js, Redis, Docker, MySQL.

Projektowanie makiet z UXPin i Balsamiq Mockups

Projektowanie makiet z UXPin i Balsamiq Mockups

Tworząc różnego typu aplikacje spotykamy się z potrzebą szybkiego zaprojektowania interfejsu aplikacji. Do tego celu możemy wykorzystać Photoshop-a lub aplikację do tworzenia makiet.

Czym są makiety ?

Jeśli nigdy nie mieliście do czynienia z projektowaniem jakiejkolwiek aplikacji to powinniście wiedzieć, że cały proces rozpoczyna się od zdefiniowania wymagań i na tej podstawie powstają makiety. Często makiety takie powstają na kartce papieru jednak szybciej i wygodniej jest je projektować w aplikacjach do tego przeznaczonych jak na przykład UXPin z którego jest poniższa makieta.

Jak widzicie makieta to zarys wyglądu aplikacji, dzięki niej możemy określić, gdzie będą znajdowały się poszczególne elementy aplikacji. Na powyższej makiecie w nagłówku znalazła się nazwa modułu w którym aktualnie przebywamy oraz dwa przyciski, poniżej lista artystów. Na samym dole znajdziemy menu pozwalające na szybkie przemieszczanie się pomiędzy dostępnymi modułami. Zaprojektowanie tej makiety zajęło kilka minut, i jest to makieta Lo-Fi (low fidelity) czyli makieta on niskiej szczegółowości. Makiety tego typu bardzo schematycznie przedstawiają widoki projektowanej aplikacji. Zamiast elementów interfejsu mamy umowne symbole, dzięki czemu czas wykonania jest relatywnie krótki. I służą głównie do prezentacji i omówienia koncepcji aplikacji z klientem.

W porównaniu do makiet Lo-Fi, makiety Hi-Fi (high fidelity) mogą wydawać się już gotowym projektem aplikacji. Jednak nadal są to makiety jednak w miejsce umownych symboli pojawiają się już prawdziwe przyciski, przykładowe grafiki czy inne elementy interfejsu. Takie makiety możemy już wykorzystać do badań na użytkownikach, którzy w przypadku uproszczonych makiet mogli by mieć problem z ich używaniem.

Aplikacje do tworzenia makiet

Makiety w wersji papierowej często to małe dzieła sztuki, jednak ciężko pracuje się z takimi papierowymi makietami w zespole. Zwłaszcza jeśli zespół jest rozproszony po kraju czy świecie. Dlatego stworzono wiele aplikacji ułatwiających proces projektowania oraz wymianę informacji pomiędzy zespołem. Niestety nie jestem w stanie omówić wszystkich aplikacji i ich funkcji, jednak przygotowałem listę aplikacji którymi warto się zainteresować:

Z powyższej listy po krótce wspomnę o dwóch aplikacjach, których używam i mogę z czystym sumieniem polecić. Jednak zachęcam do przetestowania także innych, gdyż może to one wam przypadną do gustu i spełnią wasze wymagania.

UXPin

UXPin jest aplikacją webową, więc mamy do niej dostęp praktycznie z każdego komputera z przeglądarką internetową. W aplikacji możemy tworzyć interaktywne projekty, zaawansowane prototypy wykorzystując setki gotowych elementów. Interfejs aplikacji jest bardzo intuicyjny, a jeśli mieliście do czynienia z innymi aplikacjami tego typu, to nic nie powinno was zaskoczyć.

Jak widać powyżej projekty wyglądają ładnie i estetycznie. Sam interfejs także da się opanować w ciągu chwili.

Pomimo prostoty interfejsu aplikacja posiada wiele zaawansowanych opcji, z których musimy nauczyć się korzystać. Samo projektowanie także wymaga wprawy, więc nie zniechęcajcie się przy pierwszych problemach. Zajrzyjcie także na kanał YouTube na którym znajdziecie sporo wartościowych materiałów. Jeśli aplikacja was zainteresowała to możecie wypróbować wersję trial przez 7 dni, a później dokonać zakupu o ile spełni wasze oczekiwania. Cennik na ten moment kształtuje się następująco:

W moim odczuciu cena jest rozsądna jeśli rzeczywiście tworzymy sporo makiet. Jeśli są to sporadyczne przypadki to warto zainteresować się kolejnym rozwiązaniem.

Balsamiq Mockups

Balsamiq jest to drugą aplikacją z której korzystam i wykorzystuję ją częściej niż UXPin, a to ze względu na przyjemniejszą stylistykę elementów oraz posiadanie wersji desktopowej. Oczywiście stylistyka to moje subiektywne odczucie i możecie uznać, że projekty w innej aplikacji podobają się wam bardziej.

Układ opcji w aplikacji jest bardzo zbliżony do tej z UXPin. Z tą różnicą, że menu wyboru elementów zostało przeniesione na górę, a po lewej stronie mamy listę makiet w ramach projektu.

W tym przypadku także aplikacja jest płatna, z tą różnicą że możemy kupić wersję instalowaną lokalnie na komputerze. Co jest plusem bowiem opłata wtedy jest jednorazowa i wynosi 89$. Jednak jeśli chcieli byście korzystać z wersji online, to ta przyjemność będzie was kosztować od 9$ / mies. przy 2 projektach, do 199$ / mies. przy 200 projektach.

Podsumowanie

Aplikacji do projektowania makiet jest wiele, a ceny są zróżnicowane dlatego warto zapoznać się z kilkoma. Pozwoli nam to na porównanie możliwości oraz wygody korzystania. Niezależnie od tego którą aplikację byście nie wybrali, to warto przetestować ten sposób projektowania aplikacji nawet przy niedużych projektach. Pozwoli to często zaoszczędzić sporo czasu na późniejszych modyfikacjach, które życzy sobie klient po obejrzeniu pierwszego prototypu.