UX/UI-Design mit Figma komplett

Seminarziel

• 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
  
  

Inhalt

• 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