TutKit.com

Adobe XD-Tutorial – Experience Design und Prototyping

Kategorie: Webdesign | Trainer: Stefan Riedl

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

Kategorien:
Adobe XD-Tutorial: Experience Design und Prototyping
Neuerungen in Adobe XD 19

Trainings-Informationen

Videos: 27
Kapitel: 2
Länge : 5 Stunden
Detailinformationen
Ähnliche Inhalte

Trailer ansehen
Gesamtinhalt herunterladen
Jetzt dabei sein Jetzt gratis testen

Adobe XD-Tutorial: Experience Design und Prototyping

Adobe XD-Tutorial: 01 | Intro

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

2 Min. Kostenlos

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!

8 Min.

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 ...

5 Min.

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.

8 Min.

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.

10 Min.

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.

11 Min.

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 ...

12 Min.

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 ...

11 Min.

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.

19 Min.

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 ...

15 Min.

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.

4 Min.

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.

20 Min.

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.

11 Min.

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.

13 Min.

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 ...

12 Min.

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 ...

12 Min.

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.

17 Min.

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.

14 Min.

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 ...

19 Min.

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.

17 Min.

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.

8 Min.

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.

19 Min.

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 ...

10 Min.

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.

2 Min.

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 ...

5 Min.

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 ...

9 Min.

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 ...

15 Min.

Diese Inhalte könnten dich ebenfalls interessieren

Wir sind auf der Suche nach interessanten Trainings für dich, bitte gib uns einen Moment.

Top

TutKit.com

Adobe XD-Tutorial – Experience Design und Prototyping

Trainings-Informationen

Adobe XD-Tutorial: Experience Design und Prototyping

Adobe XD-Tutorial: 01 | Intro

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

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

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

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

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

Adobe XD-Tutorial: 07 | Umgang mit Farben

Adobe XD-Tutorial: 08 | Import von Assets

Adobe XD-Tutorial: 09 | Schriften und Typografie

Adobe XD-Tutorial: 10 | Formen und Symbole

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

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

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

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

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

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

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

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

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

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

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

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

Adobe XD-Tutorial: 23 | Sprachsteuerung

Adobe XD-Tutorial: 24 | Audiokommentierung von Previews

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

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

Neuerungen in Adobe XD 19

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

Diese Inhalte könnten dich ebenfalls interessieren

Cookie-Einstellungen