Prototyping in Adobe XD: die Alternative zu statischem Design – Erfahrungsbericht

Adobe XD ist die Altarnative zu statischem Design und erlaubt praktisch eine vollkommen neue Art der Interaktionen mit einem Design. Starre, unflexible und statische Entwürfe gehören der Vergangenheit an – wie das? Die Antwort gibt´s in meinem Erfahrungsbericht. Es ist schon bemerkenswert, wie sich die moderne Welt quasi über Nacht ständig neu erfindet und mit welch fremden Begrifflichkeiten, geboren in der Welt der Digitalisierung, sich unser deutschsprachiger Jargon plötzlich konfrontiert fühlt. Besonders fällt dieses Gehabe gerne beim amerikanischen Global-Player Adobe auf. Es erscheint mir manchmal so, als gäbe es einfach für einige dieser beeindruckend amerikanisch klingenden Wörter kein deutsches Pendant. Oder aber es klingt in unserer Landessprache so dämlich, dass man es lieber überhaupt nicht verwenden möchte. Nun, die Welt wächst und mit ihr der Mensch in ihr.

Seit einiger Zeit beschäftige ich mich Adobe XD, arbeite dabei an einem lehrreichen fünfstündigen Video-Training, um Prototyping erlernbar zu machen und mit einigen Fremdbegriffen wollen wir in diesem Blogartikel aufräumen, während wir parallel XD selbst ins Visier nehmen. Hierbei handelt es sich im wahrsten Sinne des Wortes um eine Buchstabenspende sondergleichen: „XD“. Mehr als diese beiden Buchstaben hatte Adobe nicht übrig. Die beiden Lettern „XD“ stehen für „ExperienceDesign“, und hier fragt man sich dann doch zu Recht, wo die Kreativgeister bei der Namensgebung denn den Buchstaben „E“ für „Experience“ gelassen haben? „ED“ klingt vielleicht auch nur halb so imposant wie der weniger oft frequentierte Buchstabe „X“. Allein aus Seltenheitscharakter kann man also erahnen, dass hinter dieser Anwendung wohl etwas Besonderes steckt oder zumindest stecken soll.

Darüber hinaus kennen wir dieses Spiel mit dem „X“ aber auch schon aus den gepriesenen „VFX“ in Kinoblockbustern – sprich, den Visual Effects. Oder das fx-Symbol aus Adobe InDesign und Photoshop, das für die Effekte-Palette steht. Wir sehen, dieses „X“ kann wohl für alles und gar nichts stehen. Mal sind damit Effekte gemeint, mal die Experience. In jedem Fall klingt es toll – was der verantwortlichen Marketing-Abteilung als Legitimationsgrundlage für die Entscheidung der Namengebung genügen dürfte.

alternative-adobe-xd-statisches-layout

Zurück zum Thema und zu unserem Experience Design. Aha. Wieder so ein Wort, das kein Mensch auf Anhieb versteht. Selbst unser allwissender Duden honoriert meine ernst gemeinte Anfrage mit gähnender Leere. Sucht man weiter im Web, stößt man irgendwann auf Wörter, die in diesem Zusammenhang oft Verwendung finden: „User“ und „Usability“, „Interaktionsdesign“, „Internet-of-Things-Anwendungen“ und so weiter …

Viel Schall und Rauch, und apropos: Der Kopf raucht einem beim ersten Besuch der Adobe-XD-Website mit seinen großzügig gestreuten Fachbegriffen auch. Gerade dann, wenn man zum ersten Mal einsteigt, wirkt vieles erstmal fremd. Nun, lasst uns für Aufklärung sorgen: Im Wesentlichen handelt es sich beim Experience Design um das ganzheitliche Erlebnis und die Nutzererfahrung beim Kontakt mit den zahlreichen Interaktionspunkten einer Software-Anwendung, einer mobilen App, eines Services, einer Website usw., und darum, exakt diese zu etwas Besonderem zu machen. Das bedeutet, von der Registrierung bis hin zur Nutzung wird jeder Punkt, dessen Weg der Anwender früher oder später kreuzen wird, mit viel Hingabe und Liebe zum Detail durchdacht, auf Plausibilität überprüft und auch ausgestaltet – auf dass das Ergebnis ein Erlebnis (= Experience) ist, das der Anwender so schnell nicht vergessen wird.

Bei Experience Design handelt es sich um das ganzheitliche Erlebnis und die Nutzererfahrung eines Users beim Kontakt mit den zahlreichen Interaktionspunkten einer Software-Anwendung, einer mobilen App, eines Services, einer Website usw.

