Adobe XD vs. Sketch

Man erinnere sich noch vage an die Zeit, als Designs für Webseiten oder gar Apps im Photoshop oder InDesign gemacht wurden. Wie der Name des Ersten und der Hauptanwendungsbereich des Zweiten aber vermuten lässt, waren beide Software von Adobe nicht zu diesem Zweck ins Leben gerufen worden. Mit Sketch wurde ein Produkt auf den Markt gebracht, dass viele Stärken dieser Programme im Bereich Webdesign in sich vereinigt. Auch von Illustrator scheinen einige Funktionen aufgegriffen worden zu sein.

Doch Adobe wollte die UX-Designer nicht kampflos der Konkurrenz überlassen und lancierte mit Adobe Experience Design – kurz XD – einen vielversprechenden Gegenspieler.

Der Vergleich zwischen Sketch und XD

Als Sketch- und später auch XD-User möchte ich auf die Vorzüge und Nachteile beider Software eingehen. Da vor allem XD laufend weiterentwickelt wird, ist diese Bestandsaufnahme Stand 13. April 2017 (Mac) keinesfalls abschliessend oder vollständig. Auch wird Sketch „out of the box“ betrachtet, ohne Plugins, welche teilweise massive Verbesserungen mit sich bringen. Man darf auch nicht vergessen, XD ist noch im Beta-Stadium, also eigentlich noch nicht einmal offiziell released.

Vorteile Adobe XD gegenüber Sketch

Gehen wir zuerst auf XD ein, den Underdog in diesem Kampf. Im Preview-Video von Adobe legte XD gleich mit einigen spannenden Funktionen vor, welche es klar von der Konkurrenz abheben sollten:

Dies gelang auch, da Adobe Wert auf eine einfache und schnelle Bedienbarkeit legte. Folgende Funktionen sind gegenüber Sketch als Vorteil zu betrachten:

• Wiederholungsraster: Diese Funktion hatte Adobe schon früh auf dem Schirm und war auch im Video eindrücklich präsentiert worden. Wiederholende Elemente können einfach und unbegrenzt dupliziert werden. Per Drag & Drop lassen sich danach Bilder und sogar Texte in den Kopien einfach ersetzen.
• Prototyping: XD bietet gegenüber Sketch die Möglichkeit, Prototypen direkt in der Software zu erstellen. Auch dies wird im Video mithilfe der blauen Linien imposant dargestellt, da dies bisher in keiner anderen Lösung so einfach gewesen war. Nun kann das zu verlinkende Element per Linie mit dem Ziel-Screen verknüpft werden, Übergang inklusive. Die Bedienung des Prototyps kann man sich als Video aufzeichnen lassen oder den Prototyp per Link für Andere freigeben und Kommentieren lassen. Einige wichtige Funktionen fehlen hier aber noch, wie z.B. die Definition eines fixen Bereichs, der mitscrollt.
• Einfache Bedienung: Adobe XD lässt sich fast schon intuitiv erlernen. Ob dies aufgrund der wenigen Funktionalitäten oder der guten Umsetzung gegeben ist, sei dahingestellt. Auf jeden Fall scheint dies ein Schwerpunkt dieser Applikation zu sein, was gegenüber Sketch ein dickes Plus ist.
• Sprache: XD ist, wie auch die anderen Produkte von Adobe, in Deutsch erhältlich. Sketch hingegen nur in Englisch.
• Betriebssystem: XD ist auf Mac und Windows (teilweise eingeschränkt) erhältlich, Sketch nur auf Mac.

Mit diesen fünf Punkten ist die Liste der Vorteile gegenüber Sketch leider auch schon beendet. Zurzeit ist Adobe XD noch sehr knauserig mit wichtigen Funktionen ausgestattet. In der folgenden Liste der Vorteile von Sketch werden grosse Mängel gegenüber dem Big Player schmerzlich spürbar.

Vorteile von Sketch gegenüber Adobe XD

Sketch wartet mit einer längeren Geschichte auf, daher wurden schon viele Verbesserungen vorgenommen und Funktionalitäten verbessert. Die Vielzahl an Funktionen zeigt sich schon beim Vergleich der beiden Menüleisten und deren Funktionalitäten. Folgend die grössten Vorteile von Sketch gegenüber XD:

