Adobe XD Grundkurs: UX/UI-Design & Prototyping
Lernen Sie Adobe XD praxisnah: Entwickeln Sie Wireframes, gestalten Sie Screendesigns und erstellen Sie klickbare Prototypen, um Ideen schnell zu testen und im Team abzustimmen.
Adobe XD Grundkurs: Von Wireframes zu klickbaren Prototypen für Web & Apps.
Erstellen Sie im Adobe XD Grundkurs klickbare Prototypen für Web und Apps: von ersten Wireframes über visuelle Screendesigns bis zum interaktiven Klickmodell. So prüfen Sie Navigation, Nutzerführung und Usability frühzeitig – bevor Entwicklungskosten anfallen.
Adobe XD ist ein UX/UI-Design-Tool für Prototyping, das ohne Programmierung auskommt. Sie strukturieren Inhalte mit Gestaltungsrastern und Zeichenflächen, bauen wiederverwendbare Komponenten auf und entwickeln aus dem Wireframe ein stimmiges Mockup – auch bei umfangreichen Projekten mit vielen Screens.
Danach verdrahten Sie die Screens mit Auslösern, Übergängen und Animationen zu einem realistischen Prototyp. Sie testen die Interaktionen in der Vorschau und auf mobilen Endgeräten, teilen Ihr Ergebnis per Review-Link und sammeln Feedback für Iterationen und die Übergabe an Entwicklungsteams.
Kursziel: UX/UI-Design & Prototyping mit Adobe XD
In dieser Adobe XD Schulung lernen Sie den kompletten Workflow für UX/UI-Design: von Zeichenflächen, Rastern und Wireframes bis zu professionellen Screendesigns. Sie integrieren Inhalte aus Adobe Illustrator und Photoshop und bauen konsistente Layouts mit Komponenten und Formaten auf.
Anschließend erstellen Sie ein interaktives Klickmodell, testen den Prototyp auf passenden Endgeräten und optimieren anhand von Feedback die Nutzerführung und Usability. Zum Abschluss lernen Sie die saubere Übergabe: Review-Links, Spezifikationen und der Export von Assets für Entwicklungsteams.
Nach dem Kurs können Sie …
- Benutzeroberfläche und grundlegende Werkzeuge von Adobe XD sicher bedienen und für UI- und UX-Design-Projekte einsetzen.
- Wireframes und klickbare Prototypen für Websites und Apps erstellen, um Nutzerführung und Interaktionen realistisch darzustellen.
- Designs mit Komponenten und wiederverwendbaren Formaten effizient strukturieren und pflegen.
- Interaktionen, Animationen und Übergänge definieren, um die User Experience anschaulich zu testen und zu präsentieren.
- Designs mit Teilen- und Review-Funktionen für Feedback, Abstimmung und Weitergabe an Entwicklungsteams vorbereiten.
Der Kurs eignet sich ideal als Ergänzung zu unserer UX-Design Grundlagen-Schulung.
Kursinhalte: Interaktionen, Animationen und klickbare Prototypen
- Grundlagen von Adobe XD
- Der Startbildschirm
- Überblick über die Benutzeroberfläche
- Arbeiten im Design- und Prototyp-Modus
- Nutzen der UI-Kits
- Arbeiten mit Cloud-Dokumenten
- Kennenlernen der wichtigsten Tastaturkurzbefehle
- Anlegen von Zeichenflächen und Rastern
- Zeichenflächen hinzufügen und duplizieren
- Scrollbare Zeichenflächen erstellen
- Einrichten eines Gestaltungsrasters
- Ein Wireframe-Modell anlegen
- Bilder importieren und maskieren
- Effizientes Arbeiten mit dem Wiederholungsraster
- Texte und Bilder mit dem Wiederholungsraster nutzen
- Formen und Inhalte erstellen und verwalten
- Kennenlernen der Zeichenwerkzeuge
- Pfade zeichnen und modifizieren
- Objekte anordnen, verteilen und ausrichten
- Texte anlegen und formatieren
- Gestaltung komplexer Formen mit Hilfe der Pfad-Operationen
- Weichzeichen- und Schatteneffekte generieren
- Elemente- und Ebenen-Palette
- Farben und Verläufe anlegen und speichern
- Globale Farbänderungen vornehmen
- Textformate anlegen und verwalten
- Globale Textformatierungen vornehmen
- Elemente suchen und filtern
- Projekte mit der Ebenen-Palette strukturieren
- Komponenten und Instanzen
- Komponenten anlegen und Instanzen erzeugen
- Eingebettete und verknüpfte Komponenten
- Statuszustände von Komponenten definieren
- Instanzen austauschen und aktualisieren
- Komponenten in einem Team-Workflow nutzen
- Zusammenarbeit mit Illustrator & Photoshop
- Icons und Piktogramme aus Illustrator exportieren
- Bildelemente aus Photoshop-Layouts extrahieren
- Creative Cloud Bibliotheken
- Eine neue Bibliothek anlegen
- Objekte, Farben und weitere Designelemente zu einer Bibliothek hinzufügen
- Bibliotheken programmübergreifend nutzen
- Bibliotheken für Teammitglieder freigeben
- Designelemente archivieren und dauerhaft löschen
- Interaktive Prototypen erstellen
- Definition der Startseite
- Objekte und Zeichenflächen miteinander verdrahten
- Seitenübergänge festlegen
- Timing der Animationseffekte steuern
- Zeitgesteuerte Übergangseffekte
- Auslöser (Trigger) für Objekte festlegen
- Automatische Zurück-Buttons definieren
- Interaktivität im Prototyp-Modus hinzufügen
- Videos und Lottie-Animationen integrieren
- Überprüfung des Prototypen auf einem Smartphone
- Responsive Größenänderungen
- Responsive Resize für Objekte
- Größenveränderungen manuell definieren
- Objekte verankern
- Responsives Skalieren von Zeichenflächen aktivieren
- Animierte Microinteraktionen
- Definieren automatischer Animationseffekte
- Kippschalter und animierte Schaubilder erstellen
- Praxis-Beispiele für Auto-Animate Effekte
- Eine Vorschau animierter Inhalte betrachten
- Sprach- und Tastatursteuerung
- Sprachbefehle festlegen
- Gesprochene Audio-Antworten hinzufügen
- Tastaturkurzbefehle als Auslöser festlegen
- Plugins
- Den Funktionsumfang von Adobe XD erweitern
- Erweiterungen hinzufügen und verwalten
- Vorstellung nützlicher Plugins
- Zusammenarbeit mit Kunden und Entwicklern
- Erstellen eines Demonstrationsvideos der Bedienung
- Veröffentlichen des Klickmodells im Internet
- Passwortgeschützte Prototypen freigeben
- Kommentare zum Klickmodell hinzufügen
- Einzelne Objekte für die Programmierung exportieren
- Zeichenflächen und Objekte in verschiedenen Formaten und Größen exportieren
- Designspezifikationen für Entwickler/innen freigeben
- CSS Code-Snippets extrahieren
- Auswertung der Designspezifikationen
- Usability und User Experience
- Unterschiede und Gemeinsamkeiten
- Zehn Regeln der Usability
- Aspekte der User Experience
- Wahrnehmung & Handeln
- Wahrnehmungsgesetze
- Seitenwahrnehmung
- Menschliches Handeln
- Knappheit erzeugt Dringlichkeit
- Halo-Effekt
- Gestaltgesetze
- Personas
- Vorteile von Personas
- Bestandteile von Personas
- Erstellung von Personas
- User Stories und Use Cases
- Customer Journey Maps
- Entwurfsphasen
- Von Low-Fidelity zu High-Fidelity
- Scribbles und Wireframes
- Software für die Wireframe-Erstellung
- Prototyping mit User Scenarios
- Prototyping-Tools
- Finden und Testen der Navigationsstruktur
- Nutzerfreundliche Bilder
- Vorteile und Nachteile von Bildern
- Authentische Bilder verwenden
- Bildgestaltung und Bildeinsatz
- Blickrichtung
- Bilder auf mobilen Endgeräten
- Slideshows
- Usability-Tests
- Ablauf von Usability-Tests
- Ziele von Usability-Tests
- Guerilla-Usability-Tests
- A/B-Tests
- Kopf- und Fußleisten
- Mega-Menüs gestalten
- Kopfleiste und Sticky Header
- Sprachumschalter
- Footer
- Verwendung von Farben
- Farbwirkung
- Farbe und Usability
- Farbe und Barrierefreiheit
- Formular-Design
- Formulare aus Nutzersicht
- Formularfelder gestalten
- Formularfeld-Beschriftungen
- Intelligente Formulare
- Umgang mit Fehlermeldungen
- Formulare auf mobilen Endgeräten
- Weitere Themen
- Web-Typographie
- Einsatz von Mikro-Animationen
- Akkordeon-Menüs
- Link- und Button-Gestaltung
- Link-Platzierung und -Gestaltung
- Button-Design und -Anordnung
- Button-Zustände
- Listen und Tabellen
- Aufbau und Reihenfolge
- Kopfleiste und Sortierung
- Vergleichstabellen
- Suchfunktion & Ergebnislisten
- Nutzerfreundliche Suchfunktionen
- Technische Aspekte der Suche
- Suchergebnisse gestalten
- Umgang mit keinen Suchergebnissen
- Filter und Facetten
- Trefferanzahl reduzieren und erweitern
- Gruppen und Attribute
- Gestaltung von Filtern und Facetten
Die Schulungsinhalte können bei Einzel- und Firmenschulungen individuell auf Ihre Wünsche und Anforderungen angepasst werden. Nutzen Sie hierzu bitte den Kurskonfigurator meiner Partnerfirma WildKolleg.
Termine & Preise: Adobe XD Grundkurs
Alle offenen Kurstermine für den Adobe XD Grundkurs als Live-Webinar finden Sie auf der Internetseite meiner Partnerfirma WildKolleg.
Individuelle Kurstermine sind nach Absprache jederzeit möglich. Termin vereinbaren
Ablauf, Kursdauer & Voraussetzungen
Live-Webinar (online)
Die Schulung wird in der Regel als Live-Webinar online durchgeführt. Die Teilnahme ist bequem vom Arbeitsplatz oder aus dem Home-Office möglich. Eine Präsenzschulung bei Ihnen vor Ort bieten wir nach individueller Absprache an.
Kleine Kursgrößen
Unsere Webinare werden in Kleinstgruppen durchgeführt. So bestimmen Sie das Lerntempo, und unsere Trainerinnen und Trainer können all Ihre Fragen individuell beantworten.
Kursdauer & Ablauf
2 Tage à 8 Unterrichtsstunden (jeweils von 8:30 Uhr bis 15:45 Uhr). Eine Unterrichtsstunde entspricht 45 Minuten. Optional kann ein dritter Schulungstag mit theoretischen Grundlagen zu Usability und User Experience (UX) hinzugebucht werden.
Voraussetzungen
Sicheres Arbeiten unter Windows oder macOS; Grundkenntnisse in Adobe Illustrator und Photoshop sind von Vorteil; keine Kenntnisse in HTML, CSS oder JavaScript erforderlich.
Zielgruppe
Die Schulung richtet sich an UX-Designer/innen, Grafiker/innen, Mediengestalter/innen, Kommunikationsdesigner/innen, Webdesigner/innen und Entwickler/innen.
Ihr Trainer: Micha Beißer
Als ehemaliger Art Director bei einer Internet-Agentur bringe ich langjährige Praxiserfahrung in Webdesign, UX und Usability mit. Im Adobe XD Grundkurs profitieren Sie von erprobten Workflows und Best Practices, die sich in realen Web- und App-Projekten bewährt haben.
Sie lernen Schritt für Schritt, wie Sie in Adobe XD Wireframes und Screendesigns erstellen, daraus klickbare Prototypen bauen und Interaktionen testen. Außerdem zeige ich Ihnen, wie Sie Feedback strukturiert über Review-Links einholen und Ihre Ergebnisse professionell für Entwicklungsteams aufbereiten – inklusive Asset-Export, Spezifikationen und Code-Snippets.
WildKolleg Schule für Kommunikation und Medientechnologie
Meine Partnerfirma WildKolleg ist die erste Adresse für Einsteiger/innen, Fortgeschrittene und Profis, die strategisches Wissen und Programmfertigkeiten erlernen, festigen oder erweitern möchten. Offene Schulungen, Einzel- und Firmenkurse sowie Inhouse-Trainings bei Ihnen vor Ort.
Verwandte Schulungen
- Design mit KI: Photoshop, InDesign & Illustrator
- Adobe Firefly – Bild-, Video- und Sound-Generierung mit KI
- Adobe Creative Cloud Basis-Paketkurs
- Adobe Creative Cloud Aufbau-Paketkurs
- Adobe Creative Cloud Update-Paketkurs
- Adobe Acrobat Pro Grundkurs
- Automatisierung im Grafik-Design
- Barrierefreie PDFs mit InDesign und Acrobat Pro
- Barrierefreie PDFs mit Word und Acrobat Pro
- Barrierefreie PDFs mit Word und axesWord
- Barrierefreie PDFs mit InDesign und MadeToTag
- Webflow Grundkurs
- UX-Design Grundlagen
- eBooks erstellen
- Adobe Illustrator Grundkurs
- Adobe Illustrator Aufbaukurs
- Adobe InDesign Grundkurs
- Adobe InDesign Aufbaukurs
- Adobe Photoshop Grundkurs
- Adobe Photoshop Aufbaukurs
- Responsive Webdesign
- Adobe Animate Grundkurs
- Adobe Animate Aufbaukurs
- Adobe XD-Grundkurs
- macOS Schulung
