Adobe XD: Der Prototyp-Kollege

Adobe XD: Der Prototyp-Kollege

Vom Wireframe über den Prototypen bis zur Entwicklung

Seit diesem März greifen wir öfter auf das Screendesign- und Prototypingtool Adobe XD zurück und haben es in unseren Workflow integriert. In diesem Beitrag möchten wir unsere ersten Eindrücke teilen und die Entwicklung und Gründe für die Aufnahme von Adobe XD erläutern.

  Juli 19       KATEGORIE: Design       BY Steffen   

Hinter jeder Umstellung steht an erster Stelle ein Grund. Dieser ist ganz einfach, wir suchten Möglichkeiten, um unseren Workflow zu optimieren. Dazu gehört das Screendesign, die Kommunikation mit dem Kunden und die Zusammenarbeit mit den Entwicklern.

Der erste Kontakt

Nach kurzer Abstimmung mit dem Grafik-Team fiel die Entscheidung für einen neuen Ansatz in der Nutzung der Layout-Software. In diesem Bereich muss es doch bereits auf die Bedürfnisse abgestimmte Software geben. Natürlich hat jeder von uns bereits etwas von Sketch oder Invision gehört, doch wir setzten auf die Neuentwicklung aus dem Hause Adobe.

Adobe XD UI und Mobile-Design

Ende 2018 ist also der Entschluss gefallen, Adobe XD soll die neue, optimierte Software für die Entwicklung von Websites werden. Kurzerhand stürzte man sich auf die Software für einen internen Stresstest. Kurz in die Creative Cloud geladen, konnte es auch schon direkt losgehen. Das erste was einem direkt auffiel, es ist verdammt schnell, also wirklich schnell. Ein klarer Vorteil gegenüber den alten Entwicklungen wie z.B. Photoshop oder InDesign. Denn bei XD ist alles neu, nicht eine Zeile oder ein Baustein von den älteren Softwareentwicklungen soll sich hier befinden.

Alles wird gestochen scharf dargestellt, was daran liegt, das Adobe XD auf die Verwendung von Vektoren zurückgreift und somit (zumindest bei den reinen Formen und Schriften) keine Pixel gerendert werden. Ebenfalls stark, das Verbinden von Arbeitsflächen, zwischen denen man mit einem Mausklick wechseln kann. Damit können unseren Kunden zukünftig ein viel besseres Gefühl für die Nutzerführung und das Layout erhalten.

Übersicht von Verknüpfungen zwischen Arbeitsflächen im Prototyp-Modus.

Übersicht von Verknüpfungen zwischen Arbeitsflächen im Prototyp-Modus.

Eine (un)gewohnte Umgebung – Willkommen Zuhause

Nach nur erschreckend geringer Zeit fühlte sich die Nutzung von XD bereits an wie das alte Paar Lieblingsschuhe, die eine komplett neue Sohle bekommen haben. Vertraut waren einem die Werkzeuge, da sie sich anfühlten wie aus Illustrator aber auf weniger relevante Funktionen verzichtend und das ganze Menü nun übersichtlich und aufs Minimum reduziert darstellen lässt. Neu halt.

Anders sah das bei der ersten Nutzung vom Prototyp-Modus aus. Es bedarf einen kleinen Moment, um zu verstehen, was man mit etwas Kreativität für Interaktionen schaffen kann, ohne auch nur eine Codezeile schreiben zu müssen. Es ist umfangreich aber die Zeit verging rasant beim Experimentieren mit diesem Feature, besonders als die Auto-Animation integriert wurde. Allein diese Möglichkeit, ohne eine zusätzliche Software oder Plugin, bestätigte unsere Entscheidung für Adobe XD.

Schwierigkeiten in der ersten Phase

Wie ihr bereits gelesen habt, hatten wir uns bereits Ende 2018 mit Adobe XD beschäftigt. Doch warum nutzen wir erst ab März 2019 dieses Prototypingtool? Nun, das ist ganz einfach, es fehlte einfach an wichtigen Standards für die Nutzung. Sei es das Ändern von Texten in z.B. Versalien oder das Hochstellen von Texten bis hin zum Einfügen von Platzhaltertext, ohne diese mühsam aus einer Datei oder Webseite zu kopieren. Diese und weitere fehlende Funktionen sorgten dafür, dass wir erst einmal in Lauerstellung gingen und XD für kleinere interne Entwicklungen nutzten. Wie z.B. das Entwickeln von PWA-Projekten.

Überraschend war im Laufe der Zeit die Update-Philosophie von Adobe. Nahezu wöchentlich brachten sie ein Update für XD heraus, auch wenn es oft nur die Performance optimierte oder, wenn auch selten, Fehler aus einem früheren Update korrigierte. Zumindest konnte man davon ausgehen, dass mindestens alle zwei Monate neue Features in XD "hereingeflattert" kamen. Dann hieß es immer, Update-Report lesen und die neuen Features aufs Tiefste auszuprobieren und mit den Kollegen teilen.

Bildquelle: max.adobe.com

Durchbruch im Oktober – Adobe MAX

Für uns hier bei Paints schaffte Adobe XD seinen Durchbruch im Oktober, kurz vor dem Adobe MAX Event. Auto-Animation, Drag-Gesten und ein Plugin-Market mit Erweiterungen für XD aus der Community. Ab dem Zeitpunkt fing alles erst so richtig an. Die darauffolgenden Updates spielten immer weiter in unseren Anspruch an die Software hinein. Die ersten größeren internen Projekte wurden zusammen mit den Entwicklern und der von Adobe XD integrierten Entwickler-Ansicht erarbeitet, um auch hier alle aufkommenden Fragen abzuwiegen. Stück für Stück entwickelten wir unsere Standards weiter und optimierten somit den neuen Workflow. Ab März war es dann soweit und das erste Kundenprojekt, welches mit XD umgesetzt werden soll, wartete bereits.

Doch eines muss gesagt werden

Nun, wir sind froh mit der Entwicklung von Adobe XD und sind uns sicher, dass es noch lange nicht den Höhepunkt in seinen Möglichkeiten erreicht hat. Adobe XD ist bei Paints angekommen und ein fester Bestandteil des neuen Workflows geworden. Wir nutzen es fast überall, ob für Wireframes, Prototypen, Layouts oder Entwicklung von neuen Modulen. Es bringt einfach Spaß sich barrierefrei zwischen mehreren Arbeitsflächen zu bewegen und zuzusehen wie das gesamte Projekt wächst. Die neuen Möglichkeiten zur Präsentation von Layouts mithilfe von Animationen ist aufregend und bringt Lust auf mehr.

Ganz klar ist auch nochmals die Entwickler-Ansicht zu erwähnen, mithilfe derer sich die Frontend-Entwickler Farben, Schriften, Größen, Abstände uvm. nach Belieben herauspicken können und somit wichtige Zeit und Aufwand sparen.

Zum Abschluss bleibt nur zu sagen: 

Wir sind gespannt auf die nächsten Entwicklungen von Adobe XD und freuen uns bereits auf das Testen der kommenden Features.

Steffen ist Grafikesigner bei PAINTS