Web Design Prototyping im Adobe-Gewand

Machen wir eine kleine Zeitreise ein paar Jährchen zurück: Als Web Designs komplett nur in Photoshop entstanden, war der Schritt zur Präsentation meistens das Zeitaufwändigste. Nur Bilder eines Web Designs zu zeigen ist schließlich ziemlich dumpf: keine Bewegung, keine Interaktion, nur schöne Bilder. Wenn man das erkannte, bastelte man mühsam aus von Photoshop generierten Einzelbildern der Webseiten über ein Präsentationstool, z.B. Powerpoint, einen Klick-Dummy zusammen und konnte so wenigstens beim Präsentieren den Anschein einer Interaktion beziehungsweise einer Abfolge von Ereignissen auf der Website simulieren. Das Problem war nur: Das hat ewig gedauert und viel Spaß, wenn sich irgendein Detail nochmal ändert. Dann ging das Ganze nämlich von vorne los.

So ziemlich alle Prototyping-Tools entstanden aus dem Verlangen heraus, interaktive Medien vorab zu testen, zu präsentieren und bei der Entwicklung bereits verbessern zu können. Eines dieser Prototyping-Tools ist Adobe XD, was auch meine erste Wahl ist.

Schauen wir uns den aktuellen Stand von Adobe XD mal genauer an. Was kann es? Was bringt es? Was kann es noch nicht?

Visual Web Design in Adobe XD

Bevor wir zum Bauen des eigentlichen Prototyps kommen, müssen wir zunächst mal ein Design aufbauen. Es werden alle gängigen Möglichkeiten zur Gestaltung von Elementen gegeben, die wir – so oder so ähnlich – bereits aus anderen Grafikprogrammen wie Photoshop kennen. Der Clue: XD bietet diese Features quasi auf Speed an.

Wiederholungsraster

Massenverarbeitung ist hier das Zauberwort: Wir können Elemente mit dem Wiederholungsraster beliebig oft wiederholen lassen, die Abstände zwischen den Elementen beliebig verändern und einzelne Bilder innerhalb der Elemente verändern. Falls sich später nochmal etwas an diesem Element ändern sollte, können wir einfach das erste Element der Reihe ändern, und alle anderen Kopien ändern sich dementsprechend auch.

Komponenten

Das Wiederholungsraster war das erste Feature, das so funktionierte. Später kamen dann noch die sogenannten Komponenten dazu, die das Prinzip auf alle Elemente ausweiteten. Wir können alle Elemente gruppieren und zu Komponenten ernennen. Von diesen Komponenten können beliebig viele Instanzen kopiert werden, die aber immer die Regeln der Hauptkomponente mit sich tragen. Auch hier gilt: Ändern wir die Hauptkomponente, ändern sich alle Instanzen ebenfalls.

Design Systeme verändern alle Instanzen eines Elements
Farbe ändern ohne jede Instanz einzeln anzufassen? Kein Problem.

Zustände

Relativ neu hingegen sind die Zustände, die wir Elementen geben können. Die können zum Beispiel für Buttons eingesetzt werden, indem wir Hover-Zustände, Clicked-Zustände und so weiter definieren können. So können auch Elemente, die beispielsweise an bestimmten Stellen einer Website andere Farben haben, diese Farben als Zustand bekommen. Der Hauptreiz an den Zuständen ist, dass wir nur eine Komponente brauchen, die wir in allen möglichen Richtungen und Einsatzmöglichkeiten gestalten können, ohne unsere Artboards mit all diesen Alternativen vollzumüllen. Sind die Zustände einmal ausgestaltet, müssen wir lediglich einen Klick machen, um einen Button auf eine andere Farbe etc. umzuswitchen. Allerdings müssen wir beim Beispiel der Buttons die Hover-Zustände dann händisch abändern, was ein kleiner Nachteil ist.

Hover-Zustände in Adobe XD
Idle- und Hover-Zustand einer News-Card.

Farben und Zeichenformate

