Adobe XD program do makietowania

W dzisiejszym tekście chciałbym Wam przybliżyć Adobe XD (wersja beta), czym jest, jakie ma zalety oraz wady, a na koniec jak wygląda na tle konkurencji. Najważniejsze pytanie, to czy Adobe XD to program dzięki któremu porzucicie wasze Sketche, InVision oraz Axure?

Adobe XD wdarł się dość dużym przebojem (marketingowym) w świat UX, trzeba przyznać, że jest ładny i widać w nim sporą inspirację Sketchem. Piękne filmy wideo opublikowanie przez Adobe rozbudziły naszą wyobraźnie jak słowo „zamach” rozgrzewa zwoje Antoniego Macierewicza. W przekazie marketingowym Adobe XD sprzedawany jako oprogramowania, które ma być pomostem pomiędzy projektowaniem interfejsów (UI), a prototypowaniem (element UX). Ale czy tym pomostem rzeczywiści jest?

Do czego możemy wykorzystać Adobe XD

Jak zachwalają Twórcy można tworzyć szkice aplikacji, prototypy i udostępniać ją zespołowi. Można by powiedzieć, że jest to bezpośredni konkurent Sektch czy Axure. Niestety mimo zapowiedzi na tym etapie produkt może służyć jedynie jako ciekawostka, narzędzie do nauki niż pełnoprawny program do prototypowania. Docelowo (obecnie to beta) ma to być prototypowy kombajn, który pozwoli na tworzenie dużych interaktywnych projektów, które będzie można wykorzystać w początkowych iteracjach oraz testach. Podkreślam – ma być.

Adobe XD podstawy

Praca z tym programem to przyjemność, szybkość jego zrozumienia jest niesamowita. Łatwo się zorientować co do czego służy i gdzie się znajduję, poniżej przygotowałem dla Was mały instruktarz, jak się w nim odnaleźć.

1. Lewa belka – to menu z którego wybieramy spośród prostych narzędzi, mamy do dyspozycji kształty linie, możemy wybrać narzędzie przesuwania, a karteczka z kreseczkami w lewym górnym rogu, to nowy ekran, który możemy dodać do pulpitu.
2. Design/Prototype – Oba wyrazy to odnośniki zmieniające nasz pulpit. Design to pulpit pozwalający na tworzenie warstwy wizualnej, za to Prototype zmienia pulpit w narzędzie do tworzenia i zarządzania interakcjami. Bardzo intuicyjne, jednakże na tym etapie bardzo proste.
3. Warstwy oraz symbole – (kona 2 kółeczka połączone kreską). Po kliknięciu w symbole pokazuje nam się dokowane okienko, w którym możemy przetrzymywać elementy. Dzięki temu możemy je wykorzystać w późniejszym etapie projektowania. Jest to swojego rodzaju biblioteka, którą musimy sami stworzyć. Na tym etapie Adobe XD nie oferuje predefiniowanej biblioteki jak w innych programach. Dodawanie elementów do biblioteki jest bardzo proste. Wystarczy zaznaczyć obiekt lub grupę obiektów, a następnie kliknąć w znak plusa w oknie dokowanym symboli.
   Warstwy, ikona kartek, to klasyczne drzewko, w którym możemy przejrzeć elementy dostępne w danym projekcie z perspektywy warstw.
4. Okno dokowane – to tu znajduje się nasza stworzona biblioteka, lub lista warstw danego ekranu, który jest aktywny w danym momencie.
5. Eksport – Guzik pozwalający eksportować nasz projekt w postaci linku. Bardzo przydatna funkcja gdy chcemy przetestować makietę w danym urządzeniu. Klikamy w link na urządzeniu i mamy prototyp na ekranie. Obecnie funkcjonalność nie działa.
6. Play – Po kliknięciu pojawia się nowe okno, w którym mamy podgląd naszego projektu. Możemy go przeklikać zobaczyć nasze przejścia oraz animacje.
7. Eksport do telefonu – Ta funkcja pozwala na eksport naszego projektu do urządzenia posiadającego aplikacje mobilną Adobe XD, pozwala to na szybkie testy w urządzeniu docelowy. Na ten moment funkcja nie działa.
8. Panel ustawień – Jest to klasyczne okno pozwalające na zarzadzanie, kształtami, czcionkami i tekstami. Muszę przyznać, ze dawno tak dobrze nie obsługiwało mi się menu tego typu tak dobrze jak tutaj.
9. Pulpit – To tutaj rysujemy ekrany oraz elementy naszego projektu. To co uważam za duży plus na pulpicie mamy podgląd wszystkich ekranów w czasie rzeczywistym, możemy przeskakiwać miedzy projektami mobilnymi a projektami na komputery stacjonarne.

Jak wypada na tle innych?

Na ten moment bardzo blado, brakuje mu funkcji oraz elementów, które pozwoliły by na tworzenie prawdziwych makiet. Eksport jest bardzo ubogi więc nie możemy stworzyć jak u innych szablonu html. Niektórzy mówią że Adobe XD to coś pomiędzy InVision a Sketchem, ale to nie prawda. Realizacja zaawansowanych projektów UX w tym programie bywa karkołomne. Na ten moment beta tego programu to coś w rodzaju MVP, którzy ma szansę przerodzić się w realnego konkurenta. Niestety nie dzisiaj.

Szybkość działania

Widać, że zespół spędził bardzo dużo czasu nad silnikiem renderującym elementy, działa niesamowicie szybko. Testowałem go na 400 otwartych na raz ekranach, z dość dużą ilość elementów i jest niesamowicie płynny. Musiałem Wam to pokazać bo to rzecz, której można nie dostrzec a pokazuje, że fundamenty Adobe XD zostały dobrze przemyślane.