kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Adobe XD – Einstieg und Praxis-Tipps

Adobe XD ist ein Programm für UX- und Interface-Designer. Mit XD können einzelne Screens im sog. »Design Mode« gestaltet und anschließend im »Prototype Mode« miteinander verknüpft werden. Somit lässt sich das Verhalten der finalen Anwendung in Form eines visuellen Clickdummies simulieren. Das Ergebnis kann anschließend als Video gespeichert oder in die Adobe-Cloud exportiert werden.

Das offizielle deutschsprachige Benutzerhandbuch ist sehr gut und soll hier nicht wiederholt werden. Wir möchten in übersichtlicher Form typische Anwendungsfälle schildern, sowie häufige Fragen unserer Seminar-Teilnehmer klären.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Benutzeroberfläche und Begrifflichkeiten

Die Benutzeroberfläche von Adobe XD ist – im Vergleich zu anderen Adobe-Programmen – sehr übersichtlich aufgebaut und verzichtet auf zahlreiche Bedienfelder. Die folgende Grafik zeigt eine Einteilung der Benutzeroberfläche in Regionen.

  1. Navigation zum Wechsel des Arbeitsmodus:
    • Im Design-Modus können auf verschiedenen Zeichenflächen Layouts gezeichnet und konstruiert werden.
    • Im Prototyp-Modus können die zuvor gezeichneten Screens miteinander verknüpft werden. Somit entsteht ein Klick-Dummy.
  2. Werkzeugleiste mit
    • Auswahlwerkzeug zum Markieren und Verschieben von Objekten auf der Bühne
    • Rechteckwerkzeug zum Zeichnen von Quadraten und Rechtecken
    • Ellipsenwerkzeug zum Zeichnen von Kreisen und Ellipsen
    • Linienwerkzeug
    • Zeichenstift-Werkzeug zum Zeichnen von Polygon- und Bezier-Pfaden
    • Textwerkzeug
    • Zeichenflächen-Werkzeug zum Erstellen neuer Zeichenflächen und zum Editieren bestehender Zeichenflächen
    • Zoom-Werkzeug
  3. Bedienfeld »Elemente«
  4. Bedienfeld »Ebenen«
  5. Vorschau auf mobilem Endgerät, Vorschau am Computer sowie Web-Vorschau/Export
  6. Eigenschaften: Dieses Bedienfeld ändert seine Inhalte in Abhängigkeit zum auf der Bühne angeklickten Element
  7. Bühne

Zeichenflächen und Dokumente einrichten

Zeichenflächen erstellen

Adobe XD organisiert die verschiedenen Screens einer Website oder App auf einzelnen Zeichenflächen. Es ist üblich, dass ein Adobe XD-Dokument zahlreiche Zeichenflächen beinhaltet – auch in verschiedenen Größen.

Um eine neue Zeichenfläche hinzuzufügen, wählt das Zeichenflächenwerkzeug (A) aus. Rechts in den Eigenschaften stehen nun populäre Gerätegrößen als Voreinstellung zur Auswahl. Wenn ihr eine eigene Größe für die Zeichenfläche wählen möchtet, zieht einfach einen Rahmen auf. Zwischen Hoch- und Querformat kann erst gewechselt werden, wenn die Zeichenfläche erstellt wurde. Markiert die Zeichenfläche und stellt die gewünschte Ausrichtung rechts in den Eigenschaften ein.

Zeichenflächen anordnen

Neue Zeichenflächen werden von Adobe XD automatisch positioniert. Wenn eine Datei mehrere Zeichenflächen beinhaltet, möchte man jedoch häufig umorganisieren. Per Klick auf den Namen einer Zeichenfläche kann diese auf der Bühne verschoben werden.

Raster und Layouts einblenden

Wenn eine Zeichenfläche ausgewählt ist, können Raster-Optionen gewählt werden. In den Eigenschaften können dazu Rasterkästchen oder Rasterspalten (Layout) konfiguriert werden. Zeilen werden aktuell noch nicht unterstützt.

Wenn Rasterkästen gewählt sind, bietet es sich an das Raster auf 10 Pixel einzustellen. Elemente können dann mit gedrückter Shift-Taste und den Pfeiltasten um genau eine Rasterzelle verschoben werden.

Zeichenflächen scrollbar machen