Das Prinzip der Zustände gibt es dann noch einmal im zentralen Fenster „Elemente“. Hier können wir unsere Hauptfarben sowie die Zeichenformate, also die definierten Schriften H1 und so weiter, abspeichern. Wenn wir später ein neues Element auf unserem Artboard in der Hauptfarbe der Webseite sowie mit der richtigen Schrift der H1 gestalten wollen, müssen wir lediglich die gespeicherten Farben und Zeichenformate anklicken und boom, fertig. Auch hier gilt: Wenn wir die Farben und Zeichenformate später ändern, ändern sich auch alle Elemente, die damit verknüpft sind. Genial und effektiv.

Ebenfalls im Fenster „Elemente“ sehen wir übrigens auch unsere Komponenten, die wir als Instanzen per Drag&Drop auf Artboards ziehen können.

Elemente im Menü
Farben und Schriftformate können wir zentral speichern.

Artboard-Presets für den schnellen Start

XD stellt eine Liste aller wichtigen Screengrößen zur Verfügung, die man mit einem einzelnen Klick als Artboards einfügen kann. Von iPhone 5 bis Android Tablets und Full-HD-Screens ist alles dabei. Neueste Ergänzungen sind Social-Media-Post-Größen, die ebenfalls sehr praktisch sein können.

Artboards und Screengrößen
Mit dem Artboard-Werkzeug finden wir ganz einfach die Größe vom gewünschten Gerät.

Responsive Web Design und Abhängigkeiten

XD macht uns Web Design auf unterschiedlichsten Screengrößen ziemlich leicht. Wir können Artboards von Desktop und Mobil direkt nebeneinander sehen und die Elemente somit sehr übersichtlich und performant an die jeweilige Screengröße anpassen.

Responsive Resize

Zudem bietet das Prototyping-Tool die Möglichkeit, responsives Verhalten von Elementen und Gruppen zu bestimmen. Das heißt, dass wir Elemente kleiner und größer schieben können und diese sich dann automatisch, aufgrund von uns definierter Regeln, anpassen. Das kann allerdings etwas tricky sein, je nachdem wie kompliziert einzelne Elemente sind.

Abstände

Jede Gruppe von Elementen kann diese Funktion individuell verwenden oder nicht. Sobald Abstände aktiviert sind, bekommt beispielsweise ein Kasten innere Abstände (Paddings) und platziert andere Elemente der Gruppe, wie zum Beispiel Schrift, immer mit diesem Abstand zum Rand.

Layout-Raster definieren und beibehalten

Früher verwendete ich oftmals Online-Grid-Kalkulatoren, um die optimalen Spaltenbreiten und Rastersysteme aufzubauen. Adobe XD bietet auch diese Funktion an und erleichtert die Definition der Raster enorm dadurch. Beim Klick auf ein Artboard kann rechts im Menü die Funktion „Raster“ aktiviert und auf „Layout“ umgestellt werden. Hier können wir Außenabstände, Spaltigkeit und Größen der Abstände einstellen. So können wir uns stetig beim Web Design am Raster orientieren, um maximale Konsistenz beibehalten zu können.

Layout Raster aufbauen
Das Raster-Overlay kann beliebig angepasst werden.

Ebenen dürfen natürlich nicht fehlen

Alle Elemente werden automatisch als Ebenen (wie aus Photoshop bekannt) angelegt und können beliebig verschachtelt werden. Das Handling ist etwas komplizierter, als man es aus anderen Programmen kennt. Das hängt mit den vielen Funktionen zusammen, für die eine richtige Anordnung der Ebenen wichtig ist. Ein Beispiel hierfür sind die Gruppen von Elementen, die wir als Stacks bearbeiten wollen.

Stacks: Eine Brise Content Management

Seit Juni 2020 gibt es eine Funktion, die an rudimentäres Content Managment erinnert. Gruppierte Elemente oder Komponenten, wie zum Beispiel News-Cards, können jetzt in ihrer Reihenfolge in einer Liste getauscht werden. Dazu gruppiere ich alle News-Cards noch einmal und deklariere diese Gruppe als sogenannten Stack. Schiebe ich dann einzelne Cards hin und her, schnappen diese an die richtige Stelle wieder hinein. Dadurch entstehen tief verschachtelte Ebenengruppen. Hier gilt es, nicht die Übersicht zu verlieren.

