Creative Technologies – Bachelor-Kurs Prof. Felix Beck, Leonie Winkelmann
WiSe 2026-27

• Video: The History of Typography (Animated Short)
• Spot the Intruders in drei Varianten
• Mini-Aufgabe 1: Shape Type und KernType
• Mini-Aufgabe 2: Ein Text, fünf Parametersets. Pro Set nur ein Parameter ändern, Wirkung benennen
• Mini-Aufgabe 3: Sechs Schriften auf drei Achsen platzieren (Serif–Sans, verspielt–streng, Monospace–proportional)

• Anatomie: Grundlinie, x-Höhe, Versalhöhe, Oberlänge, Unterlänge, Serife
• Merkmale: Serifen, Strichkontrast, Proportion (Monospace oder proportional)
• Kursiv (eigens gezeichnet) ist nicht geneigt (schräg gestellt)
• Parameter: Größe, Laufweite, Zeilenabstand, Zeilenlänge
• Richtwerte: Zeilenabstand 120–150 %, Zeilenlänge 45–75 Zeichen (Faustregel), Kontrast 4,5:1 Fließtext, 3:1 große Schrift (WCAG AA)
• Maße als Richtwerte: Smartphone 390 × 844, Tablet 768 × 1024, Desktop 1440 × 900, Raster in Vielfachen von 8
• Binaries: Roman/Kursiv, Serif/Sans, Groß/klein sind Spektren, keine Naturgesetze

Baue aus höchstens 6 Modulen pro Buchstabe drei Buchstaben, z. B. die ersten drei deines Namens. Das Raster ist 4 × 7 Einheiten groß. Module liegen mit ihren Kanten auf den Rasterlinien. Schreibe zu jedem Buchstaben die Formel: welche Module wie oft (Beispiel unten). Digital (z. B. Figma): 1 Einheit = 16 px, das Raster ist dann 64 × 112 px. Auf Papier: 1 Einheit = 8 mm.

• Extra Bold (Lupton u. a.), Kapitel „Typographic binaries“
• Dotting the P’s (Aktivitätsbuch zur Typografie), Vorlage für Spot the Intruders
• Molecular Typography Laboratory (Kobi Franco)
• Ideen-Generator (Tab Intruder-Rätsel, optional)

1. Chauvet-Höhle (Referat Christina)
   
   Was erzählen uns die Höhlenmalereien von Chauvet über frühe Formen visueller Kommunikation? Untersuchung von Darstellung, Bewegung, Überlagerung, Komposition und der Beziehung zwischen Bild und Raum.

• Welche Schrift wurde gewählt? ⇒ Berichten Sie über die Schrift…
• Besprechen der Ergebnisse der Gesamtkomposition.
  • Funktioniert das Ergebnis als zusammenhängende Serie? Werden formale unterschiedliche Ansätze sichtbar?

Bauen Sie auf Ihrer Gestaltung aus Aufgabe 3A auf. Nutzen Sie den dort gewählten Buchstaben, die Schrift und die Schwarz-Weiß-Gestaltung erneut. Entwickeln Sie für Ihren bisherigen Sketch eine einfache Benutzeroberfläche, mit der Varianten Ihrer Gestaltung erzeugt werden können. Als Interface-Elemente müssen mindestens ein Button, ein Slider und ein Toggle Switch eingesetzt werden. Alle Interface-Elemente dürfen ebenfalls nur in Schwarz und Weiß gestaltet sein. Die Bedienelemente sollen so eingesetzt werden, dass sich im Sketch sichtbare Varianten erzeugen lassen, zum Beispiel durch Veränderung von Größe, Position, Drehung, Anschnitt oder Kontrast. Die Oberfläche soll klar lesbar, logisch angeordnet und ohne Erklärung bedienbar sein. Es soll sofort erkennbar sein, was angeklickt, verschoben oder ein- und ausgeschaltet werden kann. Für die Gestaltung der Interface-Elemente darf nicht auf vorhandene Browser- oder Standard-UI-Elemente zurückgegriffen werden. Jegliche Elemente (Button, Slider und Toggle Switch, etc.) müssen vollständig selbst gestaltet und aus einfachen geometrischen Formen in P5.JS aufgebaut werden. Ziel ist es, nicht nur Bedienlogik zu verstehen, sondern auch die visuelle und formale Gestaltung von Interfaces selbst zu entwickeln.

Die im Sketch erzeugten Varianten sollen als Bilder exportiert werden können.

Zur Inspiration:

Entwickelt das Interface zunächst auf Papier. In die DokuBox gehören Scribbles, Skizzen und Aufzeichnungen zur Anordnung und Funktion der Bedienelemente sowie unterschiedliche getestete Varianten. Dokumentiert das digitale Ergebnis mit ausgedruckten Screenshots verschiedener Zustände des Interfaces und ergänzt den Link zum p5.js-Sketch.