Pisałam już trochę na blogu o programach do projektowania UI (o tu) i programach do animacji interfejsu (o tu), ale na wpis o programach do prototypowania musieliście chwilę poczekać. Głównie dlatego, że byłam przekonana, że dawno już go opublikowałam… cóż. Jest więc dzisiaj!
Poniżej znajdziecie listę najpopularniejszych programów i kilka alternatyw, ale to oczywiście nie oznacza, że to wszystkie możliwe rozwiązania. Tych jest bardzo dużo i co chwilę powstają kolejne! No to zaczynamy:
UXPin
Aplikacja webowa, która w dodatku, została stworzona przez Polaków. Ma rozbudowane opcje projektowania i prototypowania. Całkiem niedawno rozszerzona została o „systems” – narzędzie, które ma wspierać budowanie i zarządzanie design systemami. UXPin nie ma swojej darmowej wersji, ale najprostszą, okrojoną wersję dostaniecie już za 9 dolców miesięcznie. Jeżeli nie przeszkadza Wam dostępność narzędzia tylko, kiedy macie internet, to UXPin jest naprawdę solidnym rozwiązaniem.
Strona: https://www.uxpin.com
Platforma: WEB
Cena: od $9 / miesiąc
Axure RP
Pozwolę sobie zacząć od Axure RP. To taki dziadek wsród narzędzi do prototypowania i prędzej czy później gdzieś na niego natraficie. To chyba najbardziej rozbudowane narzędzie do prototypowania, które pozwala na tworzenie zawiłych interakcji i warunków logicznych. W Axure możecie zrobić prototyp bardzo zbliżony do produktu, który tworzycie. Zawiłość i poziom zaawansowania ma jednak swoje minusy – przekłada się to bowiem bezpośrednio na interfejs, a także sprawia, że próg wejścia jest dość wysoki (pod warunkiem, że chcecie nauczyć się tych wszystkich interakcji i warunków). Więcej o Axure pisałam tu: http://zebza.net/ui-tools-axure/
Axure jest programem dostępnym zarówno na Maci jak i komputery z systemem Windows, mimo leciwego wieku wciąż jest aktualizowany i ma ogromną społeczność ze świetnie działającym forum. Największy minus to zdecydowanie cena.
Strona: https://www.axure.com
Platforma: Windows, Mac
Cena: $29 / miesiąc lub $495
Invision
Invision w połączeniu ze Sketchem lub Photoshopem to całkiem popularne rozwiązanie. Bo to nic innego jak program do projektowania plus narzędzie, które sprawi, że dodamy do projektów interakcje. Niewątpliwą zaletą Invision jest to, że jest darmowe i pozwala na naprawdę wygodną współpracę z zespołem. To także wygodne narzędzie do zbierania feedbacku od klientów.
Działanie aplikacji jest bardzo proste. Wgrywamy widoki ekranów (pod postacią plików .png, .jpg czy .psd) i oznaczamy na nich „aktywne” obszary, pod które podpinamy interakcje. Dzięki temu w bardzo szybki sposób możemy wygenerować interaktywny prototyp.
Pamiętać należy, że podobnie jak UXPin, Invision jest aplikacją webową, wymagającą dostępu do internetu, aby z niej korzystać.
Strona: https://www.invisionapp.com
Platforma: Web
Cena: darmowe
Marvel
To dla mnie jedno z wygodniejszych narzędzi do prototypowania, zwłaszcza jeśli nie musicie wpychać do prototypu nie wiadomo jakiej logiki. I działa podobnie jak Invision – to znaczy będziemy musieli stworzyć widoki w programie (np. graficznym), by przerzucić je potem do Marvela i odpowiednio podlinkować. Interfejs jest prosty w obsłudze i wierzę, że można nauczyć się go przy pierwszym podejściu do prototypowania.
Marvel jest aplikacją webową, więc znów, niezależnie od posiadanego systemu, potrzebujecie tylko przeglądarki i internetu. Ma także wersję darmową, która ogranicza jedynie ilość prototypów, które możemy stworzyć.
Strona: https://marvelapp.com
Platforma: Web
Cena: jest wersja darmowa
Adobe XD
Tego pana chyba nie trzeba nikomu przedstawiać, bo Adobe zadbało o odpowiednio duży szum marketingowy. Niewątpliwą zaletą XD jest to, że działa zarówno na Macu jak i Windowsie (choć tu wymagana wersja systemu to 10). W dodatku jeśli macie wykupiony pakiet CC, XD jest jego częścią, więc możecie po prostu sobie go przetestować.
XD jest stosunkowo świeżym programem, a co za tym idzie, trzeba dać mu jeszcze trochę czasu na rozkręcenie się. Pierwsze wersje zupełnie do mnie nie przemawiały, teraz zerkam w jego stronę znacznie częściej. Co jakiś czas pojawią się ciekawsze, wciąż drobne aktualizacje i poprawki, więc warto się przyglądać lub po prostu przetestować. XD integruje się również z innymi aplikacjami takimi jak Avocode, Zeplin czy ProtoPie.
Strona: https://www.adobe.com/pl/products/xd.html
Platforma: Windows, Mac
Cena: zależnie od pakietu Adobe, od $10/miesiąc
Kilka alternatyw
Choć powyższe rozwiązania to te, które najczęściej spotkacie, nie są jedynymi. Jak wspomniałam wyżej, co chwilę powstają nowe narzędzia, nie wszystkie są warte uwagi, nie każde przetrwa próbę czasu, niektóre po prostu zostaną wykupione przez większych graczy. Ale są też ciekawostki, o których warto wiedzieć, a które być może staną się Waszym głównym narzędziem. Wśród moich typów są:
atomic – to moje najświeższe odkrycie, które zapowiada się obiecująco. Przede wszystkim – to aplikacja webowa. Po drugie – ma darmową wersję, a to, jeżeli uczycie się dopiero prototypować jest dużym plusem. Mam wrażenie, że atomic jest jednym z najbardziej rozbudowanych, darmowych narzędzi – ale to muszę jeszcze sprawdzić. Może ktoś z Was z niego korzysta? Link: https://atomic.io
Origami – jest jedną z tych aplikacji, które od dawna obserwuję, ale sama nie miałam okazji w niej pracować. Obiecuję jednak poprawę, bo mam wrażenie, że to całkiem obiecujące narzędzie. Zwłaszcza, że jest za darmo (ale niestety tylko na Maca). Sposób tworzenia animacji i interakcji jest trochę udziwniony w porównaniu do konkurentów, ale wcale nie musi oznaczać, że jest zły. Po prostu trzeba go sprawdzić. Link: https://origami.design
ProtoPie – to jedno z niewielu desktopowych narzędzi dostępnych na Windowsa, które pozwala nam dodać do zaimportowanych z np. Figmy czy Adobe XD projektów, zaawansowane interakcje. Wspominałam zresztą o nim przy okazji przeglądu aplikacji do animacji interfejsu! Link: https://www.protopie.io
Framer – rónież opisywałam go przy okazji animacji UI, ale jak najbardziej można użyć go w celu stworzenia prototypu. Jak wspominałam, ze wszystkich programów, ten na pewno nie jest „moim” typem ze względu na charakterystyczny sposób działania, ale z pewnością znajdzie swoich zwolenników. Niestety. dostępny tylko na Maca. Link: https://framer.com
Figma – to raczej aplikacja do tworzenia projektów, ale ma wbudowane funkcje przejść, które dodatkowo można ostylować (np. typem animacji), więc przy bardzo prostych prototypach, powinna się nieźle sprawdzić. W dodatku jest aplikacją webową, więc skorzystają z niej również windowsowcy. Link: https://www.figma.com
W filmie na temat programów, wspominałam również o aplikacjach, na które czekam. Pierwszą z nich jest produkt, który tworzy ekipa InVision. InVision Studio ma być w pełni działającym programem do projektowania i prototypowania. Więcej możecie dowiedzieć się tu: https://www.invisionapp.com/studio
Natomiast druga aplikacja to Phase: https://phase.com, która zapowiada małą rewolucję. Ale czy tak będzie, ocenić będzie można dopiero, kiedy produkt zostanie wypuszczony do użytkowników.
To tylko appki
Pamiętajcie, że niezależnie od tego, który z programów wybierzecie, to wciąż tylko narzędzie. A narzędzie nie pomyśli za nas i samo nie zrobi dobrego, mądrego projektu. Narzędzia lubią się zmieniać i będą się zmieniać, to naturalne. Nie ma więc większego sensu próbować osiągać czarny pas w tym czy tamtym, jak długo tego naprawdę nie potrzebujecie.
Ode mnie to by było tyle. Znacie jeszcze jakieś programy warte uwagi? A może sami korzystacie z czegoś, co nie pojawiło się na tej liście? Dajcie znać!
