Designtool-Showdown – Adobe XD vs. Sketch (2019)

Sketch, ein etabliertes Designtool, hat seit seiner Einführung im Jahr 2010 ein phänomenales Wachstum erlebt. Im Jahr 2016 führte Adobe XD als beeindruckenden Konkurrenten ein. Bietet Adobe XD nach fast dreijähriger Entwicklung genug Herausforderung für Designer, um eine Änderung in Erwägung zu ziehen?

Der UX-Designprozess ist komplex und erfordert die Verwendung spezifischer Tools, Methoden und Frameworks. Benutzerforschung, Analyse, Wireframing, Mockups, Iteration, Usability-Tests und UI-Prototyping sind nur einige der Artefakte und Prozesse, mit denen Designer arbeiten, während sie mit Entwicklern, Stakeholdern und anderen Teammitgliedern kommunizieren.

Zwei weithin anerkannte Designtools, auf die sich UX-Designer verlassen, sind Adobe XD und Sketch.

Sketch ist aufgrund seiner einfachen Benutzeroberfläche, der großen Anzahl von Plugins, der vollständigen Toolkit-Funktionalität und der häufigen Updates zum De-facto-Standard für eine große Mehrheit der Digitaldesigner geworden.

Während Sketch zum Werkzeug der Wahl für UX-Designer wurde, hatte Adobe, das seit langem für seine preisgekrönte Designsoftware und seine engen Verbindungen zur Design-Community bekannt ist, keine ähnliche Option. Sie hatten Photoshop, Illustrator und Fireworks, aber die Designer hatten keine Lust, drei Tools zu verwenden, um Aufgaben zu erledigen, die Sketch in einer Anwendung bieten konnte.

2016 führte Adobe XD (Experience Design) ein. Als ernsthafter Anwärter auf Sketch hatten sie noch viel aufzuholen. Zu der Zeit war Sketch sechs Jahre alt, hatte eine breite Benutzerbasis und ein ganzes Ökosystem von Plugins, was es zu einem leistungsstarken Design-Tool machte. Die Rivalität eskalierte in den nächsten zwei Jahren und Adobe XD wuchs von einem flinken Konkurrenten zu einem hoch angesehenen Designtool, das viele professionelle Designer überzeugt hat.

Der Toptal Design Blog veröffentlichte 2017 einen Artikel über Sketch vs. Adobe XD, als es noch in der Beta war. Jetzt, zwei Jahre später, wurde Adobe XD mehrfach mit einem klaren Ziel überarbeitet: Bieten Sie alles, was ein UX-Designer benötigt, nativ und mit hervorragender Leistung.

Ist es für UX-Designer an der Zeit, von Sketch zu Adobe XD zu wechseln?

Adobe XD im Vergleich zu Sketch

Lassen Sie uns untersuchen, wie Adobe XD im Vergleich zu Sketch abschneidet. Wir werden die folgenden Merkmale vergleichen:

• Benutzeroberfläche
• Raster wiederholen
• Symbole und Asset-Panels
• Responsive Design-Tools
• Add-Ons und Plugins
• Prototyping mit Auto-Animate
• Teilen und Kommentare
• Zusammenarbeit mit Entwicklern
• Versionskontrolle und Zusammenarbeit in Echtzeit

Benutzeroberfläche

Designer, die mit Tools wie Photoshop vertraut sind, sollten kein Problem damit haben, Adobe XD oder Sketch zu lernen, da sie alle eine ähnliche Benutzeroberfläche haben.

Ein bemerkenswerter Unterschied in der Benutzeroberfläche ist das Fehlen einer Symbolleiste in Adobe XD. Die Symbolleiste, die sich oben in der Benutzeroberfläche befindet, ist eine nützliche Funktion in Sketch mit anpassbaren Verknüpfungen zu häufig verwendeten Funktionen und Werkzeugen, z. B. zum Gruppieren von Objekten. Adobe bietet eine ähnliche, abgespeckte Funktion namens Toolbox an, die sich auf der rechten Seite der Software befindet.

Sketch vs. XD : Sketch hat den Vorteil für seine hilfreiche Symbolleiste.

Raster wiederholen

Eine bemerkenswerte Funktion in Adobe XD ist das Wiederholungsraster. Dies ist ein praktisches Tool, das die einfache Erstellung anpassbarer Listen und rasterbasierter Bildschirme ermöglicht. Während Sketch diese Funktion fehlt, kann es mit Plugins mehr oder weniger repliziert werden.

Sketch vs. XD : Adobe XD hat die Nase vorn mit dem Wiederholungsraster, das in der Software nativ ist.

