Seminar Moqups – Kompaktseminar für Wireframes, Prototypen und Zusammenarbeit

Das Kompaktformat konzentriert sich auf die häufigsten Arbeitsabläufe von Produktteams. Administration, Enterprise-Identitätsverwaltung und tiefgehende Integrationskonfiguration werden nur eingeordnet und bleiben den Spezialseminaren vorbehalten.

Drei Tage sind erforderlich, um die Kernfunktionen nicht nur zu demonstrieren, sondern in einem mehrseitigen Projekt einschließlich Interaktionen, Review und Export praktisch zu verbinden.

Inhaltsverzeichnis

• Zielgruppe und Voraussetzungen
• Seminarinhalte
  • Tag 1 – Projektstruktur und Low-Fidelity-Wireframes
  • Tag 1 – Informationsarchitektur und User Flow
  • Tag 2 – Mockups und wiederverwendbare Bausteine
  • Tag 2 – Prototyping und Preview
  • Tag 3 – Zusammenarbeit und Review
  • Tag 3 – Diagramme, Präsentation und Export
• Praxisübungen
• Qualitätskriterien und Abnahme

Zielgruppe und Voraussetzungen

Zielgruppe: Produktteams, Projektleitung, Business Analyse, UX- und UI-Einsteiger, Fachkonzeption und Entwicklung mit Bedarf an einem kompakten Gesamtüberblick.

Voraussetzungen: Sicherer Umgang mit einem Webbrowser und grundlegende Erfahrung mit digitalen Produkten oder fachlichen Anforderungen. Designvorkenntnisse sind nicht erforderlich.

Seminarinhalte

1. Tag 1 – Projektstruktur und Low-Fidelity-Wireframes

Der erste Tag führt von der Projektidee zu einem klar gegliederten Seitenentwurf.

1. Schritt 1: Projekt, Seiten, Ordner und Benennungsregeln anlegen.
2. Schritt 2: Stencils, Icons, Bilder und Textobjekte sicher bedienen.
3. Schritt 3: Raster, Ausrichtung und grundlegende Formatierung verwenden.
4. Schritt 4: Zentralen Nutzerprozess als mehrseitigen Wireframe erstellen.

2. Tag 1 – Informationsarchitektur und User Flow

Seitenstruktur und Nutzerweg werden miteinander abgeglichen.

1. Schritt 1: Kernaufgaben und notwendige Inhalte priorisieren.
2. Schritt 2: Kompakte Sitemap und Seitentaxonomie modellieren.
3. Schritt 3: User Flow mit Entscheidungen und Fehlerfällen anlegen.
4. Schritt 4: Fehlende Seiten und Zustände im Wireframe ergänzen.

3. Tag 2 – Mockups und wiederverwendbare Bausteine

Der Entwurf wird präziser und konsistenter ausgearbeitet.

1. Schritt 1: Reale Inhalte, Typografie, Farbe und visuelle Zustände ergänzen.
2. Schritt 2: Wiederkehrende Elemente als Komponenten definieren.
3. Schritt 3: Instanzen und lokale Overrides kontrolliert einsetzen.
4. Schritt 4: Objektvorlagen für unabhängige Wiederverwendung anlegen.

4. Tag 2 – Prototyping und Preview

Bedienpfade werden interaktiv und prüfbar gemacht.

1. Schritt 1: Interaktionen für Navigation und zentrale Aktionen anlegen.
2. Schritt 2: Startseite, Hotspots und Rückwege festlegen.
3. Schritt 3: Preview für Haupt- und Alternativpfad durchlaufen.
4. Schritt 4: Unklare Zustände und fehlende Rückmeldungen markieren.

5. Tag 3 – Zusammenarbeit und Review

Rückmeldungen werden in einen strukturierten Änderungsprozess überführt.

1. Schritt 1: Bearbeitungs-, Kommentar- und Ansichtsrollen festlegen.
2. Schritt 2: Kommentare mit Fragestellung, Zuständigkeit und Status anlegen.
3. Schritt 3: Review anhand fachlicher und gestalterischer Prüffragen durchführen.
4. Schritt 4: Änderungen einarbeiten und überprüften Stand kennzeichnen.

6. Tag 3 – Diagramme, Präsentation und Export

Ergänzende Modelle und ein freigabefähiges Paket schließen das Projekt ab.

1. Schritt 1: Ein Prozess- oder User-Flow-Diagramm verfeinern.
2. Schritt 2: Projektseiten für eine verständliche Präsentation ordnen.
3. Schritt 3: Passenden PNG-, PDF- oder HTML-Viewer-Export konfigurieren.
4. Schritt 4: Abschlussstand mit Version, Status und offenen Punkten dokumentieren.

Praxisübungen

• Erstellung eines vollständigen Mini-Projekts mit Sitemap, Wireframes und interaktivem Hauptpfad.
• Aufbau einer kleinen Komponentenbibliothek mit Instanzen und Overrides.
• Review mit Kommentaren, Statuswerten und dokumentierten Änderungen.
• Präsentation und Export eines freigabefähigen Projektstands.

Qualitätskriterien und Abnahme

• Projekt, Seiten und Objekte sind nachvollziehbar benannt und geordnet.
• Informationsarchitektur und Interaktionspfad sind vollständig.
• Mockups nutzen konsistente Komponenten und visuelle Regeln.
• Kommentare und Statuswerte unterstützen eine verbindliche Review-Runde.
• Export und Präsentationsreihenfolge sind für die Zielgruppe geeignet.