Seminar Moqups – UI-Design von Low-Fidelity bis High-Fidelity

Das Seminar trennt bewusst Strukturentscheidungen von visueller Ausarbeitung. Ein vorhandener Low-Fidelity-Entwurf wird schrittweise verfeinert, ohne Informationsarchitektur, Bedienlogik oder Umsetzbarkeit durch rein dekorative Entscheidungen zu überdecken.

Drei Tage sind notwendig, weil Layoutsystem, visuelle Sprache, Komponenten, Zustände, responsive Varianten und Qualitätsprüfung in mehreren aufeinander aufbauenden Iterationen praktisch entwickelt werden.

Inhaltsverzeichnis

• Zielgruppe und Voraussetzungen
• Seminarinhalte
  • Tag 1 – Fidelity-Strategie und Ausgangsanalyse
  • Tag 1 – Raster, Abstände und visuelle Hierarchie
  • Tag 1 – Typografie und reale Inhalte
  • Tag 2 – Farbe, Bildsprache und visuelle Zustände
  • Tag 2 – Komponenten und Varianten
  • Tag 2 – Formulare und datenreiche Oberflächen
  • Tag 3 – Responsive Prioritäten und Varianten
  • Tag 3 – Barrierefreiheit, Review und Übergabe
• Praxisübungen
• Qualitätskriterien und Abnahme

Zielgruppe und Voraussetzungen

Zielgruppe: UX- und UI-Design, Produktdesign, Frontend-Konzeption, Produktmanagement und Fachkonzeption mit Verantwortung für visuell ausgearbeitete Benutzeroberflächen.

Voraussetzungen: Sichere Moqups-Grundkenntnisse und Erfahrung mit Wireframes. Grundverständnis für Layout, Typografie und digitale Bedienmuster ist hilfreich.

Seminarinhalte

1. Tag 1 – Fidelity-Strategie und Ausgangsanalyse

Der bestehende Wireframe wird auf Reife, Lücken und notwendige Detailtiefe geprüft.

1. Schritt 1: Zielgruppe, Review-Zweck und erwartete Umsetzungsentscheidung festlegen.
2. Schritt 2: Struktur, Inhalte, Zustände und Interaktionen des Ausgangsentwurfs inventarisieren.
3. Schritt 3: Bereiche mit hoher Unsicherheit oder hohem Umsetzungsrisiko markieren.
4. Schritt 4: Verbindlichen Fidelity-Umfang für Kernseiten und Varianten definieren.

2. Tag 1 – Raster, Abstände und visuelle Hierarchie

Ein konsistentes Layoutsystem bildet die Grundlage aller weiteren Ausarbeitung.

1. Schritt 1: Seitenraster, Inhaltsbreiten, Spalten und Ausrichtungsachsen festlegen.
2. Schritt 2: Abstandsskala für Außenabstände, Gruppen und Elementbeziehungen definieren.
3. Schritt 3: Hierarchie über Größe, Gewicht, Position und Freiraum entwickeln.
4. Schritt 4: Layoutregeln an mehreren Seiten und Inhaltsdichten gegenprüfen.

3. Tag 1 – Typografie und reale Inhalte

Text wird als funktionaler Bestandteil der Oberfläche behandelt.

1. Schritt 1: Typografische Rollen für Überschrift, Fließtext, Beschriftung und Status bestimmen.
2. Schritt 2: Reale Textlängen, Zahlenwerte und Fehlermeldungen einsetzen.
3. Schritt 3: Umbruch, Kürzung, Mehrsprachigkeit und dynamische Inhalte simulieren.
4. Schritt 4: Lesbarkeit und Informationspriorität in unterschiedlichen Nutzungssituationen prüfen.

4. Tag 2 – Farbe, Bildsprache und visuelle Zustände

Farbe und Medien werden mit Bedeutung, Kontrast und Markenwirkung verbunden.

