Seminar Pencil Project – Kompaktseminar Wireframes, Mockups und Klickprototypen

Beschreibung

Das Kompaktseminar vermittelt die wichtigsten Funktionen und Methoden für einen zügigen Praxiseinstieg. Arbeitsoberfläche, Seitenstruktur, Shapes, Wireframes, Komponenten, Web- und Mobile-Ansichten, Inter-page Links sowie Export werden in einem verdichteten Projekt verbunden. Das Format liegt bewusst zwischen Grundlagenschulung und fünftägigem Intensivlehrgang.

Inhaltsübersicht

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

Lernziele

• Pencil Project sicher bedienen und Dokumente strukturiert organisieren.
• Low- und Mid-Fidelity-Wireframes mit konsistenten Komponenten aufbauen.
• Web- und Mobile-Ansichten als zusammengehörige Seitenfamilie entwerfen.
• Eine vollständige Klickstrecke mit Normal- und Fehlerpfad erstellen.
• Prototypen reviewen und als Bild-, Web- oder PDF-Ausgabe weitergeben.

Schrittweise Seminarinhalte

1. Arbeitsoberfläche und Grundfunktionen

Schwerpunkt: Dokument, Seiten, Collections, Shapes, Eigenschaften, Raster, Auswahl, Ausrichtung, Gruppierung, Ebenen und Speicherung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Arbeitsoberfläche und Grundfunktionen“ anhand von Dokument, Seiten, Collections, Shapes, Eigenschaften, Raster, Auswahl, Ausrichtung, Gruppierung, Ebenen und Speicherung 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. Wireframing und Inhaltsstruktur

Schwerpunkt: Nutzeraufgaben, Inhaltspriorität, Seitenraster, Navigation, Formulare, Listen, Karten, Dialoge und Zustände.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Wireframing und Inhaltsstruktur“ anhand von Nutzeraufgaben, Inhaltspriorität, Seitenraster, Navigation, Formulare, Listen, Karten, Dialoge und Zustä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.

3. Komponenten und Vorlagenseiten

Schwerpunkt: wiederkehrende Elemente, Benennung, Varianten, Status, gemeinsame Rahmen, Hintergrundseiten und Konsistenz.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Komponenten und Vorlagenseiten“ anhand von wiederkehrende Elemente, Benennung, Varianten, Status, gemeinsame Rahmen, Hintergrundseiten und Konsistenz 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. Web- und Mobile-Varianten

Schwerpunkt: Desktopseite, schmaler Breakpoint, mobile Navigation, Touch-Ziele, Formularanpassung und Inhaltsreduktion.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Web- und Mobile-Varianten“ anhand von Desktopseite, schmaler Breakpoint, mobile Navigation, Touch-Ziele, Formularanpassung und Inhaltsreduktion 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. Klickprototyp und User Flow

Schwerpunkt: Inter-page Links, klickbare Flächen, Startseite, Entscheidungen, Fehlerpfad, Rücksprung und vollständiger Testlauf.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Klickprototyp und User Flow“ anhand von Inter-page Links, klickbare Flächen, Startseite, Entscheidungen, Fehlerpfad, Rücksprung 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.

6. Review, Iteration und Export

Schwerpunkt: Walkthrough, Prüfliste, Priorisierung, Korrektur, Bild-, Web- und PDF-Ausgabe, Linkcheck und Übergabestand.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Review, Iteration und Export“ anhand von Walkthrough, Prüfliste, Priorisierung, Korrektur, Bild-, Web- und PDF-Ausgabe, Linkcheck und Übergabestand 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. Abschlussprojekt und Präsentation

Schwerpunkt: Briefing, Seitenbaum, Komponenten, Kernstrecke, Varianten, Exportpaket und strukturierte Vorstellung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Abschlussprojekt und Präsentation“ anhand von Briefing, Seitenbaum, Komponenten, Kernstrecke, Varianten, Exportpaket und strukturierte Vorstellung 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

• Erstellung eines kompakten Seitenbaums mit Web- und Mobile-Ansichten.
• Aufbau einer wiederverwendbaren Komponenten- und Vorlagenseite.
• Implementierung einer klickbaren Kernstrecke einschließlich Fehlerzustand.
• Review, Korrektur und Export eines vollständigen Mini-Projekts.

Zielgruppe und Voraussetzungen

Zielgruppe: Einsteiger und Umsteiger aus Produktmanagement, Fachkonzeption, UX, Entwicklung, technischer Redaktion und Projektarbeit.

Voraussetzungen: Allgemeine PC-Kenntnisse; keine Vorerfahrung mit Pencil Project erforderlich.

Didaktik und Arbeitsweise

Das Seminar arbeitet mit einer durchgehenden Fallstudie. Analyse, Strukturierung, Umsetzung, Review und Export werden in klar abgegrenzten Arbeitsblöcken durchgeführt und durch Zwischenergebnisse abgesichert.