Seminar Pencil Project – Vorlagen, Designsysteme und Komponentenbibliotheken

Beschreibung

Wiederverwendbare Vorlagen und Komponenten sorgen für konsistente Prototypen und schnellere Iterationen. Das Seminar überführt Typografie, Farben, Abstände, Raster, UI-Komponenten, Varianten und Zustände in eine strukturierte Pencil-Bibliothek. Dabei werden Vorlagenseiten, Hintergrundseiten, Komponentenübersichten, Benennungsregeln und Governance miteinander verbunden.

Inhaltsübersicht

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

Lernziele

• Designgrundlagen und wiederkehrende UI-Muster als konsistentes System strukturieren.
• Vorlagen-, Hintergrund- und Übersichtsseiten für effiziente Wiederverwendung aufbauen.
• Komponenten mit Varianten, Zuständen und klarer Benennung dokumentieren.
• Abweichungen, Veraltung, Änderungen und Freigaben nachvollziehbar steuern.
• Designsystem-Bausteine in Web-, Mobile- und Desktop-Prototypen konsistent anwenden.

Schrittweise Seminarinhalte

1. Systemgrenze und Designprinzipien

Schwerpunkt: Produktbereich, Plattformen, Nutzergruppen, Prinzipien, Abdeckung, Verantwortlichkeiten, Qualitätsziele und Ausnahmen.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Systemgrenze und Designprinzipien“ anhand von Produktbereich, Plattformen, Nutzergruppen, Prinzipien, Abdeckung, Verantwortlichkeiten, Qualitätsziele und Ausnahmen 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. Grundlagen und visuelle Token

Schwerpunkt: Typografie, Farben, Abstände, Raster, Radien, Linien, Icons, Zustandsfarben, Benennung und Beispielwerte.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Grundlagen und visuelle Token“ anhand von Typografie, Farben, Abstände, Raster, Radien, Linien, Icons, Zustandsfarben, Benennung und Beispielwerte 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. Vorlagen- und Hintergrundseiten

Schwerpunkt: Seitenrahmen, Navigation, Header, Footer, Raster, gemeinsame Links, Varianten, Abhängigkeiten und Änderungswirkung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Vorlagen- und Hintergrundseiten“ anhand von Seitenrahmen, Navigation, Header, Footer, Raster, gemeinsame Links, Varianten, Abhängigkeiten und Änderungswirkung 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. Komponenten und Varianten

Schwerpunkt: Buttons, Eingaben, Auswahl, Karten, Tabellen, Navigation, Dialoge, Normal-, Hover-, Fokus-, Fehler- und Deaktiviert-Zustand.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Komponenten und Varianten“ anhand von Buttons, Eingaben, Auswahl, Karten, Tabellen, Navigation, Dialoge, Normal-, Hover-, Fokus-, Fehler- und Deaktiviert-Zustand 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. Dokumentations- und Beispielseiten

Schwerpunkt: Anatomie, Zweck, Einsatz, Varianten, Do und Don’t, Inhaltsregeln, Grenzfälle, Änderungsstand und Verantwortlichkeit.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Dokumentations- und Beispielseiten“ anhand von Anatomie, Zweck, Einsatz, Varianten, Do und Don’t, Inhaltsregeln, Grenzfälle, Änderungsstand und Verantwortlichkeit 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. Governance und Qualitätsprüfung

Schwerpunkt: Antrag, Review, Freigabe, Version, Veraltung, Migration, Abweichung, Konsistenzcheck und Rollout in Projektdateien.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Governance und Qualitätsprüfung“ anhand von Antrag, Review, Freigabe, Version, Veraltung, Migration, Abweichung, Konsistenzcheck und Rollout in Projektdateien 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

• Aufbau einer Grundlagen-Seite für Typografie, Farben, Raster und Abstände.
• Erstellung einer Komponentenbibliothek mit Varianten und relevanten Zuständen.
• Einrichtung einer Hintergrundseite mit gemeinsamer Navigation und Linklogik.
• Durchführung eines Governance-Falls von Änderungsantrag bis Migration einer veralteten Variante.

Zielgruppe und Voraussetzungen

Zielgruppe: UX-Designer, Designsystem-Teams, Product Owner, Frontend-Entwickler, technische Redakteure und Tool-Verantwortliche.

Voraussetzungen: Grundkenntnisse in UI-Design und Pencil Project; Erfahrung mit Komponentenmodellen ist hilfreich.

Didaktik und Arbeitsweise

Kurze Theorieblöcke, Demonstrationen und aufeinander aufbauende Übungen wechseln sich ab. Ein durchgehendes Beispieldokument wird mehrfach geprüft, korrigiert und in einen nachvollziehbaren Arbeitsstand überführt.