• Hilfslinien: Es gibt sie schlicht und ergreifend nicht bei Adobe XD
• Layout (Raster): Auch diese wichtigen Helfer fehlen komplett. Mithilfe von Ebenen lassen sich diese nachbauen, mit dem Wiederholungsraster sogar ziemlich schnell, um den Taschenrechner kommt man aber nicht herum.
• Textoptionen: Kleine Text-Features, welche nicht fehlen sollten: Text unterstreichen lassen, Alles gross/klein schreiben, Paragraphen Abstand und auch Auflistungen sucht man in XD vergebens. Ausserdem können in Sketch Text-Style vergeben werden, welche dann einfach auf Texte angewendet werden können.
• Flächen: Diese können in Sketch, nebst normalen Verläufen wie in XD, zusätzlich auch mit radialen Verläufen und Mustern überlagert werden.
• Überblenden: Ebene, Texte und weitere Inhalte lassen sich wie im Photoshop überblenden, z.B. Multiplizieren. Auch das fehlt in XD.
• Innerer Schatten: Nebst dem normalen Schlagschatten kann in Sketch auch ein inneren Schatten verwendet werden.

Export und Workflow im Vergleich

• Einfacher Export: Vorweg, beide Programme erlauben den Export von einzelnen Objekten oder des gesamten Zeichenfläche. XD bietet Grundlegende Exportfunktionen an, jedoch macht auch hier Sketch einiges besser. Einzelne Objekt oder Gruppen können markiert werden und als exportierbares Element gekennzeichnet werden. Dort kann auch gleich eingestellt werden, in welche Dateien der Export erfolgen soll, also z.B. SVG, PNG 1x, PNG 2x, JPG usw. Darunter findet sich auch gleich ein Button, welcher den Export direkt erlaubt. Alternativ können auch alle Exporte gleichzeitig ausgeführt werden. Diese kleinen Feinheiten machen die tägliche Arbeit schöner und effizienter.
• SVG-Export: Immer wichtiger im Web-Bereich sind SVG-Dateien, also Vektorgrafiken fürs Web. XD kann diese exportieren, jedoch fehlen in der Datei die Höhe und Breite des «Bildes», was auf älteren Browser zu sehr unschönen Darstellungen führen kann.
• Symbole: Ein wichtiger Part bei UX-Software spielen Symbole. Diese bieten die Möglichkeit, ein Element aus z.B. verschiedenen Ebenen als globales Symbol zu speichern. Muss nun etwas global angepasst werden, z.B. die Navigation, dann kann die einmalig im Symbol erfolgen und wird auf alle Kopien übernommen. Beide Software-Lösungen bieten Symbole an, doch bei Sketch sind diese besser ausgebaut. Z.B. können in Sketch alle Texte und Bilder inhaltlich bei allen Kopien individuell angepasst werden.

Hier zeigen sich einige signifikante Vorteile von Sketch. Nur schon die fehlenden Hilfslinien und Raster könnten ein KO-Kriterium für XD sein.

Fazit des Vergleichs

Aus meiner Sicht gewinnt zurzeit bei einem direkten Vergleich Sketch das Rennen. Wichtige Funktionen fehlen einfach noch und erschweren ein effizientes Arbeiten.

Doch wie schon oben erwähnt, Adobe XD ist im Beta-Status. Ich sehe das als Bestrebung von Adobe, die Community möglichst früh in den Entwicklungs-Prozess einzubeziehen, um eines der besten Produkte zu kreieren. Fehlende Funktionen wie Hilfslinien, welche in anderen Adobe Produkten zum Standard-Inventar gehören, werden auf jeden Fall noch kommen. Daher darf XD auf keinen Fall abgeschrieben werden, sondern wird in Zukunft dem Giganten Sketch mächtig Ärger bereiten. Dafür sprechen schon jetzt die spannenden Vorteile, welche XD jetzt schon bietet.

Der Preis von Adobe XD und Sketch im Vergleich

Ein weiterer Punkt, welcher für viele Agenturen und User eine Rolle spielt sind die Kosten. Da XD noch in der Beta-Phase ist, bietet Adobe dieses Gratis zum Download an. Nach der Beta-Zeit kostete es erst 19$ pro Monat , mittlerweile ist es kostenlos. Sketch hingegen schklägt mit einmalig 99$ inkl. 1 Jahr Updates zu Buche. Falls man aber bereits die gesamte Creative Cloud von Adobe bezahlt, gibt es XD natürlich dazu.

Eine Entscheidung aus Budget-Gründen, für die eine oder andere Lösung, ist daher situationsabhängig.

Update: seit Mitte Mai 2018 ist Adobe XD kostenlos für alle verfügbar. In einer früheren Version des Artikels war das Programm noch für 19$ pro Monat berechnet worden.

Dieser Gastbeitrag erschien zuerst am 13.4.17 auf Publishingblog.ch