Herzlich Willkommen im Adobe XD Kurs
- Begrüßung, Bewertungen, Fragen, Wünsche & Antworten :)
- Keine Entwicklungssoftware! Was ist Adobe XD und was ist es nicht?
- 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 UI-Kit unter Windows nicht nutzbar
- 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
Neue Features in Adobe XD
- Elemente / Komponenten in 3D darstellen
- Schlaue Auto-Animate Funktion nutzen
- Sound-Aktion nach Klick auf Element im Prototyp-Modus
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