1. Schritt 1: Neutrale, primäre, semantische und interaktive Farbrollen abgrenzen.
2. Schritt 2: Kontrast und Unterscheidbarkeit für Text, Status und Bedienelemente prüfen.
3. Schritt 3: Bild-, Icon- und Illustrationsstil für den Anwendungskontext festlegen.
4. Schritt 4: Hover-, Fokus-, Aktiv-, Deaktiviert- und Auswahlzustände gestalten.

5. Tag 2 – Komponenten und Varianten

Wiederkehrende Muster werden als wartbare Designbausteine organisiert.

1. Schritt 1: Buttons, Eingaben, Navigation, Karten und Meldungen als Komponenten anlegen.
2. Schritt 2: Größe, Zustand und semantische Variante in einer Komponentenmatrix erfassen.
3. Schritt 3: Instanzen auf mehreren Seiten einsetzen und lokale Inhalte überschreiben.
4. Schritt 4: Zentrale Änderungen, Reset und Ablösung an einem kontrollierten Beispiel testen.

6. Tag 2 – Formulare und datenreiche Oberflächen

Komplexe Interaktion wird mit realistischen Zuständen und Rückmeldungen ausgearbeitet.

1. Schritt 1: Formulargruppen, Pflichtangaben, Hilfetexte und Validierungshierarchie definieren.
2. Schritt 2: Leere, befüllte, fehlerhafte und gesperrte Zustände gestalten.
3. Schritt 3: Tabellen, Filter, Auswahl und Massenaktionen visuell ordnen.
4. Schritt 4: Rückmeldungen für Speichern, Fortschritt, Fehler und Erfolg ergänzen.

7. Tag 3 – Responsive Prioritäten und Varianten

Der Entwurf wird für unterschiedliche Breiten und Nutzungskontexte belastbar gemacht.

1. Schritt 1: Inhalte nach unverzichtbar, verschiebbar, zusammenfassbar und ausblendbar priorisieren.
2. Schritt 2: Schlüsselansichten für breite und schmale Darstellung entwerfen.
3. Schritt 3: Navigation, Tabellen und komplexe Formulare für reduzierte Breite anpassen.
4. Schritt 4: Konsistenz von Inhalt, Aktion und Status zwischen Varianten prüfen.

8. Tag 3 – Barrierefreiheit, Review und Übergabe

Der ausgearbeitete Stand wird anhand nachvollziehbarer Kriterien geprüft und dokumentiert.

1. Schritt 1: Kontrast, Fokusreihenfolge, Bezeichnungen und nichtfarbliche Statussignale prüfen.
2. Schritt 2: Designreview mit fachlichen, visuellen und technischen Prüffragen durchführen.
3. Schritt 3: Entscheidungen, offene Punkte und Abweichungen direkt am Projekt dokumentieren.
4. Schritt 4: Freigegebenen Stand mit Komponentenübersicht und Umsetzungsnotizen übergeben.

Praxisübungen

• Überarbeitung eines Low-Fidelity-Wireframes mit Raster, Abstandsskala und visueller Hierarchie.
• Definition einer kleinen typografischen und farblichen Designsprache mit Zuständen.
• Aufbau zentraler Komponenten und Varianten für mehrere Seiten.
• Erstellung einer schmalen Darstellungsvariante für eine komplexe Kernseite.
• Durchführung eines Designreviews mit dokumentierten Entscheidungen und offenen Punkten.

Qualitätskriterien und Abnahme

• Layout, Abstände, Typografie und Farbe folgen nachvollziehbaren Regeln.
• Reale Inhalte und kritische Zustände sind vollständig berücksichtigt.
• Wiederkehrende Muster sind als konsistente Komponenten und Varianten umgesetzt.
• Breite und schmale Darstellung bewahren dieselben Nutzerziele und Informationen.
• Barrierefreiheits- und Übergabekriterien sind sichtbar geprüft und dokumentiert.