Adobe XD nimmt sich exakt dieser Aufgabe an und liefert Designern das passende Tool, um sich dem großen Thema der User Experience zielführend und zukunftssicher zu stellen. Und das macht es gar nicht schlecht! Ich hatte es schon erwähnt, auch wenn der Besuch der Adobe-Website in diesem Punkt einem Laien wirklich in keinster Weise behilflich ist. Bei wem tanzen schlagartig die Synapsen im Kopf auf und ab, wenn er Phrasen und Fachbegriffe hört wie: „interaktives Prototyping“, „die Umwandlung von Wireframes in High- Fidelity-Designs“, „sprachgesteuerte Interaktionen mittels Voice UI“, „Responsive Resize“ und „Auto Animate“ … Und das war erst der Anfang.

Adobe XD: Eine echte Alternative zu statischen Layout-Vorgaben

Deswegen habe ich vor einiger Zeit damit begonnen, mich mit der App XD genauer zu beschäftigen, während ich dem bewährten Learning-by-Doing-Prinzip folgte. Öffnet man die Applikation, will sie erst mal wissen, was du vorhast. Und diese Angabe erfolgt in konkreten Maßangaben von Höhe und Breite. So weit, so gut. Dabei entschied ich mich für ein Szenario, das bei uns in der Agentur in der Vergangenheit oft zu Fehlern führte: Nämlich der Bearbeitungsprozess zwischen der Abteilung Design und der Abteilung Entwicklung. Lasst mich hierbei ein wenig ausholen: Früher haben wir Webseiten-Designs und Layouts oft statisch in Photoshop kreiert, in unterschiedlichen Größen für unterschiedliche Medien, zum Beispiel Desktop, Tablet und Mobiltelefon. Nun stellt sich die Frage, wie stellt man einen visuellen Effekt, der beim Hovern über ein Objekt stattfindet, präzise dar, damit der Entwickler, der später das Coding der Seite übernimmt, zweifelsfrei versteht, was der Designer sich ursprünglich dabei gedacht hat?

adobe-xd-prototyp-erstellen-splashscreen

Eben – genau hier lag das Problem. So wurden aus Objekten, die eigentlich einen Slideshow-Charakter haben sollten, plötzlich einfache Buttons usw. Genau dieses Problem behebt Adobe XD und ist damit eine überzeugende Alternative! XD lässt die pure Statik hinter sich und trumpft mit ordentlich, mit wahrnehmbarer Dynamik auf. Interaktionen sind implementierbar und das sogenannte Prototyping ermöglicht es uns, einen Dummy zu erstellen, der auch „durchgeklickt“ werden kann. Dadurch lässt sich die Anwendung in all ihren Facetten noch während der Entwurfsphase konkret darstellen und erfassbar machen. Gut für den Designer. Gut für den Auftraggeber. Und auch Gut für den Entwickler. Wählt man einen Button aus, kann man angeben, auf welche Zeichenfläche (so heißen die Arbeitsbereiche in Adobe XD) verlinkt werden soll. Soll eine Wischgeste zum Einsatz kommen, lässt sich auch dies einfach einbauen.

Ein interaktiver Prototyp in XD für mobile Devices

Essen für Studenten: Der angedachte Entwurf befasst sich mit dem fiktiven Thema, eine informative Website zu kreieren, die für eine Mensa an der Universität gedacht ist. Ich lebe selbst in der Universitätsstadt Augsburg (Bayern), weswegen sich dieses Thema überaus gut eignet – Inspiration gab es hierbei auf auch auf Salomons Behance-Account. Darüber hinaus galt es für mich, den Entwurf darzustellen, wie er auf Handys ausgegeben werden soll, da die jüngere Generation ohnehin den Großteil ihrer Online-Zeiten mit dem Smartphone verbucht. Ziel war also eine responsive Website, die täglich ein neues Menü vorstellt und auf der Anwender überdies einen Ausblick auf die kommenden fünf Werktage werfen können, um zu prüfen, ob sich der Weg in die Mensa lohnt, und Details zu den offerierten Gerichten zu prüfen, wie bspw. die Nährwerttabelle, Zutaten, vegetarische Gerichte usw. So viel zum Szenario an sich.

Zu Beginn wählte ich in Adobe XD das Ausgabeformat meines iPhone X aus und schon hatte ich eine leere Fläche. Hat man ein Smartphone vor sich liegen, bietet dies natürlich enorme Vorteile, doch dazu später mehr. Nun beginnt man mit der Gestaltung, und im Gegensatz zu den vielen anderen Adobe-Anwendungen fühlt man sich erschreckend leicht auf der minimalistischen Benutzeroberfläche zurecht. Viele Icons und auch das Funktionsprinzip kennt man aus Photoshop, InDesign und Illustrator.

