Seminar Pencil Project – Intensivseminar UI/UX-Prototyping für Web, Mobile und Desktop

Beschreibung

Dieses Intensivformat führt von Installation und Grundlagen über Wireframing, Informationsarchitektur und Designsysteme bis zu Web-, Mobile- und Desktop-Prototypen. Klickstrecken, barrierearme Zustände, Reviews, Usability-Prüfungen und Exporte werden in einem durchgehenden Produktbeispiel verbunden. Das Seminar fasst die anwendungsorientierten Einzelseminare zu einem vollständigen Praxislehrgang zusammen.

Inhaltsübersicht

• Lernziele und fachliche Einordnung
• Schrittweise Seminarinhalte
• Praxisübungen
• Zielgruppe und Voraussetzungen
• Didaktik und Arbeitsweise

Lernziele

• Pencil Project sicher installieren, konfigurieren und produktiv bedienen.
• Informationsarchitektur, Wireframes und Designregeln für mehrere Plattformen aufbauen.
• Web-, Mobile- und Desktop-Oberflächen mit realistischen Zuständen prototypisieren.
• Interaktive Klickstrecken einschließlich Fehler-, Rollen- und barrierearmen Varianten erstellen.
• Prototypen reviewen, mit Nutzungsaufgaben prüfen, iterieren und in geeigneten Formaten ausgeben.

Schrittweise Seminarinhalte

1. Arbeitsumgebung und produktiver Grundworkflow

Schwerpunkt: Installation, Dokumente, Seiten, Collections, Shapes, Eigenschaften, Raster, Ebenen, Ressourcen, Sicherung und Projektstart.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Arbeitsumgebung und produktiver Grundworkflow“ anhand von Installation, Dokumente, Seiten, Collections, Shapes, Eigenschaften, Raster, Ebenen, Ressourcen, Sicherung und Projektstart bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

2. Anforderungen, Wireframes und Inhaltspriorität

Schwerpunkt: Nutzeraufgaben, Szenarien, Inhaltsinventar, Low-Fidelity-Struktur, Zustände, Varianten und Akzeptanzkriterien.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Anforderungen, Wireframes und Inhaltspriorität“ anhand von Nutzeraufgaben, Szenarien, Inhaltsinventar, Low-Fidelity-Struktur, Zustände, Varianten und Akzeptanzkriterien bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

3. Informationsarchitektur und Navigation

Schwerpunkt: Seitenbaum, Hierarchie, Einstiegspunkte, Haupt- und Kontextnavigation, Hintergrundseiten, Links und Sackgassencheck.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Informationsarchitektur und Navigation“ anhand von Seitenbaum, Hierarchie, Einstiegspunkte, Haupt- und Kontextnavigation, Hintergrundseiten, Links und Sackgassencheck bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

4. Designsystem und wiederverwendbare Komponenten

Schwerpunkt: Typografie, Farben, Abstände, Komponenten, Varianten, Status, Benennung, Vorlagenseiten und Konsistenzprüfung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Designsystem und wiederverwendbare Komponenten“ anhand von Typografie, Farben, Abstände, Komponenten, Varianten, Status, Benennung, Vorlagenseiten und Konsistenzprüfung bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

5. Web- und Breakpoint-Prototypen

Schwerpunkt: Desktop-, Tablet- und Mobilseiten, Raster, Navigation, Formulare, Tabellen, Inhaltsvarianten und getrennte Breakpoint-Seiten.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Web- und Breakpoint-Prototypen“ anhand von Desktop-, Tablet- und Mobilseiten, Raster, Navigation, Formulare, Tabellen, Inhaltsvarianten und getrennte Breakpoint-Seiten bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

6. Mobile App Prototyping

Schwerpunkt: Geräterahmen, mobile Navigation, Listen, Karten, Eingaben, Overlays, Berechtigungen, Offline-, Lade- und Fehlerzustände.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Mobile App Prototyping“ anhand von Geräterahmen, mobile Navigation, Listen, Karten, Eingaben, Overlays, Berechtigungen, Offline-, Lade- und Fehlerzustände bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

7. Desktop- und Fachanwendungen

Schwerpunkt: Arbeitsbereiche, Tabellen, Filter, Formulare, Dialoge, Rollen, Status, Sammelaktionen und datenintensive Abläufe.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Desktop- und Fachanwendungen“ anhand von Arbeitsbereiche, Tabellen, Filter, Formulare, Dialoge, Rollen, Status, Sammelaktionen und datenintensive Abläufe bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

8. Interaktive Klickstrecken und Barrierearmut

Schwerpunkt: Linkziele, Rücksprünge, Fokuspfade, Formulare, Fehlermeldungen, Dialoge, alternative Zustände und vollständiger Testlauf.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Interaktive Klickstrecken und Barrierearmut“ anhand von Linkziele, Rücksprünge, Fokuspfade, Formulare, Fehlermeldungen, Dialoge, alternative Zustände und vollständiger Testlauf bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

9. Review, Usability und Iteration

Schwerpunkt: Walkthrough, Heuristiken, Aufgaben, Beobachtung, Problemklassifikation, Priorisierung, Variantenvergleich und Korrekturschleife.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Review, Usability und Iteration“ anhand von Walkthrough, Heuristiken, Aufgaben, Beobachtung, Problemklassifikation, Priorisierung, Variantenvergleich und Korrekturschleife bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

10. Export, Präsentation und Übergabe

Schwerpunkt: Bild-, Web-, PDF- und SVG-Ausgabe, Linkprüfung, Startseite, Legende, Freigabestand, Präsentation und Archivierung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Export, Präsentation und Übergabe“ anhand von Bild-, Web-, PDF- und SVG-Ausgabe, Linkprüfung, Startseite, Legende, Freigabestand, Präsentation und Archivierung bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

Praxisübungen

• Entwicklung eines plattformübergreifenden Produkts mit Web-, Mobile- und Desktop-Ansichten.
• Aufbau eines kleinen Designsystems mit Komponenten-, Status- und Breakpoint-Varianten.
• Erstellung einer vollständigen Klickstrecke einschließlich Fehler- und Fokuszuständen.
• Durchführung von Review, Nutzungsaufgabe, Iteration und finaler Exportabnahme.

Zielgruppe und Voraussetzungen

Zielgruppe: UX-Designer, Product Owner, Business-Analysten, Entwickler, technische Redakteure und interdisziplinäre Produktteams.

Voraussetzungen: Allgemeine Kenntnisse digitaler Produkte; keine Pencil-Vorerfahrung erforderlich.

Didaktik und Arbeitsweise

Ein integriertes Gesamtprojekt verbindet alle Themenblöcke. Demonstration, angeleitete Umsetzung, eigenständige Vertiefung, Review, Korrektur und dokumentierte Freigabe bilden einen geschlossenen Lernpfad.