Inhaltsboxen lassen sich verschieben
Die Reihenfolge der Elemente soll sich ändern? Dank Stacks kein Problem mehr.

Prototyping: Verlinkungen aufbauen

Bis hierhin kam noch nicht viel über Prototyping zur Sprache. Prototypen sind in XD relativ losgelöst vom Visual Design, haben aber Interaktionen mit diesem. Wir haben die Möglichkeit, alles Mögliche miteinander zu verlinken. Einzelne Elemente, wie Buttons, können auf andere Artboards (Unterseiten) verlinken. Auch ganze Artboards oder Bilder können das tun. Auch Verlinkungen zu bestimmten Sektionen mitten auf einem Artboard (einer Seite) sind mittlerweile möglich.

Überblendungen können ebenfalls eingestellt werden. Wie ist der Übergang, wenn ich auf diesen Button klicke? Was passiert genau? Wir könnten beispielsweise die verlinkte Seite von rechts hineinfahren lassen oder einfach überblenden.

Verlinkungen im Prototyp zwischen den verschiedenen Artboards
Link-Handler anpacken und zum Ziel ziehen.

Das mächtige Auto-Animate

Komponenten und Zustände erinnern teilweise an die grauenhaften Zeiten von Adobe Flash, Komponenten haben sich da aber noch Symbole geschimpft. Vergessen wir das ganz schnell wieder, denn Symbole brachten nötige Keyframe-Animationen mit sich, die wir in XD komplett vergessen können.

Auto-Animate errechnet die Überblendungen von Animationen bei Ereignissen in XD: Das können wir zum Beispiel bei Zuständen von Buttons verwenden, wodurch der normale Zustand des Buttons ganz smooth zum Hover-Zustand übergeblendet wird. Aber auch beim Wechsel zwischen den Artboards beim Klicken eines Elements ermittelt Auto-Animate die Unterschiede und animiert die Elemente dementsprechend. Das ist vor allem beim Simulieren von Overlay-Navigationen sehr praktisch und sieht gut aus.

Möglichkeiten zur Steuerung, auch per Voice UI

Wir haben mehrere Möglichkeiten, Ereignisse auszulösen: Antippen, Ziehen, Tastatur & Gamepad und Sprachsteuerung. Antippen wird meist bei Verlinkungen eingesetzt. Ziehen ist im mobilen Bereich interessant. Tastatur & Gamepad ist für Gaming-Oberflächen oder ähnliches gedacht. Die Sprachsteuerung ist etwas, das im Moment vor allem für App Design in XD interessant ist, vielleicht in Zukunft auch im Web Design. Weitergehend können auch zeitgesteuerte Animationen verwendet werden.

Scrollbereiche & Overlays

Seit Juli 2020 gibt es endlich die Möglichkeit, das Scrollen (horizontal, vertikal oder beides) in Scrollbereichen darzustellen. Das war bislang, vor allem in mobilen Screens nicht sehr schön simulierbar. Jetzt können wir scrollbare Google Maps und so weiter einbauen, um das haptische Erlebnis des Prototyps optimal zu steigern.

Overlays sind eine Möglichkeit, Pop-Ups oder Overlay-Menüs einbauen zu können. Diese Funktion kann nur auf ganze Artboards angewandt werden, die dann beim Klick über das derzeitige Artboard gelegt werden. Zum Beispiel wird beim Klick auf das Hamburger-Menü ein Fullscreen-Overlay-Menü eingeblendet und verdeckt den Content, der zuvor sichtbar war.

rotes Overlay Menü legt sich in Adobe XD über die normale Website
Wenn das Menü angeklickt wird, legt sich das rote Artboard über das andere.

Live-Testing per App

