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.