Obserwując media społecznościowe i blogi branżowe odnoszę wrażenie, że jestem jedną z pierwszych osób w Polsce, która miała okazję popracować z programem InVision Studio, dlatego postaram się podzielić z Wami pierwszymi wrażeniami z wczesnej wersji programu.
Kto stoi za InVision Studio
Za InVision Studio odpowiedzialna jest firma InVision, znana głównie z webowego narzędzia do szybkiego prototypowania, o tej samej nazwie. W InVision możecie połączyć poszczególne ekrany w klikalne prototypy, a także, dzięki systemowi komentarzy i wersjonowania plików, wygodnie zarządzać projektem. Program umożliwia przekazywanie projektów do wdrożenia developerowi, który w prosty sposób będzie mógł wyeksportować poszczególne elementy, a nawet fragmenty kodu. Z rozwiązania InVision korzystają między innymi takie firmy jak Visa, Shopify, Evernote, Twitter, Mailchimp czy Netflix.
InVision stoi także za znanym i lubianym pluginem Craft, który rozszerza funkcje Sketcha, a od niedawna także Photoshopa, nie tylko o lepszą synchronizację z InVision, a szereg innych przydatnych funkcji. Craft potrafi między innymi wypełniać projekt realnymi danymi zaciąganymi ze stron www lub plików json, zdjęciami z folderu, Dropboxa lub darmowych zasobów Unsplash. Plugin posiada także integrację z serwisem istockphoto i gettyimages, dzięki czemu możemy zakupić zdjęcia do naszego projektu, wprost z narzędzia, w którym projektujemy interfejsy. Plugin Craft możecie pobrać z dedykowanej strony.
O InVision Studio
InVision Studio to narzędzie, które zapowiadane było jako world’s most powerful screen design tool. InVision Studio służy do kompleksowego projektowania interfejsów webowych, aplikacji mobilnych czy stron www. Studio to jest rękawicą rzuconą Sketchowi oraz uzupełniającym go programom takim jak Flinto i Principle, oraz narzędziom takim jak Marvel czy Zeplin. W InVision Studio od podstaw stworzycie projekt interfejsu, dodacie przejścia między ekranami i animacje. Program rzecz jasna ściśle współpracuje z platformą InVision, w której możecie wygodnie zarządzać projektem, wersjonować pliki i zamieszczać komentarze do makiet.
Na jakim etapie jest InVision Studio
InVision Studio dalej jest we wczesnej fazie rozwoju. Twórcy zapowiadali stworzenie aplikacji zarówno na platformę Mac OS, jak i na komputery z systemem Windows. Ci drudzy na razie niestety muszą obejść się smakiem. Aktualnie program dostępny jest tylko dla posiadaczy Maków. Nie dysponujemy na razie żadnymi informacjami, dzięki którym moglibyśmy, choć orientacyjnie dowiedzieć się, na kiedy planowane jest udostępnienie wersji na komputery z systemem Windows.
Jestem osobą, która stara się być na bieżąco z nowinkami software’owymi w kontekście projektowania. Jakiś czas temu brałem aktywny udział w testach pierwszych wersji programu Adobe XD i mam wrażenie, że InVision Studio w tym momencie jest programem dojrzalszym od bety XD.
Pierwsze wrażenia
W dzisiejszych czasach dużym problemem przy projektowaniu interfejsów jest rozbicie na wiele programów i narzędzi webowych. Aplikacje mobilne projektujemy w Sketchu, jednak łączyć je w klikalne makiety możemy na przykład w Marvelu, Atomicu, Proto.io czy właśnie InVision. Podobnie sprawa wygląda z tworzeniem animacji i mikrointerakcji, które przygotowujemy w Principle, Framerze czy… Keynote. Nie można zapomnieć też o stajni Adobe, która w swoim portfolio poza XD posiada Adobe Comp CC czy Adobe After Effect, w którym wiele osób animuje swoje projekty. Dlatego z dużym podekscytowaniem podchodziłem do pierwszej aplikacji, która z małą pomocą narzędzia webowego, chce zamknąć większość procesu projektowania UI w jednym pudełku.
Pierwsze co rzuca się w oczy po odpaleniu programu, to duże podobieństwo do Sketcha. Każdy, kto, choć chwilę pracował w narzędziu Bohemian Coding, powinien bardzo szybko odnaleźć się w InVision Studio. Mamy tu taki sam układ – po lewej znajduje się lista warstw, z możliwością przełączenia na symbole, w środku dysponujemy obszarem roboczym, a po prawej umieszczono panel ustawień. Ja spędzając kilka godzin w InVision Studio, przypomniałem sobie, jak tęsknię za ciemnym interfacem i chyba zdecyduję się wydać 8$ na wtyczkę Midnight Sketch.
InVision Studio potrafi importować pliki ze Sketcha, jednak na tym etapie nie działa to jeszcze najlepiej. Otwarcie dużego pliku (zawierającego cztery strony, na każdym po kilkanaście ekranów aplikacji) zajmuje programowi kilkadziesiąt sekund. Zdarzają się też crashe aplikacji. Aplikacja w większości dobrze radzi sobie z importem zarówno całych ekranów, jak i poszczególnych symboli. Problemy pojawiają się, gdy skalujecie symbole w artbordach, używacie masek czy blura. Zdarza się, że program gubi także ustawienia pól tekstowych. Dużą zaletą jest z pewnością to, że od razu po imporcie plików, jesteście informowani, co poszło nie tak i możecie od razu to naprawić tak, by nie mieć później przykrych niespodzianek.
Jeżeli chodzi o animowanie interfejsów, to działa ono całkiem sprawnie. Program radzi sobie nieźle z inteligentnym rozpoznaniem, jak w danym momencie powinien się zachować nasz interfejs. Dysponujemy oczywiście możliwością ręcznego zarządzania, na osi czasu, poszczególnymi ustawieniami. InVision Studio nie jest może tak zaawansowanym narzędziem, jak Principle, jednak mi, przynajmniej na pierwszy rzut oka, nie brakuje w nim niczego. Zapomnijcie jednak na łatwym i przyjemnym animowaniu projektów Sketchowych. O ile import plików .sketch wygląda nieźle od strony wizualnej, o tyle doprowadzenie ich do stanu, w którym będziecie mogli je zaanimować, może w niektórych przypadkach zająć więcej czasu niż zaprojektowanie ich od nowa.
Jak otrzymać dostęp do InVision Studio
Dostęp do InVision Studio możecie uzyskać, zapisując się do listy oczekujących poprzez landing page aplikacji. Każdego tygodnia zapraszane są kolejne osoby. Po otrzymaniu maila informującego o dołączeniu do programu testów pobieracie aplikację, do której logujecie się swoim kontem InVision (konto jest bezpłatne i nie musicie go posiadać przed otrzymaniem dostępu).
Czy warto?
Z pewnością warto zainteresować się programem tworzonym przez InVision. Praca w Studio nie różni się znacznie od pracy w Sketchu, jednak zaimplementowano tu kilka ciekawych rozwiązań, którym warto się przyjrzeć (choćby ciekawie pomyślane symbole). Należy pamiętać jednak, że program znajduje się we wczesnej fazie beta. Na razie InVision Studio nie daje nam wiele argumentów, by porzucić obecnie wykorzystywane programy i wypracowane workflow. Ja jednak mocno kibicuję twórcom aplikacji, gdyż chciałbym spróbować pracy w jednym narzędziu, zamiast ciągle przepinać się między Sketchem, Marvelem, Abstractem i Zeplinem.
Macie jakieś pytania dotyczące InVision Studio? Zadawajcie je w komentarzach, a na każde postaram się odpowiedzieć. Śledźcie też doniesienia o InVision Studio na Twitterze.
A na windowskie w czym mogę sobie porysować pomysły na www? Czy Sketch do tego się nada?
Sketch niestety dalej ma tylko Macową wersję. Z narzędzi desktopowych możesz sprawdzić Lunacy (https://icons8.com/lunacy), reklamowane jako „Sketch dla Windowsa” czy Affinity Designera (https://affinity.serif.com/en-gb/designer/ ). W obwodzie pozostaje jeszcze oczywiście Adobe XD. Lunacy jest darmowy, a AD i XD mają wersje trialowe, więc możesz sprawdzić co Ci odpowiada. Ja już długo nie pracuję na Windowsie więc trudno mi coś więcej powiedzieć.
Możesz sprawdzić też rozwiązanie webowe – Figma (https://www.figma.com/ – do 3 projektów gratis). Słyszałem o nim wiele dobrego ale sam za dużo nie testowałem.
Ponoć Adobe wydało bezpłatną wersję XD, ale nie szukałem żadnych informacji na ten temat.
Wydało, będzie jutro info na blogu, bo dziś już nie zdążyłem, bo pisałem podsumowanie miesiąca. W skrócie wersja free: 2gb chmury, ograniczona liczba fontów w typekit i jeden prototyp online, wersja płatna: 100 gb w chmurze, pełen typekit i unlimited na prototypy online i design specs (takie sketchowe libraries).
[…] Alternatywnie można jeszcze spróbować skorzystać z InVision Studio. […]