Prezentacja narzędzi do projektowania — Adobe XD vs. Sketch (2019)

Sketch, narzędzie do projektowania o ugruntowanej pozycji, cieszy się fenomenalnym wzrostem od czasu jego wprowadzenia w 2010 roku. W 2016 roku firma Adobe przedstawiła XD jako potężnego konkurenta. Czy po prawie trzech latach rozwoju program Adobe XD stanowi wystarczające wyzwanie dla projektantów, aby rozważyć zmianę?

Proces projektowania UX jest złożony i wymaga użycia określonych narzędzi, metodologii i frameworków. Badania użytkowników, analizy, wireframing, makiety, iteracje, testy użyteczności i prototypowanie interfejsu użytkownika to tylko niektóre z artefaktów i procesów, z którymi pracują projektanci podczas komunikowania się z programistami, interesariuszami i innymi członkami zespołu.

Dwa powszechnie znane narzędzia do projektowania, na których polegają projektanci UX, to Adobe XD i Sketch.

Sketch stał się de facto standardem dla większości projektantów cyfrowych dzięki prostemu interfejsowi, rozbudowanej liczbie wtyczek, pełnej funkcjonalności zestawu narzędzi i częstym aktualizacjom.

Podczas gdy Sketch stał się narzędziem wybieranym przez projektantów UX, firma Adobe, od dawna znana z nagradzanego oprogramowania do projektowania i głębokich więzi ze społecznością projektantów, nie miała podobnej opcji. Mieli Photoshop, Illustrator i Fireworks, ale projektanci nie mieli apetytu na używanie trzech narzędzi do wykonywania zadań, które Sketch mógł zapewnić w jednej aplikacji.

W 2016 roku firma Adobe wprowadziła XD (Experience Design). Będąc poważnym pretendentem do Sketcha, mieli jeszcze wiele do nadrobienia. W tym czasie Sketch miał sześć lat, miał szeroką bazę użytkowników i cały ekosystem wtyczek, co czyniło go potężnym narzędziem do projektowania. Rywalizacja nasiliła się w ciągu następnych dwóch lat, a Adobe XD ze zwinnego konkurenta stał się wysoko cenionym narzędziem projektowym, które zdobyło uznanie wielu profesjonalnych projektantów.

Blog Toptal Design opublikował artykuł na temat Sketch vs Adobe XD w 2017 roku, kiedy był jeszcze w fazie beta. Teraz, dwa lata później, Adobe XD doczekało się wielu poprawek z jasnym celem: oferować wszystko, czego potrzebuje projektant UX natywnie i z doskonałą wydajnością.

Czy nadszedł czas, aby projektanci UX przeszli ze Sketcha do Adobe XD?

Adobe XD a szkic

Zobaczmy, jak Adobe XD wypada na tle Sketch. Porównamy następujące cechy:

• Interfejs użytkownika
• Powtórz siatkę
• Symbole i panele zasobów
• Responsywne narzędzia projektowe
• Dodatki i wtyczki
• Prototypowanie z Auto-Animate
• Udostępnianie i komentarze
• Współpraca z programistami
• Kontrola wersji i współpraca w czasie rzeczywistym

Interfejs użytkownika

Projektanci, którzy są zaznajomieni z narzędziami takimi jak Photoshop, nie powinni mieć problemu z nauką Adobe XD lub Sketch, ponieważ wszyscy mają podobny interfejs użytkownika.

Jedną z zauważalnych różnic w interfejsie użytkownika jest brak paska narzędzi w programie Adobe XD. Pasek narzędzi, znajdujący się w górnej części interfejsu użytkownika, jest użyteczną funkcją programu Sketch z dostosowywanymi skrótami do często używanych funkcji i narzędzi, takich jak grupowanie obiektów. Adobe oferuje podobną, przeskalowaną funkcję zwaną przybornikiem , znajdującą się po prawej stronie oprogramowania.

Sketch vs XD : Sketch ma przewagę dzięki przydatnemu Paskowi narzędzi.

Powtórz siatkę

Godną uwagi funkcją Adobe XD jest siatka powtarzania. Jest to poręczne narzędzie, które pozwala na łatwe tworzenie regulowanych list i ekranów opartych na siatce. Chociaż Sketch nie ma tej funkcji, można ją mniej więcej replikować za pomocą wtyczek.

Szkic vs XD : Adobe XD ma krawędź z powtarzalną siatką, która jest natywna dla oprogramowania.