Die Abmessungen von Zeichenflächen können höher werden als der sichtbare Bereich (Viewport) der Zeichenfläche. Ist das der Fall, kann im Vorschau-Modus gescrolled werden. Dafür muss in den Einstellungen der Zeichenfläche das vertikale Scrollen erlaubt werden, sofern es sich nicht automatisch eingeschaltet hat.

Elemente beim Scrollen fixieren

Wenn Elemente beim Scrollen fixiert werden sollen, markiert das entsprechende Objekt und setzt den Haken »feste Position« in den Eigenschaften.

Objekte erstellen und gestalten

Formen zeichnen und kombinieren

Über die Werkzeuge »Rechteck«, »Ellipse« und »Zeichenstift« können Vektor-Formen erzeugt werden. Zusätzlich können Vektoren aus anderen Programmen – z.B. aus Comp oder Illustrator – auf die Bühne kopiert werden.

Um zwei Formen miteinander zu kombinieren, markiert beide Objekte und wählt anschließend eine der sog. »Boolschen Optionen« aus. Formen können so miteinander verschmolzen oder voneinander abgezogen werden. Auch Schnittmengen etc. sind möglich.

In der Liste der Ebenen werden kombinierte Formen als entsprechende Gruppe gekennzeichnet. Es können jedoch nach wie vor alle Einzelbestandteile editiert werden.

»Responsive Design«

Adobe XD unterstützt in Höhe und Breite flexibel gestaltete Elemente. Gruppen von Elementen skalieren also nicht zwingend proportional, sondern richten sich aneinander aus: Wenn mehrere Elemente übereinander gezeichnet werden, erkennt XD automatisch das wahrscheinlich gewünschte Verhalten und nimmt entsprechende Einstellungen vor.

Das markierte Objekt soll immer unten rechts in der Gruppe positioniert werden und sich in Höhe und Breite nicht verändern.

Wenn das automatische Verhalten nicht zu gewünschten Ergebnissen führt, kann auf eine manuelle Einstellung umgeschaltet werden. Hier kann die Position in der Gruppe sowie eine feste Höhe und/oder Breite eingestellt werden. Dabei können folgende Tipps helfen:

  • Gruppiert die Objekte, die zusammen reagieren sollen!
  • Während der Skalierung einer Auswahl entstehen dünne rosafarbene Linien über den Objekten. Diese Linien zeigen an, wie die Objekte vom Verhalten eingestellt wurden
  • Wenn ihr während der Skalierung Shift gedrückt haltet, deaktiviert ihr das responsive Verhalten und transformiert die Gruppe wie aus Photoshop, Illustrator & Co. gewohnt.

Wenn das responsive Verhalten generell nicht gewünscht ist, kann es über das Bedienfeld rechts deaktiviert werden.

Farben, Verläufe und Grafiken einfügen

Wenn eine Form ausgewählt wurde, kann rechts in den Eigenschaften Füllfarbe, Kontur und Schatten hinzugefügt werden. Als Füllfarbe stehen auch lineare und radiale Verläufe zur Verfügung. Wenn eine Grafik als Hintergrund  eingefügt werden soll, zieht sie einfach per Drag and Drop auf die Form.

Pfade editieren

Mit dem Pfad-Werkzeug können Pfade gezeichnet oder bestehende Formen editiert werden. Wenn ein bestehender Pfad um neue Pfadpunkte ergänzt werden soll, doppelklickt das Objekt mit dem Auswahlwerkzeug(!) auf der Bühne. Anschließend können neue Pfadpunkte gesetzt und bearbeitet werden.

Wenn der Pfad weitergezeichnet werden soll, wechselt nach dem Doppelklick auf das Pfadwerkzeug. Es wird der letzte Pfadpunkt angezeigt. Von dort aus kann der Pfad weitergezeichnet werden.

Bildausschnitte ändern

Wenn eine Form mit einem Bildhintergrund gefüllt wurde, kann der Bildausschnitt festgelegt werden, indem per Doppelklick »in das Objekt hinein navigiert wird«. Das Bild wird dann auch über die Kanten der Form hinaus sichtbar und kann skaliert oder positioniert werden.

Texte erstellen und formatieren

Textrahmen vs. Textzeile

Wenn das Textauswahlwerkzeug gewählt ist, könnt mit einem Klick auf der Arbeitsfläche einen Punkttext erzeugen. Dieser kann über den Anfasser unten in der Mitte des Textes leicht in der Größe verändert werden.

