Narzędzia do prototypowania www

To nie narzędzie czyni cię projektantem, ale twoje pomysły i doświadczenie w tworzeniu dobrych, czytelnych i użytecznych rzeczy. Nie ulega jednak wątpliwości, że potężniejsze narzędzia, to wygodniejsza i stabilna praca oraz łatwiejsza współpraca z innymi twórcami.

Wielu freelancerów nie przywiązują pewnie tak dużej wagi do prototypowania elementów UI, ponieważ liczy się czas wykonania projektu i możliwość szybkiej monetaryzacji pracy. Tak wygląda dziś rynek dla małych, indywidualnych projektów. Pomijam już nawet fakt, że wiele projektów powstaje w oparciu o komercyjne szablony bo tak jest szybciej, łatwiej i może to zrobić praktycznie każdy.

Ci, dla których design ma znaczenie (a ich klienci zechcą za to zapłacić) z pewnością doceniają rolę prototypowania – od etapu makiety aż po działający projekt z symulowaną interakcją. Tu pojawia się pytanie jakiego narzędzia użyć aby pracować sprawniej.
Osobiście pracuję korzystając z 3 różnych narzędzi, stosując ich wymiennie, zależnie od bieżących potrzeb. Zamierzam podzielić się wrażeniami i subiektywną oceną na ich temat.

Adobe XD, Sketch, InVision Studio, Affinity Designer i Adobe Illustrator.

To zestawienie może nieco dziwić. O ile Adobe XD, InVision Studio i Sketch są narzędziami do prototypowania, o tyle Affinity Designer jest programem do grafiki wektorowej, z opcjami ułatwiającymi projektowanie – podobnie jak Illustrator. Warto jednak dodać, że narzędzia do prototypowania często mają dość ubogie możliwości rysowania czy tworzenia bardziej zaawansowanych kształtów – kładąc nacisk na kompozycję i zarządzanie assetami (elementami składowymi projektu).

Adobe XD i Illustrator.

Tandem idealny dla tych, którzy mają pełen abonament Creative Cloud.

W sumie mamy tu wszystko co potrzebuje projektant – od najlepszego istniejącego pakietu do grafiki wektorowej – po bardzo intuicyjne i proste narzędzie do makietowania i symulowania interakcji.
Jeśli dodamy możliwość współdzielenia elementów poprzez biblioteki mediów (w ramach konta AdobeID), nie widzę w tym przypadku żadnych braków.

Adobe XD podobnie jak DreamWaver oferuje łatwą możliwość publikowania działającego prototypu za pomocą kodu QR, i podejrzenie na urządzeniu mobilnym. Trudno tego nie lubić. Potężna zaleta przyjaźni z pakietem Creative Cloud.

Zalety:
– pełna integracja z Creative Cloud (biblioteki mediów)
– łatwe publikowanie online i dopracowana symulacja UX
– prosty interfejs XD
– potężne możliwości Illustratora i łatwa przenośność elementów do XD
– sprytne pomoce w makietowaniu powtarzalnych elementów (np: dla katalogu produktów czy długiej listy złożonych elementów, gdzie automatycznie generują się nowe instancje powtarzalnego obiektu – a do tego można dynamicznie zarządzać tekstem np: z zewnętrznego pliku dzięki czemu podmiana tekstu jest bardzo łatwa.)

Sketch

Ikona narzędzi do prototypowania.
Dlaczego? Nie do końca ro rozumiem. Może dlatego, że jest dobrze zintegrowany z platformami dla designerów – jak Zepplin.io czy InVision (za pośrednictwem wtyczki Craft) oraz wielu innych.
Integracje są jego mocną stroną nie tylko pod kątem publikowania projektów – ale też możliwość integracji z systemami CMS – naturalnie z użyciem komercyjnych wtyczek.

Warto dodać, że występuje tylko na OSX.
Czy to dobrze wydane 99 usd ?
Z mojej perspektywy – świetnie jest go mieć – ale można go z powodzeniem zastąpić każdym innym narzędziem z naszego zestawienia.

Ciekawy jest model licencjonowania. W teorii, po roku możemy przedłużyć subskrypcję za 79 usd i mieć zapewnione aktualizacje oraz miejsce na pliki w chmurze – lub nie płacić po roku nic więcej i dalej korzystać ze swojej wersji stand-alone na komputerze ale już bez własnego miejsca w chmurze Sketch.

Zalety:
– Zaawansowane zarządzanie i organizowanie elementów UI w komponenty
– Możliwość korzystania z platform typu “Design System” z bibliotekami elementów składowych
– proceduralne efekty konwertowane na CSS3
– olbrzymia ilość dodatków darmowych i płatnych

InVision Studio

Darmowa aplikacja, dająca zupełnie niezłe możliwości makietowania – w tym również budowania interaktywnych prototypów symulujących nawigowanie po aplikacji. Całość jest bardzo przystępna, ale porównując potencjał – pod wieloma względami ustępuje Adobe XD – a już tym bardziej Sketch-owi.

Plusem jest naturalnie dostępność za darmo oraz mobilna wersja – niestety ograniczona wyłącznie do podglądania prototypów.

Zdecydowanie świetnie sprawdza się jeśli mamy przygotowane elementy graficzne i chcemy je szybko poskładać w działający prototyp symulując z klientem jego działanie czy zbudowanie działającego user-journey.

FUnkcje graficzne / rysunkowe niestety są ubogie i osobiście nie umiem w tym narzędziu wyklikać bardziej skomplikowanych form.

Zalety:

  • Jest za darmo
  • Łatwy w obsłudze
  • Łatwa w obsłudze symulacja interakcji
  • Podgląd prototypów na fizycznych urządzeniach mobilnych
  • Bezproblemowa integracja z platformą InVision

Rozwiązania webowe

Nie napisałem o paru innych narzędziach – np: tych dostępnych online – jak Figma czy Wireframe.cc.

Ich potencjał jest często zupełnie wystarczający do stworzenia prototypu (Figma) czy makiety ramkowe (wireframe) co czyni je cennym znaleziskiem.

Osobiście polecam je tym, którzy dopiero uczą się makietowania i nie widzą sensu inwestowania w kolejne narzędzia – tym bardziej, że jeśli mamy już jakiekolwiek narzędzie do grafiki wektorowej – w zasadzie mamy też istotną część funkcjonalności jakie są potrzebne do prototypowania. Narzędzie, w którym poukładamy nasze “klocki” nie musi być tak skomplikowane – i tu Figma sprawdza się znakomicie.

Coś jeszcze?

Naturalnie nie jest to cały przekrój oferty rynku – a jedynie mój własny, subiektywny zbiór.

Prawdą jest, że dla chcącego – nawet Microsoft Visio się nada – choć odbiega cenowo od opisanych tu narzędzi.

Celowo pominąłem też Zepplin.io, który choć jest dobry – nie miałem okazji z nim dłużej popracować – a cenowo i pod kątem możliwości też jest bardzo godną alternatywą (np: z uwagi na funkcjonalność publikowania w chmurze z inspektorem, bez konieczności posiadania osobnej licencji dla dewelopera).

Rynek dynamicznie się rozwija i nie ma na nim nietykalnych. Sketch rozwija się bardzo dynamicznie – ale Figma też zyskuje popularność. Podejrzewam , że za rok, krajobraz na polu UI designy będzie jeszcze inny i będę mógł zrewidować swój osobisty ranking.

A może znacie coś, co pominąłem a zdecydowanie warto tu dodać ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.