Jedoch sei angemerkt, dass Adobe XD definitiv noch in der Entwicklungsphase steckt und erst mit jedem Update besser, vielfältiger und umfangreicher wird, was das Feintuning von Objekten betrifft. Zumal es Adobe XD erst seit kurzer Zeit gibt. Ein simples Beispiel, das den gestalterisch eingeschränkten Umfang gut zeigt, ist die Option des Schlagschattens. Die meisten kennen den Dialog aus Photoshop, in der der Schlagschatten definiert wird, richtig? Hier haben wir Mischmodi, Winkel, Deckkraft, Pixel, Größe usw. So kann man sich mit dem Schlagschatten wahrlich Stunden beschäftigen, ohne dass sich die Parameter wiederholen. In Adobe XD gibt es lediglich drei Variablen: X-Achse, Y-Achse und Deckkraft. Das wars. Ich denke jedoch, dass dies gar nicht in der Intensität wie bei Photoshop notwendig ist. Adobe XD ist nämlich eher das Tool, das kooperierend mit anderen Anwendungen zusammenarbeitet – und zwar über die Creative Cloud. So werden viele Elemente eben in der Anwendung kreiert, die sich am besten dafür eignet, und dann erst später zum Prototyp übertragen. Aufwendige Bildkompositionen bearbeitet man logischerweise in Photoshop, während die Icons der Seite in Illustrator erstellt werden. Erst später, wenn alles zusammengefügt werden soll, transferiert man die Objekte über die CC Libraries des Adobe Cloud- Dienstes direkt und nahtlos von der Erstellungs-Software zu Adobe XD.

Leicht dank langer Erfahrung mit Adobe: Gestalten im Design-Modus

Beginnt man nun im Design-Modus von Adobe XD, die leeren Zeichenflächen Stück für Stück zu füllen, stellt man fest, wie intelligent das System tatsächlich arbeitet. Bildergalerien werden automatisch skaliert und dank Wiederholungsraster beliebig erweitert, Buttons richten sich prompt an ihrer Umgebung aus und Icons aus den Kopfzeilen ändern sich übergreifend auf allen Seiten – auch dass Reponsive-Resize-Konzept geht in voller Blüte auf und macht das Gestalten über mehrere Artboards und Mediengrößen hinweg sehr einfach und kurzweilig. Am ehesten kommt einem die Art der Gestaltung aus Adobe InDesign bekannt vor: Elemente für Elemente werden platziert, in unterschiedlichen Hierarchien sortiert, mit Farben versetzt und Texte mit Zeicheformaten in Form gebracht. Gerade die InDesigner unter euch werden sich am Gestaltungsprinzip erfreuen und auf Anhieb erkennen, dass Stein für Stein, Pixel für Pixel und Vektor für Vektor aus leeren Zeichenflächen wunderbare Designs entstehen.

Während meiner Erarbeitung der Mensa-Website stellte ich jedoch fest, wie wichtig es ist, sich vorher fundierte Gedanken zu machen, was man bauen möchte, wie es aussehen könnte und vor allem, wie der Weg des Anwenders später sein wird. Sonst klickt man sich wildvon Bedienfeld zu Bedienfeld, legt Zeichenflächen anund merkt, dass man nur im Schneckentempo voran- kommt, weil die Logik dahinter noch kein ausgereiftes Stadium erzielt hat. Mein Tipp: Zettel und Stift nehmen und sich in Ruhe aufmalen, wie das Konzept als grobe Skizze später aussehen könnte, welche Seiten undNavigationspunkte überhaupt existieren sollen undwas der Kunde alles bei der Interaktion mit dem Prototyp entdecken soll.

artboards-adobe-xd-experience-design

Schnelles Wireframing und Experience Design dank fertiger UI-Kits

Gerade bei der Entwicklung für Smartphones kommt man unweigerlich an den UI-Elementen des Operating Systems des Handys nicht vorbei. Gestaltet man zum Beispiel ein Suchfeld, dann sollte beim Tippen auf das Suchfeld logischerweise auch die Tastatur zum Vorschein kommen. Will man von einer Seite auf die zurückliegende, gibt es häufig vordefinierte Icons, die vom Device-Hersteller stets in gleicher Form ausgegeben werden. Hierbei hilft die Ressourcen-Bibliothek von Adobe XD und die der Hersteller. Auf der Seite lassen sich diverse User-Interface-Kits herunterladen, wie beispielsweise das Kit für Apple iOS Design, Google Material Design oder Microsoft UWP-Design. Da bei mir jedes Bit und Byte über Apple-Geräte läuft und ich ein iPhone besitze, habe ich mir deshalb das User-Interface-Kit von Apple kostenlos heruntergeladen. Möchte ich jetzt, dass bei einem Klick auf das Suchfeld ein Textfeld aufspringt, kann ich mich einfach an dem fertigen Design einer iOS-Tastatur bedienen. Wirklich überaus praktisch! Ebenso bietet Adobe als kostenloses Download-Paket einen vielfältigen Fundus fertiger Wireframes. Hoppla?! Wire … was? Richtig: Wireframes. Dieses zusammengesetzte Wort aus „Wire“ (= Kabel) und „Frames“ (= Gerüst) beschreibt in diesem Zusammenhang ausgestaltete Layouts, die quasi als Dummy verwendet und nur noch mit Leben befüllt werden müssen, bevor man die einzelnen Seiten mit einem flexiblen Kabelstrang verbindet – ähnlich der Textverkettung in InDesign.

