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.
4.20 (232 reviews)
2,090
students
12 hours
content
Nov 2022
last update
$34.99
regular price
What you will 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!
Why take this course?
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
Content
Herzlich Willkommen im Adobe XD Kurs
Begrüßung, Bewertungen, Fragen, Wünsche & Antworten :)
Adobe XD kostenlos oder im Creative Cloud Abo
"Form follows function"-Regel
Adobe XD - Der Grundkurs
Adobe XD - Werkzeuge und Zeichenflächen
Ein- und Auszoomen
Das Elemente-Fenster
Die Ebenen in Adobe XD
Extern importierte Symbole in der Größe editieren
Das Wiederholungsraster: Elemente mittels Raster wiederholen
Elemente ausrichten
Farben und Farbverläufe anwenden
Text- und Zeichenformate
Der Prototyp-Modus: Klickbares Top-Menu Beispiel
Prototyp-Modus: Menü-Verhalten darstellen/anzeigen
Prototyp-Modus: Menü mit Drop-Down gestalten und darstellen
Prototyp-Modus: Menu Projekt als Download
UI-Elemente für App-Designs
Apple iOS Vorlagen und Elemente downloaden und nutzen
Apple iOS: Fehlende Font für das Gestalten nachladen oder installieren
Google Android Vorlagen und Elemente (Material Design)
Microsoft UI-Toolkit: Vorlagen und Elemente
Kostenloses Web-Wireframe UI-Kit von Adobe
Add-Ons: Sinnvolle Erweiterungen
Add-On: UI-Faces
Add-On: Content Generator
Add-On: Mimic (Schriftfamilien und Farben einer Website ermitteln
Add-On: Maps Generator - Individuelle Maps-Karten einbinden
Add-On: Icondrop
Add-On: Color Blender
Dateien in der Cloud speichern / Gestalten im Team
Projekte im Team mit der Cloud teilen und freigeben / Arbeit an mehreren PCs
UI- / UX-Design Projekt 1: App Software
Idee mit Stift und Papier festhalten und zeichnen (Scribble als PDF-Download)
Wireframe-Kit für bestimmte Elemente öffnen und bereithalten
Dokument anlegen und langsam loslegen.
App-Startseite gestalten / App-Start gestalten
Exkurs: Montserrat Schrift installieren
App-Startseite minimal optimieren
Termin- und Übersichtsseite gestalten Teil 1
Termin- und Übersichtsseite gestalten Teil 2 / iOS Look
Termin- und Übersichtsseite gestalten Teil 3 - Optimierungen
Formularseite für neue Termine Teil 1
Formularseite für neue Termine Teil 2 (Formularfelder)
Formularseite für neue Termine Teil 3 (Textfeld hinzufügen)
Formularseite für neue Termine Teil 4 (Adressfeld hinzufügen & Fehlerkorrektur)
Bestätigungsseite nach Termineintragung (mit Icon)
Termin-Detailseite Teil 1
Termin-Detailseite Teil 2 (Adresse und Bearbeitungsbutton)
Weitere App-Seiten
Registrierung- und Login-Seiten erstellen
App-Design als Download
[Prototyp-Modus] Zeichenflächen nach Reihenfolge und Verknüpfung ordnen
[Prototyp-Modus] Startseite: Buttons mit Registrierung & Login verknüpfen
[Prototyp-Modus] Prototyp fertigstellen und testen
UI- / UX-Design Projekt 2: Website Software (Cloud-Software/ SaaS)
App als Browser-Software: Dokument anlegen / Scribble hervorrufen
Loslegen und die Startseite gestalten
Registrierungs-Seite gestalten
Login-Seite gestalten
Gestaltung der Termin- und Aufgabenübersichts-Seite
Gestaltung der Termin- und Aufgabenübersichts-Seite Teil 2
Gestaltung der Termin- und Aufgabenübersichts-Seite Teil 3
Termin-hinzufügen-Seite gestalten
Aufgabe hinzufügen-Seite gestalten
Modal/Popup "Eintrag gespeichert" gestalten
Kurzer Zwischenstand / gesparte Seitengestaltungen gegenüber der App
Termin-Detailseite gestalten
Aufgaben-Detailseite gestalten
[Prototyp-Modus] Zeichenflächen nach Reihenfolge und Verknüpfung ordnen
[Prototyp-Modus] Alle Zeichenflächen (bis auf das Modal) verknüpfen und testen
[Prototyp-Modus] Modal / Popup-Overlay verknüpfen und richtig einstellen.
[Prototyp-Modus] Blubb Browsersoftware Projektdatei für Adobe XD als Download
Webdesign Projekt 3: Eine Website gestalten
Wir gestalten eine Website zu unserem Produkt/ unserer Software "Blubb".
Website Navigationsleiste platzieren
Website Navigationsleiste umfärben - Logo platzieren
Website: Immer ziel- und absatzorientiert gestalten.
App- und Browser-Software Grafiken exportieren und für Mockups einsetzen
Exkurs Photoshop: Teaser-Grafik mit Mockup für die Startseite erstellen
Big Teaser-Grafik platzieren und mit Teaser-Text versehen
Weiteren Startseiten-Block bzw. Container mit Icons erstellen (Plugin: Icondrop)
Jedes Icon mit Headline und Text gestalten
CTA (Call to Action - Handlungsaufforderungs)-Bereich mit Button hinzufügen
Footer platzieren und die Schriftart der Navi-Leiste oben ändern.
Informationsseite der Software gestalten
Informationsseite weiter umgestalten - Bilder hinzufügen
Informationsseite mit Hero-Bild versehen und Textboxen umfärben
Preisseite mit Preistabellen erstellen
Preistabelle farblich anpassen und etwas abändern
Badge / Störer zeichnen und zur Preisseite hinzufügen / Schrift drehen
Kontakt-Seite mit Formular gestalten / erstellen
[Prototyp-Modus] - Navbar / Topmenu miteinander verknüpfen
[Prototyp-Modus] Website-Navigation testen
Autoradio-Benutzeroberfläche gestalten
Wir gestalten ein KFZ-Radio Interface mit diversen Funktionen
Grundfläche erstellen, Bereiche festlegen & Zeit-Icon gestalten
Telefonbalken und Anbieter-Info hinzufügen
Klima-Informationsbalken unten darstellen
Navigations-Menu links erstellen
Home-Screen mit Uhrzeit und Datum
Verkehrszeichendarstellung mit Straßennamen + Ebenen benennen und gruppieren
Radioseite mit Radiosender-Logos gestalten
Radioseite mit aktiven Sender und Informationen hinterlegen
Zweiten Radiosender als aktive Seite gestalten
Navigationsseite mit Maps-Karte
Untermenü der Navigationsseite festlegen
Untermenü mit Icons erweitern
Abstände zwischen den Untermenü-Punkten gleichmäßig verteilen
Weitere Navi-Seite: Neue Route
Neue Route mit sinnvollen Buttons erweitern (Zurück- und Route-Einstellungen)
Navigationsseite "Gespeicherte Ziele" gestalten
Telefon-Seite gestalten / Ziffernblatt erstellen
Telefon-Seite: Nummern-Anzeige, letzte Anrufe, Telefonbuch-Button
Telefon-Seite: Anruf darstellen
Andere-Geräte Seite gestalten
Klima-Seite erstellen
Klima-Seite: Schalter Umschalt-Zustand gestalten
Auto-Einstellungen gestalten
Ambiente-Beleuchtung - Farbwechsler gestalten
[Prototyp-Modus] Zeichenflächen nach Reihenfolge und Verknüpfung ordnen
[Prototyp-Modus] Menü, Buttons und Zeichenflächen miteinander verknüpfen
[Prototyp-Modus] Radio-Interface als Prototyp testen
Update: Icons mit Ikono integrieren und farblich anpassen
Weitere Software-Design Beispiele
TV-Mediathek App gestalten (Vorlage als Download in dieser Lektion)
UI-Kit für Smartphone Apps (iOS)
Browser-gesteuerte Software mit dem Dashboard Kit - Teil 1
Browser-gesteuerte Software mit dem Dashboard Kit - Teil 2 - Eigenes Dashboard
Browser-gesteuerte Software mit dem Dashboard Kit - Teil 3
Weitere Tipps & Tricks
Prototyp am Smartphone testen (iPhone oder Android)
Screenshots
Reviews
Kerstin
September 12, 2023
Für die Basics gut, aber tatsächlich schon etwas veraltet. Stand 2019. Auch die Plug Ins sehen heute ganz anders aus bzw. gibt es nicht mehr.
Monika
November 21, 2022
Es ist alles sehr gut erkärt. Die Stimme ist sympathisch und angenehm zuzuhören. Meine Frage wurde sofort beantwortet
Mirjam
October 20, 2022
Sehr guter Einstieg. Danach etwas viel Wiederholungen. Hätte mir den Einsatz der Stil- und Absatzformaten gewünscht. Die Componenten sind sehr wichtig und führen zu schnellerem Arbeiten. Auch gewisse Menüpunkte noch etwas genauer erläutert wäre super gewesen.
Martin
August 3, 2022
Der Kurs war wirklich durchdacht, die Projekte haben Spaß gemacht und ich konnte sehr viel mitnehmen und lernen. Allerdings finde ich es schade dass der Kurs nicht aktualisiert wurde daher musste ich einige andere Plug-ins Verwenden und einige gibt es nicht mehr. Ich fände es toll wenn man dies Korrigieren würde, da ich denke es würde den nächsten Kursbesuchern deutlich besser gefallen.
M
June 10, 2022
Anfangs für Einsteiger ganz ok. Projekt 1 habe ich umfänglich mitgemacht. War auch alles verständlich erklärt. Aber auch hier schon oft das Gleiche. Danach ist alles nur Wiederholung und als Designer brauche ich niemandem stundenlang beim Farbenwählen, Icons-Per-Plugin-Platzierung oder Farbflächen-Anlegen zuzuschauen. Hier wäre ein tieferer Einblick in sämtliche Menüpunkte sinnvoller gewesen. Außerdem finde ich, sollte man bei solch umfangreichen Projekten auch auf die Möglichkeiten der Dokumentelemente (Zeichenformate, Farben etc.) zurückgreifen und nicht permanent mit der Pipette Farben auswählen, da hier nie garantiert ist, dass man die gleichen Werte bekommt. Übrigens: Zeichenflächen lassen sich schneller mit Apfel+D duplizieren, statt mit Apfel+C und Apfel+V ;-)
Jacques
May 28, 2022
Sehr sehr hilfreich und eine sehr gute Kombination aus Theorie und Praxis. Schon nach dem ersten Projekt merkt man schon wie schnell man die Software dank diesem Kurs kennenlernt. Danke Laith
Vida
May 27, 2022
Die Art wie der Kurs beginnt... mit Erklärungen unterstrichen von Wikipedia erinnert mich an meine Schuljahren... die Optionen (links sind die Werkzeuge, rechts sind die Details dazu... da muss man ja blind sehen, ist an sich selbsterklärend)... ich hoffe, es wird besser
Sina
May 11, 2022
Den Einstieg fand ich sehr gut, die Basics wurden gut erklärt und Schritt für angewandt. Irgendwann gab es dann jedoch nur Wiederholungen, ohne ein richtiges Ziel. Vielleicht wäre es besser, den Kurs zweizuteilen und somit einem die freie Möglichkeit zu geben, auf das gelernte noch aufbauen zu wollen oder mit den Basics freier weiterzuarbeiten.
Daniel
January 29, 2022
Für Beginner sicher zu empfehlen. Gut aufgebaut, angenehm zu folgen.
Für Fortgeschrittene nichts Neues zu entdecken - auch keine 'gamechanging' Hacks.
Christian
September 28, 2021
Der Kurs hat mir so weit sehr gut gefallen, dennoch gibt es 2 Dinge die ich vermisse. Das eine wäre die Arbeit mit den Schrift- & Zeichenformaten in den Projekten. Das andere wäre das arbeiten mit Symbolen während der Projektaufgabe.
Mein PlugIn Tipp: Icons 4 design! Alle Icons sind frei verfügbar und kommen als Pfad Icons und können somit jederzeit individuell angepasst werden. Ich habe hier sehr positive Erfahrung gemacht mit diesesm PlugIn.
Tatiana
September 5, 2021
Der Kurs ist sehr gut gestaltet, übersichtlich und umfangreich. Ich konnte vieles in XD lernen und ausprobieren. Vielen Dank!
Helena
August 20, 2021
Die Vorgehensweise und Art der Erklärung ist verständlich und nachvollziehbar. Ich empfehle diesen Kurs jedoch wirklich nur Anfängern, die sich mit Adobe XD ganz neu befassen. Da ich schon gute Grundkenntnisse hatte, haben mir Dinge wie zum Beispiel die Verwendung von Elementen (Farben, Komponenten und Zeichenformate) sehr gefehlt. Ich dachte, das wäre eine Voraussetzung beim arbeiten mit Adobe XD. Nichts desto trotz ist dieser Kurs als Anfänger-Kurs ausgeschrieben und diese werden auf jeden Fall wichtige Eigenschaften des Programms kennenlernen.
Maja
August 16, 2021
Für Grundkenntnisse gut, allerdings fehlt die Aktualität. Komponenten werden nicht erwähnt, Lineale, Padding, Bibliotheken (bei denen Elemente nicht immer wieder manuell umgefärbt werden müssen oder Schriften wieder eingestellt werden). Buttons sollten ja für den Entwickler immer gleich dargestellt werden und Elemente wiederkehrend sein um die Arbeit für die Programmierung zu vereinfachen.
Annika
April 7, 2021
Der Kurs hat mir sehr gut gefallen. Eine gute Einführung in das Programm, sehr verständlich und übersichtlich erklärt. Hin und wieder ein klein wenig zu langatmig, sollte man schon Vorwissen aus anderen Adobe Grafikprogrammen mitbringen.
Alexander
January 31, 2021
Ich bin echt begeistert von dem Kurs!
Man merkt richtig, dass der Dozent seine Sache gerne macht!
Man lernt viel und hat dabei auch noch richtig Spaß, indem man coole Projekte umsetzt - so soll es sein! :)
Charts
Price
Rating
Enrollment distribution
Related Topics
2309846
udemy ID
4/6/2019
course created date
10/29/2019
course indexed date
Bot
course submited by