Adobe XD-Tutorial – Experience Design und Prototyping

Herzlich willkommen zum großen Adobe XD-Tutorial. In diesem Intro stelle ich mich als dein Trainer vor.

Was ist der Unterschied zwischen User Experience (UX) und User Interface (UI)? Welche Arten von Level-Design gibt es und wofür wird Adobe XD am besten eingesetzt? Die Antwort gibt es hier!

Das erste Mal Adobe XD geöffnet – und schon bieten sich zahlreiche Möglichkeiten, die man anwählen kann. In diesem Video gibt es ein kleines Warm-up für Adobe XD, einen Überblick über das Programm sowie die Einführung in den Splash-Screen von XD und dessen Funktionen.

Artboards (Zeichenflächen) lassen sich in Adobe XD im Handumdrehen für unterschiedliche Auflösungen und Geräte erstellen. Welche Eigenheiten dabei berücksichtigt werden müssen, erfährst du in diesem Tutorial.

Unterschiedliche Rastereinstellungen erleichtern uns die saubere Anordnung von Elementen und Objekten untereinander. Hierfür steht uns ein rechteckiges Grid und eine Spaltenaufteilung für Kolumnen zur Verfügung.

Google, Apple und Microsoft stellen für den schnellen Start praktische UI-Kits zur Verfügung. Diese fertigen Artboards helfen uns enorm bei der späteren Ausgestaltung von Prototypen für unterschiedliche Plattformen.

Farben spielen in nahezu jedem Design eine äußerst wichtige Rolle – in diesem Video lernst du, wie du in Adobe XD mit Farben arbeiten kannst, wie du sie importierst und welche praktischen Quellen es gibt, um fertige Farbharmonien zu sammeln.

Es gibt zahlreiche Methoden, um Assets wie Bilder, Dateien, Textdokumente usw. in Adobe XD zu importieren. In diesem Video stelle ich einige Verfahren vor. Da XD jedoch Teil der Creative Cloud von Adobe ist, lässt sich mit den Bibliotheken natürlich äußerst komfortabel und bequem arbeiten.

Das Thema Schriften und Typografie ist ein großer Baustein auf unserer Reise quer durch Adobe XD. In diesem Video lernst du, wie du mit Schriften richtig und effizient umgehst.

Formen können entweder sehr einfach zu Adobe XD importiert werden oder auch mit dem Pfad-Werkzeug selbst erstellt werden. Wird ein Objekt mehr als zweimal verwendet, empfiehlt es sich zudem, es als Symbol in die Assets-Liste aufzunehmen.

Designen hat viel mit Inspiration und Input von außen zu tun. Hierzu zählt die analoge Umwelt wie auch die digitale Welt. Hier stelle ich einige Portale vor, die ich gerne besuche.

Starten wir mit einem kleinen, feinen Praxisprojekt. In diesem Tutorial und den anstehenden beiden Videos erstellen wir einen Onepager.

Das Wiederholungsraster ist eines der bedeutsamsten Features von Adobe XD. Es hilft uns, einmal erstellte Gruppen von Objekten beliebig zu skalieren und individuell zu befüllen.

Im letzten Teil der Gestaltung des Onepagers kümmern wir uns um den Footer und einen Bereich für die Referenzen. Hier nutzen wir praktische SVG-Files und wir lernen weitere Design-Techniken kennen.

In dieser Lektion kümmern wir uns um die Fragestellung, wie einzelne Artboards interaktiv miteinander verbunden werden können. Welche Möglichkeiten für die Wahl des Übergangs (Transition) und welche weiteren Modifikationen wir beim Prototypen vornehmen können, klären wir hier.

Eine jede Website braucht einen Ankerpunkt zur Navigation. In diesem Video kümmern wir uns ausschließlich um die Erstellung einer Hauptnavigation im Kopfbereich und der interaktiven Verbindung zueinander.

Dieses Training baut auf dem vorherigen Kapitel auf und zeigt, wie wir das erstellte Desktop-Menü für ein Smartphone adaptieren. Das Hamburger-Icon und die Menüpunkte werden mit interessanten Animationen aufgewertet.

Eines der mächtigsten Werkzeuge für bestmögliche Visualisierung ist die Auto-Animate-Funktion von Adobe XD. In diesem Beispiel erkläre ich, wie ihr das Prinzip der Auto-Animate-Funktion adaptiv für jedes erdenkliche Szenario adaptieren könnt.

In den folgenden Videos lernen wir die Erstellung eines Prototyps für einen Online-Shop. Hierbei lernen wir Möglichkeiten, aus einfachen Artboards visuell ansprechende High-Fidelity-Protoypen zu erstellen. Teil 1 von 4.

Im zweiten Teil kümmern wir uns um die Darstellung der Detailbeschreibungen, bauen Slider für die Bilder ein und verknüpfen die Artboards untereinander.

Die Overlay-Funktion für interaktives Prototyping bietet uns spannende Möglichkeiten, wie Informationen direkt ein- und wieder ausgeblendet werden können.

Gutes Usability Design gibt dem Anwender stets Feedback über den Systemstatus. Dieses Feedback werden wir zum Abschluss des Projekts in eine hübsche Animation einbauen.

Adobe XD beherrscht in seinem Prototyping-Prozess auch die Interaktion per Sprachkommando. Verbale Befehle führen also zu Systemaktionen, die wir selbst definieren können. Wie das funktioniert, zeige ich in diesem Tutorial.

Bei der Zusammenarbeit mit anderen Abteilungen und involvierten Personen ist die Audiokommentierung ein wertvolles Feature, um den Projektstatus verständlich darzulegen.

Einen Prototypen in einer virtuellen Umgebung zu testen ist eine Sache – ihn live auf einem Endgerät darzustellen eine ganz andere. Und genau das lässt sich über Adobe XD entweder per USB oder per Creative Cloud-Anbindung bequem lösen. Hierfür nutzen wir die Adobe XD-App aus dem App-Store.

Während der Zusammenarbeit ist es unabdingbar, sich mit anderen Abteilungen über den Projektstand auszutauschen. Über die Veröffentlichen-Funktion kann der Prototyp freigegeben werden, damit Reviewer, Entwickler und Auftraggeber visuelle Eindrücke vom Projekt erhalten. An diesem Punkt beginnt dann auch der Bearbeitungszyklus zwischen den Fachabteilungen, um das Projekt zur Reife zu bringen.

Adobe XD verändert sich als noch sehr junges Programm mit jedem Update zunehmend: In diesem Video erkläre ich, welche Neuerungen sich im Sprung von Version 18 auf Version 19 ergeben haben, wie die Features genutzt werden und in welchen Situation sie hilfreich sind. Hierzu gehören: Komponenten statt Symbole, Responsive Resize, Hilfslinien, Polygon-Werkzeug, weitere Möglichkeiten zur Textformatierung und einiges mehr. Viel Spaß!