Seminar Moqups – Intensivseminar Komplettprogramm für Produktteams

Das Komplettprogramm führt sämtliche angebotenen Moqups-Themen in einem durchgängigen Produktprojekt zusammen. Jeder Themenblock endet mit einem prüfbaren Projektstand, der am Folgetag weiterverwendet und erweitert wird.

Fünf Tage sind die maximal sinnvolle Verdichtung, um sämtliche Einzelseminare in einem zusammenhängenden Projekt zu überblicken und die wichtigsten Arbeitsschritte praktisch auszuführen; die fachliche Tiefe der jeweiligen Spezialseminare wird dabei bewusst komprimiert.

Inhaltsverzeichnis

• Zielgruppe und Voraussetzungen
• Seminarinhalte
  • Tag 1 – Arbeitsumgebung, Projekte und Wireframes
  • Tag 2 – Informationsarchitektur und UI-Fidelity
  • Tag 2 – Komponenten, Vorlagen und Assets
  • Tag 3 – Diagramme, Daten und Whiteboarding
  • Tag 4 – Prototyping und interaktive Prüfung
  • Tag 4 – Zusammenarbeit, Kommentare und Freigabe
  • Tag 5 – Export, Migration und Integrationen
  • Tag 5 – Administration, Governance und Abschlussprojekt
• Praxisübungen
• Qualitätskriterien und Abnahme

Zielgruppe und Voraussetzungen

Zielgruppe: Interdisziplinäre Produktteams, UX- und UI-Design, Produktmanagement, Business Analyse, Projektleitung, Entwicklung, Collaboration-Verantwortung und Teamadministration.

Voraussetzungen: Sicherer Umgang mit einem Webbrowser und Erfahrung in digitalen Projekten. Für die administrativen und Integrationsanteile sind Grundkenntnisse zu Rollen, Berechtigungen und Kollaborationsplattformen hilfreich.

Seminarinhalte

1. Tag 1 – Arbeitsumgebung, Projekte und Wireframes

Der erste Tag schafft eine belastbare Projektstruktur und einen vollständigen Low-Fidelity-Entwurf.

1. Schritt 1: Projekt, Seitenbaum, Ordner, Benennung und Statusmodell anlegen.
2. Schritt 2: Stencils, Icons, Bilder und Textobjekte zielgerichtet einsetzen.
3. Schritt 3: Raster, Führungslinien, Ausrichtung und Standardstile definieren.
4. Schritt 4: Mehrseitigen Wireframe für einen zentralen Produktprozess erstellen.

2. Tag 2 – Informationsarchitektur und UI-Fidelity

Struktur und Nutzerwege werden mit präziseren Mockups verbunden.

1. Schritt 1: Inhaltsinventar, Taxonomie und Sitemap aus den Produktzielen ableiten.
2. Schritt 2: User Flow mit Haupt-, Fehler- und Berechtigungspfaden modellieren.
3. Schritt 3: Wireframes zu Mid- und High-Fidelity-Varianten weiterentwickeln.
4. Schritt 4: Typografie, Farbe, reale Inhalte und responsive Prioritäten prüfen.

3. Tag 2 – Komponenten, Vorlagen und Assets

Wiederverwendung wird früh in den Entwurfsprozess integriert.

1. Schritt 1: Grundlegende UI-Bausteine als Komponenten anlegen.
2. Schritt 2: Instanzen auf mehreren Seiten verwenden und zentral aktualisieren.
3. Schritt 3: Overrides, Reset und Ablösung anhand definierter Varianten testen.
4. Schritt 4: Objekt-, Projekt- und Teamvorlagen sowie Asset-Struktur unterscheiden.

4. Tag 3 – Diagramme, Daten und Whiteboarding

Fachliche Modelle und Workshop-Inhalte werden im selben Projektkontext aufgebaut.

1. Schritt 1: Prozess als Flowchart einschließlich Ausnahmen modellieren.
2. Schritt 2: Use-Case-, Architektur- oder ERD-Sicht für das Fallbeispiel ergänzen.
3. Schritt 3: Tabelle, Kennzahlenkarten und geeignete Diagramme für eine Dashboard-Seite erstellen.
4. Schritt 4: Workshop-Seite für Ideen, Cluster, Priorisierung und nächste Arbeitsschritte moderieren.

5. Tag 4 – Prototyping und interaktive Prüfung

Seiten und Zustände werden zu einem prüfbaren Interaktionsmodell verbunden.

1. Schritt 1: Trigger, Aktionen und Ziele für zentrale Bedienpfade definieren.
2. Schritt 2: Navigation, Hotspots, Rückwege und externe Spezifikationsziele abgrenzen.
3. Schritt 3: Preview mit Startseite, alternativen Pfaden und Fehlerfällen testen.
4. Schritt 4: Beobachtungen aus einem moderierten Nutzungstest direkt am Projekt dokumentieren.

6. Tag 4 – Zusammenarbeit, Kommentare und Freigabe

Rückmeldungen werden als kontrollierter Entscheidungsprozess organisiert.

1. Schritt 1: Teamzugriff und projektbezogene Rollen für Bearbeitung und Review festlegen.
2. Schritt 2: Kommentare nach Frage, Befund, Entscheidung und Aufgabe strukturieren.
3. Schritt 3: Benachrichtigungen, Statuswerte und Review-Fristen definieren.
4. Schritt 4: Änderungen einarbeiten und einen freigabefähigen Stand kennzeichnen.

7. Tag 5 – Export, Migration und Integrationen

Der Projektstand wird in bestehende Arbeitsumgebungen eingebettet und veröffentlichungsfähig gemacht.

1. Schritt 1: PNG-, PDF- und HTML-Viewer-Export mit passenden Optionen durchführen.
2. Schritt 2: Import- und Bereinigungspfad für Figma-, Balsamiq- oder Webinhalte erproben.
3. Schritt 3: Jira-, Confluence-, Drive- und Slack-Szenarien mit führendem Projektstand planen.
4. Schritt 4: Zugriffs-, Synchronisations- und Rückfalltests dokumentieren.

8. Tag 5 – Administration, Governance und Abschlussprojekt

Das Gesamtprojekt erhält ein Betriebs- und Qualitätsmodell.

1. Schritt 1: Team- und Rollenmatrix für interne sowie externe Beteiligte erstellen.
2. Schritt 2: Vorlagen-, Asset-, Archivierungs- und Freigaberegeln festlegen.
3. Schritt 3: SSO- und SCIM-Einführung als kontrollierten Lebenszyklus skizzieren.
4. Schritt 4: Gesamtprojekt anhand fachlicher, gestalterischer und administrativer Kriterien abnehmen.

Praxisübungen

• Durchgängiges Produktprojekt von der Informationsarchitektur bis zum interaktiven Prototyp.
• Aufbau einer kleinen Komponenten- und Vorlagenbibliothek innerhalb des Projekts.
• Ergänzung von Prozess-, Daten- und Workshop-Sichten in einem gemeinsamen Arbeitsraum.
• Durchführung von Review, Export, Integrationsplanung und Governance-Abnahme.

Qualitätskriterien und Abnahme

• Projektstruktur, Benennung und Statusmodell sind durchgängig konsistent.
• Sitemap, User Flow, Wireframes und Prototyp verwenden dieselben Begriffe und Zustände.
• Komponenten, Diagramme, Datenvisualisierungen und Workshop-Seiten sind nachvollziehbar organisiert.
• Review, Export und Integrationspfad wurden praktisch geprüft.
• Rollen, Governance und Betriebsanforderungen sind dokumentiert.
• Der Abschlussstand deckt alle spezialisierten Seminarbereiche in komprimierter Form ab.