Narzędzia
komentarzy 21

Narzędzia do prototypowania

Tworzenie i ulepszanie produktów w oparciu o prototypy i dobre praktyki User Experience rośnie w siłę. Powinniśmy się cieszyć, ponieważ projektowanie
ze szczególnym zwróceniem uwagi na intuicyjność, interakcję z użytkownikiem
i ergonomię staje się chlebem powszednim dla wielu twórców stron, aplikacji, programów, ale też produktów wykraczających poza ramy wyświetlaczy.

Dlaczego tak jest? Bo takie podejście (mimo że jest bardzo czaso- i kosztochłonne) szybko się zwraca – użytkownicy doceniają fakt, że używanie „aplikacji” jest dziecinnie proste, a czasem wręcz naturalne.

Istnieje wiele narzędzi pozwalających na prototypowanie stron internetowych
i aplikacji mobilnych. Przygotowaliśmy zestawienie tych najbardziej popularnych.

iRise

Nowe narzędzia stworzone przez ekipę z Kalifornii. iRise pozwoli Wam na tworzenie interaktywnych prototypów stron internetowych, aplikacji mobilnych a nawet smartwatchy. Możecie wybrać czy ma być to prototyp low czy hi-fidelity. Sporo w nim komponentów UI, z których możecie skorzystać w trakcie pracy. Dodatkowo iRise udostępnia Wam opcję mobilnych gestów. Co więcej, w iRise możecie komentować, dodawać user flow, robić notatki a nawet tworzyć dokumentacje. Narzędzie jest nieźle rozbudowane i wygląda przyjemnie.

Całość możecie sobie przetestować przez 30 dni za darmo, potem ceny zaczynają się od 69 dolarów za miesiąc.

iRise

prototyping tool

 

Adobe XD

W końcu po newsach o tajemniczym projekcie Kometa (Project Comet) Adobe wydał swoje pierwsze narzędzi dla projektantów UX. Adobe Experience Design, w skrócie Adobe XD, bo tak nazywa się narzędzie pozwala na zaprojektowanie i stworzenie interaktywnego prototypu www i aplikacji mobilnych w jednym programie, a zmiana pomiędzy widokiem Prototypu a Projektu jest bardzo płynna. Możecie skopiować dowolne elementy z innych programów Adobe do Adobe XD a następnie dowolnie je zmodyfkować (kolor, kształt, itp). Super ficzerem jest Repeat Grid, który umożliwi Wam bardzo szybkie skopiowanie modułów i edycję.

Adobe XD w tym momencie jest dostępny tylko dla użytkowników Maca, co boli. Ale może znajdzie się jakiś Mac lover, który opowie o pracy w Adobe XD? 🙂

Adobe XD

adobe xd

Mockplus

Darmowe narzędzie, które możecie ściągnąć bezpośrednio na komputer i pracować Offline. Jest support dla wszystkich platform, co cieszy serce. W Mockplus przygotujecie skecze i wireframe’y oraz stworzycie interaktywne prototypy poprzez proste funkcje drag and drop. 200 komponentów i ikon pomoże Wam szybko uporać się z pracą. Dodatkowo poprzez skan kodu QR możecie sprawdzić jak wygląda i zachowuje się na podglądzie, a gotowym prototypem podzielicie się z zespołem lub klientem.

Mockplus

mockplus

Antetype

Coś dla użytkowników Maca. Antetype jest jednym z liderów rynku prototypowania aplikacji na Maca. Apka pozwola stworzyć responsywne strony internetowe, aplikacje mobilne a nawet interfejsy oprogramowania. Znajdziecie
w nim wiele gotowych szablonów różnych urządzeń oraz ponad 400 widgetów gotowych do użycia. Dzięki dynamicznemu layout’owi możecie łatwo przeciągać
i zmieniać każdy element bez naruszania układu strony. Nie musicie też przełączać się na pakiet Adobe lub inne oprogramowanie dla projektantów, ponieważ Antetype zapewnia wszystkie narzędzia do tworzenia prototypów Hi-Fidelity (dostępne są gradienty, cienie, zaokrąglanie rogów itp) Możecie również określić działania, zdarzenia, stany widgetów i zmiany ekranów dzięki funkcji interakcji. Gotowy projekt wyeksportujecie jako pixel lub grafikę wektorową a także wygenereujecie kod CSS.
Pobierzcie bezpłatną wersję próbną (30 dni). Albo zdecydujecie się na zakup.
Cena: $189,99