Wir haben zwei Möglichkeiten, unser Web Design als Prototyp zu testen. Über die Vorschau in XD selbst öffnet sich ein Fenster, das alle Funktionalitäten, die wir definiert haben, simuliert. Hover-Effekte, Verlinkungen und so weiter werden hier auch dargestellt und ausgegeben.

Die andere Möglichkeit ist die Vorschau auf dem Smartphone oder Tablet. Per App oder per USB-Verbindung können wir den Prototyp direkt am jeweiligen Endgerät abspielen und testen. Das ist sehr praktisch, da das haptische Gefühl hierbei genau so rüberkommt, wie es im Endeffekt in der fertigen Version sein wird. Damit können wir hier merkwürdige oder falsche Abfolgen und Feedbacks ausfindig machen und verbessern.

Kollaboration & Präsentation

Die Zusammenarbeit im Team ist in XD ebenfalls möglich. Seit kurzem kann man zudem auch gleichzeitig an einem Dokument arbeiten. Vorausgesetzt man nutzt die Adobe Cloud und legt dort auch die Dokumente ab.

Zur Kollaboration mit Entwicklern, die die Website später programmieren sollen, ist es zudem möglich, einen Developer-Link zu generieren. Hierbei werden alle Artboards zum einen als Prototyp geliefert und können im Browser auch direkt angeschaut werden. Zum anderen werden alle CSS-Definitionen der Elemente angezeigt, teilweise sogar mit dem entsprechenden CSS-Code. Auch eine Kommentarfunktion ist hierbei vorhanden.

Dieser Link kann auch als Präsentations-Link definiert sein. Das verwende ich meist zur Präsentation beim Kunden. Dabei wird nur der Prototyp als funktionierende Vorschau der Website dargestellt und bietet zudem auch Indikatoren, wo der Nutzer im Prototyp klicken kann, um weiter zu navigieren.

Plugins, Plugins, Plugins

Wem die Funktionen von Adobe XD nicht ausreichen, kann sich in der Bibliothek an etlichen Plugins und Erweiterungen austoben. Viele Plugins ergänzen Möglichkeiten zur Automatisierung oder das Angleichen von Elementen über das ganze Projekt hinweg. Andere bieten einfach automatische Bilddumps an, die Bildplatzhalter mit Inhalt füllen. Auch Mock-Up-Generatoren oder Google Maps-Generatoren gibt es. Anbindungen anderer Programme und Apps sprengen für XD quasi alle Grenzen. Es gibt auch Plugins, die über Umwege das Einbinden von Videos und anderen Medien ermöglichen.

Der Schrei nach Plugins zum Export vom Prototyp zur fertigen Website ist verständlicherweise in der Community sehr groß. Ein paar Updates des Programmes, wie zum Beispiel die Implementation von Abständen und das Responsive Resize, gehen schon in die Richtung von CSS-Anpassungen. Allerdings funktioniert der einfache Export schlicht und ergreifend nicht. Das ist auch nicht der Sinn von XD. Vielleicht geht es in Zukunft etwas mehr in diese Richtung, allerdings wird man immer nachsteuern müssen.

Fazit

XD hat es mir seit der ersten Sekunde sehr angetan, da es mir sehr viel Arbeitszeit erspart. Vor allem das automatische Angleichen der Komponenten und Inhalte von Wiederholungsrastern ist extrem praktisch. Grafisch steht das Programm den anderen Grafikprogrammen in den relevanten Bereichen in nichts nach, im Gegenteil: Manches macht es sogar besser.

Es will nicht alles können, nur das, was es braucht. Fehlende Funktionen werden monatlich hinzugefügt, diese werden oftmals von der Community gewünscht und somit auch bestimmt. Die Prototypen werden von Projekt zu Projekt besser, interaktiver, entwickeln sich stetig weiter und sind fancy.

Es gibt viele andere Prototyping-Tools, wie z.B. Sketch, das ebenfalls sehr oft verwendet wird. Allerdings finde ich XD praktischer, da es eben auch viele Interaktionen mit den anderen Creative Suite Apps mit sich bringt und sich optimal in den Workflow einbindet.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.