Prototyping mit Adobe Xd – aber Hallo!

Adobe Experience Design CC – oder bleiben wir bei der schnelleren Variante Adobe Xd – wird über die Creative Cloud für macOS und Windows zur Verfügung gestellt. Das kommt vor allem uns Abonnenten sehr gelegen. Seit Kurzem muss niemand mehr den Kopf hängen lassen: Alle haben ab sofort die Möglichkeit das Tool kostenlos herunterzuladen. Also nachdem du den Blogbeitrag gelesen hast, ran an den Download-Button und Adobe Xd ausprobieren!

Adobe Xd ist ein Tool für die effiziente und schnelle Erstellung von Designs. Per Mausklick kann man zwischen dem Design- und Prototyping-Modus wechseln und interaktive Prototypen, Screendesigns und sogar Assets erstellen. Im Allgemeinen kann man sagen, Adobe Xd unterstützt den gesamten Designprozess. Man kann Änderungen in Echtzeit auf dem Zielgerät überprüfen oder Prototypen für Andere freigeben. Dadurch kann das Feedback eingearbeitet und die Komplexität des Designs vom einfachen Wireframe bis zum fertigen Produkt gesteigert werden.

Designen, testen, freigeben

Das Feedback von Kunden oder Teammitgliedern kann zu jedem Zeitpunkt eingeholt werden. Über einen Link wird das Design Anderen verfügbar gemacht und das Beste: Über eine Kommentarfunktion kann man zu einzelnen Designelementen in Echtzeit Feedback geben. Dies verbessert nicht nur die Team-Kommunikation, sondern verringert auch Missverständnisse.

Ebenso lässt sich das Konzept auf mobilen Geräten betrachten. Dabei gibt es die Möglichkeit, die Xd-Datei in die Creative Cloud zu laden und die zugehörige Android- oder iOS-App zu installieren. Das Design kann mobil geöffnet und getestet werden. Diese Funktionalität sorgt vor allem bei Kundenterminen für einen Wow-Effekt. Es ist aber vermutlich schneller, wenn man das Design über eine USB-Verbindung auf das Smartphone überträgt. Diese beiden Methoden, sowie die Zurverfügungstellung eines Links, sind auf jeden Fall sehr sinnvoll, wenn Kunden oder Teammitglieder für das Feedback herangezogen werden. Die schnellste Form während des Arbeitsflusses ist allerdings die Vorschau-Funktion. Dabei wird ein separates Fenster in der Größe der Zielauflösung geöffnet, was für die erste Begutachtung völlig ausreichend ist.

Einmal Look&Feel – aber schnell bitte

Eine aufgeräumte Benutzeroberfläche und die Unterscheidung der zwei Arbeitsbereiche “Design” und “Prototyp” ermöglichen ein effizientes Arbeiten zur Erstellung des Look&Feel einer App oder Homepage.

Wie der Name schon vermuten lässt, wird das Aussehen der App oder Homepage im Arbeitsbereich “Design” erstellt. Die Entwürfe der Screens in Form von Zeichenflächen, wie man sie vielleicht bereits von Photoshop kennt, können bis ins kleinste Detail definiert werden. Shortcuts ermöglichen ein schnelles Arbeiten und sind bereits aus anderen Creative Cloud Produkten bekannt.

• T: Erstellt ein neues Textfeld.

• Shift + ⇧/⇩: Verschiebt das ausgewählte Element um 10px.

• Strg + R: Erstellt das Wiederholungsraster.

• Strg + 8: Konvertiert das ausgewählte Element in einen Pfad.

• #F + Enter: Ermöglicht die automatische Vervollständigung von Farbwerten. Beispielsweise #069 + Enter -> #006699

Mit Hilfe einfacher Verknüpfungslinien, werden die Screens im Arbeitsbereich “Prototyp” miteinander verbunden, sodass sie per Tap oder Sprachinteraktion – aktuell nur in Englisch verfügbar – gewechselt werden können. Animierte Übergangseffekte ohne Zeitleiste sowie die gesamte Bedienstruktur lassen sich damit einfach und flexibel abbilden.

Im Bedienfeld “Elemente” werden wiederkehrende Design-Elemente, wie Farben oder Zeichenformate in Form von sogenannten Symbolen abgelegt. Änderungen an einem Symbol, wie beispielsweise einem Icon, wirken sich auf das gesamte Projekt aus. Elemente kann man auch von Symbolen abkoppeln, sodass Veränderungen keine weiteren Auswirkungen haben.