AnteType

antetype

 

Justinmind

Justinmind używamy w naszym studio. To aplikacjado tworzenia prototypów stworzona w 2008 roku. Dużym plusem Justinmind jest fakt, że można ją ściągnąć na swój komputer, a nie obsługiwać z poziomu przeglądarki, co umożliwia nam pracę offline. Aplikacja pozwala nam projektować wszystko od stron www po zaawansowane interfejsy paneli administracyjnych. Możemy korzystać z gotowych elementów w bibliotekach UI, tworzyć Master Pages (szablony, który można wykorzystać w kolejnych stronach). Olbrzymim plusem jest możliwość ściągnięcia dodatków w postaci gotowych modułów, między innymi bootstrapowych elementów. Prototypem aplikacji mobilnej, nad którym pracujemy, możemy podzielić się z naszym zespołem i testować na dowolnym smartfonie. Każdą rzecz czy zmianę można skomentować. Justinmind jest prosty w obsłudze, jednak jego wydajność pozostawia czasem sporo do życzenia.

Koszt aplikacji zaczyna się od 19 dolarów miesięcznie, można za darmo korzystać
z wersji PRO przez 30 dni.

Justinmind

justinmind

UXPin

O UXpin, czyli intuicyjnym narzędziu do prototypowania, które stworzone zostało przez Polaków pisał już Techcrunch, Wall Street Journal czy Fubiz.  Na czym polega ten fenomen? UXPin umożliwi Wam sprawne przejście między papierowym prototypem a kreowaniem aplikacji webowej. W sprzedaży były (może jeszcze będą :D) zestawy papierowych prototypów (Web lub Mobile Kit), dzięki którym zbudujecie wireframe offline. Chcecie przerzucić się na kreowanie w sieci? Wystarczy zrobić zdjęcie stworzonemu prototypowi, a pojawi się w aplikacji online.

Teraz trochę o aplikacji w sieci. Dzięki UXPin stworzycie wireframe’y w bardzo prosty sposób. W webowych bibliotekach UI znajduje się tysiące gotowych elementów w tym elementy bootstrapowe. Wszystkie prototypy mogą zostać opisane, a pracować nad makietami można w zespole, komentując zmiany na bieżąco.  Dzięki opcji Smart Guides (znanej już użytkownikom Adobe) dokładnie wymierzycie odległości pomiędzy elementami. Wszystkie obrazy możecie edytować w aplikacji, zmieniając jasność, kontrast, ostrość czy transparentność. UXpin oczywiście umożliwi stworzenie interakcji oraz końcową symulację całego projektu. Gotowy prototyp możecie wyeksportować do formatów pdf, html czy png. Natomiast na blogu UXpin możecie ściągnąć darmowe ebooki, podszkolić się z wiedzy na temat UX i UI, lub obejrzeć tutoriale.

UXPin kosztuje $19 miesięcznie. Niestety wersja próbna trwa tylko 7 dni, ale można ją przedłużyć do 30 dni kontaktując się z supportem.

UXPin

uxpin

Invision

Invision to kolejne bardzo intuicyjne i proste narzędzie do tworzenia prototypów. W Invision wystarczy przesłać swoje projekty w formacie psd lub png i dodać hotspoty, aby przekształcić statyczne ekrany w klikalne, interaktywne prototypy
z szeregiem gestów, przejść i animacji. Invision umożliwia też kolaborację nad projektem w zespole oraz komentowanie pracy.  Dzięki synchronizacji z Creative Cloud, Dropbox czy Google Drive, prototypy aktualizują się za każdym razem, kiedy edytujecie pliki źródłowe. Możecie też przejrzeć historię poprzednich wersji
i przywrócić ich wcześniejszy wygląd.

Praca nad jednym prototypem jest darmowa. Starter pack, gdzie możemy zarządzać 3 projektami, kosztuje $15 miesięcznie.

Invision

invision

POP

