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.
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.
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.
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.
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.
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:
(Der Beitrag erschien zuerst am 21. September 2017 und wurde zuletzt am 16. Februar 2018 aktualisiert und erweitert.)
14 Antworten
“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.
Hast du Xd mal gegen Sketch antreten lassen?
Agenturbedingt ja.
Erstaunlich, zu welch unterschiedlichen Ergebnissen man kommen kann. Aber jeder Jeck ist anders, wissen die Kölner schon seit Jahrhunderten.
Ich schliesse mich da Robert an. Was mir gut an XD gefällt ist die Verzahnung mit der Adobe Cloud und das man schnell zu animierten Prototypen kommt, plus die mögliche Verzahnung mit Windows.
Was die generelle Schnelligkeit beim Aufbau von komplexen Prototypen angeht liegt es jedoch einfach noch meilenweit hinter Sketch.
Alleine durch dutzende frei verfügbare Erweiterungen (Stichwort Iconbibliotheken, oder auch Craft) die für Sketch verfügbar sind, aber auch durch reine Bedienungslogik.
Ich werde UX weiter im Auge behalten, aber momentan bleibt es nach wie vor Sketch.
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!
Ich nehme wirklich nicht so oft das Wort Spaß in den Mund, wenn es um die Arbeit geht. Aber bei Xd tue ich es. Habe es gern offen und fummele an Wireframes herum.
Hi Peter, danke für den Artikel. Gehe da voll mit.
Unten hat sich, glaube ich, ein kleiner Fehler eingeschlichen.
Ich denke, es müsste 16.Februar 2018 heißen, oder? 🙂
“(Der Beitrag erschien zuerst am 21. September 2017 und wurde zuletzt am 16. Februar 2017 aktualisiert und erweitert.)”
Lieben Gruß
Florian
Lieber Dieter!! Sorry 😉 Hahaha.. Wenn man andere auf Fehler hinweist!
Danke für den Hinweis. Das stimmt natürlich.
Finally, ProtoPie supports Adobe XD import!Thank you for mentioning;)
So wie geschrieben denke ich ist XD ein geniales Tool,
aber wie schaut es dann danach aus?
Für eine produktionsreife Seite, wie weit unterstützt mich XD für die Umsetzung?
Kein Export als HTML und CSS
Können die Bilder aus XD für die produktive Seite übernommen werden.
etc.
Heisst da ich muss komplett von vorne die produktive Seite aufbauen/coden?
Freue mich auf eine Antwort?
Guten Tag.
Wenn auch recht spät zu diesem Thema, aber nicht weniger relevant. Warum überhaupt Prototyping?Das ist doch doppelte Arbeit und nicht kompatibel bzw. integrierbar in andere Systeme. Der einzige Vorteil ist die Visualisierung einer Seite. Aber das kann man doch auch direkt in WordPress machen. Da arbeite ich optional mit Themes / Templates , die auch interaktiv sind. Kann dann auch Testumgebungen OHNE die Adobe Cloud einrichten. Sogar kostenfrei. Warum also mühe voll ein schönes Design entwickeln, wenn ich es nicht mal in eine andere Lösung (CMS) integrieren kann? Ich versteh die Sinnhaftigkeit nicht… Mache lieber alles in WordPress – stelle es live zum Testen und schalte es nach Korrekturen dann nur noch scharf.
Hallo Ihr alle!
ich nutze seit vielen Jahren die Adobe Programme iD, Ai, Ps, Fl, Dw und Pr.
Ich interessiere mich auch noch sehr für das WebDesign und lernte schon Adobe Dreamweaver CC, Adobe Edge Programme CC und Adobe Muse. Da es nun Muse und die Edge-Programme nicht mehr gibt, bin ich sehr verärgert, dass ich all die Web-Programme (außer DreamWeaver) für umsonst gelernt habe und viel Zeit verwendet habe.
Nun lernte ich seit 2 Monaten Adobe XD kennen und bin sehr begeistert, was das Programm zu bieten hat.
Das XD nur zum Designen gedacht ist und nicht zum coden, musste ich auch Mamp (Server), Atom (Code) und WordPress (Seitenreservierung) verwenden. All das macht mich immer noch durcheinander.
Ist es möglich Adobe XD (Design) und Adobe Dreamweaver (Code) miteinander zu verknüpfen oder zusammen zu verwenden? Vorteil ist: beide stammen von Adobe und konzentriere mich lieber auf eine Firma statt 5 verschiedene, bis ich den Überblick verloren habe. Ich hoffe, das Adobe, XD nicht auch noch irgendwann abschafft (sowie es bei Edge und Muse der Fall war…