Symbole und Asset-Panels

Symbole waren ein frühes Feature, das maßgeblich zum Erfolg von Sketch beigetragen hat. Symbole gehören zum Sketch wie CSS (Cascading Style Sheets) zum Website-Design. Sie ermöglichen Designern die einfache Wiederverwendung und Massenbearbeitung von Assets, was viel Zeit spart, hilft, ein vorgefertigtes Designsystem zu erstellen, und sorgt für Konsistenz auf allen Bildschirmen.

Adobe begann mit einfachen Symbolen und führte dann das Assets-Bedienfeld ein, das Symbole, Schriftarten und Farben an einem einzigen Ort kombinierte. Durch Bearbeiten eines dieser Elemente werden die resultierenden Aktualisierungen in Echtzeit angezeigt. Sketch hat diese Funktionen, aber Adobe XD hat eine kohärentere und verbesserte Benutzererfahrung bereitgestellt.

Sketch vs. XD : Adobe XD hat aufgrund der kombinierten UI-Elemente im Assets-Panel einen leichten Vorteil.

Responsive Design-Tools

Adobe XD bietet ein robustes Set an Responsive-Design-Tools. Eine herausragende Funktion, der reaktionsschnelle Auto-Modus , errät, wie der Bildschirm auf unterschiedliche Gerätegrößen reagieren sollte.

Dies ist eine unglaublich nützliche Funktion, die mit einem einfachen Schieberegler ein- und ausgeschaltet werden kann. Wenn der automatische Modus sein erwartetes Verhalten nicht erfüllt, kann ein Designer die Responsive-Eigenschaften manuell ändern.

Sketch hat diese Funktion nicht eingebaut, aber es hat viele Plugins wie das Anima Toolkit, die die Arbeit gut machen.

Sketch vs. XD: Hier hat Adobe XD die Nase vorn. Sie bieten eine integrierte Möglichkeit, responsive Effekte auf den UI-Elementen zu sehen.

Add-Ons und Plugins

Das Plugin-Ökosystem in Sketch ist wohl eines seiner größten Features. Es gibt Hunderte von Plugins, die die Funktionalität von Sketch erweitern und es Designern ermöglichen, erweiterte Funktionen zu nutzen, während sie innerhalb des Sketch-Ökosystems bleiben.

Add-Ons sind das Adobe XD-Äquivalent zu Plugins. Adobe hat sein Add-On-Ökosystem im Jahr 2018 gestartet, daher ist es nicht so robust wie Sketch. Das ist kein Problem für Adobe, da ihr Ziel darin besteht, den Bedarf an Add-Ons zu reduzieren und sich darauf zu konzentrieren, Funktionen zu erstellen, die in die Software integriert sind.

Sketch vs. XD: Sketch hat mit seiner umfangreichen Plugin-Bibliothek den Vorteil.

Prototyping mit Auto-Animate

Adobe hat XD kürzlich mit einer unglaublich nützlichen Funktion für UX-Designer aktualisiert: auto animate . Es funktioniert, indem es clevere, fließende Übergänge zwischen Elementen verschiedener Bildschirme herstellt. Die Ergebnisse sind beeindruckend und machen das Prototyping zu einer reizvollen Erfahrung, mit der potenzielle Kunden angesprochen werden können. Sketch bietet diese Funktionalität nicht, auch nicht mit einem Plugin.

Eine weitere großartige Prototyping-Funktion, die Adobe eingeführt hat, ist die Unterstützung von Mikrointeraktionen, z. B. das Ziehen eines Panels vom Rand des Bildschirms oder das Einblenden einer Tastatur. Adobe XD unterstützt auch das Prototyping sprachbasierter Benutzeroberflächen (wie Alexa oder Google Home).

Sketch vs. XD: Adobe XD hat hier den Vorteil mit zeitsparenden Auto-Animationsfunktionen und Unterstützung für Mikrointeraktionen, die Sketch fehlt.

Teilen und Kommentieren

Designer arbeiten häufig mit anderen Teammitgliedern, Entwicklern und Beteiligten zusammen – die Möglichkeit, Designs zu teilen und Feedback zu erhalten, ist ein entscheidender Teil des Designprozesses. Daher enthält Adobe XD integrierte Funktionen für Mockups und Prototypen, die online geteilt werden können, sodass jeder allgemeine Kommentare hinzufügen oder auf bestimmte Stellen in einem Layout zeigen und Feedback hinterlassen kann.

Diese Funktionen können in Kombination mit dem dynamischen Prototyping-Modus von Adobe XD auch auf Mobiltelefonen mit der nativen Adobe XD-App getestet oder sogar für nicht interaktive Demonstrationen aufgezeichnet werden.

