Adobe XD Prototyping Grundkurs
Erstellen und testen Sie Prototypen und Screendesigns mit Adobe XD – der Komplettlösung für UX/UI-Design und Prototyping.
Adobe XD ist das führende Programm zur Gestaltung ansprechender Screendesigns.
Erstellen Sie Prototypen für unterschiedliche Gerätekategorien, verknüpfen Sie Ihre Screendesigns zu einem interaktiven Klickmodell und testen Sie die Benutzererfahrung für eine optimale Usability. Das Ziel ist es, positive Kundenerlebnisse bei der Benutzung Ihrer screenbasierten Anwendungen zu erzielen.
Adobe XD unterstützt Sie bei der Erstellung interaktiver Klickmodelle – ohne eine einzige Zeile Code programmieren zu müssen. Sammeln Sie erste Ideen für Ihre Screendesigns, erstellen Sie ein Wireframe-Modell und gestalten Sie ein ansprechendes Mockup Ihrer Anwendung. Selbst die Erstellung komplexer Prototypen, mit hunderten einzelner Screens, ist in Adobe XD problemlos möglich!
Nach der Gestaltungsphase verdrahten Sie die einzelnen Screens zu einem interaktiven Prototypen und fügen animierte Seitenübergänge hinzu. Anschließend testen Sie Ihren Prototypen auf den gewünschten Endgeräten in Echtzeit und holen Kundenfeedback ein.
Kursziel
In dieser Schulung lernen Sie den Arbeitsbereich und kompletten Workflow von Adobe XD kennen, Designelemente aus Adobe Illustrator und PhotoShop zu integrieren und ansprechende Screendesigns mit den Werkzeugen von Adobe XD zu gestalten.
Anschließend verdrahten Sie die einzelnen Screens zu einem interaktiven Klickmodell, übertragen Ihren Prototypen auf mobile Endgeräte und testen live die Benutzererfahrung und Usability. Schließlich erfahren Sie noch, wie Sie Designelemte aus Adobe XD für die spätere Programmierung Ihrer Anwendung extrahieren können.

Kursinhalte
- 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 Prototpyen 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 Kurs-Konfigurator meiner Partnerfirma WildKolleg.
Schulungstermine: Adobe XD Grundkurs
Alle offenen Kurstermine für den Adobe XD Grundkurs finden Sie auf der Internetseite meiner Partnerfirma WildKolleg.
Individuelle Kurstermine sind nach Absprache jederzeit möglich. Termin vereinbaren
Schulungsdetails
Online- oder Präsenz-Schulung:
Wir führen das Training, je nach Wunsch, als Live-Webinar oder Präsenz-Schulung bei Ihnen vor Ort durch. Eine Teilnahme an unseren Online-Seminaren ist sowohl von Ihrem Arbeitsplatz, als auch vom Home-Office aus bequem und unkompliziert möglich.
Kleine Kursgrößen:
Unsere Webinare werden in Kleinstgruppen durchgeführt. So wird das Lerntempo von Ihnen bestimmt und unsere Trainerinnen und Trainer können all Ihre Fragen individuell beantworten.
Kursdauer:
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 Grundlangen zu Usability und User Experience (UX) hinzugebucht werden.
Vorsaussetzungen:
sicheres Arbeiten unter Windows 10 oder macOS, Grundkenntnisse in Adobe Illustrator und PhotoShop sind von Vorteil, keine Kenntnisse in HTML, CSS oder JavaScript erforderlich
Zielgruppe:
UX-Designer/innen, Grafiker/innen, Mediengestalter/innen, Kommunikationsdesigner/innen, Webdesigner/innen, Entwickler/innen
Ihr Trainer: Micha Beißer

Als ehemaliger Art Director bei einer großen Internet-Agentur, verfüge ich über eine langjährige Praxiserfahrung bei allen Fragen rund um das Thema Webdesign, Usability und UX.
In diesem Einsteigerkurs zeige ich Ihnen, wie Sie Ihre Screendesign-Entwürfe in Adobe XD gestalten, User Interface Ideen ausprobieren und testen, einen interaktiven Prototypen erstellen und Feedback von Ihren Stakeholdern einholen. Sie lernen außerdem, wie Sie Design-Assets und Code-Snippets Programmierer/innen zur Verfügung stellen können.
WildKolleg Schule für Kommunikation und Medientechnologie
Meine Partnerfirma WildKolleg ist die erste Adresse für Einsteiger, Anfänger und Fortgeschrittene, die strategisches Wissen und Programm-Fertigkeiten erlernen, festigen oder erweitern möchten. Offene Schulungen, Einzel- und Firmenkurse und Inhouse-Trainings bei Ihnen vor Ort.
Verwandte Schulungen
- Adobe Creative Cloud Basis-Paketkurs
- Adobe Creative Cloud Aufbau-Paketkurs
- Adobe Creative Cloud Update-Paketkurs
- Automatisierung im Grafik-Design
- Design mit KI: PhotoShop, InDesign, Illustrator und Firefly
- Adobe XD-Grundkurs
- Adobe Acrobat Pro Grundkurs
- 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
- Adobe Animate Grundkurs
- Adobe Animate Aufbaukurs
- Webflow Grundkurs
- Responsive Webdesign
- eBooks erstellen
- Adobe Illustrator Grundkurs
- Adobe Illustrator Aufbaukurs
- Adobe InDesign Grundkurs
- Adobe InDesign Aufbaukurs
- Adobe PhotoShop Grundkurs
- Adobe PhotoShop Aufbaukurs
- macOS Schulung