Design Basics (BA)

Prof. Felix Beck, Leonie Winkelmann
Sommersemester 2026

evtl. zwischendurch eine kurze Pause ±10 min?

Übersicht zum heutigen Ablauf

  1. Kurze Werbung für Innovations- und Entrepreneurship-Programm HEADVENTURES 2026 – Shaping the Future of Industry
  2. Vorstellung Prof. Beck
    • OpenCalendar/Sprechstunde
    • Fehlerhafter Eintrag in CAMS/myFH-Portal…
  3. Vorstellung Leonie Winkelmann
    • Einrichtung Mattermost: Invite Link zum CT Lab Mattermost Kanal. Im Kanal befindet sich der Channel “design basics (sose26)”.
  4. Vorstellung Creative Technologies Lab?
    • dokuWiki
    • Regeln im Lab (Arbeitsplätze, Materialien, etc.)
      • Unterschriften der Studierenden einholen
    • Disclaimer: Fotos & Videos ⇒ Leonie
  5. Überblick zum Kurs
    • Welche Erwartung haben die Studis? ⇒ Sammlung von Stichpunkten
    • Aufbau Kursstruktur (Zweiteilung Minichallenges und Kurzzeit-Projekt)
      • Überblick über die vier Leitfragen A–D:

        • A. Wie entsteht visuelle Ausdrucksform?

          In diesem Block geht es um die Frage, wie digitale Gestaltung eine erkennbare visuelle Sprache entwickelt. Im Mittelpunkt stehen Typografie, Form, Farbe, Rhythmus, Wiederholung, Variation und der bewusste Umgang mit grafischen Regeln (in p5.js). Buchstaben und Zeichen werden dabei nicht nur als Informationsträger verstanden, sondern als formbares visuelles Material, aus dem Muster, Strukturen, Animationen und eigene gestalterische Systeme entstehen können. Der Block ist wichtig, weil digitale Anwendungen, Spiele und Interfaces nicht nur funktionieren, sondern auch visuell lesbar, charaktervoll und konsistent sein müssen. Die Studierenden lernen hier, dass Ausdruck nicht zufällig entsteht, sondern aus klaren Entscheidungen, Regeln und Wiederholungen aufgebaut wird.

        • B. Wie entsteht Bedienbarkeit und Interface-Logik?

          Dieser Block behandelt die Gestaltung der Schnittstelle zwischen Mensch und System. Thematisiert werden Buttons, Zustände, Orientierung, Rückmeldung, visuelle Hierarchien und die grundlegende Logik von Benutzeroberflächen. Dabei wird untersucht, wie Informationen angeordnet werden müssen, damit Handlungen verständlich, eindeutig und intuitiv möglich werden. Das Ziel ist, dass die Studierenden einfache interaktive Oberflächen entwickeln und erkennen, dass gutes Interface-Design weit mehr ist als nur eine ansprechende Oberfläche. Der Block ist zentral, weil digitale Produkte nur dann sinnvoll nutzbar sind, wenn ihre Bedienung nachvollziehbar strukturiert ist und visuelle Gestaltung direkt zur Orientierung und Interaktion beiträgt.

        • C. Wie entsteht Verhalten, Dynamik oder Spiellogik?

          In diesem Block verschiebt sich der Fokus von der Oberfläche zum Verhalten eines digitalen Systems. Behandelt werden Bewegung, Reaktion, Zustände, Regeln, Kollisionen, Zielstrukturen, Schwierigkeitsgrade und grundlegende spielerische Mechaniken. Die Studierenden entwickeln dabei kleine interaktive Abläufe und lernen, wie aus Eingaben, Reaktionen und zeitlichen Veränderungen ein spielbares System entsteht. Dieser Teil des Kurses ist wichtig, weil digitale Gestaltung in interaktiven Medien immer auch Verhalten gestaltet: Nicht nur wie etwas aussieht, sondern wie es sich verhält, entscheidet über Qualität und Nutzererfahrung. Der Block vermittelt damit ein Verständnis dafür, dass Dynamik, Logik und Spielmechanik gestaltbare Bestandteile eines digitalen Artefakts sind.

        • D. Wie entsteht physische Verkörperung und prototypische Umsetzung?

          Dieser Block erweitert die digitale Gestaltung in den physischen Raum. Im Zentrum stehen TinkerCAD, 3D-Druck und die Entwicklung einfacher Eingabeobjekte oder Gehäuse, etwa für einen späteren Game-Controller. Thematisiert werden dabei nicht nur Form und Ergonomie, sondern auch konstruktive Fragen wie Maßhaltigkeit, Verbindungen, Magnetintegration, bewegliche Teile und druckgerechtes Entwerfen. Der Block ist wichtig, weil viele digitale Systeme nicht allein auf dem Bildschirm existieren, sondern über physische Interfaces erfahrbar werden. Die Studierenden lernen hier, wie digitale Funktionen in materielle Formen übersetzt und als Prototyp umgesetzt werden können, sodass aus einer Idee ein benutzbares und testbares Objekt entsteht.

      • Überblick zum Mini-Projekt: Ein kleines p5.js-Game mit optionalem physischem Controller.
    • Ablauf Semestertermine
    • Benotungsschema
    • Dokubox
    • Beispiele aus vorherigen Semestern
    • Mattermost Kanäle !?!
    • Sammlung: Welche Tools, Skills Hardware/Software interessieren Euch?

Einrichtung der Arbeitsumgebung. Einführung in p5.js, Editor, Canvas, Grundstruktur eines Sketches, einfache Shapes, Farben, Text und Export. Erste kleine Übung: visuelle Reaktion auf Maus oder Tastatur.