Aplikacjaumożliwiająca prototypowanie aplikacji moblinych i podobnie jak UXPin umożliwia płynne przejście między skeczem na papierze a wersją digitalową. Wystarczy zrobić zdjęcia swoim narysowanym widokom aplikacji, aby przerzucić je do POP, lub też przerzucić warstwy z pliku .psd przez Adobe Creative Cloud. Następnie z łatwością możecie dodać przejścia między widokami, gesty
i interkacje. POP jest zsynchronizowany z Dropboxem, dzieki czemu podzielicie się swoją pracą z innymi.

AplikacjaPOP jest za darmo, jeśli używacie jej tylko do dwóch projektów.
Wersja full pro za $25 miesięcznie.

POP

Marvel

Aplikacja umożliwi nam stworzenie prototypu strony internetowej czy aplikacji mobilnej. Wystarczy przesłać gotowe pliki psd, png, jpg lub gif albo zrobić zdjęcia swoim szkicom przygotowanym na papierze. W Marvel możecie przekształcić statyczne ekrany w klikalne, interaktywne prototypy z szeregiem gestów, animacjami czy przejściami. Możecie też przejrzeć prototypy udostępnione przez innych użytkowników Marvel.

Aplikacjajest dostępna za darmo pod warunkiem, że nie współpracujecie z nikim,
a skomentować możecie jedynie 3 projekty. Paczka Pro zaczyna się od $9 miesięcznie.

Marvel

Balsamiq

Jest narzędziem do szybkiego prototypowania. Stworzone makiety w Balsamiq
to szkice „low fidelity”, przypominające odręczne szkice. Możecie skorzystać
z ponad 500 dostępnych ikon i wielu podstawowych gotowych elementów dostępnych w bibliotece. Balsamiq umożliwia dodanie podstawowych interakcji
i dzielenie się prototypem z zespołem.

Cena od $89, wersja próbna na 30 dni.

Balsamiq 

balsamiq

Axure

Największa (pod względem funkcjonalności) aplikacja do prototypowania przeznaczona do zaawansowanych projektów. W Axure można szybko stworzyć prototypy stron (również responsywnych) czy aplikacji mobilnych, dodać interakcje, Master Pages i skorzystać z bibliotek gotowych elementów (Widget Libraries). W dalszym procesie można importować obrazy, dodawać kolory, gradienty czy przezroczystość. Interfejs Axure na wejściu wygląda dość odstraszająco i przytłacza ilością dostępnych opcji. Z pomocą przychodzi rozbudowane Forum i Blog, na którym można się podszkolić i poznać tajniki narzędzia.

Ceny w porównaniu do konkurencji są dość wysokie – pakiet z możliwością pracy
z zespołem kosztuje 589$. Można otrzymać darmowa wersję edukacyjną, jeśli jest się studentem. Ponmadto z Axure można skorzystać za darmo przez 30 dni.

Axure

axure_example_ss

Flinto

Flinto to aplikacja stworzona do prototypowania aplikacji mobilnych. Wystarczy wrzucić gotowe png z poszczególnymi widokami aplikacji, dodać interakcje i zlinkować widoki ze sobą. Na koniec pracy nad prototypem można dodać ikonę aplikacji i ekran startowy. Tak przygotowany projekt jest gotowy do wysłania komukolwiek. Użytkownicy tabletów i smartfonów mogą zainstalować prototyp
i korzystać z niego jak z normalnej aplikacji. Zobaczą też wszelkie zmiany, które wprowadzicie do prototypu.

Przez 30 dni możecie jej używać za darmo, po tym czasie koszt wzrasta do 20 dolarów miesięcznie.

Flinto

flinto

Proto.io

Proto.io umożliwi Wam prototypowanie aplikacji mobilnych i stron internetowych. Możecie skorzystać z template’ów jak i bogatej biblioteki gotowych elementów. Elementy można dowolnie ostylować, a projektem podzielić się z innymi na Dropbox. Po skończonej pracy możecie przetestować swój prototyp, a nawet podzielić się nim i otrzymać cenny feedback  dzięki społeczności Proto.io Spaces.

Możecie przetestować Proto.io przez 15 dni za darmo. Ceny zaczynają się od $24 za miesiąc.

Proto.io

proto

 

Moqups

