- Grundlagen
- Was ist UX und UI Design
- User Experience & Usability Basics
- Anwendungen und Entwicklungsprozess eines Projekts richtig umsetzen
- User Research & Usability Testing
- Informationsarchitektur & Navigation
- Was ist Design Thinking
- Einführung in ein intuitives Web- und App-Design mit Figma
- Figma Programm Benutzeroberfläche
- Design Grundlagen
- Pattern Library Erstellung
- Wireframes und interaktive Prototypen
- Die Werkzeugpalette von Figma
- Die Browser-App im Vergleich zur Desktop-App
- Der Startbildschirm
- Einführung in die Benutzeroberfläche
- Importieren und Exportieren von Dateien
- Verwendung von Schablonen
- Die Symbolleiste
- Das Bedienfeld Ebenen und Seiten
- Das Anlagenfenster
- Das Design-Fenster
- Das Prototyp-Panel
- Das Code-Panel
- Die Leinwand
- Tastaturkürzel verwenden
- Workflow
- Professionelle Dateieinrichtung mit Figma;
- Freigabe von Entwürfen für die Entwicklung mit Figma;
- Einrichten von zugänglichen Stilen für Farbe, Typografie und Abstandssysteme;
- Einrichten von Komponentenbibliotheken und Spezifikationen für wiederverwendbare Elemente;
- Exportieren und gemeinsame Nutzung von Assets für verschiedene Bildschirmauflösungen;
- Verstehen verschiedener Möglichkeiten, mit responsivem Design und Rastern umzugehen und diese zu demonstrieren
- Wireframes und APP Mockups
- Gestaltungsraster einrichten von Figma
- Wireframe-Modell anlegen
- Ausarbeitung eines Wireframes zum Mockup
- Prototyping
- Usability (User Interface Design & Styleguide)
- Interaktive Prototypen
- Projekt Definition
- Verbindungen von Zeichenfläche und Objekten konfigurieren
- Strukturierung des Inhalts
- Erstellung des Layouts in der Sketch/Figma/XD-App (Mobile-First-Ansatz)
- Einbettung von Schriften, Icons und Grafiken
- Prototyping mit InVision (Navigation, Interaktionen, Optimierung für Touch)
- Testen auf einem realen Gerät
- Überprüfung von UI-Design-Tools
- Kommentarfunktion design Klick-Modell
- Prototypen in Workflow übertragen und präsentieren
- Verwendung von Figma-Plug-ins
- Wie man Plug-ins findet
- Laden von Plug-ins
- Microsoft Power Apps
- Apps aus Figma UI erstellen
LernzieleSeminarziele sind:
- Beschreiben, vergleichen und kontrastieren die Bereiche UI- und UX-Design
- Anwendung beliebter Methoden wie Double Diamond und Design Thinking
- Verstehen der Bedeutung des Wireframing im Designprozess
- Identifizierung verschiedener Web-Elemente und ihrer gemeinsamen Wireframe-Darstellungen
- Entwerfen und Skizzieren von Konzepten für Websites und mobile Anwendungen entsprechend den vorgegebenen Anforderungen
- Verwendung von Figma zur Erstellung ausgefeilter Wireframes und interaktiver Prototypen
ZielgruppenWeb-Designer:innen, Entwickler:innen von Softwareanwendungen, UI/UX-Designer:innen.
Alle, die Job- oder Karriereaussichten in einer Büroumgebung verbessern möchten.
