Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?

Ein UX-Designer benötigt viele Tools, um die vielen Phasen des UX-Workflows von der Recherche über das Design bis hin zum Prototyp und der Übergabe abzuschließen. Wenn Sie Ihre Arbeit auf einem PC erledigen, werden Sie wahrscheinlich von der ständigen Erwähnung von Sketch verfolgt, einem beliebten, optimierten Vektorgrafik-Editor mit unzähligen nützlichen Plugins, der sich schnell zum Industriestandard entwickelt – aber nur für Mac OS verfügbar ist. Das bedeutet, dass Sie ausgelassen werden, es sei denn, Sie haben einen Apple-Computer. Aber jetzt arbeitet Adobe nach Jahren der Abwesenheit aktiv an einem richtigen plattformübergreifenden Sketch-Konkurrenten (und Doppelgänger?): Adobe XD.

Was ist Adobe XD?

Adobe Experience Design CC, oder Adobe XD, ist ein leichter Vektorgrafik-Editor und Prototyping-Tool, das auf der Adobe MAX 2015 als Project Comet angekündigt wurde. Die Software, die im März 2016 als Teil der Creative Cloud in der Vorschau gestartet wurde, befindet sich heute in der Beta-Phase und erhält fast jeden Monat Updates.

Davor arbeitete Adobe daran, Funktionen für UX-Designer zu ihren etablierten Tools wie Photoshop und Illustrator hinzuzufügen. Obwohl sie beide großartige Software sind, sind sie weder leichtgewichtig noch für diese Art von Job optimiert. Im Laufe der Jahre – und insbesondere nach der Einstellung von Adobe Fireworks (dem klassischen weborientierten Prototyping-Tool, das von Macromedia erworben wurde) im Jahr 2013 – waren immer mehr UX-Designer der Meinung, dass die Creative Cloud nicht den Markterwartungen entsprach. Also sprangen sie zu Sketch (wenn sie einen Mac hatten). Obwohl Adobes Reaktion auf diesen Massenexodus etwas spät kam (Bohemian Coding startete Sketch vor ganzen 6 Jahren), lohnt sich das Warten, besonders wenn Sie sich darauf beschränkt haben, weniger geeignete Tools auf Ihrem PC zu verwenden. Vergleichen wir Adobe XD mit Sketch

Benutzeroberfläche und exklusive Funktionen

Wenn Sie Adobe XD öffnen, ist der erste Eindruck, den Sie haben werden, dass die Benutzeroberfläche sehr vertraut ist, sowohl für Sketch-Benutzer als auch für langjährige Adobe-Fans. Adobe weicht von den erwarteten dunkleren Schaltflächen und Menüs der Creative Cloud ab und bietet das Beste aus zwei Welten. Im Gegensatz zu Sketch sehen Sie auf der linken Seite des Bildschirms eine Reihe von Werkzeugen, aber auch das Bedienfeld mit den höheren Ebenen und die dynamischen Eigenschaften auf der rechten Seite, wie in Sketch zu sehen. Es ist ein Kinderspiel zu bedienen und leicht zu erlernen, egal welches Tool Sie zuvor verwendet haben.

Raster wiederholen

Adobe XD verfügt außerdem über eine Reihe einzigartiger Funktionen wie das Wiederholungsraster, ein Werkzeug, mit dem Sie eine Gruppe von Objekten wie eine Material Design-Karte mit variablen Daten und konfigurierbarem Abstand zwischen den Kopien replizieren können.

Prototyp entwickeln

In XD können Sie einen interaktiven Prototyp erstellen, ohne Plug-ins von Drittanbietern zu benötigen, wie Sie es in Sketch tun würden. Der Prototyping-Editor von Adobe ermöglicht es Designern, interaktive Bereiche mithilfe von Drähten und dem Einrichten von Übergängen visuell mit anderen Bildschirmen zu verbinden. Wenn der interaktive Prototyp fertig ist, können Sie den Prototyp veröffentlichen und freigeben, der im Web oder mit der mobilen Adobe XD-App angezeigt werden kann. XD-Prototypen unterstützen jedoch noch keine Gesten oder feste Abschnitte wie Kopfzeilen, was bei InVision und anderen Prototypen-Tools, die mit Sketch verbunden sind, möglich ist.

Assets-Panel

Im August 2017-Update hat Adobe das Bedienfeld „Elemente“ hinzugefügt, eine clevere Möglichkeit, einen interaktiven Styleguide mit Farben, Zeichenstilen und Symbolen zusammenzustellen. Wenn Sie etwas im Bedienfeld „Elemente“ ändern, folgt jede Verwendung des Elements in Ihrem Bildmaterial. Sketch verfügt auch über Farbvariablen, Zeichenstile und Symbole, die jedoch jeweils in einem eigenen Bedienfeld enthalten sind.

Adobe hat im Produktblog einige der nächsten Funktionen für XD angekündigt. Eine davon erweitert die Assets-Funktion, die es dem Designer ermöglicht, den Styleguide des Projekts mit herunterladbaren Schriftarten, Assets und den hexadezimalen Farbcodes neben dem interaktiven Prototyp und einer Inspektionsfunktion für Entwickler zur Untersuchung der Elemente innerhalb des Prototyps zu veröffentlichen. Dies wird als „Übergabe für Entwickler“ bezeichnet und ist bereits in Sketch (und Photoshop) mit Plugins wie Zeplin möglich. Eine weitere zukünftige Funktion, die angeteasert wird, ist die Echtzeit-Zusammenarbeit in XD, etwas, das der Zusammenarbeitsfunktion von Google Docs ähnelt und bereits in anderen UX-Design-Tools wie Figma verfügbar ist.

Sketch (und seine Plugins) vs. Adobe XD

Wenn Sie das Gesamtbild betrachten, wird deutlich, dass Adobe beabsichtigt, XD dazu zu bringen, nicht nur alles zu tun, was Sketch als Vektorgrafik-Tool tut, sondern auch seine Plugins, die den gesamten UX-Design-Workflow abdecken. Vom Design über das Prototyping bis hin zur Übergabe wird Adobe XD wahrscheinlich das definitive UX-Designer-Tool sein, aber was ist heute?

Ist es Zeit zu wechseln?

Adobe XD ist in erster Linie für Windows-Benutzer (die das nur für MacOS verfügbare Sketch nicht verwenden können) und aktuelle Adobe Creative Cloud-Abonnenten (die nicht zusätzlich zu Photoshop, Illustrator usw. für XD bezahlen müssten).

Es gibt bereits viele UX-Designer, die den Sprung wagen, entweder weil sie selbst unter macOS Abonnenten der Creative Cloud sind oder weil sie glauben, dass XD der nächste Standard sein wird und mit dem aktuellen Funktionsumfang zufrieden sind. Wenn Sie ein erfahrener Sketch-Benutzer sind, werden Sie eine insgesamt bessere Benutzeroberfläche und einzigartige XD-Funktionen genießen, müssen sich aber auch mit den aktuellen Einschränkungen und dem Mangel an Plugin-Unterstützung auseinandersetzen. Probieren Sie es auf jeden Fall aus und teilen Sie Ihre Eindrücke mit uns!

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft