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!



Adobe XD-Tutorial – Experience Design und Prototyping
Sobald du dem Cookie zum Anzeigen von Videos zustimmst, akzeptierst du die Datenschutzerklärung von YouTube und kannst unsere Videos ansehen.
Dieser Inhalt ist verwendbar mit: Kategorie Icon

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.

Sobald du dem Cookie zum Anzeigen von Videos zustimmst, akzeptierst du die Datenschutzerklärung von YouTube und kannst unsere Videos ansehen.

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!

Beispiel: Lerne, wie du UI-Designs erstellst und zu interaktiven Prototypen verknüpfst.
Bildschirme mit UX-Design, Illustration für das Adobe XD-Tutorial – Experience Design und Prototyping

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.

Beispiel: Erfahre, wie du in XD dein User Interfaces animierst und für Smartphone-Displays und Desktop-Ansichten erstellst.
Smartphone mit UX-Design, Illustration für das Adobe XD-Tutorial – Experience Design und Prototyping

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. 

Beispiel: Steige in zwei Beispielprojekten in die konkrete Anwendung von Adobe XD ein.
Smartphone mit UX-Design, Illustration für das Adobe XD-Tutorial – Experience Design und Prototyping

Kompatibilität (alle Produkte für Windows und macOS)

Das Adobe XD-Tutorial wurde mit Adobe XD 18 aufgezeichnet. Zudem werden die Neuerungen in Adobe XD 19 betrachtet.

Fazit

Umfassendes Adobe XD-Tutorial: Wie du deine eigenen interaktiven Designs erstellst. ✓ Experience Design ✓ Prototyping, Wireframing ✓ Praxisbeispiele

Schnapp dir jetzt den Artikel: