Adobe XD-Tutorial – Experience Design und Prototyping

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!

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

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.

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.

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