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

mockup tools

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ż:  Usability strony powitalnej, czyli jak ulżyć użytkownikom?

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

Komentarze

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

    1. Awatar Maciej Oleksy

      Da się w tym też ładny diagram reklamowy zrobić?

    2. Awatar Maciej Oleksy

      kurde, zakochałem się w tym w celu robienia diagramów które jakoś wyglądają 🙂 dzięki!

    3. Awatar Bartosz Gerono

      Hmm, nie wiem co masz na myśli mówiąc "diagram reklamowy". Generalnie chyba sprawdziłeś.
      Fajnie że się przyda do czegoś, osobiście dość często korzystam z tego. Fajną opcją jest modyfikowanie makiet ( diagramów) w grupie.

  1. Awatar Maciej Oleksy

    Da się w tym też ładny diagram reklamowy zrobić?

  2. Awatar Paweł Czerski

    Axure kosztuje wyraźnie mniej od pakietu Adobe, a dobre narzędzie do prototypowania jest ważne.
    Cenę zaporową dla kogokolwiek poza gigantycznymi firmami, mogącymi wydać setki tysięcy na narzędzie do prototypowania, ma za to iRise (http://www.irise.com) :>

    1. Awatar Maciej Oleksy

      no do crm-ów i innych sapów to raczej trzeba coś cięższego jak iRise, tylko dlaczego te systemy które się prototypuje z założenia są takie ciężkie… SalesForce w PL rzadko można spotkać w korpo, chmury się boją 😀

  3. Awatar Paweł Czerski
    Paweł Czerski

    Axure kosztuje wyraźnie mniej od pakietu Adobe, a dobre narzędzie do prototypowania jest ważne.
    Cenę zaporową dla kogokolwiek poza gigantycznymi firmami, mogącymi wydać setki tysięcy na narzędzie do prototypowania, ma za to iRise (http://www.irise.com) :>

  4. Awatar Cezary Bochniewicz

    Axure od niedawna ma dwie wersje: "zwykłą" i PRO. Ta zwykła jest za $289 więc już nie taki dramat ;>
    [http://www.axure.com/compare]

    1. Awatar Maciej Oleksy

      ale instalka dalej? 🙂

    2. Awatar Maciej Oleksy

      no to już lepiej, ale szkoda że wciąć tylko instalowany.

  5. Awatar Cezary Bochniewicz
    Cezary Bochniewicz

    Axure od niedawna ma dwie wersje: "zwykłą" i PRO. Ta zwykła jest za $289 więc już nie taki dramat ;>
    [http://www.axure.com/compare]

  6. Awatar Maciej Oleksy

    no do crm-ów i innych sapów to raczej trzeba coś cięższego jak iRise, tylko dlaczego te systemy które się prototypuje z założenia są takie ciężkie… SalesForce w PL rzadko można spotkać w korpo, chmury się boją 😀

  7. Awatar Maciej Oleksy

    no to już lepiej, ale szkoda że wciąć tylko instalowany.

  8. Awatar Tomasz Tomaszewski

    „ale fajnie! strona jest świetna i do tego tak szybko w całości ją zbudowaliście… kiedy publikujemy?” To chyba najlepsza reklama.
    Nie zawsze to najlepsze wyjście. Później trudno przekonać klienta, że stworzenie systemu zajmie trochę więcej czasu niż 2 dni 😉
    Ja osobiście preferuję styl rysunkowy. Tak żeby oddać koncepcję strony, ale by cały czas było widać że to makieta. Zresztą o koncepcji lo-fi high-fi świetnie opowiada Marcin Treder z UXPin. My już u siebie wdorżyliśmy UxPina, naprawdę bardzo fajne narzędzie. Polecam!

    1. Awatar Maciej Oleksy

      możliwości narzędzia to jedno, zarządzanie klientem to zupełnie inna sprawa, jednemu pokazujesz mniej innemu więcej, jak zwykle zależy

  9. Awatar Tomasz Tomaszewski

    „ale fajnie! strona jest świetna i do tego tak szybko w całości ją zbudowaliście… kiedy publikujemy?” To chyba najlepsza reklama.
    Nie zawsze to najlepsze wyjście. Później trudno przekonać klienta, że stworzenie systemu zajmie trochę więcej czasu niż 2 dni 😉
    Ja osobiście preferuję styl rysunkowy. Tak żeby oddać koncepcję strony, ale by cały czas było widać że to makieta. Zresztą o koncepcji lo-fi high-fi świetnie opowiada Marcin Treder z UXPin. My już u siebie wdorżyliśmy UxPina, naprawdę bardzo fajne narzędzie. Polecam!

  10. Awatar Jacek Kiernicki
    Jacek Kiernicki

    http://www.mockflow.com/ – równie dobry jak Hotgloo, ale znacznie tańszy 🙂

    1. Awatar Maciej Oleksy

      na plus jest że jest store, bardziej intuicyjna nawigacja niż hotgloo i tańsze, do tego offline, mega fajne… ale brakuje mi tych akcji na elementach bardziej zaawansowanych niż tylko link do innej strony. często projektuje apki typu one-page i klient musi zrozumieć jakieś akcje ajaxowe i inne bajery, ale na pewno zastanowię się nad MOCKFLOW zamiast moqups. DZIĘKI!

  11. Awatar Jacek Kiernicki
    Jacek Kiernicki

    http://www.mockflow.com/ – równie dobry jak Hotgloo, ale znacznie tańszy 🙂

  12. Awatar Krzysztof Kacprzyk

    Ja bardzo lubię Pecil (http://pencil.evolus.vn/). Można używać jako plugin do Firefoksa lub stand-alone. I za free.

    1. Awatar Maciej Oleksy

      kurde, jakby miał jeszcze akcje jakieś typu zmiany pod-widoków to axure mógłby zbierać manatki 🙂 ale naprawdę niezłe

    2. Awatar Mateusz Krupa

      Kiedys Pencil dzialal wolno przy wiekszej ilosci szablonow, zacinal sie itp

    3. Awatar Krzysztof Kacprzyk

      wolno działa plugin. Ja używam wersji stand-alone i nie narzekam na szybkość. Pewnie mógłby działać szybciej, ale mnie wyrabia 🙂

  13. Awatar Krzysztof Kacprzyk

    Ja bardzo lubię Pecil (http://pencil.evolus.vn/). Można używać jako plugin do Firefoksa lub stand-alone. I za free.

  14. Awatar Maciej Oleksy

    możliwości narzędzia to jedno, zarządzanie klientem to zupełnie inna sprawa, jednemu pokazujesz mniej innemu więcej, jak zwykle zależy

  15. Awatar Maciej Oleksy

    na plus jest że jest store, bardziej intuicyjna nawigacja niż hotgloo i tańsze, do tego offline, mega fajne… ale brakuje mi tych akcji na elementach bardziej zaawansowanych niż tylko link do innej strony. często projektuje apki typu one-page i klient musi zrozumieć jakieś akcje ajaxowe i inne bajery, ale na pewno zastanowię się nad MOCKFLOW zamiast moqups. DZIĘKI!

  16. Awatar Maciej Oleksy

    kurde, zakochałem się w tym w celu robienia diagramów które jakoś wyglądają 🙂 dzięki!

  17. Awatar Maciej Oleksy

    kurde, jakby miał jeszcze akcje jakieś typu zmiany pod-widoków to axure mógłby zbierać manatki 🙂 ale naprawdę niezłe

  18. Awatar Bartosz Gerono

    Hmm, nie wiem co masz na myśli mówiąc "diagram reklamowy". Generalnie chyba sprawdziłeś.
    Fajnie że się przyda do czegoś, osobiście dość często korzystam z tego. Fajną opcją jest modyfikowanie makiet ( diagramów) w grupie.

  19. Awatar Mateusz Krupa

    Kiedys Pencil dzialal wolno przy wiekszej ilosci szablonow, zacinal sie itp

  20. Awatar Krzysztof Kacprzyk

    wolno działa plugin. Ja używam wersji stand-alone i nie narzekam na szybkość. Pewnie mógłby działać szybciej, ale mnie wyrabia 🙂

  21. Awatar Tomasz Krzywania

    Mockupbid daje rade, jest kolaboracja i generalnie można pracować za darmo

  22. Awatar Tomasz Krzywania

    Mockupbid daje rade, jest kolaboracja i generalnie można pracować za darmo

  23. Awatar Piotr Butrynowski

    Jest jeszcze UXPin.com ktorego na codzien uzywam – wg. mnie najlepszy 😉

  24. Awatar Piotr Butrynowski

    Jest jeszcze UXPin.com ktorego na codzien uzywam – wg. mnie najlepszy 😉

  25. Awatar Darek Wędrychowski
    Darek Wędrychowski

    Ale Ty chyba ten artykuł skądś tłumaczyłeś za pomocą Google Translate, bo ciężko mi uwierzyć, że sam napisałeś tego typu zdania – "Minusem są, że kolaboracja jedynie dla komentowania mockup, oraz brak zaawansowanych interakcji na prototypie."

  26. Awatar Maciej Oleksy

    Darek, nie wierzysz, nie czytaj, pisałem sam a i mnie zdarzają się błędy także w składni zdania.

Skomentuj Mateusz Krupa Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *