Kursbeschreibung
In diesem Seminar lernst du, wie du mit Adobe XD den Designprozess für mobile Apps, Voice-Interfaces und responsive Webseiten umsetzt. Du entwickelst UX- und UI-Designs und setzt diese Schritt für Schritt in eigene Designprojekte um.
Dabei arbeitest du mit Animationen, Bildern, Vektorgrafiken, Texten und Zeichenflächen. Die entstandenen Screens verbindest du zu einem interaktiven Klick-Prototypen – ganz ohne Programmierung.
Außerdem erstellst du Prototypen und testest diese in Echtzeit auf den gewünschten Endgeräten. Im Kurs lernst du den Umgang mit der Adobe XD Oberfläche, den Arbeitsbereichen und typischen Workflows. Zusätzlich erfährst du, wie du Designelemente aus Photoshop und Illustrator einbindest, UI-Kits nutzt und Wireframes sowie Scribbles für deine Projekte entwickelst.
Die wichtigsten Themen im Überblick
- Web- & Appdesign professionell gestalten
- Wireframes & Prototypen entwickeln
- UX-Workflows effizient aufbauen
- Interaktive Designs präsentieren
- Microinteraktionen kreativ umsetzen
- Designs entwicklergerecht übergeben
Zielgruppe
Diese Schulung richtet sich an Webdesigner, UI- und UX-Designer, Grafiker sowie Mitarbeitende aus Marketing und Produktentwicklung, die mit Adobe XD moderne Benutzeroberflächen für Websites und Apps entwerfen möchten. Angesprochen sind Einsteiger und Umsteiger, die Design- und Prototyping-Workflows strukturiert aufbauen und interaktive Konzepte visuell darstellen wollen. Der Lehrgang eignet sich für alle, die Layouts, Wireframes und klickbare Prototypen erstellen und diese im Team oder mit Entwicklern weiterverarbeiten möchten.
Voraussetzung für die Schulung
Grundlegende PC-Kenntnisse sowie Erfahrung im Umgang mit Windows werden vorausgesetzt. Erste Erfahrungen in Grafik- oder Layoutprogrammen sind hilfreich, insbesondere Kenntnisse in Adobe Photoshop oder Adobe Illustrator, aber nicht zwingend erforderlich. Interesse an Web- und App-Design, Benutzerführung und Prototyping wird empfohlen.
Kursinhalte
- Grundlegende Kenntnisse
- Intuitives Web und Appdesign
- Adobe XD im Designprozess
- Kennenlernen der Benutzeroberfläche
- Werkzeugpalette
- Zeichenwerkzeuge
- Textverarbeitung, Einsatz von Farben, Filtern und Verläufen
- Gestalten und entwerfen von Screens, Icons und Elementen
- Pfade
- Ebenen
- Einsetzen der verschiedenen Raster
- Objekte ausrichten
- Importe aus anderen Anwendungen
- Allgemein: Import von Bildern
- Bildmaterial aus Photoshop nutzen
- Illustrator-Dateien verwenden
- Funktionalität und Workflow
- Erstellen eines Workflows
- Component States Grundlagen und Mouseover-Effekte
- Erstellung eines Wireframe-Modells
- Animierte Microinteraktionen
- Animationen und Übergänge
- Designvorlagen mit UI-Kits
- Verwaltung der Bibliotheken
- Erstellung eines Prototyps
- Startseite erstellen
- Zusammenfügen von Zeichenfläche und Objekten
- Verknüpfung und Übergänge von Screens
- Interaktion erzeugen und Usability überprüfen
- Aufzeichnung der Bedienung und Videoerstellung
- Klickmodelle am PC, auf mobilen Endgeräten oder im Browser präsentieren
- Sinnvolle Plugins und Erweiterungen
- Datenübergabe an Entwickler
- Tipps und Tricks
- Seminar- bzw. Schulungsvoraussetzungen
- PC Grundkenntnisse
- Erfahrung mit Windows 10
- Erfahrungen mit Photoshop und Illustrator sind von Vorteil
