Design
User Experience
Adobe XD
Adobe XD Einfach & Komplett: Der große UI-/UX-Praxis-Kurs
4.4 (84 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
746 students enrolled

Adobe XD Einfach & Komplett: Der große UI-/UX-Praxis-Kurs

Gestalte atemberaubende User-Interfaces und Websites die geliebt werden! Designe und teste eigene Benutzeroberflächen.
Bestseller
4.4 (84 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
746 students enrolled
Created by Laith Wahab
Last updated 4/2020
German
Preview this course
Adobe XD Einfach & Komplett: Der große UI-/UX-Praxis-Kurs
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • 19 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Erstelle großartige App-Designs für iOs und Android
  • Werde User-Interface (UI) Designer und User-Experience (UX) Profi!
  • Lerne ohne Vorkenntnisse Web-, App- und Softwaredesign auf Profi-Niveau!
  • Im Prototyp-Modus kannst du jedes Design testen und deinen Kunden vorstellen!
  • Verwende großartige Wireframe-Kits für noch mehr Profi-Qualität!
  • Optimiere deinen Design-Workflow mit sinnvollen Erweiterungen für Adobe XD
  • Drei umfangreiche und praxisnahe Projekte für schnellen Lernerfolg!
  • Garantiert schnelle Design-Erfolge auch für Anfänger!
Requirements
  • Motivation und Vorfreude auf tolle UI-/UX Ergebnisse!
  • Adobe XD (als Gratis-Variante)
  • Adobe Creative Cloud Abo (empfehlenswert)
  • Einen PC oder Mac
Description

Gestalte mit Adobe XD eigene User-Interface Designs für großartige Apps, Websites und Cloud-Software!

Mit diesem Kurs gestaltest du ausgezeichnete Apps, Websites und browser-basierte Software (Cloud-Software / Software as a Service) auf Profi-Niveau.


Für Anfänger ohne Vorkenntnisse!

Mit diesem Kurs schaffst du spielend einfach den Einstieg in die Software Adobe XD. Es gibt einen umfangreichen Grundkurs, den du nach eigenem Tempo bestimmen kannst.


Realistische Praxis-Projekte für großartiges App- und Webdesign!

Wir gestalten in vier umfangreichen Projekten eine App, die dazugehörige browser-basierte Software und eine Website mit Adobe XD. Als vollständiges eigenes Projekt, wagen wir uns an ein KFZ-Radio Interface. Dabei nehmen wir uns Projekte vor, die so auch tatsächlich umgesetzt werden können. Zusätzlich gebe ich noch Tipps für die Gestaltung einer Smartwatch App, eines Dashboards und einer Mediathek-App.

Alle Projekte erhältst Du in diesem Kurs als Download gratis dazu!


Die User-Experience: Benutzerfreundlichkeit mit dem Prototyp-Modus testen

Jede Gestaltung wird mit Adobe XD noch besser und erlebbar! Mit dem Prototyp-Modus kannst du jede Seite deiner Gestaltung realistisch verknüpfen und dich so durch deine gestaltete Benutzeroberfläche oder App testen oder eindrucksvoll deinen Kunden präsentieren. Im Kurs gehen wir dabei auf den Prototyp-Modus bis ins Detail ein und erklären auch die möglichen Klick- und Animationseffekte für mehr Wow in jedes deiner Designs!


Online-Kurs mit persönlichen & schnellen Support im Fragen & Antworten-Bereich!

Einmal kaufen. Immer behalten. Diesen Kurs gibt es nicht im Abo. Du zahlst einmalig den oben angezeigten Preis und erhältst den Kurs ein Leben lang. Solltest du Fragen haben, helfe ich dir im Fragen & Antworten-Bereich kostenlos sehr gerne weiter.


Dein Udemy-Dozent

Laith Wahab

Who this course is for:
  • Webdesigner, App-Designer, User-Interface Designer, User-Experience Designer
  • Design-Interessierte
  • Anfänger ohne Vorkenntnisse
  • Webdesigner die eine Photoshop- und Sketch-Alternative suchen
Course content
Expand all 122 lectures 11:42:58
+ – Adobe XD - Der Grundkurs
9 lectures 43:53

Schauen wir uns zunächst einmal die Benutzeroberfläche von Adobe XD an und lernen die Werkzeuge und Zeichenflächen kennen.

Adobe XD - Werkzeuge und Zeichenflächen
Preview 09:38

Wie in Photoshop und Illustrator lässt sich auch in Adobe XD problemlos und mit nahezu den gleichen Tasten- und Mauskombinationen, ein- und auszoomen.

Ein- und Auszoomen
02:57

Das Elemente-Fenster ist für wiederkehrende und aktuell auf der Zeichenfläche befindliche Elemente gedacht. Es spart uns später eine Menge Zeit.

Das Elemente-Fenster
Preview 06:44

Selbstverständlich gibt es auch Ebenen in Adobe XD. Diese lassen sich ganz bequem unten links via Klick im Fenster anzeigen. Die Bedienung ist Photoshop sehr ähnlich, jedoch nicht gleich.

Die Ebenen in Adobe XD
03:29

Symbole, vor allem wenn man sie als SVG oder ähnlich importiert, lassen sich nachträglich nicht so einfach in der Größe editieren und anpassen. Wie das über Umwege trotzdem geht, zeige ich dir in diesem Video.

Extern importierte Symbole in der Größe editieren
03:18

Das Wiederholungsraster ist ein ziemlich praktisches und sinnvolles Werkzeug in Adobe XD. In dieser Lektion lernen wir es mal genauer kennen.

Das Wiederholungsraster: Elemente mittels Raster wiederholen
Preview 03:00

Elemente korrekt ausrichten lässt sich mit den Ausrichtungsbuttons im Eigenschaftenfenster sehr gut und schnell umsetzen. Mehr dazu im Video.

Elemente ausrichten
03:10

Farben sind relativ einfach anzuwenden. Wie sieht es aber mit Farbverläufen aus. Welche Möglichkeiten habe ich da? Mehr dazu in diesem Video.

Farben und Farbverläufe anwenden
05:59
Text- und Zeichenformate
05:38
+ – Der Prototyp-Modus: Klickbares Top-Menu Beispiel
3 lectures 21:46
Prototyp-Modus: Menü-Verhalten darstellen/anzeigen
Preview 11:13
Prototyp-Modus: Menü mit Drop-Down gestalten und darstellen
09:33
Prototyp-Modus: Menu Projekt als Download
01:00
+ – UI-Elemente für App-Designs
5 lectures 22:54
Apple iOS Vorlagen und Elemente downloaden und nutzen
04:35
Apple iOS: Fehlende Font für das Gestalten nachladen oder installieren
03:18
Google Android Vorlagen und Elemente (Material Design)
03:22
Microsoft UI-Toolkit: Vorlagen und Elemente
04:24
Kostenloses Web-Wireframe UI-Kit von Adobe
07:15
+ – Add-Ons: Sinnvolle Erweiterungen
6 lectures 18:41

Adobe XD kann man durchaus sinnvoll erweitern. Zum Beispiel mit einer kostenfreien UI-Faces Erweiterung, die automatisch Formen mit Gesichtern aus freien Bilddatenbanken befüllen kann.

Add-On: UI-Faces
04:01

Das Add-On Content Generator befüllt Designs mit Namen, Adressen, Kalenderdaten oder Fülltext. Wie das genau funktioniert, erkläre ich in diesem Video.

Add-On: Content Generator
05:40
Add-On: Mimic (Schriftfamilien und Farben einer Website ermitteln
02:10
Add-On: Maps Generator - Individuelle Maps-Karten einbinden
02:10
Add-On: Icondrop
02:39
Add-On: Color Blender
02:01
+ – Dateien in der Cloud speichern / Gestalten im Team
1 lecture 03:43
Projekte im Team mit der Cloud teilen und freigeben / Arbeit an mehreren PCs
03:43
+ – UI- / UX-Design Projekt 1: App Software
22 lectures 02:03:51
Idee mit Stift und Papier festhalten und zeichnen (Scribble als PDF-Download)
07:00
Wireframe-Kit für bestimmte Elemente öffnen und bereithalten
02:22
Dokument anlegen und langsam loslegen.
02:23
App-Startseite gestalten / App-Start gestalten
06:47
Exkurs: Montserrat Schrift installieren
02:18
App-Startseite minimal optimieren
01:13
Termin- und Übersichtsseite gestalten Teil 1
06:52
Termin- und Übersichtsseite gestalten Teil 2 / iOS Look
09:49
Termin- und Übersichtsseite gestalten Teil 3 - Optimierungen
05:45
Formularseite für neue Termine Teil 1
04:52
Formularseite für neue Termine Teil 2 (Formularfelder)
10:28
Formularseite für neue Termine Teil 3 (Textfeld hinzufügen)
03:44
Formularseite für neue Termine Teil 4 (Adressfeld hinzufügen & Fehlerkorrektur)
02:29
Bestätigungsseite nach Termineintragung (mit Icon)
07:22
Termin-Detailseite Teil 1
14:16
Termin-Detailseite Teil 2 (Adresse und Bearbeitungsbutton)
04:41
Weitere App-Seiten
04:19
Registrierung- und Login-Seiten erstellen
05:25
App-Design als Download
00:40
[Prototyp-Modus] Zeichenflächen nach Reihenfolge und Verknüpfung ordnen
05:23
[Prototyp-Modus] Startseite: Buttons mit Registrierung & Login verknüpfen
03:48
[Prototyp-Modus] Prototyp fertigstellen und testen
11:55
+ – UI- / UX-Design Projekt 2: Website Software (Cloud-Software/ SaaS)
17 lectures 01:53:38
App als Browser-Software: Dokument anlegen / Scribble hervorrufen
03:16
Loslegen und die Startseite gestalten
05:52
Registrierungs-Seite gestalten
14:57
Login-Seite gestalten
03:40
Gestaltung der Termin- und Aufgabenübersichts-Seite
06:04
Gestaltung der Termin- und Aufgabenübersichts-Seite Teil 2
11:28
Gestaltung der Termin- und Aufgabenübersichts-Seite Teil 3
08:05
Termin-hinzufügen-Seite gestalten
07:13
Aufgabe hinzufügen-Seite gestalten
04:31
Modal/Popup "Eintrag gespeichert" gestalten
07:38
Kurzer Zwischenstand / gesparte Seitengestaltungen gegenüber der App
01:22
Termin-Detailseite gestalten
08:31
Aufgaben-Detailseite gestalten
06:16
[Prototyp-Modus] Zeichenflächen nach Reihenfolge und Verknüpfung ordnen
03:09
[Prototyp-Modus] Alle Zeichenflächen (bis auf das Modal) verknüpfen und testen
15:32
[Prototyp-Modus] Modal / Popup-Overlay verknüpfen und richtig einstellen.
05:27
[Prototyp-Modus] Blubb Browsersoftware Projektdatei für Adobe XD als Download
00:37
+ – Webdesign Projekt 3: Eine Website gestalten
20 lectures 02:13:15
Wir gestalten eine Website zu unserem Produkt/ unserer Software "Blubb".
01:52
Website Navigationsleiste platzieren
05:52
Website Navigationsleiste umfärben - Logo platzieren
08:31
Website: Immer ziel- und absatzorientiert gestalten.
02:35
App- und Browser-Software Grafiken exportieren und für Mockups einsetzen
08:37
Exkurs Photoshop: Teaser-Grafik mit Mockup für die Startseite erstellen
05:41
Big Teaser-Grafik platzieren und mit Teaser-Text versehen
08:04
Weiteren Startseiten-Block bzw. Container mit Icons erstellen (Plugin: Icondrop)
06:54
Jedes Icon mit Headline und Text gestalten
05:01
CTA (Call to Action - Handlungsaufforderungs)-Bereich mit Button hinzufügen
08:05
Footer platzieren und die Schriftart der Navi-Leiste oben ändern.
07:55
Informationsseite der Software gestalten
06:09
Informationsseite weiter umgestalten - Bilder hinzufügen
07:40
Informationsseite mit Hero-Bild versehen und Textboxen umfärben
06:19
Preisseite mit Preistabellen erstellen
12:15
Preistabelle farblich anpassen und etwas abändern
08:12
Badge / Störer zeichnen und zur Preisseite hinzufügen / Schrift drehen
03:10
Kontakt-Seite mit Formular gestalten / erstellen
13:12
[Prototyp-Modus] - Navbar / Topmenu miteinander verknüpfen
04:35
[Prototyp-Modus] Website-Navigation testen
02:36
+ – Autoradio-Benutzeroberfläche gestalten
29 lectures 03:07:24
Wir gestalten ein KFZ-Radio Interface mit diversen Funktionen
00:54
Grundfläche erstellen, Bereiche festlegen & Zeit-Icon gestalten
Preview 11:39
Telefonbalken und Anbieter-Info hinzufügen
04:35
Klima-Informationsbalken unten darstellen
06:58
Navigations-Menu links erstellen
03:55
Home-Screen mit Uhrzeit und Datum
03:11
Verkehrszeichendarstellung mit Straßennamen + Ebenen benennen und gruppieren
05:54
Radioseite mit Radiosender-Logos gestalten
07:52
Radioseite mit aktiven Sender und Informationen hinterlegen
09:16
Zweiten Radiosender als aktive Seite gestalten
02:48
Navigationsseite mit Maps-Karte
04:56
Untermenü der Navigationsseite festlegen
06:10
Untermenü mit Icons erweitern
10:18
Abstände zwischen den Untermenü-Punkten gleichmäßig verteilen
03:49
Weitere Navi-Seite: Neue Route
12:04
Neue Route mit sinnvollen Buttons erweitern (Zurück- und Route-Einstellungen)
07:10
Navigationsseite "Gespeicherte Ziele" gestalten
08:26
Telefon-Seite gestalten / Ziffernblatt erstellen
07:08
Telefon-Seite: Nummern-Anzeige, letzte Anrufe, Telefonbuch-Button
08:30
Telefon-Seite: Anruf darstellen
07:43
Andere-Geräte Seite gestalten
05:35
Klima-Seite erstellen
11:56
Klima-Seite: Schalter Umschalt-Zustand gestalten
01:29
Auto-Einstellungen gestalten
03:31
Ambiente-Beleuchtung - Farbwechsler gestalten
06:19
[Prototyp-Modus] Zeichenflächen nach Reihenfolge und Verknüpfung ordnen
03:18
[Prototyp-Modus] Menü, Buttons und Zeichenflächen miteinander verknüpfen
13:50
[Prototyp-Modus] Radio-Interface als Prototyp testen
05:03
Update: Icons mit Ikono integrieren und farblich anpassen
03:07