Du willst XD lernen? Sehr gut! Kürzlich berichtete ich bereits über meine Erfahrungen und die grundlegende Funktionsweise zu Adobe XD, hier möchte ich heute mit dem Adobe XD-Tutorial anknüpfen: Mit der neuen Software stößt Adobe die Pforten zur interaktiven Prototyp-Welt auf! Genauer gesagt, lassen sich mit den Werkzeugen von Adobe Experience Design (kurz XD) Designs für Applikationen und Webseiten ganz ohne Programmierung designen. Damit ist der Entwickler aus San José zwar nicht der Erste am Markt, aber immerhin auf einem zukunftsorientierten Weg. Eine sehr prominente Software-Lösung, die professionelles Experience Design bereits ermöglicht und vormacht, ist Sketch – in diesem Blogbeitrag möchte ich euch jedoch erklären, wozu der Schwager in Pink der auf das Doppelkürzel XD hört, zu gebrauchen ist.
Adobe XD macht Designs sichtbar. Und auch klickbar.
Ich habe mich in den letzten Monaten ausgiebig mit XD beschäftigt und hierzu auch eine umfassende Video-Serie als Adobe XD-Tutorial aufgezeichnet, dazu später mehr. Wollen wir zu Beginn klären, warum die App tatsächlich das Leben eines Gestalters vereinfacht: Adobe XD bietet Designern drei sehr wichtige Features, die allesamt gleichermaßen von Bedeutung sind: Designen, Prototyping und Freigabe bzw. Zusammenarbeit mit anderen Parteien – hierzu gehören zum Beispiel Auftraggeber, Kollegen, Entwickler etc. Bereits in wenigen Minuten ist die Nutzeroberfläche von XD geläufig und lässt mithilfe der Werkzeuge für Typografie, Rechtecke, Linien, Polygone und Farbpaletten alle nur erdenkbaren Design-Kompositionen erstellen. Im Ergebnis ergibt der Design-Prozess das User-Interface, was gerne in seiner Kurzform als UI betitelt wird. Das UI ist die Schnittstelle für die Interaktion zwischen Mensch und Maschine. Wann immer der Mensch einen Computer bedient, braucht er eine Möglichkeit der Maschine zu erklären, was er von ihr will – das User Interface ist also die Oberfläche, zum Beispiel wenn ihr dem Geldautomat sagt, wie viel Kohle er ausspucken soll, oder ihr eurem Handy mitteilt, es soll das Menü öffnen.
DAS USER INTERFACE IST DIE SCHNITTSTELLE FÜR DIE INTERAKTION ZWISCHEN MENSCH UND MASCHINE.
Mit der Prototyping-Funktion lassen sich darüberhinaus auch die einzelnen Zeichenflächen, die auch als Artboards bezeichnet werden und als Seiten zu verstehen sind, mittels Buttons, Links und Objekte miteinander verknüpfen. Dieser Vorgang wird als sogenanntes Wireframingbezeichnet. Somit verlässt man die einstige Statik eines Layouts und nähert sich klickbaren Designs, die euren Ideen folgen und diese realistisch als Wireflow veranschaulichen. Schnell kommen beim Wireframing Hunderte Kabelstränge und Verbindungen zustande, die mit unterschiedlichen Transitions (=Übergänge) dem Auge des Betrachter schmeicheln. Jetzt nähern wir uns auch dem zweiten wichtigen Part: UX – der User Experience.
User Experience (UX): Die Erfahrung des Nutzers, wenn er euren Dienst verwendet
UX bezeichnet die ganz individuelle Erfahrung mit einem Dienst, Service, Shop, Applikation usw. Dieser Bereich ist sehr subjektiv gehalten, denn jeder Mensch interpretiert seine Erfahrung etwas anders. Dennoch beschreibt der Prozess alle Verhaltensweisen, einhergehende Gefühle und auch intuitive Schritte, die mit eurer Idee in Verbindung stehen. Macht es Spaß YouTube zu nutzen? Kommst du ans Ziel, wenn du ein Online-Lexikon durchstöberst? Fühlst du dich wohl, wenn du Sprachen mit Babbel lernst?
USER EXPERIENCE BEZEICHNET DIE GANZ INDIVIDUELLE ERFAHRUNG UND SUBJEKTIVE WAHRNEHMUNG MIT EINEM DIENST, SERVICE, EINER APP USW.
Diese und ähnliche Fragen kann jeder nur für sich selbst ermitteln. Doch wie immer gibt es bei all den Individuen auch große Schnittmengen, die als zielgruppenspezifische Personas definiert werden. Und eben dieser Part – einer logischen, einfachen und mehrwerthaltigen Nutzerführung – ist gleichermaßen Teil der Arbeit in Adobe XD, wie die Gestaltung der eigentlichen Oberfläche eines Designs.
Das deutsche Adobe XD Tutorial: Lerne die Erstellung interaktiver Prototypen
Da XD aktuell noch ein sehr junges Programm ist (und sich fortlaufend verändert), waren die meisten bisherigen Lerninhalte oftmals in englischer Sprache zu finden – nun gibt es das große XD-Tutorial auch in deutscher Sprache zum Download oder Streaming. Dabei lernst du, wie du deine Idee logisch aufgebaut umsetzt und erfährst, wie du Artboards für Desktops, iPhones, Apple Watch oder Tablets anlegst, welche Möglichkeiten du zum Beispiel beim Umgang mit Farben hast und diese aus fremden Quellen importierst und wie du fertige Design-Presets nutzen kannst, um mit diesen UI-Kits schneller und effizienter beim analytischen Part des High-Level-Designs vorzugehen. Sieh dir hier das 100-Sekunden-Intro hier an:
In 5 zielführenden Stunden lernst du mit dem Video-Tutorial den Funktionsumfang von Adobe XD kennen und vertiefst dein neu gewonnenes Know-how in einigen Praxisprojekten. Ich gebe ganz offen zu: Es macht gewaltig Spaß Adobe XD zu lernen, damit zu arbeiten und sich dem kreativen Flow hinzugeben, bis man es kaum erwarten kann, den Prototyp live in Action zu sehen – eben dies muss darüberhinaus nicht am Computer allein erfolgen. Mit der XD-App, die sich aus dem Google PlayStore und auch dem App-Store von Apple beziehen lässt, kann das Geschehen live auf dem eigenen Telefon überprüft werden. So kann gecheckt werden, ob das Design auf dem Smartphone gleichermaßen gut wirkt, wie es ursprünglich angedacht war und der Prototyp kann über die Creative Cloud auch an andere Kollegen und Mitwirkende freigegeben werden – zur interaktiven Nutzung und auch Kommentierung von Änderungen, die vielleicht noch notwendig sind. Atemberaubend, wie gut das funktioniert!
Das Video-Tutorial wurde mit Version 18 aufgenommen und als kostenloses Update mit den neuen Funktionen von Version 19 zusätzlich angereichert (Da Symbole mittlerweile Komponenten heißen). Ich persönlich wäre froh gewesen, wenn ich mir schon früher gesagt hätte, „Ich will Adobe XD lernen!“, mich an die Software rangewagt und auch einen deutschsprachigen Tour-Guide gehabt hätte, da die Software ja obendrein erstmal kostenlos zur Verfügung steht – wenn auch mit einigen Einschränken, die nur durch ein Creative Cloud-Abo aufgehoben werden.
Das beste Argument für XD: Integration in die Creative Cloud
Das Beste: XD ist aus dem Haus Adobe und auch wenn dem einen oder anderen dies kein fröhliches Schmunzeln entlocken möchte, so führen sie doch einen gewaltigen Vorteil ins Feld: Durch die Integration in die Creative Cloud arbeitet XD auch mit den großen Brüdern Illustrator, Photoshop, InDesign & Co. im engen Schulterschluss zusammen. Assets, die in einem dieser speziellen Programme erstellt wurden, können in Nullkommanix zu XD übertragen werden, denn jeder große Bruder hat schließlich immer noch seine eigene Königsdisziplin, wodurch lediglich das Ergebnis zu XD geführt und im Prototyp eingesetzt wird.
Beispiel: Ein Foto retuschiere ich in Photoshop und übertrage es zu XD (dank Responsive Resize skaliert es auf jeder Zeichenfläche perfekt mit); einen sauberen und leserlichen Satz definiere ich in InDesign und importiere ihn in meinen nächsten Prototyp; das Logo für den Markenauftritt kreiere ich in Illustrator und mit einem Klick füge ich das fertige Asset in die Kopfzeile meines Webseiten-Layouts in XD ein. So einfach? Ja. So einfach.
Der Adobe Experience Design-Workflow in 5 Schritten
Die Arbeit lässt sich also in fünf Steps zusammenfassen: Als erstes heißt es Nachdenken, was habe ich überhaupt im konkreten vor und wie könnte sich diese Idee in groben Zügen zusammensetzen? Als zweites folgt der Design-Prozess, der in XD mit ein paar Tipps und Tricks sehr einfach von der Hand geht. Nun beginnt das Verknüpfen der einzelnen Stationen zueinander. Was passiert, wenn der User auf diesen oder jenen Button drückt? Als nächstes wird getestet: Live auf dem iPhone, dem Tablet oder am Computer. Und zu guter Letzt wird das Projekt, sprich der Prototyp für Reviewer freigegeben und für Entwickler mit allen Design-Spezifikationen exportiert.
Für mich vergeht heute kein Tag mehr, an dem ich Adobe XD nicht geöffnet habe – mein neuer Dauerbrenner quasi. Du willst wissen, wie die eben genannten Schritte im Detail umgesetzt werden? Dann lerne Adobe XD mit meinem brandneuen Tutorial, um Interface und Experience Design perfekt zu visualisieren! Rock on: Klicke hier für mehr Informationen zum Adobe XD-Video-Tutorial.
Herzliche Grüße, euer Stefan Riedl