{"id":8228,"date":"2018-01-31T18:00:39","date_gmt":"2018-01-31T17:00:39","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/?p=8228"},"modified":"2018-01-31T17:57:29","modified_gmt":"2018-01-31T16:57:29","slug":"adobe-xd-ux-workflow","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/adobe-xd-ux-workflow\/","title":{"rendered":"Adobe XD \u2013\u00a0f\u00fcr den perfekten UX Workflow?"},"content":{"rendered":"

Im Oktober 2017 hat Adobe mit Adobe XD die erste Beta Version seines als \u201eKomplettl\u00f6sung f\u00fcr UX\/UI-Design\u201c<\/a> beworbenen Tools ver\u00f6ffentlicht. Als grafischer Designer habe ich jahrelang im Workflow mit Photoshop und Illustrator gearbeitet und stelle mir die Frage, inwieweit XD die Erwartungen an ein UX Tool bisher erf\u00fcllen kann.<\/p>\n

Kleiner Ausflug in die Vergangenheit, um den m\u00f6glichen Impact der Einf\u00fchrung des neuen Tools zu verdeutlichen: Im Printbereich hat Adobe ab InDesign Version 2.0 Anfang der 2000er Jahre die Konkurrenz praktisch verdr\u00e4ngt und im Zusammenspiel mit Photoshop und Illustrator und der reibungslosen Ausgabe von druckf\u00e4higen Daten einen Standard gesetzt. Spannend ist, ob XD schon jetzt die verschiedenen Prozesse im UX Kosmos abdecken kann und ob es das Potenzial hat, Tools wie Sketch<\/a> \u00e4hnlich kompromisslos aus der Landschaft zu tilgen, wie es damals InDesign mit QuarkXPress machte.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Zwar ist XD noch in der Beta-Phase, trotzdem kommt das Programm schon mit einigen Features daher, die sich gut anf\u00fchlen und einen tollen ersten Eindruck vermitteln. Ein aufger\u00e4umtes Interface mit wenigen Werkzeugen die \u00e4hnlich zum Aufbau beim gr\u00f6\u00dften Konkurrenzprodukt Sketch im rechten Teil ein passendes Kontextmen\u00fc erhalten. Verwendet man beim Einstieg das \u201eGrundlagen-Tutorial\u201c, wird das Programm schnell zug\u00e4nglich. Dar\u00fcber hinaus bietet Adobe selbst einige Tutorials an, die weitere Funktionen und Features anhand praxisnaher Beispiele erkl\u00e4ren. Das reduzierte Interface macht das Auffinden der wichtigsten Werkzeuge recht einfach. Beim Arbeiten mit Vektorelementen und Schrift haben allerdings die Funktionen nicht ganz so viele Details wie beispielweise in Illustrator oder Photoshop.<\/p>\n

Das Gestalten von Screens und Prototypen<\/h3>\n

\"\"XD unterscheidet zwischen dem Design- und dem Prototypemodus. Es bietet zum Arbeiten eine Taskbar mit den wichtigsten Werkzeugen und ein passend agierendes Kontextmen\u00fc mit weiteren Funktionen an. In der Taskbar l\u00e4sst sich unter anderem global zwischen Ebenen und Elementen wechseln. Ebenen und Gruppierungen lassen sich benennen und sperren. Grundlegend schon mal eine gute Voraussetzung um seinen Screen sauber aufzubauen.<\/p>\n

Pfade<\/h5>\n

Die Werkzeuge zum Layouten im Designmodus sind Auswahlwerkzeug, diverse Vektortools (Rechteck, Quadrat, Kreis, Linie und dem Zeichenstift), Text, Zeichenfl\u00e4chen und die Zoomfunktion. Die M\u00f6glichkeiten der Vektortools sind recht \u00fcberschaubar und funktionieren wie bei den bekannten Adobe-Programmen. Im Kontextmen\u00fc hat man die Funktionalit\u00e4t des Pathfinders mit eingebunden. Eine praktische Sache, wobei mir beim Umgang mit Pfaden das direkte Auswahlwerkzeug fehlt, gerade um einzelne Ankerpunkte zu entfernen. Auch das l\u00e4stige Hineinklicken in verschachtelte Gruppen w\u00fcrde es \u00fcberfl\u00fcssig machen.<\/p>\n

Text<\/h5>\n

Bei einigen Funktionen hat man das Gef\u00fchl, als w\u00e4re sich Adobe nicht ganz klar dar\u00fcber gewesen, bis zu welchem Detailgrad diese integriert werden sollten. So wird beim Erstellen von Texten die Wahl zugelassen, neben dem Standardtextfeld gro\u00dfe Textmengen in einem Flie\u00dftextfeld zu organisieren \u2013 eine Funktion, die f\u00fcr den vern\u00fcnftigen Umgang mit Texten gebraucht wird. Auf der anderen Seite fehlen dann aber grundlegende Zeichenformate wie \u201eAll in Capital\u201c und weitere. Die Flie\u00dftextbox l\u00e4sst sich nicht auf die letzte Zeile trimmen. Das wird sp\u00e4testens bei der Ausgabe in der Spezifikation etwas problematisch, da sich Design Engineer nicht die korrekten Abst\u00e4nde an diesen Stellen rausziehen k\u00f6nnen.<\/p>\n

Zeichenfl\u00e4chen<\/h5>\n

Zeichenfl\u00e4chen hinzuzuf\u00fcgen oder zu \u00e4ndern ist sehr simpel. Frei Hand l\u00e4sst sich einfach eine Fl\u00e4che \u00fcber das Tool aufziehen. XD erkennt vorhandene Fl\u00e4chen und Ankerpunkte aus bestehenden Elementen und bietet die M\u00f6glichkeit, sich daran zu orientieren. Zudem hat man die M\u00f6glichkeit, aus Vorlagen f\u00fcr Zeichenfl\u00e4chen zu w\u00e4hlen. Auch lassen sich Zeichenfl\u00e4chen mit diversen Gr\u00f6\u00dfen in einem Dokument anlegen. M\u00f6chte man einen Scrollbereich einer Zeichenfl\u00e4che definieren, so l\u00e4sst sich das schnell \u00fcber das Zeichenfl\u00e4chen-Tool l\u00f6sen. Beim Arbeiten mit Grafik- oder Text-Items gilt das Gleiche wie beim Umgang mit den Zeichenfl\u00e4chen. \u00c4hnlich den \u201eintelligenten Hilfslinien\u201c, die man aus Illustrator oder InDesign kennt, lassen sich Objekte und Zeichenfl\u00e4chen pixelgenau ausrichten und erstellen.<\/p>\n

Bilder<\/h5>\n

Bei XD hat man sich daf\u00fcr entschieden, Bilddaten in das Dokument einzubetten. F\u00fcr die Ausgabe als Prototyp oder bei der Weitergabe der Datei wahrscheinlich der bessere Weg. Die Option, auch PSD Dateien einbinden zu k\u00f6nnen und diese wie in Illustrator oder InDesign in Echtzeit zu aktualisieren, f\u00e4nde ich aber charmant. St\u00e4ndiges Erzeugen von Bilddaten und neu Platzieren w\u00fcrde man sich damit ersparen.<\/p>\n

Features<\/h3>\n

Wiederholungsraster<\/h5>\n

Elemente im einem Raster schnell und easy wiederholen? In der Tat ist dieses Feature toll umgesetzt. Abst\u00e4nde innerhalb der Wiederholung sind sehr simpel anzupassen. Abweichungen bei Farben und Labels sind schnell ge\u00e4ndert. Verwendet man Bildboxen, ist das Einsetzen via Drag and Drop von mehreren Bildern toll gel\u00f6st. Einfach die Bilder ins Wiederholungsraster ziehen, fallen lassen und die Bilder sitzen in den Bildboxen.<\/p>\n

\"\"<\/a><\/p>\n

Stilvorlagen und Symbole<\/h5>\n

Ein weiteres tolles Feature ist der Umgang mit Symbolen und Formaten. W\u00e4hlt man Objekte auf seinen Zeichenfl\u00e4chen aus, kann man mit einem Klick diese als Symbole oder Formate definieren. XD erkennt Elemente (z.B. Farben und Schrift) auch innerhalb von Gruppen und legt diese in der Vorlagenpalette ab. Diese Elemente lassen sich ganz einfach global wieder anpassen und werden an allen relevanten Stellen im Dokument \u00fcbernommen. Beim Umgang mit Farben finde ich es schade, dass man Swatches nicht benennen kann.<\/p>\n

\"\"Live-Preview<\/h5>\n

Ein weiteres \u201eAwesome\u201d Feature ist die \u201eLive-Preview\u201c im Device. Per USB USB-Kabel und XD App auf dem Device l\u00e4sst sich der Prototyp in Originalgr\u00f6\u00dfe \u201ein Use\u201c beurteilen. Man hat somit den direkten Test am Objekt. Schriften, Farben, Gr\u00f6\u00dfenverh\u00e4ltnisse oder Interaktion lassen sich super beurteilen. \u00c4ndert man am Desktop etwas am Screen, wird dies \u201elive\u201c im Device \u00fcbernommen. Werden Prototypen im Cloud Ordner abgelegt, so werden diese in der Cloud synchronisiert und sind auch ohne die Kabelverbindung abrufbar. Ein kleiner Haken ist bisher noch das Auslesen von Fonts, wenn man den Prototyp \u00fcber die Cloud auf der App \u00f6ffnet. Dabei kann es vorkommen, dass einige verwendete Fonts aus Lizenzgr\u00fcnden nicht angezeigt werden k\u00f6nnen.<\/p>\n

\"\"Measurement und Kommentieren, Statechart<\/h5>\n

Mit der Funktion \u201eDesign-Spezifikationen ver\u00f6ffentlichen\u201c oder \u201ePrototyp freigeben\u201c gibt man eine Version in der Cloud frei. Einfach \u00fcber den Browser \u00f6ffnen und man erh\u00e4lt eine Statechart View und Verma\u00dfungen. Die letzten \u00c4nderungen an einem Design lassen sich damit ganz einfach weitergegeben und der Design Engineer dankt es, da er nicht auf veraltete, manuell erstellte Spezifikationen zur\u00fcckgreifen muss. Genial finde ich in dieser Umsetzung die erweiterten Angaben \u00fcber Fonts, Farben und Ma\u00dfe, die \u00fcber das das Kontextmen\u00fc angeboten werden.<\/p>\n

\"\"<\/a>\"\"<\/a><\/p>\n

In der Browseransicht hat Adobe eine Suche integriert, die sich mir nicht ganz erschlossen hat. Warum sich diese nur auf das Durchsuchen von Benennungen der Zeichenfl\u00e4chen beschr\u00e4nkt, ist mir etwas fern. Auch Inhalte oder Labels durchsuchen zu k\u00f6nnen, w\u00e4re eine sinnvolle Erg\u00e4nzung.<\/p>\n

\u00dcber das Kommentieren eines ver\u00f6ffentlichten Prototyps lassen sich Anmerkungen schnell austauschen. Das freie Positionieren von Kommentarfeldern wie in Acrobat w\u00e4re eine gute Erg\u00e4nzung, um einen direkten Bezug auf Stellen in den Screens nehmen zu k\u00f6nnen.<\/p>\n

Bisher l\u00e4sst XD es zu, Grafiken oder Screens als SVG, PDF, JPG und PNG zu exportieren. Praktisch f\u00e4nde ich auch den Export von Statecharts oder Bema\u00dfungen au\u00dferhalb der Cloud.<\/p>\n

Ist XD als Tool f\u00fcr Interaction Designer geeignet?<\/h3>\n

Adobe legt Wert darauf, dass man mit XD schnell Wireframes, Wireflows oder Prototypen erstellen kann. Und tats\u00e4chlich bietet XD hier einen z\u00fcgigen Einstieg. Egal, ob man den Umgang mit anderen VD Tools beherrscht oder nicht. Es lassen sich schnell erste vorzeigbare Ergebnisse erzielen. Um wirklich effizient beim Erstellen von Wireframes zu sein kann man auf zahlreiche Kits<\/a> zur\u00fcckgreifen die zur kostenlosen Verwendung angeboten werden. Eine gute zus\u00e4tzliche Option w\u00e4re, ein Master f\u00fcr Zeichenfl\u00e4chen zu integrieren. Gerade bei gr\u00f6\u00dferen Projekten mit vielen Screens ist es effizienter wenn man nicht immer gleiche Objekte erst kopieren muss um diese auf den gew\u00fcnschten Zeichenfl\u00e4chen zu erhalten.<\/p>\n

\"\"<\/a><\/p>\n

Frei w\u00e4hlbare UI-Kits zum Erstellen von Wireframes h\u00f6ren sich zun\u00e4chst gut an \u2013 Ich sehe dies allerdings etwas kritisch. Ein Wireframe sollte visuell auf einer Ideenskizze basieren. Durch die \u201eStylings\u201c der Kit-Elemente gibt man dem Designer und dem Kunden eine visuelle Richtung mit, welche man unter Umst\u00e4nden gar nicht einschlagen m\u00f6chte.<\/p>\n

Eine gute Unterst\u00fctzung f\u00fcr einen reibungsfreien Workflow bietet wie bereits beschrieben das Kommentieren und die Statechart-View. Beim Thema Animation ist XD sehr sparsam und bietet eine Hand voll \u00dcbergangsanimationen. Morph-Effekte oder Controls mit diversen States (Mouse Over, Pressed, etc.) sind innerhalb von XD noch nicht m\u00f6glich.<\/p>\n

Eine Spur zu viel Cloud<\/h3>\n

Dass Adobe jeglichen Austausch sowie Anbindungen \u00fcber die Cloud regelt, scheint mir auf den ersten Blick logisch \u2013 allerdings macht es den Einsatz des Tools beim Arbeiten f\u00fcr Kunden mit strengen Geheimhaltungsvereinbarungen unm\u00f6glich. Viele Kern-Features wie die Ausgabe der Spezifikation, Statechart View, das Kommentieren oder die Preview (via Cloud) auf dem Ger\u00e4t sind ohne die Anbindung nicht nutzbar. All diese Funktionen sind an die Nutzung der Cloud gebunden. So l\u00e4sst Adobe auch die Prototyp Device-Live-Preview \u00fcber die XD App nur mit Anmeldung zu. Das finde ich schlichtweg zu restriktiv. Es bleibt abzuwarten, wie Adobe den Weg an dieser Stelle weitergeht und ob es auch erlaubt sein wird, die Dienste zu nutzen ohne die Ablage auf Adobes Cloud Server riskieren zu m\u00fcssen.<\/p>\n

XD f\u00fchlt sich einfach gut an!<\/h3>\n

XD macht Spa\u00df, hat eine gute Performance und liefert schnell tolle Ergebnisse. Das Layouten geht einfach von der Hand. Trotz der teilweise reduzierteren Funktionen hat es eben die Details (z.B. Ausrichten von Objekten mit Pixelangaben, Copy & Paste immer pixelgenau in Place) die einen guten Flow beim Gestalten zu erzeugen. F\u00fcr ausgereifteres Erstellen und Arbeiten mit Grafiken ben\u00f6tigt es allerdings Illustrator. F\u00fcr das Erstellen von Icons w\u00fcrde ich Illustrator immer XD vorziehen. Detailarbeiten mit Pfaden ist dort einfach besser organisiert. Der Import als SVG oder das Einf\u00fcgen aus Illustrator per Zwischenablage (mit Ausnahme von Texten \u2013 diese werden in der Regel zerschossen) ist sehr gut umgesetzt.<\/p>\n

Das direkte \u201eSwitchen in den Prototypmodus\u201c macht die Verbindung vom visuellen Design zur Interaktion schnell zug\u00e4nglich. Die Previews in der Originalgr\u00f6\u00dfe erm\u00f6glichen es, Interaktions- und visuelles Design ebenso schnell und gut zu beurteilen. Um Prototypen zu pr\u00e4sentieren ist XD optimal. Die \u201eLive-Preview\u201c macht das Design lebendig und ist bei der Pr\u00e4sentation vor dem Kunden eine tolle Sache. Durch das Capturing der Prototypen lassen sich sehr schnell Videos mit den richtigen Interaktionen erzeugen.<\/p>\n

Alles in allem ist XD ein gutes Tool f\u00fcr Designer und Interaction Designer. Die Idee der Spezifikationsausgabe ist ein super Kriterium und hat mich begeistert. Aus Sicht des Gestalters sind einige Punkte eingeflossen, die das Tool effektiv machen. Man hat Lust, damit zu arbeiten. Die Tatsache, dass Screens nicht nur statisch gestaltet, sondern direkt im Flow als Prototyp aufgebaut werden k\u00f6nnen, zeichnet XD enorm aus. Nutzt man die Adobe CC im vollem Umfang, ist das Arbeiten mit XD im Zusammenspiel anderen Programmen wie Photoshop und Illustrator eine sch\u00f6ne Sache. Auch dass XD f\u00fcr Windows (auch wenn nur ab Windows 10) und macOS verf\u00fcgbar ist, stellt f\u00fcr den Workflow und Austausch in Firmen einen gro\u00dfen Vorteil dar.<\/p>\n

Es wird wohl noch etwas dauern bis sich das Tool ausreichend etabliert hat. Daf\u00fcr fehlen im Moment einige Features und Funktionen die es zu einem ausgereiften UX Tool ben\u00f6tigt. XD ist in der Beta und macht hin und wieder den Eindruck, dass Adobe sich an einigen Stellen nicht ganz klar dar\u00fcber war, in welcher Tiefe gewisse Funktionalit\u00e4ten integriert werden sollten. Auch klar ist aber, dass das Unternehmen viel daran setzen wird, XD mit stetigen Verbesserungen und Updates zu versorgen. Dass Adobe \u201eUser Requests\u201c mit in die Entwicklung einbezieht, n\u00e4hrt die Hoffnung, dass im Sinne der Nutzer sinnvolle Erg\u00e4nzungen eingebunden werden.<\/p>\n","protected":false},"author":55,"featured_media":0,"template":"","tags":[518,114,517,103,577,504,519],"class_list":["post-8228","blog","type-blog","status-publish","hentry","tag-adobe","tag-interaktionsdesign","tag-ui-design","tag-user-interface-tools-de","tag-ux-de-1","tag-ux-wissen","tag-xd"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/8228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/55"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/8228\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=8228"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=8228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}