Design: Adobe Xd ist dein Tool fürs Prototyping

Prototyping, das Erstellen eines ersten benutzbaren Modells einer Website oder App, muss vor allem eines sein: schnell. Das schnellste Tool für diesen Zweck ist Adobe Xd.

Heute musste ich ein Drahtmodell einer Smartphone-App entwickeln. Das sollte nicht besonders detailliert sein, aber verständlich die Grundkonzeption erläutern und, vor allem, am Smartphone präsentierbar sein. Lange habe ich nicht überlegt, welches Tool ich dafür wohl nehmen würde. Ich startete Adobe Xd.

Adobe Xd: Recht neu im Sortiment der Creative Cloud

Adobe Xd, oder in der Langform: Adobe Experience Design CC (Beta), ist eine Software, die im Rahmen der Creative Cloud angeboten wird. Wenn du also ohnehin Abonnent bist, steht dir das Programm zur Mitnutzung zur Verfügung. Falls du noch nicht zu den Abonnenten gehörst, informierst du dich über die verschiedenen Varianten am besten an dieser Stelle.

Schnelle Wireframes mit variierendem Detailgrad

Warum nun startete ich heute Adobe Xd, wenn ich doch bloß ein Drahtmodell aka Wireframe einer App bauen wollte? Anders als der Name des Produktes vermuten lässt, befasst sich Adobe Xd nicht bloß mit den spezielleren Fragestellungen reiner UX-Designer, sondern ist ganz allgemein ein Tool für die Erstellung von Designs für das Web und mobile Geräte.

Leichter Einstieg über den Startbildschirm von Adobe Xd.

Adobe Xd ist dabei ein schneller Helfer, wenn es um Wireframes geht. Genauso lassen sich mit der Software aber auch interaktive Prototypen, Screendesigns und sogar produktionsreife Assets herstellen. Kurzum, Adobe Xd unterstützt den gesamten Designprozess. Den Grad der Detaillierung bestimmst du selbst.

Natürlich kannst du dich vom Drahtmodell bis zum fertigen Produkt durch Xd unterstützen lassen, indem du schlicht, je nach Status des Kundenfeedbacks, die Komplexität deines Designs mehr und mehr erhöhst.

Adobe Xd: Klare Aufgabenbeschreibung und klare Arbeitsteilung

Je nachdem, in welchem Status des Projektes du dich befindest, wirst du dich über die diversen Werkzeuge freuen, die Adobe Xd dir an die Hand gibt. Zu jedem Zeitpunkt ist es möglich, den Projektstand zu exportieren, um Feedback von Kunden oder Teammitgliedern einzuholen. So erzeugst du etwa einen Link, über den jeder, dem du diesen Link zugänglich machst, dein Design betrachten und, wenn du es so eingerichtet hast, auch verwenden kann. Eine Kommentarfunktion erlaubt geordnetes Feedback in Echtzeit.

Ebenso ist es möglich, dein App-Konzept direkt auf mobilen Devices zu betrachten. Dazu schiebst du die Xd-Datei in deine Creative Cloud, von wo aus du mit der zugehörigen mobilen App, die für Android und iOS in den App-Stores zur Verfügung steht, darauf zugreifen kannst. Das Design wird mobil geöffnet und getestet. Das macht natürlich besonders beim Kunden mächtig Eindruck. Für den schnellen eigenen Test dürfte die Smartphone-Verbindung über USB die zügigere Variante darstellen, wenn du überhaupt direkt auf deinem Mobilgerät testen willst.

Adobe Xd setzt voll auf Geschwindigkeit. Deshalb ist die Benutzeroberfläche der Software überaus aufgeräumt und in zwei klare Verfahrensschritte unterteilt.

Das Design des Mockups erledigst du im Arbeitsbereich „Design“. In diesem Arbeitsbereich wirst du dich sicherlich die meiste Zeit aufhalten. Hier gestaltest du deine Entwürfe Bildschirmseite für Bildschirmseite, unter Adobe Xd als Zeichenflächen bezeichnet, und ordnest sie nebeneinander auf dem Bildschirm an. Alle sichtbaren Bildelemente kreierst du hier. Im Arbeitsbereich „Design“ entsteht der komplette Look deiner App.

Im Arbeitsbereich „Prototyp“ hingegen entsteht das Feel deiner App. Hier legst du mit einfachen Verknüpfungslinien fest, welches Bildschirmelement auf welchem Bildschirm per Tap zu welchem anderen Bildschirm führt. Die gesamte Bedienstruktur erstellst du hier. Neben den reinen Zielen legst du an dieser Stelle auch etwaige Übergangseffekte, sowie Easings und deren Dauer fest.

Verknüpfungen zwischen den Zeichenflächen werden mittels Linien symbolisiert.

Die schnellste Form des Preview ist die schlicht als „Vorschau“ bezeichnete Programmfunktionalität. Die Vorschau öffnet dein Mockup in einem separaten Fenster in der Größe der Zielauflösung. Für die erste Beurteilung und deine eigenen Zwecke ist das sicherlich vollkommen ausreichend. Erst, wenn weitere Projektteilnehmer ins Spiel kommen, lohnt sich das Verteilen per Link oder die Präsentation direkt am Handy. In einer späteren Version wird es möglich sein, direkt über die Creative Cloud in Echtzeit zu kollaborieren, wie es derzeit etwa bereits Google Docs oder Office365 vormachen.