adobe-xd-ui-kits-download-prototyping

adobe-xd-ui-kits-wireflow-artboard-sample

Artboards verbinden: Interaktives Prototyping in XD mit Animation und Transition

Nun wird es spannend, denn jetzt, wo wir das Designzum Großteil ausgearbeitet haben, können wir beginnen, einzelne Schritte der Interaktion zu bearbeiten. Wobei man natürlich sagen muss, dass dieser Arbeitsschritt nicht erst am Ende des Design-Prozesses erfolgt, sondern in einem realen Projekt vielmehr zwischen Design- und Prototyp-Modus ständig hin- und her- gewechselt wird. Andauernd springt man von einem Bereich zum anderen und wieder zurück. Es ist fast so, als könne man es nicht erwarten! Kaum hat man eine neue Zeichenfläche vervollständigt, will man schnellstmöglich auch die Interaktion dahinter einbauen! Das macht schlichtweg Spaß.

Wechselt man vom Design- in den Prototyp-Modus, ändern sich natürlich auch die Bedienfelder, und nun ist es ein Leichtes, einem Element eine Aktion zuzuordnen. Wie funktioniert das im Detail? So leicht, wie man es sich nur vorstellen kann! Man klickt zum Beispiel auf eine Box, die man als Button vorgesehen hat, und wählt anschließend einfach mit der Maus die Zielseite aus. Das wars. So einfach? Jap, absolut! Ein kleines Kontextmenü fragt nun, wie die Animation und Transition denn aussehen soll, ob der Inhalt verblassen und dann überblenden soll oder ob es sich hierbei um einen „Swipe“ handelt – sprich, dass der Inhalt geschoben wird. In meinem Video-Training zeige ich, wie ihr ansprechende Animationen selbst nachbauen könnt.

Vorschau und Freigabe des Designs für Projektbeteiligte, Reviewer und auch Entwickler

Der große Augenblick ist gekommen: Wer jetzt testen und überprüfen möchte, wie die Arbeit der letzten Stunden live aussehen kann, findet rechts oben im Programm einen kleinen Play-Button. Dieser führt einen ohne Umwege in das „Theater“, sodass man sein eigenes Erlebnis prompt am Desktop in der passenden (und im Ausgangsformat definierten) Größe betrachten und durchspielen kann.

Anfangs hatte ich erwähnt, dass ich zur Projekt-Unterstützung grundlegend auch mein Smartphone nutze – jetzt sollt ihr erfahren, warum. Habt ihr euch nämlich die Adobe XD-App aufs Handy geladen, euch dort mit der Adobe ID angemeldet und das Projekt in euren Creative Cloud-Files gespeichert, dann beginnt nun die Magie: Öffnet die App und schon erwartet euch euer Projekt, das ihr eben noch auf dem Computer betrachtet und bearbeitet habt. Anschließend könnt ihr mit nur einem Touch auf das Display das ganze Szenario live durchspielen – direkt auf dem Handy, für das unser Projekt in diesem Fall auch vorgesehen war. So wirkt eine Präsentation in Form eines High-Fidelity-Prototyps vor dem Kunden beeindruckend plastischer und wahrnehmbarer, als wenn man ihm den Haufen Wireframes zeigt. :)

Denke ich an die Vielfalt der Möglichkeiten, die mit dieser kraftvollen Software bedient werden können, bin ich wirklich baff! Es vereinfacht die Zusammenarbeit enorm und statisches Design wird mit Interaktion zum Leben erweckt. Eine Alternative, die von A bis Z oder zumindest von X bis D durchdacht ist. In meinem nachfolgenden Blogbeitrag könnt ihr mehr über die Handhabung zu XD erfahren. Gerne empfehle ich auch mein neu erschienenes Video-Training zu Adobe XD, in dem ich die besten Techniken und Tricks zum Nachmachen aufzeige. Euer Stefan Riedl

Stefan Riedl

Stefan Riedl Grafik-Designer aus Augsburg

Designliebhaber

Stefan Riedl