Adobe XD-Tutorial: Experience Design

Adobe XD-Tutorial – Experience Design und Prototyping

Mit Adobe XD werden deine App- und Webseiten-Designs interaktiv, ganz ohne Programmierung! Verwandle deine Ideen in erlebbare Prototypen, die du sofort kommentieren, mit anderen teilen und weiter diskutieren kannst. In diesem fünfstündigen Adobe XD-Tutorial von Stefan Riedl erlernst du den Umgang mit der Software für Experience Design und Prototyping – leichtfüßig und Schritt für Schritt!

Von der Idee zum Prototyp: Wie du mit Adobe XD interaktive Designs erstellst
Für deinen leichten Einstieg: Lerne den Umgang mit Zeichenflächen, Farben, UI-Kits und Co.
Prototyping und Wireframing: So verknüpfst du deine Artboards zu einer User Experience
Praktisch anwenden: Setze Gelerntes anhand zweier Beispielprojekte gezielt um
Für eine geschmeidige Zusammenarbeit: So kommentierst und teilst du deine Prototypen mit anderen
Arbeiten mit Adobe XD, von Stefan Riedl in 5 zielführenden Stunden auf den Punkt gebracht
Bonus: Alles Wichtige zu den Neuerungen, die sich aus dem Update auf Adobe XD 19 ergeben

Zeige, wie deine App und deine Webseite funktionieren soll! – Erlerne mit dem Tutorial die Anwendung von Adobe XD, und deine Designs sind direkt klickbar!

Details

Verwendbar mit:
Inhalt: 5 h Video-Training (Kompatibilitätshinweise)
Lizenz: private und kommerzielle Nutzungsrechte

Kategorien

Design (Illustration, Layout & Druck)

Mit Liebe erstellt von:

Stefan Riedl

Anwendungsbeispiele

Galerie öffnen

Beispiel: Lerne, wie du UI-Designs erstellst und zu interaktiven Prototypen verknüpfst.
Galerie öffnen

Beispiel: Erfahre, wie du in Adobe XD User Interfaces für Smartphone-Displays und Desktop-Ansichten erstellst.
Galerie öffnen

Beispiel: Steige in zwei Beispielprojekten in die konkrete Anwendung von Adobe XD ein.

Adobe XD-Tutorial: Experience Design und Prototyping

Kostenlos

Adobe XD-Tutorial: 01 | Intro

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

Adobe XD-Tutorial: 02 | UI & UX und unterschiedliche Level-Designs

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!

Adobe XD-Tutorial: 03 | Der Einstieg, Splash-Screen und verfügbare Funktionen

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.

Adobe XD-Tutorial: 04 | Zeichenflächen mit unterschiedlicher Auflösung erstellen

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.

Adobe XD-Tutorial: 05 | Rastereinstellungen für Kolumnen und rechteckige Grids

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.

Adobe XD-Tutorial: 06 | Hilfreiche Presets mit UI-Kits

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.

Adobe XD-Tutorial: 07 | Umgang mit Farben

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.

Adobe XD-Tutorial: 08 | Import von Assets

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.

Adobe XD-Tutorial: 09 | Schriften und Typografie

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.

Adobe XD-Tutorial: 10 | Formen und Symbole

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.

Adobe XD-Tutorial: 11 | Inspiration für Designer

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.

Adobe XD-Tutorial: 12 | Onepager erstellen, Teil 1 – Techniken lernen

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

Adobe XD-Tutorial: 13 | Onepager erstellen, Teil 2 – Wiederholungsraster

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.

Adobe XD-Tutorial: 14 | Onepager erstellen, Teil 3 – Referenzen und Footer

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.

Adobe XD-Tutorial: 15 | Basics im Prototyping und Wireframing

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.

Adobe XD-Tutorial: 16 | Menü für Desktops interaktiv aufbauen

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.

Adobe XD-Tutorial: 17 | Menü für Smartphones interaktiv aufbauen

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.

Adobe XD-Tutorial: 18 | Die Auto-Animate-Funktion für interaktives Prototyping

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.

Adobe XD-Tutorial: 19 | High-Fidelity-Prototyp kreieren, Teil 1 – mobiler Online-Shop

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.

Adobe XD-Tutorial: 20 | High-Fidelity-Prototyp kreieren, Teil 2 – Produktdetails

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.

Adobe XD-Tutorial: 21 | High-Fidelity-Prototyp kreieren, Teil 3 – Overlay-Funktion

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

Adobe XD-Tutorial: 22 | High-Fidelity-Prototyp kreieren, Teil 4 – Abschlussanimation

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-Tutorial: 23 | Sprachsteuerung

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.