Wenn ihr hingegen einen Rahmen mit dem Textwerkzeug aufzieht, erstellt ihr einen Textrahmen an dem der Fließtext umbricht.

Ihr könnt im Inspektor Punktexte in Textrahmen umwandeln und umgekehrt.

Mit diesen beiden Schaltflächen können Punkttexte in Textrahmen umgewandelt werden – und umgekehrt

Modulares Design

Symbole

In Adobe XD können Objekte oder Gruppen als sog. Symbole abgespeichert werden. Wenn ein Symbol mehrfach zum Einsatz kommt, sind Änderungen an diesem Symbol in allen Instanzen sichtbar. 

Um ein Symbol zu erstellen, muss zunächst das Element oder die Gruppe von Elementen auf der Bühne markiert werden. Anschließend kann im Bedienfeld »Elemente« die Auswahl als Symbol gespeichert werden. Auf der Bühne sind Symbole an einer grünen Markierung erkennbar.

Symbole austauschen

Symbole können in Adobe XD ausgetauscht werden, indem sie per Drag and Drop aus der Symbol-Bibliothek auf das Symbol gezogen werden, das ersetzt werden soll.

Austausch des Hamburger-Icons durch das Home-Icon

Wiederholungsraster

Adobe XD verfügt über ein sog. Wiederholungsraster. Wenn ein Objekt oder eine Gruppe von Objekten ausgewählt ist, kann über »Wiederholungsraster erstellen« in den Eigenschaften die Auswahl umgewandelt werden. Die farbige Markierung auf der Bühne wird zur Unterscheidung grün und der Auswahlrahmen erhält Anfasser. Wenn der Rahmen vergrößert wird, entstehen Kopien des Elements. Die Abstände zwischen den Kopien können per »Klick und ziehen« eingestellt werden.

Links im Ebenenbedienfeld wird das Wiederholungsraster als Gruppe angezeigt. Wenn ein Objekt innerhalb des Raster ausgewählt und verändert wird, wirken sich diese Änderungen auf alle Kopien aus.

Text und Bild im Wiederholungsraster

Das Wiederholungsraster kann sehr schön genutzt werden um komplexe sich wiederholende Komponenten mit unterschiedlichen Inhalten zu erzeugen.

Wenn beispielsweise ein Ordner mit Bildern genutzt werden soll, um ein Rechteck im Wiederholungsraster bei jeder Kopie mit einem anderen Bild zu füllen, zieht per Drag and Drop die Bildauswahl auf das Rechteck. Adobe XD »mischt« die Bilder dann ins Layout. Bei Texten funktioniert es ebenso – sofern die Textquelle im Reintext vorliegt (*.txt).

Per Drag and Drop können Bilder im Wiederholungsraster auf das Rechteck gezogen werden.
XD fügt die Bilder dann automatisch in allen Kopien ein.

Auf repeatgrid.com kann eine Textdatei mit Demo-Inhalten erzeugt werden. Das Tool ist für Adobe XD erstellt worden – kann aber auch in anderem Umfeld genutzt werden.

Tipps im Umgang mit dem Wiederholungsraster

  • Nutzt das Raster auch für kleine Elemente wie Icons, Trennlinien, Navigationen etc.
  • Wenn das Wiederholungsraster Texte Bilder oder beinhaltet, können diese in den Kopien verändert werden. Nachträgliche gestalterische Änderungen am Originaltext/-bild werden übernommen, die inhaltlichen Änderungen jedoch beibehalten.

Zeichenformate

Wenn ein Textrahmen unterschiedlich gestaltete Textabschnitte enthält, werden separate Zeichenformate erzeugt, sobald in den Elementen ein Format hinzugefügt werden soll.

Farbsets

In den Elementen können Farben zur mehrmaligen Verwendung gespeichert werden. Wenn eine Farbe nachträglich geändert werden soll, kann über einen Rechtsklick der Farbwähler wieder aktiviert werden. Es ändern sich alle Vorkommnisse dieser Farbe im Dokument.

Prototyping

Animation nicht auswählbar