Sketch kann das Teilen und Kommentieren mit Tools für die Zusammenarbeit wie Zeplin oder Integrationen mit Tools von Drittanbietern wie Invision nutzen.

Sketch vs. XD: Adobe hat hier einen leichten Vorteil mit integriertem Online-Sharing und -Kommentar.

Design-Spezifikationen

Im Laufe eines Designprojekts müssen UX-Designer häufig Designspezifikationen mit Entwicklern teilen. Adobe hat diese Funktionalität in XD integriert, während Sketch-Benutzer Integrationen wie Zeplin oder InVision verwenden müssen.

Sketch vs. XD: Adobe hat einen Vorteil gegenüber Sketch, da Designspezifikationen integriert sind und keine Integration von Drittanbietern erfordern.

Versionskontrolle und Zusammenarbeit in Echtzeit

Zwei wichtige Funktionen, auf die sich Designer und Entwickler verlassen, sind Versionskontrolle und Zusammenarbeit in Echtzeit. Große Konstruktionsteams, die am selben Projekt zusammenarbeiten, müssen sehen können, wann Änderungen vorgenommen wurden, und auf einen Verlauf dieser Änderungen zugreifen können.

Adobe hat die Zusammenarbeit mit der Einführung von Cloud-Dokumenten angesprochen. Dadurch erhält jeder im Team, einschließlich der Entwickler, einen zentralen Arbeitsplatz. Laut Adobe wird der nächste Schritt für die Cloud-Dokumentenfunktion die Versionskontrolle sein.

Sketch bietet Versionskontrolle und Zusammenarbeit in Echtzeit mit Plugins, aber diese Funktionen sind nicht in das Produkt integriert.

Sketch vs. XD: Sketch gewinnt dieses Mal. Sie haben Versionskontrolle, wenn auch mit Plugins; Dies wird derzeit in XD nicht angeboten.

Funktionsübersicht: Adobe XD vs. Sketch

Es gibt sowohl Ähnlichkeiten als auch Unterschiede zwischen der aktuellen Version von Adobe XD und Sketch. Hier ist ein Vergleich der einzelnen Produkte:

Ist es an der Zeit, die UX-Design-Tools zu ändern?

Beim Vergleich von Funktionen liegen Sketch und XD nah beieinander. In Sketch fehlen einige Funktionen wie Auto-Animation, Auto-Responsive-Design und das Wiederholungsraster, die alle in XD nativ sind.

Das einzig Wichtige, was Adobe XD noch fehlt, ist die Versionskontrolle, die Sketch dank Plugins hat. Erwarten Sie, dass dies bald in XD eintrifft, wenn Adobe die Funktionsgruppe für Cloud-Dokumente weiter entwickelt.

Der Übergang von Sketch (und Photoshop oder Illustrator) zu XD ist einfacher als umgekehrt, da XD Sketch-Dateien mit ausgezeichneter Wiedergabetreue öffnen kann. Es können einige Probleme auftreten, wenn Sie auf Nur-Sketch-Plugins wie Abstract oder InVision Craft angewiesen sind.

In einigen Szenarien ist die Wahl offensichtlich: Für Windows-Benutzer ist Sketch nicht verfügbar, und für Adobe Creative Cloud-Abonnenten ist XD kostenlos mit unbegrenzt freigegebenen Prototypen enthalten. Das ist nicht zufällig passiert.

Aber Sketch wehrt sich. Das Unternehmen hat kürzlich eine Finanzierung in Höhe von 20 Millionen US-Dollar abgeschlossen und verspricht wichtige Funktionen wie Teamzusammenarbeit, native Übergabe und eine Webversion der App im Jahr 2019.

Wenn die Versionskontrolle kein kritisches Thema ist, dann war es noch nie ein besserer Zeitpunkt, die Verwendung von Adobe XD in Betracht zu ziehen. Das Engagement von Adobe für die User-Experience-Design-Community zeigt sich in Funktionen wie dem Auto-Responsive-Modus, Wiederholungsraster und integriertem Prototyping. Trotz ihres späten Starts hat Adobe bewiesen, dass sie Sketch eine gewaltige Herausforderung bieten können.

Weiterführende Literatur im Toptal Design Blog:

• Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?
• Atomic Design and Sketch – ein Leitfaden zur Verbesserung des Arbeitsablaufs
• Design mit Präzision – ein Adobe XD Review
• Dinge, die Sie vielleicht nicht über Typografie in Sketch wissen
• Kennenlernen der Sketch-Plugin-Entwicklung