Seminar Pencil Project – Web- und Responsive-Prototyping

Beschreibung

Web-Prototypen müssen unterschiedliche Inhaltsbreiten, Navigationsmuster und Eingabegeräte berücksichtigen. Da Pencil Project keine automatische responsive Laufzeit simuliert, werden Breakpoints als getrennte, miteinander verknüpfte Seitenvarianten modelliert. Das Seminar behandelt Raster, Inhaltspriorität, Navigation, Formulare, Tabellen, Zustände und eine konsistente Klickstrecke über Desktop-, Tablet- und Mobilansichten.

Inhaltsübersicht

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

Lernziele

• Webinhalte und Funktionen für unterschiedliche Bildschirmbreiten priorisieren.
• Desktop-, Tablet- und Mobilvarianten als konsistente Seitenfamilie modellieren.
• Raster, Navigation, Formulare, Tabellen und Inhaltsmodule breakpointgerecht anpassen.
• Gemeinsame Komponenten und Varianten nachvollziehbar verwalten.
• Eine klickbare Kernstrecke über mehrere Breakpoints prüfen und präsentieren.

Schrittweise Seminarinhalte

1. Webanforderungen und Breakpoint-Strategie

Schwerpunkt: Nutzeraufgaben, Inhalte, Geräteklassen, Mindestbreiten, Prioritäten, progressive Reduktion, Annahmen und Akzeptanzkriterien.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Webanforderungen und Breakpoint-Strategie“ anhand von Nutzeraufgaben, Inhalte, Geräteklassen, Mindestbreiten, Prioritäten, progressive Reduktion, Annahmen 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.

2. Raster, Seitenrahmen und Inhaltsmodule

Schwerpunkt: Container, Spalten, Abstände, Header, Footer, Karten, Medien, Textlängen, Ausrichtung und vertikale Rhythmik.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Raster, Seitenrahmen und Inhaltsmodule“ anhand von Container, Spalten, Abstände, Header, Footer, Karten, Medien, Textlängen, Ausrichtung und vertikale Rhythmik 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. Navigation über Bildschirmbreiten

Schwerpunkt: Mega- oder Hauptnavigation, kompakte Navigation, Menüs, Tabs, Breadcrumbs, Suche, Kontextaktionen und Wechselregeln.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Navigation über Bildschirmbreiten“ anhand von Mega- oder Hauptnavigation, kompakte Navigation, Menüs, Tabs, Breadcrumbs, Suche, Kontextaktionen und Wechselregeln 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. Formulare, Tabellen und datenreiche Ansichten

Schwerpunkt: Feldanordnung, Beschriftung, Gruppierung, Spaltenreduktion, Kartenersatz, horizontale Bereiche, Filter und Sammelaktionen.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Formulare, Tabellen und datenreiche Ansichten“ anhand von Feldanordnung, Beschriftung, Gruppierung, Spaltenreduktion, Kartenersatz, horizontale Bereiche, Filter und Sammelaktionen 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. Komponenten, Zustände und Varianten

Schwerpunkt: Normal, Hover-Annahme, Fokus, Fehler, leer, laden, deaktiviert, kompakt, erweitert und gemeinsame Vorlagenseiten.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Komponenten, Zustände und Varianten“ anhand von Normal, Hover-Annahme, Fokus, Fehler, leer, laden, deaktiviert, kompakt, erweitert und gemeinsame Vorlagenseiten 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. Breakpoint-Klickstrecke und Review

Schwerpunkt: getrennte Seitenvarianten, Linkziele, Kernaufgabe, Rücksprung, Inhaltsgleichheit, Abweichungen, Export und Vergleichsansicht.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Breakpoint-Klickstrecke und Review“ anhand von getrennte Seitenvarianten, Linkziele, Kernaufgabe, Rücksprung, Inhaltsgleichheit, Abweichungen, Export und Vergleichsansicht 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

• Entwurf einer Desktop-, Tablet- und Mobilvariante derselben Inhaltsseite.
• Umsetzung einer Navigation mit definierten Wechselregeln zwischen breiter und schmaler Ansicht.
• Anpassung eines datenreichen Formular- oder Tabellenablaufs an mehrere Breiten.
• Erstellung einer verknüpften Kernstrecke und strukturierter Breakpoint-Vergleich.

Zielgruppe und Voraussetzungen

Zielgruppe: UX-Designer, Webentwickler, Product Owner, Business-Analysten, Content-Verantwortliche und technische Redakteure.

Voraussetzungen: Grundkenntnisse in Weboberflächen und einfache Pencil-Bedienung.

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.