Symbole i panele zasobów

Symbole były wczesną funkcją, która znacząco przyczyniła się do sukcesu programu Sketch. Symbole są do szkicu tak, jak CSS (kaskadowe arkusze stylów) do projektowania stron internetowych. Pozwalają projektantom na łatwe ponowne wykorzystanie i masową edycję zasobów, co oszczędza dużo czasu, pomaga stworzyć gotowy system projektowania i zapewnia spójność na wszystkich ekranach.

Firma Adobe zaczęła od podstawowych symboli, a następnie wprowadziła panel zasobów, który łączy symbole, czcionki i kolory w jednym miejscu. Edycja dowolnego z tych elementów pokazuje powstałe aktualizacje w czasie rzeczywistym. Sketch ma te funkcje, ale Adobe XD zapewnia bardziej spójną i lepszą obsługę użytkownika.

Szkic a XD : Adobe XD ma niewielką przewagę ze względu na połączone elementy interfejsu użytkownika w panelu zasobów.

Responsywne narzędzia projektowe

Adobe XD zapewnia solidny zestaw responsywnych narzędzi projektowych. Jedna wyróżniająca się funkcja, responsywny tryb automatyczny , zgaduje, jak ekran powinien reagować na różne rozmiary urządzeń.

Jest to niezwykle przydatna funkcja, którą można włączać i wyłączać za pomocą prostego przycisku suwaka. Jeśli tryb automatyczny nie spełnia oczekiwań, projektant może ręcznie zmienić właściwości responsywne.

Sketch nie ma wbudowanej tej funkcji, ale ma wiele wtyczek, takich jak Anima Toolkit, które dobrze wykonują swoją pracę.

Szkic kontra XD: Adobe XD ma tutaj przewagę. Oferują wbudowany sposób wyświetlania responsywnych efektów na elementach interfejsu użytkownika.

Dodatki i wtyczki

Ekosystem wtyczek w Sketchu jest prawdopodobnie jedną z jego największych cech. Istnieją setki wtyczek, które rozszerzają funkcjonalność Sketch i pozwalają projektantom korzystać z ulepszonych funkcji, pozostając w ekosystemie Sketch.

Dodatki są odpowiednikami wtyczek Adobe XD. Adobe uruchomił swój ekosystem dodatków w 2018 roku, więc nie jest tak solidny jak Sketch. Nie dotyczy to Adobe, ponieważ ich celem jest próba zmniejszenia zapotrzebowania na dodatki i skupienie się na tworzeniu funkcji wbudowanych w oprogramowanie.

Sketch vs XD: Sketch ma przewagę dzięki obszernej bibliotece wtyczek.

Prototypowanie z Auto-Animate

Firma Adobe niedawno zaktualizowała XD o niezwykle przydatną funkcję dla projektantów UX: automatyczne animowanie . Działa poprzez sprytne, płynne przejścia między elementami różnych ekranów. Wyniki są imponujące, dzięki czemu tworzenie prototypów jest wspaniałym doświadczeniem, które może zaangażować potencjalnych klientów. Sketch nie oferuje tej funkcjonalności, nawet z wtyczką.

Kolejną świetną funkcją prototypowania, którą wprowadził Adobe, jest obsługa mikro-interakcji, na przykład odciągnięcie panelu od krawędzi ekranu lub wyświetlenie klawiatury. Adobe XD obsługuje również prototypowe interfejsy użytkownika oparte na głosie (takie jak Alexa lub Google Home).

Sketch vs XD: Adobe XD ma tutaj przewagę dzięki oszczędzającym czas funkcjom automatycznej animacji i obsłudze mikrointerakcji, których brakuje w Sketch.

Udostępnianie i komentowanie

Projektanci często współpracują z innymi członkami zespołu, programistami i interesariuszami — możliwość udostępniania projektów i otrzymywania informacji zwrotnych jest kluczową częścią procesu projektowania. W związku z tym Adobe XD zawiera wbudowaną funkcjonalność makiet i prototypów, które można udostępniać online, dzięki czemu każdy może dodawać ogólne komentarze lub wskazywać określone lokalizacje w układzie i wystawiać opinie.

Funkcje te, w połączeniu z trybem dynamicznego prototypowania Adobe XD, można również testować na telefonach komórkowych z natywną aplikacją Adobe XD, a nawet nagrywać w przypadku demonstracji nieinteraktywnych.

