Szablon w mockup tools – przegląd 5-ciu narzędzi do prototypowania www

Szablon w mockup tools – przegląd 5-ciu narzędzi do prototypowania www

Kiedyś prototypy stron internetowych rysowałem na kartkach lub tablicy. Jednak wielokrotna potrzeba zdalnych ustaleń projektowych zmusza nas do stosowania dedykowanych narzędzi na komputerze. Mockup tools (ang. narzędzia do prototypowania) pomagają nie tylko stworzyć szablon, ale także współtworzyć go zdalnie z innymi uczestnikami projektu. Które narzędzie do prototypowania jest najlepsze? Poznaj mój wybór!

Często Twój klient chce zobaczyć ustalenia tekstowe w postaci jakiegoś wizualnego zarysu. Czasami jest to dla niego ważniejsze niż sama koncepcja i cel strony. Wtedy tworzymy mockup strony internetowej, który jak najlepiej odwzorowuje docelowe rozwiązanie. To pozwala uniknąć niedomówień w trakcie implementacji.
Czasem zamiast 'mockup tools’ wystarczy Ci PowerPoint. Jeśli spełnia swoją rolę to będzie wystarczający. Może jednak warto spróbować narzędzi, które znacznie bardziej ułatwiają życie webdevelopera i project managera.

Mockup tools – zrób to szybciej, taniej i dokładniej!

Dobry prototyp strony internetowej pozwala uniknąć zmian w trakcie realizacji projektu, a tym samym pomaga obniżyć koszty tych zmian. Poniżej wymieniam programy i serwisy, które warto rozważyć.

  1. Axure – to narzędzie instalowane na dysku. Jest bardzo popularne w większych firmach. Mniej dostępne dla MiŚP ze względu na cenę. Głównym wyróżnikiem tego narzędzia do tworzenia mockupów www są duże możliwości odwzorowania dynamicznych zachowań w witrynie. Wadą jest brak możliwości kolaboracji online, ewentualnie poprzez złożoną konfigurację tej kolaboracji. Zawartość biblioteki elementów też nie poraża, szczególnie w kontekście desktopowego rozwiązania.
  2. JustProto – polski wydawca. Narzędzie działa w przeglądarce i oparte jest na HTML. Testowałem ponad 1 rok temu. Było trochę błędów, małe możliwości odwzorowania dynamicznych rozwiązań, a kolaboracja pozostawiała wiele do życzenia. Plusem była możliwość eskportu do HTML (w miarę czysty kod) oraz zrozumiałe zarządzanie masterpage’ami (komponenty powtarzalne na podstronach).
  3. Balsamiq – chyba najpopularniejsze rozwiązanie w sieci. Minusem jest, że kolaboracja jest tylko dla komentowania mockup w trybie podglądu oraz brak możliwości tworzenia zaawansowanych interakcji na prototypie. Jednak to zależy od potrzeb i dla wielu jest rozwiązaniem idealnym wśród mockup tools.
  4. Moqups – od Balsamiq wolę ten serwis. Z 3 powodów: (1) ekranem powitalnym jest ekran próbnego prototypowania (o jeden klik mniej) (2) łatwiejsza nawigacja (3) i przede wszystkim jest darmowy.
  5. Hotgloo – narzędzie do prototypowania stron działające we Flash. Dla mnie to chyba jedyna wada, ponieważ prototypuję na różnych urządzeniach. Ma też kilka pomniejszych błędów. Jednak obsługa stosunkowo zaawansowanych interakcji jest głównym wyróżnikiem.
mockup tools  - HotGloo
HotGloo – narzędzie z dużymi możliwościami

Powyższy przegląd pomija prototypowanie dla mobile. Nie testowałem jeszcze UXPin (polska produkcja), który zapowiada się wyśmienicie i być może będzie osobnym wpisem na blogu w kategorii mockup tools. Dla niektórych rozwiązaniem jest prototypowanie od razu w HTML, do tego może świetnie się sprawdzić DivShot. Umożliwia 'drag and drop’ elementów i zwraca czyściutki HTML5. A więc prototypujesz, jednocześnie projektując wygląd i masz gotowe szablony!

Czytaj również:  Zrzut ekranu - jak w 8h rozwiązaliśmy nasz problem?

Narzędzie do prototypowania – mój faworyt

Bez dwóch zdań Hotgloo. Wspólna edycja szablonu, komentowanie przez gości wersji prezentacyjnej, a przede wszystkim bogate konfigurowanie zachowań elementów. Jeden z klientów po prezentacji dla niego zaawansowanego prototypu zaczął od słów „ale fajnie! strona jest świetna i do tego tak szybko w całości ją zbudowaliście… kiedy publikujemy?” (myślał, że to działająca strona). To chyba najlepsza reklama. Czasami używam też Moqups do szybkim koncepcji.
Natomiast przy projektowaniu z zespołem tak jak przy modelowaniu biznesowym, pozostaje stara dobra kartka, ołówek i gumka. 🙂