Seminar Moqups – Grundlagen für Wireframes und Mockups

Das Seminar führt von einer ersten Projektidee zu einem strukturierten, mehrseitigen Wireframe. Bedienung, visuelle Hierarchie und Zusammenarbeit werden in einem durchgängigen Beispiel verbunden.

Zwei Tage sind erforderlich, damit Grundbedienung, Layoutregeln und ein vollständiger Wireframing-Prozess mit mehreren Seiten praktisch eingeübt und in einer Review-Runde verbessert werden können.

Inhaltsverzeichnis

• Zielgruppe und Voraussetzungen
• Seminarinhalte
  • Arbeitsoberfläche und Projektstart
  • Stencils, Icons, Bilder und Text
  • Formatierung, Raster und Ausrichtung
  • Low-Fidelity-Wireframe
  • Vom Wireframe zum Mockup
  • Kommentare, Preview und erste Freigabe
• Praxisübungen
• Qualitätskriterien und Abnahme

Zielgruppe und Voraussetzungen

Zielgruppe: Einsteiger in UX und UI, Produktmanagement, Business Analyse, Fachkonzeption, Projektleitung, Entwicklung und alle Rollen, die Oberflächenideen früh visualisieren müssen.

Voraussetzungen: Sicherer Umgang mit einem aktuellen Webbrowser. Erfahrungen mit UX, Designsoftware oder Programmierung sind nicht erforderlich.

Seminarinhalte

1. Arbeitsoberfläche und Projektstart

Die wichtigsten Bereiche der Anwendung werden anhand eines neuen Projekts erschlossen.

1. Schritt 1: Projekt anlegen und einen eindeutigen Namen sowie Zweck festhalten.
2. Schritt 2: Seiten-, Stencil-, Format-, Outline- und Kommentarbereiche öffnen und einordnen.
3. Schritt 3: Zoom, Arbeitsfläche, Auswahl und grundlegende Tastaturbefehle testen.
4. Schritt 4: Eine Startstruktur mit Entwurfs-, Bibliotheks- und Review-Seite erstellen.

2. Stencils, Icons, Bilder und Text

Inhalte werden aus geeigneten Objekttypen aufgebaut und verständlich benannt.

1. Schritt 1: UI-Stencils und Smart Shapes per Klick oder Drag-and-drop platzieren.
2. Schritt 2: Icons und Bilder ergänzen, zuschneiden und proportional ausrichten.
3. Schritt 3: Textobjekte für Überschriften, Labels, Hinweise und Fließtext einsetzen.
4. Schritt 4: Objekte im Outline-Bereich nachvollziehbar benennen und gruppieren.

3. Formatierung, Raster und Ausrichtung

Einheitliche Regeln verhindern zufällige Abstände und visuelle Unruhe.

1. Schritt 1: Seitenformat und Raster passend zum Zielgerät definieren.
2. Schritt 2: Führungslinien, Einrasten, Messen und Ausrichten aktiv verwenden.
3. Schritt 3: Flächen, Konturen, Typografie, Ecken und Schatten gezielt formatieren.
4. Schritt 4: Einen Standardstil für wiederkehrende Elemente festlegen und anwenden.

4. Low-Fidelity-Wireframe

Der erste Entwurf konzentriert sich auf Struktur, Priorität und Nutzerweg.

1. Schritt 1: Inhalte und Aktionen nach Nutzerziel priorisieren.
2. Schritt 2: Seitenbereiche für Navigation, Hauptinhalt, Nebeninhalt und Aktionen anlegen.
3. Schritt 3: Formulare, Listen und Rückmeldungen mit einfachen Platzhaltern darstellen.
4. Schritt 4: Alternative Anordnung schnell duplizieren und anhand definierter Kriterien vergleichen.

5. Vom Wireframe zum Mockup

Der Entwurf erhält kontrolliert mehr visuelle und inhaltliche Genauigkeit.

1. Schritt 1: Reale Texte, typische Datenmengen und passende Bildformate einsetzen.
2. Schritt 2: Typografie, Farbe und visuelle Zustände schrittweise ergänzen.
3. Schritt 3: Desktop- und schmalere Varianten anlegen und Prioritäten anpassen.
4. Schritt 4: Konsistenz von Navigation, Formelementen und Rückmeldungen seitenübergreifend prüfen.

6. Kommentare, Preview und erste Freigabe

Der Entwurf wird für eine strukturierte Rückmeldung vorbereitet.

1. Schritt 1: Prüffragen direkt an relevanten Bereichen als Kommentare platzieren.
2. Schritt 2: Kommentarstatus und Zuständigkeit für offene Punkte festlegen.
3. Schritt 3: Seiten in Preview prüfen und Navigationsreihenfolge kontrollieren.
4. Schritt 4: Überarbeitete Version für eine kurze Freigaberunde bereitstellen.

Praxisübungen

• Erstellung eines mehrseitigen Low-Fidelity-Wireframes für einen Web- oder App-Prozess.
• Überarbeitung einer Seite zu einem konsistenten Mid-Fidelity-Mockup.
• Anlage einer schmaleren Seitenvariante mit angepasster Informationspriorität.
• Durchführung eines strukturierten Reviews mit Kommentaren und dokumentierten Entscheidungen.

Qualitätskriterien und Abnahme

• Seitenstruktur und Nutzerweg sind ohne zusätzliche Erklärung nachvollziehbar.
• Abstände, Ausrichtung, Typografie und Objektbenennung sind konsistent.
• Inhalte und Datenmengen sind realistisch genug für eine belastbare Bewertung.
• Wichtige Zustände und Rückmeldungen sind dargestellt.
• Review-Fragen und offene Punkte sind eindeutig zugeordnet.