Sketch może korzystać z udostępniania i komentowania za pomocą narzędzi do współpracy, takich jak Zeplin lub integracji z narzędziami innych firm, takimi jak Invision.

Sketch vs XD: Adobe ma tutaj niewielką przewagę dzięki wbudowanemu udostępnianiu i komentowaniu online.

Specyfikacja projektu

W trakcie projektu projektowego projektanci UX często muszą dzielić się specyfikacjami projektowymi z programistami. Adobe uwzględniło tę funkcję w XD, podczas gdy użytkownicy Sketch będą musieli korzystać z integracji, takich jak Zeplin lub InVision.

Sketch vs XD: Adobe ma przewagę nad Sketchem, ponieważ specyfikacje projektowe są wbudowane i nie wymagają integracji z innymi firmami.

Kontrola wersji i współpraca w czasie rzeczywistym

Dwie ważne funkcje, na których polegają projektanci i programiści, to kontrola wersji i współpraca w czasie rzeczywistym. Duże zespoły projektowe, które pracują razem nad tym samym projektem, muszą być w stanie zobaczyć, kiedy wprowadzono zmiany i uzyskać dostęp do historii tych zmian.

Firma Adobe zajęła się współpracą, wprowadzając dokumenty w chmurze . Dzięki temu wszyscy członkowie zespołu, w tym programiści, mają centralne miejsce do pracy. Według Adobe, następnym krokiem dla funkcji dokumentów w chmurze będzie kontrola wersji.

Sketch oferuje kontrolę wersji i współpracę w czasie rzeczywistym za pomocą wtyczek, ale te funkcje nie są wbudowane w produkt.

Sketch vs XD: Sketch wygrywa ten pojedynek. Mają kontrolę wersji, choć z wtyczkami; nie jest to obecnie oferowane w XD.

Podsumowanie funkcji: Adobe XD kontra Sketch

Istnieją podobieństwa, a także różnice między obecną wersją Adobe XD i Sketch. Oto porównanie każdego produktu:

Czy nadszedł czas, aby zmienić narzędzia do projektowania UX?

Porównując funkcje, Sketch i XD są blisko. Szkicowi brakuje niektórych funkcji, takich jak automatyczne animacje, automatyczny projekt responsywny i siatka powtarzania, które są natywne dla XD.

Jedyną ważną rzeczą, której wciąż brakuje Adobe XD, jest kontrola wersji, którą Sketch ma dzięki wtyczkom. Oczekuj, że pojawi się to w XD wkrótce, gdy Adobe będzie nadal rozwijać zestaw funkcji dokumentów w chmurze.

Łatwiej jest przejść ze Sketch (i Photoshop lub Illustrator) do XD niż na odwrót, ponieważ XD może otwierać pliki Sketch z doskonałą wiernością. Mogą wystąpić pewne problemy, jeśli polegasz na wtyczkach obsługujących tylko szkic, takich jak Abstract lub InVision Craft.

W niektórych scenariuszach wybór jest oczywisty: dla użytkowników systemu Windows Sketch nie jest dostępny, a dla subskrybentów Adobe Creative Cloud XD jest dołączony bezpłatnie z nieograniczoną liczbą udostępnionych prototypów. To nie stało się przypadkiem.

Ale Sketch walczy. Firma niedawno zamknęła finansowanie w wysokości 20 milionów dolarów i obiecuje ważne funkcje, takie jak współpraca zespołowa, natywne przekazanie i internetowa wersja aplikacji w 2019 roku.

Jeśli kontrola wersji nie jest krytycznym problemem, nigdy nie było lepszego czasu na rozważenie korzystania z Adobe XD. Zaangażowanie firmy Adobe w społeczność projektantów doświadczeń użytkownika jest widoczne dzięki funkcjom takim jak tryb automatycznej responsywności, siatka powtarzania i wbudowane prototypowanie. Pomimo późnego startu firma Adobe udowodniła, że ​​może stanowić ogromne wyzwanie dla Sketch.

Dalsza lektura na blogu Toptal Design:

• Adobe XD kontra Sketch — które narzędzie UX jest dla Ciebie odpowiednie?
• Atomowy projekt i szkic — przewodnik po usprawnieniu przepływu pracy
• Precyzyjne projektowanie — recenzja Adobe XD
• Rzeczy, których możesz nie wiedzieć o typografii w szkicu
• Zapoznanie się z tworzeniem wtyczek Sketch