Adobe XD-Tutorial: 24 | Audiokommentierung von Previews

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

Adobe XD-Tutorial: 25 | Device Preview auf Endgeräten per App

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.

Adobe XD-Tutorial: 26 | Projekt mit Design-Spezifikationen veröffentlichen

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.

Neuerungen in Adobe XD 19

Adobe XD-Tutorial: 27 | Neue Funktionen in der Version 19

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ß!

Details zum Inhalt

Wende Adobe XD an, damit deine Designs verstanden werden

Starte das Tutorial und lass dich in fünf anschaulichen Stunden unverzüglich zu deinen ersten interaktiven Adobe XD-Designs leiten. Dein Trainer Stefan Riedl hat die Bedienoberfläche, den Funktionsumfang und den Workflow für den Umgang mit der Software im Kopf – und für dich alles Wesentliche kompakt aufbereitet.

Darum bist du in diesem Adobe XD-Tutorial goldrichtig

Ob UX und UI für dich noch Neuland sind oder nicht – das Adobe XD-Tutorial richtet sich sowohl an Ein- als auch an Umsteiger. Die Ziele des Tutorials sind gesteckt: Lerne erstens Adobe XD an sich kennen. Erfahre zweitens Grundlegendes über Experience Design, Wireframing und Prototyping. Und eigne dir drittens Wissen und Können an, um deine Designs künftig interaktiv zu präsentieren:

Grandios für den Umstieg zu Adobe XD: Nutze das Tutorial, um schnell von einem alternativen UX-Programm auf Adobe XD umzusteigen.
Perfekt für den Einstieg in Adobe XD: Gehe erste Schritte im Experience Design und erstelle direkt deine eigenen User Interfaces.
Bessere Zusammenarbeit im Team: Lerne, wie du deine Prototypen mithilfe von Adobe XD mit anderen teilst. Ein enormer Vorteil für deine Kooperation zum Beispiel mit Programmierern und Entwicklern!
Nutze das volle Potenzial der Creative Cloud: Wie Adobe Dimension CC ist auch Adobe XD ein eher junges Programm. Probiere es aus und reize die Möglichkeiten deines CC-Abos aus!

Die Inhalte: Interface und Experience Design, Wireframing und Prototyping

Das Adobe XD-Tutorial setzt bei den Grundlagen an, entführt dich immer wieder in die praxisbezogene Anwendung und entlässt dich mit der Kompetenz, deine App- und Webseiten-Designs künftig selbstständig interaktiv zu gestalten.

Zu Beginn lernst du Adobe XD im Überblick kennen. Sieh dir gemeinsam mit deinem Trainer die Bedienoberfläche an und erfahre, worauf es im Umgang mit Zeichenflächen, Rastern, Farben, Assets, Formen und den verfügbaren UI-Kits ankommt. Es sind diese Elemente, aus denen heraus du deine Designs entwirfst. Praktisch: Stefan Riedl erstellt im Tutorial das Design eines Onepagers, wobei all die Grundlagen noch einmal gebündelt präsentiert werden.

Im Folgenden wagst du dich an das zweite Hauptthema von Adobe XD – an die Verknüpfung deiner Designs. Mithilfe des sogenannten Wireframing gibst du vor, was in der App bzw. auf der Webseite geschehen soll, wenn Nutzer zum Beispiel eine Schaltfläche drücken. Dynamische Animationen inklusive! Dieser Teil ist besonders für Auftraggeber enorm wichtig, um schnell zu verstehen, wie sich der Flow einer Anwendung konkret darstellt. Dabei geht dein Trainer sowohl auf die Menügestaltung für Smartphone-Displays als auch für die Desktop-Ansicht ein und rundet den Abschnitt mit der Teilerstellung eines High-Fidelity-Prototyps anhand eines Shop-Beispiels ab.

Schließlich spielst du den eigentlichen Vorteil von Adobe XD aus: Du visualisierst erst dir selbst und dann auch anderen, wie dein Design funktioniert – wie es sich also in Interaktion mit dem Nutzer verhält. Erstelle dazu eine von dir kommentierte Vorschau. Oder: Teile dein UX-Design mit Projektbeteiligten, sodass sie deinen Prototypen direkt selbst ausprobieren und kommentieren können. So kommt ihr gemeinsam noch viel schneller ans Ziel! Darüber hinaus kannst du deinen Prototypen live auf deinem Smartphone oder Tablet betrachten und begutachten, um ein sehr realistisches Gefühl von der Anwendung in natürlicher Umgebung zu bekommen.