Textwerkzeug

Eine durchaus praktische Funktion bietet das Textwerkzeug. Die zuletzt ausgewählte Eigenschaft des Textwerkzeuges überträgt man beim Platzieren eines neuen Text-Elements. Wird eine formatierte Liste oder eine Tabelle benötigt, kann das Wiederholungsraster Abhilfe schaffen. Damit kann man Elemente schnell vervielfältigen, ohne jedes Element händisch einfügen zu müssen. Apropos Raster: Adobe Xd bietet viele Möglichkeiten die Elemente auszurichten. In den Eigenschaften der Zeichenfläche kann ein Raster mit beliebiger Kästchengröße eingeblendet werden. Auch die stets verfügbaren Hilfslinien geben an, wo sich das Element gerade befindet und helfen beim Ausrichten.

Per Drag and Drop kann man Grafiken in Zeichenflächen platzieren. Dabei sorgen spezielle Masken mit vorgegebenen Parametern für eine automatische Anpassung. Beispielsweise kann man damit Bilder mit einem Kreis maskieren oder so formatieren, dass sie nicht über die Zeichenfläche hinausragen.

Die Gruppier- und Sperr-Funktion, die wahrscheinlich bereits aus anderen Creative Cloud Produkten bekannt ist, wurde ebenfalls übernommen. Damit kann man Gruppen zu einem späteren Zeitpunkt einfacher bearbeiten. Außerdem kann man damit eben ausschließen, dass man einzelne Elemente einer Gruppe verändert.

Ist das Design soweit abgeschlossen, kann man Assets für die Zielplattform in Form von SVG oder PNG exportieren. Auch die Möglichkeit das Konzept als PDF zur Verfügung zu stellen ist gegeben.

Kollaboration bestimmt die Zukunft

Die Verbindung mit anderen Creative Cloud Produkten wie Photoshop oder Illustrator ist nicht wegzudenken. So kann man beispielsweise Photoshop-Dateien aus Adobe Xd direkt mit Photoshop bearbeiten oder Änderungen in abgelegten Vektordateien sind direkt wirksam.

Äußerst hilfreich ist die Integration von UI-Kits. Diese beschleunigen den Design Prozess um ein Wesentliches und tragen dazu bei, dass das Look&Feel der App oder Homepage an die Design Guidelines für die Plattform angepasst ist. iOS, Android oder auch Windows UI-Kits können über Adobe Xd heruntergeladen werden und bieten eine Vielzahl an nativen Design-Elementen.

Seit einem Jahr ist Adobe Xd nicht mehr in der Beta-Version und wurde mit monatlichen Updates stets weiterentwickelt. Dadurch hat sich innerhalb dieses Jahres sehr viel getan. Nicht nur die Performance des Tools hat sich wesentlich verbessert, auch im Bereich des Prototyping haben die Verbindung mit der Creative Cloud und die Animationsmöglichkeiten zwischen den Screens das Potential der Software stark gefördert. Die Integration von Drittanbietern soll die Zusammenarbeit zwischen Designern und Entwicklern noch weiter verbessern und die Aufgaben automatisieren. Tello, Zeplin, Jira, Slack, sowie eine weitere Anzahl an Plugins und UI-Kits stehen in Adobe Xd bereits zur Verfügung.

Bis Bald!

Dieser rasante Fortschritt von Adobe Xd führt in meinen Augen in eine positive Richtung und gestaltet den Weg für den Konkurrenten “Sketch” definitiv steinig. Mir persönlich bereitet es große Freude, einfache Wireframes mit Adobe Xd zu gestalten, und unseren Kunden damit die Möglichkeit zu geben, unsere Gedankengänge besser zu verstehen. Die klare Benutzeroberfläche, die äußerst verständlich und schnell erlernt ist, trägt ebenfalls dazu bei. Auch die Integration von Plugins hört sich interessant an. Es bleibt auf alle Fälle spannend, wie sich Adobe Xd weiterentwickelt.

Damit ich beim nächsten Mal mehr zu den Plugins und vielleicht bereits neuen Adobe Xd Features erzählen kann, werde ich mir jetzt meine Kopfhörer aufsetzen und in die Adobe Xd Welt eintauchen.