Adobe Xd: Effizienz wird groß geschrieben

Was mich am meisten beeindruckt, sind die Effizienz-Tools, die Adobe Xd im Arbeitsbereich „Design“ vorhält. So gibt es etwa das Bedienfeld „Elemente“. Hier legst du Design-Elemente, wie Farben oder Zeichenformate ab, um sie an anderen Stellen deines Designs wiederverwenden zu können. Hier speicherst du auch sogenannte Symbole. Das können zum Beispiel Icons sein, deren Optik du dann über das gesamte Projekt leicht anpassen kannst, indem du einfach das abgelegte Symbol bearbeitest.

Generell kannst du stets die Formatierungen eines beliebigen Objekts durch Kopieren auf anderen Objekte übertragen. Auch nützlich ist, dass etwa das Textwerkzeug stets die Eigenschaften des zuletzt ausgewählten Textes behält. So platzierst du sehr schnell Texte in der jeweils richtigen Formatierung, von denen du ja hoffentlich als guter Designer nur drei bis vier hast.

Sehr übersichtlich! In Adobe Xd siehst du alle Design-Bausteine auf einen Blick.

Das sogenannte Wiederholungsraster erlaubt dir schnell etwa eine Tabellenoptik oder eine formatierte Liste einzufügen, ohne jedes einzelne Element der Liste oder Tabelle händisch einfügen zu müssen. Du erstellst lediglich ein Objekt und vervielfältigst es mit dem Wiederholungsraster.

Wo wir gerade beim Raster sind. Adobe Xd bietet viele Möglichkeiten, deine Designelemente auszurichten. Stets erhältst du über variable Hilfslinien die Info, wo sich dein Element gerade im Design befindet. Zudem richtest du es ganz einfach etwa am oberen oder unteren Rand aus.

Bilder, die du im Design verwenden willst, ziehst du schlicht per Drag and Drop auf die jeweilige Zeichenfläche. Spezielle Masken sorgen dafür, dass sich deine Bilder an vorgegebene Designparameter automatisch anpassen.

Wie schon von anderen Adobe-Anwendungen bekannt, gruppierst und sperrst du Designteile aus mehreren Elementen, so dass du späterhin diese Gruppen in einem Schritt weiter bearbeiten kannst und ebenso ausschließt, dass einzelne Elemente der Gruppe verschoben oder sonst wie verändert werden.

Wenn dein Prototyp so weit gediehen ist, dass es Zeit wird, die Assets für den Entwickler des Code-Parts deiner App zu produzieren, kommt Adobe Xds Exportfunktion ins Spiel. Je nach Zielplattform (Web, iOS oder Android) sorgt die Software dafür, dass alle erforderlichen Assets exportiert werden. Der Export erfolgt dabei als SVG oder PNG. Ein zusätzlicher PDF-Export erlaubt die Weitergabe des Konzepts im Reader-Format.

Adobe Xd: Schnell, eingängig und für beide großen Betriebssysteme

Für mein App-Mockup habe ich eine halbe Stunde gebraucht. Es enthielt keinerlei produktionsfertige Assets, sondern war ein Drahtmodell klassischer Prägung. Durch die Präsentation auf meinem Smartphone konnte ich den Projektbeteiligten meine Vorstellungen dennoch so eingängig klar machen, dass jetzt alle am gleichen Strang ziehen. Erwähnte ich schon, dass ich ohnehin seit Jahren Abonnent der Creative Cloud bin? Dieses Abo hat mit Adobe Xd für mich deutlich an Wert gewonnen.

Mit Adobe Xd macht Prototyping wieder Spaß, jedenfalls mir…

Falls du jetzt Sketch als Alternative nennen willst, lass mich dir zuvorkommen. Klar, Sketch ist ein gutes Produkt. Es ist allerdings weitaus weniger schnell am Ergebnis, weil es sich sehr stark auf die Erstellung produktionsfertiger Assets, weniger auf das Rapid Prototyping verlegt. Außerdem steht es ausschließlich für macOS zur Verfügung, während Adobe Xd sowohl auf macOS, wie auch unter Windows läuft.

Für den schnellen Einstieg bietet Adobe einen ganzen Reigen von Video-Tutorials an. Innerhalb von maximal 19 Minuten kannst du die Software produktiv verwenden.

Adobe Xd: Nicht nur schnell für Entwickler, sondern auch schnell entwickelt

Geschwindigkeit ist Trumpf. Das erwähnte ich bereits mehrfach. Der Claim gilt indes auch für die Entwickler des Tools selber. Seit Xd im Oktober 2017 aus der Beta in die Version 1.0 entlassen wurde, erfreut sich die Software eines monatlichen Updates. Dabei werden nicht bloß Kleinigkeiten implementiert. Vielmehr macht Xd regelrechte Funktionssprünge. Dabei spielt vor allem, aber nicht nur, die Integration mit der Creative Cloud eine bedeutende Rolle.