Wenn in Adobe XD der Animationstyp von einer Zeichenfläche zu einer anderen nicht auswählbar ist, sondern ausgegraut auf der Einstellung »Ausblenden« steht, stimmen die Größen der Viewports bzw. Zeichenflächen nicht überein. Adobe XD kann Übergange nur animieren, wenn der Viewport der Start- und Ziel-Zeichenfläche identisch ist.

Overlays im Prototyp positionieren

Im Prototyping-Modus kann nicht nur von einer Zeichenfläche zu einer anderen navigiert werden – eine Zeichenfläche kann auch als Overlay verwendet werden. Wenn das Overlay kleiner ist als die Zeichenfläche vor der es positioniert werden soll, kann es über die grünen Anfasser positioniert werden.

Zur »vorherigen Seite« im Prototyp verlinken

In vielen Prototypen kommt es vor, dass ein gestalteter Screen von mehreren Ausgangspunkten aus erreichbar ist. Es wäre beispielsweise denkbar in einem Online-Shop von verschiedenen Unterseiten aus den Warenkorb zu betreten. Wenn man nun den Warenkorb wieder schließt, möchte man voraussichtlich zu der Seite zurückkehren von der aus man den Warenkorb geöffnet hat. Der Schließen-Button des Warenkorbs muss dazu in Adobe XD mit der »vorherigen Seite« verlinkt werden. Eine manuelle Verlinkung mit einer bestimmten Zeichenfläche führt hier nicht zum Erfolg.

Bitte beachtet, dass die Verlinkung zur »vorherigen Seite« in der Adobe XD-Vorschau nicht funktionieren kann, wenn zuvor keine Seite besucht wurde.

Auto-Animationen

Mit Auto-Animationen können Veränderungen an Objekten zwischen zwei Zeichenflächen animiert werden. Wenn jedoch ein Objekt nicht auf beiden an der Animation beteiligten Zeichenflächen vorhanden ist, entsteht häufig ein unerwünschter Effekt. XD kann nur dann eine saubere Animation erstellen, wenn Start- und Endzustand des Objekts definiert sind.

Wenn Elemente also aufgefahren oder eingeblendet werden sollen, kann es helfen die Deckkraft auf 0% zu reduzieren bzw. in Höhe oder Breite auf 1px zu reduzieren und die Farbe anzupassen. Das Element wird somit im Ursprungszustand optisch unsichtbar – ist aber technisch auf der Zeichenfläche vorhanden.

Import und Export

Editierbare Vektoren aus anderen Adobe-Programmen importieren

Mockups können sehr schön mit Adobe Comp erstellt werden. Da das Programm bisher keinen direkten Export zu XD ermöglicht, muss der Umweg über Illustrator gegangen werden. Das funktioniert einwandfrei.

Auch aus Photoshop können Vektoren kopiert werden. Am einfachsten ist es, wenn die Vektor-Form in Photoshop über einen Rechtsklick im Ebenenbedienfeld als SVG kopiert wird. Anschließend kann in XD alles wieder eingefügt werden.

Import aus anderen Adobe-Anwendungen bzw. der Creative Cloud

Wenn vollständige Dokumente aus einem anderen Adobe-Programmen in XD übernommen werden sollen, importiert das Dokument über »Datei öffnen«.

Wenn nur einzelne Grafiken oder Assets, die in der Creative Cloud Bibliothek liegen, importiert werden sollen, öffnet über »Datei > CC Bibliothek öffnen« das entsprechende Bedienfeld. Anschließend können per Drag and Drop Elemente auf der Bühne platziert werden. Wenn nachträglich Änderungen im Ursprungsprogramm (z. B. Photoshop oder Illustrator) gemacht werden, aktualisiert XD diese Änderungen automatisch über die Adobe Cloud.

Zeichenflächen oder Elemente als Datei exportieren

Um einzelne Zeichenflächen oder Elemente als JPG-, PNG oder SVG-Datei zu exportieren, müssen zunächst die gewünschten Objekte für den Export markiert werden. Aktiviert dazu zunächst das Export-Icon im Bedienfeld Ebenen. Das Icon wird per Mouse-Over angezeigt.  Anschließend wählt ihr »Datei > Exportieren > Nur ausgewählte«. Das Dateiformat kann im darauffolgenden Dialogfenster gewählt werden.

Alternativ zu den ausgewählten Objekten, können über »Datei > Exportieren« auch alle Zeichenflächen oder alle markierten Objekte/Zeichenflächen exportiert werden.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.