Moqups to proste i bezpłatne narzędzie online (konta Premium są płatne, ale o tym za chwilę) do tworzenia makiet. W bezpłatnej wersji mamy dostępnych 31 elementów, takich jak wykresy, ikony, buttony, figury czy iphona. Możecie też wrzucać własne obrazy przeciągając je bezpośrednio do okna lub dodawać hotspoty do wybranych elementów. W wersji Premium (ceny zaczynają się od $99 rocznie) macie możliwość pracować nad wieloma projektami, podzielić się nimi ze swoim teamem, komentować zmiany na bieżąco, tworzyć Master Pages, wyeksportować gotowy prototyp do Pdf’a lub Png i uzyskać support.

Moqups

moqups

 

Polecamy się z zestawieniem narzędzi do protypowania  tutaj. Tabelka przejrzyście opisuje funkcjonalność poszczególnych narzędzia do makietowania, co pozwoli Wam wybrać najlepsze narzędzie.

tabletkaproto

 

 

Dajcie znać w komentarzach co polecacie i na czym pracujecie budując interaktywne prototypy (poza kartką i długopisem), bo szukamy alternatywy dla Justinmind.

  • Tomasz Jedrak

    Order Group, a co np. z Form (który ostatnio Google wykupił) oraz Origami (Facebooka biblioteka dla Quartz Composera) ?

    PS. pracowałem jakiś czas w UXPinie nad kilkoma projektami i przyznam, że trochę się umęczyłem, mimo wszystko ekipa z UXPina robi naprawdę dobrą robotę i fakt w porównaniu do wyżej wymienionych usług są najlepsi.

    • Malwina Ch

      Nie ma narzędzia idealnego 😉 Dzięki za wzmiankę o Form i Origami. Po kliku testach pojawią się w zaktualizowanej liście.

  • Magdalena Olszewska

    7 dni okresu trialowego w UXPin to tylko „rozgrzewka”:) Można go wydłużyć do 30 dni bez żadnego problemu 🙂 Wystarczy użyć social media bądź napisać wiadomość na hello@uxpin.com🙂

    • Malwina Ch

      O, super wiadomość Magda, dzięki 🙂

      • Magdalena Olszewska

        przyjemność po naszej stronie!:)

  • Michał Klincewicz

    moqups… proste, ale w dobrze się pracuje no i tanie 9$ za 10 projektów/miesiąc

    • Malwina Charko

      dobra alternatywa dla tych z mniejszą kieszenią 🙂

    • Malwina Charko

      Michał, to chyba $99 😉

      • Michał Klincewicz

        Dokładnie 9€ za miesiąc… (10 projektów aktywnych), projekty można archiwizować i do nich wracać (kiedy są w tym stanie nie liczą się do pakietu)

  • Jeśłi chodzi o Axure można dostać za free wersję edukacyjną. Trzeba się tylko udokumentować jako student 🙂

    WPis szernięty 🙂

    • Malwina Ch

      dobra wiadomość dla studiujących 🙂

  • Agnieszka Kierczak

    Do listy dorzuciłabym jeszcze Mockingbird – także darmowy w przypadku jednego aktywnego projektu. Więcej o tym narzędziu można poczytać na moim blogu: http://do-doing-done.blogspot.com/2015/07/darmowe-narzedzia-do-zarzadzania_31.html.

    A Invision mój faworyt 😉

    • Malwina Ch

      o, super! na pewno się przyjrzymy 🙂

    • Jacek Zajączkowski

      Alternatywą dla InVision jest polskie Symu.co 😉

      • Malwina Charko

        dobre bo polskie 😀

        • Jacek Zajączkowski

          Dobre, bo sprawnie działa i jest tańsze 😀

  • Pingback: UX – najlepsze źródła do nauki | Order Group Blog()

  • Zen3G

    No cóż ja nadal korzystam z Painta i se radze. Dziwi fakt, że UXpin jest zrobiony przez Polaków, a brak w nim języka polskiego.

    • Malwina Charko

      Painta? łał 🙂 Rzeczywiście UXpin postawił na międzynarodowość, ciężko nawet odgadnąć, że firma pochodzi z Polski.

  • Pingback: Podsumowanie 2015 – najczęściej czytane artykuły | Order Group Blog()

  • Jacek Zajączkowski

    Ja bym dorzucił jeszcze polski projekt Symu.co. Możliwościami nie odstający od InVision