Leistungsnachweis: Screendesign für Ihre Scrollytelling-Website

Aufgabe

Bevor Ihr Team die Scrollytelling-Website programmiert, gestalten Sie ein eigenes Screendesign (Mockup) zur Geschichte Ihres Teams. Ihr Screendesign zeigt, wie die Website auf dem Smartphone und am Desktop aussieht und wie sie sich beim Scrollen verhält.

Das Screendesign ist ein eigener Leistungsnachweis und wird einzeln bewertet. Die spätere Umsetzung ist davon unabhängig.

Abgabeumfang

1. Screens

Gestalten Sie die folgenden Ansichten, jeweils für Smartphone (390 px Breite) und Desktop (1440 px Breite):

• die Startansicht Ihrer Website
• zwei Kapitel Ihrer Wahl
• eine Sticky-Sequenz mit mindestens drei Zuständen, wobei jeder Zustand ein eigener Screen ist

2. Detailgrad

Ihr Screendesign ist ein High-Fidelity-Mockup. Das bedeutet:

• echte Farben und Schriften
• Bilder oder Bildplatzhalter im gewählten Bildstil, keine grauen Kästen
• echte Überschriften und Einstiegstexte, kein Lorem Ipsum (bei längeren Fließtexten ist Blindtext erlaubt)

3. Interaktion

Erläutern Sie das Verhalten beim Scrollen direkt im Mockup mit Pfeilen und kurzen Notizen, zum Beispiel: „Bild 2 wird eingeblendet, sobald Absatz 2 die Bildschirmmitte erreicht.“ Ein klickbarer Prototyp ist nicht verpflichtend.

4. Styleguide (eine Seite)

• Farben: alle verwendeten Farben mit Hexwerten und ihrer Funktion (Hintergrund, Text, Akzent …)
• Typografie: Schriften, Schnitte und Größen für Überschriften, Fließtext und Bildunterschriften, jeweils für Smartphone und Desktop
• Bildstil: kurze Beschreibung mit Beispielen
• KI und Quellen: Kennzeichnung aller KI-Nutzung und Angabe der Bildquellen

5. Scroll-Map

Eine kurze Skizze Ihrer Screens von oben nach unten: Welcher Abschnitt löst welche Veränderung aus? Eine einfache Darstellung mit Kästen und Pfeilen genügt.

Werkzeug

Sie wählen Ihr Werkzeug selbst, zum Beispiel Figma, Penpot, Adobe Illustrator oder Adobe InDesign. Achten Sie darauf, mit Zeichenflächen bzw. Frames in den vorgegebenen Breiten zu arbeiten.

Regeln zur KI-Nutzung

• Erlaubt: KI-generierte Bilder und Texte sowie KI als Ideengeber, etwa für Farbvorschläge oder Schriftkombinationen. Jede Nutzung wird im Styleguide gekennzeichnet, inklusive des verwendeten Werkzeugs.
• Nicht erlaubt: automatisch generierte Screens oder Layouts. Bewertet wird Ihre eigene gestalterische Leistung.
• Ihre offene Datei muss den Arbeitsprozess nachvollziehbar zeigen. Bei Zweifeln kann ein kurzes Gespräch geführt werden.

Abgabe

Die Abgabe erfolgt über die Aufgabe in Microsoft Teams:

1. ein PDF mit allen Screens, dem Styleguide, der Scroll-Map und dem Moodboard (Dateiname: screendesign_nachname_vorname.pdf)
2. die offene Datei bzw. bei Figma oder Penpot ein Freigabelink mit Leserechten

Bearbeitungszeit: ca. 6 Unterrichtsstunden, inklusive Einstieg und Konzeptphase im Team

Abgabetermin: Montag, 05.10.2026

Bewertungskriterien

Insgesamt sind 100 Punkte erreichbar.

• Typografie (20 P.): Schriftwahl passend zum Thema, klare Hierarchie, Lesbarkeit und Zeilenlänge auf beiden Geräten
• Layout und Raster (20 P.): nachvollziehbares Raster, Weißraum, Blickführung, Verhältnis von Bild und Text
• Scrollytelling-Konzept (20 P.): schlüssige Sticky-Sequenz, die die Geschichte unterstützt, nachvollziehbare Zustände, verständliche Scroll-Map und Notizen
• Farb- und Bildkonzept (15 P.): stimmige Farbwelt, einheitlicher Bildstil, ausreichende Kontraste
• Responsivität (15 P.): sinnvolle Übertragung zwischen Desktop und Smartphone, angemessene Schriftgrößen und Touch-Ziele
• Styleguide und Formales (10 P.): vollständiger und konsequent angewendeter Styleguide, vollständige Abgabe, KI-Kennzeichnung und Bildquellen