Adobe Xd ist das Tool für Prototyping 2017

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

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: Frischling 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. Da es sich zur Zeit noch in der Beta für Mac und Windows befindet, kannst du es derzeit sogar kostenlos herunterladen und benutzen. Das Anlegen der benötigten Adobe-ID geht schnell und kostet nichts.

Nach Verfügbarkeit der finalen Version, also nach Abschluss des Beta-Tests, wirst du Adobe Xd nur über ein CC-Abo nutzen können. Über die verschiedenen Varianten informierst du dich 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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

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

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

6 Kommentare auf "Adobe Xd ist das Tool für Prototyping 2017"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Robert
Gast

“Es ist allerdings weitaus weniger schnell am Ergebnis, weil es sich sehr stark auf die Erstellung produktionsfertiger Assets, weniger auf das Rapid Prototyping verlegt.”

Finde ich überhaupt nicht. Daher ist Sketch (in Verbindung mit Framer) für mich das Prototyping Tool. Auf der Prozessebene unschlagbar und es gibt weniger Reibungsverluste in der Kommunikation.

Nadine
Gast

Als Apple-Gegner bin ich so dankbar für Xd – vor allem weil es mich nicht zusätzlich Geld kostet, da es in der Creative Suite enthalten ist. Mir ist aber auch sehr wichtig, dass das Arbeiten damit Spaß macht – da greife ich deine Erfahrung auf Dieter – ich arbeite gern damit und kann es wirklich empfehlen!

wpDiscuz