Integration mit Drittanbietern und Kollaboration

Es ist wohl nicht übertrieben, dieses Feature als einen Meilenstein zu bezeichnen. Xd bietet die Zusammenarbeit mit den beliebten Prototyping-Tools Zeplin, Avocode, Sympli, ProtoPie und Kite Compositor. Ziel der Integration ist es, die Zusammenarbeit zwischen Designern und Entwicklern zu verbessern, indem Xd-Designs einfach in die jeweiligen Tools übergeben und dort nahtlos weiterverarbeitet werden.

Diese Kooperationen sind derzeit noch auf die Mac-Version von Xd beschränkt. Windows-Nutzer können sich hingegen exklusiv darüber freuen, dass Xd nun auch Stift- und Touchbedienung unterstützt.

Recht frisch ist zudem die Möglichkeit, Previews von XD-Projekten via Dropbox zu verteilen. Dein Kunde kann sich die Vorschau direkt in Dropbox anzeigen lassen.

Ebenfalls verbessert wurde die Kommentarfunktion, so dass nun passgenauer an einzelnen Designelementen kommentiert werden kann. Das dient der Teamkommunikation und reduziert die Wahrscheinlichkeit von Missverständnissen.

Die Zusammenarbeit zwischen Designer und Entwickler verbessert zudem das Feature „Design-Spezifikationen”, dass allerdings noch als Beta gekennzeichnet ist. Design-Spezifikationen erlauben es dem Entwickler, XD-Designs auszuwerten, um etwa die Abstände zwischen den Bildschirmelementen oder den geplanten UX-Flow nachvollziehen zu können.

Verbesserungen für gestalterisches Arbeiten

Bei Xd dreht sich alles um die schnelle Erstellung von Design-Prototypen. Dabei darf natürlich die Qualität nicht auf der Strecke bleiben. Immerhin sollten wir nach dem ersten Wireframe auch in der Lage sein, das Xd-Design so weiter zu bearbeiten, dass wir am Ende produktionsfertige Assets abgeben können.

Deshalb ist es gut, dass sich das Entwicklerteam auch vermeintlicher Details gezielt annimmt. Für mich die wichtigste Neuerung ist die Möglichkeit, Farben in drei verschiedenen Modellen, nämlich Hex, RGB und HSB, zu definieren. Mit radialen Farbverläufen können wir etwa Lichtquellen simulieren und mittels Batch-Export erzeugen wir Assets am laufenden Band.

Die neuen Layout-Raster erlauben eine Art Gestaltungsvorlage für deine Arbeitsflächen und sichern so konsistente Optik über mehrere Screens hinweg. Die Definitionen des Layout-Rasters kann der Entwickler wiederum über die weiter oben genannten Design-Spezifikationen auswerten.

Integration mit der Creative Cloud

Es wäre schon seltsam, würde Adobe nicht bemüht sein, die einzelnen Komponenten der Creative Cloud eng mit Xd zu verzahnen. Das beginnt ganz klein, indem du etwa eine Photoshop-Datei aus deinem Xd-Projekt heraus direkt mit Photoshop zur Bearbeitung öffnen kannst.

Umfangreicher ist die Kooperation mit Illustrator und in der Creative Cloud abgelegten Vektordateien. Diese kannst du in dein Xd-Projekt verknüpfen. Das hat nun zur Folge, dass sich die Dateien in deinem Projekt automatisch ändern, sobald die Ursprungsdatei bearbeitet wird. Da es durchaus Gründe geben kann, diese Automatik nicht zu verwenden, kannst du die in einer Creative-Cloud-Bibliothek gespeicherten Vektordateien auch in ein Projekt einbinden, ohne sie zu verknüpfen.

Nicht unerwähnt will ich lassen, dass sich die Performance des Tools insgesamt ebenfalls stetig verbessert hat. Das merkst du insbesondere dann, wenn du im Übersichtsmodus mit vielen Arbeitsflächen gleichzeitig arbeitest.

Für verschiedene gängige Anwendungsfälle schenkt dir Adobe UI-Kits. Derer fünf findest du hinter diesem Link.

Fazit: Ich bin dabei

Der rasante Fortschritt, den Adobe mit Xd erzielt, führt in meinem Fall dazu, dass ich Sketch immer seltener verwende. Selbst für die Erstellung der Produktions-Assets habe ich zuletzt vielfach Xd in Kooperation mit einem anderen CC-Produkt genutzt. Für mich verschiebt sich gerade der Nutzungsfokus innerhalb der CC komplett. Eingestiegen war ich wegen Photoshop, Illustrator und InDesign. Jetzt benutze ich vor allem Xd (und in geringerem Maße) Dreamweaver weitaus häufiger als gedacht.

Wie sieht dein Workflow aus?

Übrigens: Die mobile App für die Präsentation auf Smartphones findest du hier:

• Adobe Xd für Android im Google Play Store
• Adobe Xd für iOS im Apple iTunes Store

(Der Beitrag erschien zuerst am 21. September 2017 und wurde zuletzt am 16. Februar 2018 aktualisiert und erweitert.)