click

Aufgabe

Entwerft eine Webseite, in deren Mittelpunkt ein Ding steht, mit dem interagiert werden kann. Dieses Ding – aus dem IRL oder aus dem Digitalen – kann zwei Zustände haben (bspw. Lichtschalter an/aus; vielleicht auch: ein Stein, auf dem ein / kein Vogel sitzt).

Inszeniert diese Interaktion, ausgelöst durch einen Klick, und gebt ihr eine Mini-Erzählung: Was passiert, wenn sich die Zustände ändern (bspw: Was wird plötzlich sichtbar, wenn ich den Lichtschalter anschalte)? Was ist zu hören? Bedenkt: Wodurch wissen Nutzer:innen, dass sie mit dem Ding interagieren können? Warum wollen sie damit interagieren… vielleicht immer wieder?

Hinweise

Ihr könnt euer Ding mehrfach vewenden oder unterschiedliche Dinge kombinieren.
Ihr könnt minimalistisch oder maximalistisch arbeiten, grafisch, collagieren, fotografieren, etc. Wichtig ist nur, dass ihr bewusste Entscheidungen trefft.
Gerade die Audio-Ebene ist spannend. Ist es ein kurzer, passender Klang? Etwas Überraschendes, Poetisches? Eine Erzählung?

Vorgehen

Sucht euch etwas, das zwei Zustände hat, bzw. das ihr auf zwei Zustände reduzieren könnt
Zeichnet ein einfaches Storyboard, welches die beiden Zustände zeigt
Entwickelt drei Darstellungsweisen für euer Ding (bspw. 1x fotografiert, 1x abstrahiert als Farbflächen, 1x ASCII-Art). Jede Darstellungsweise zeigt beide Zustände. Ihr produziert also drei Bildpaare, insgesamt sechs Darstellungen.
Überlegt euch, was zu hören ist. Macht euch auf die Suche nach dem passenden Klang (nehmt diesen u.U. auf). Verwendet MP3 als Dateiformat! Bonus: Klingt es immer gleich?
Gestaltet die Webseite (*).

* Tipp: Fügt erst eure Grafiken/Elemente ein und positioniert sie; Nutzt dann u.U. KI, um das Verhalten (Wechsel zwischen den Zuständen und Sound) hinzuzufügen.

Einfache Beispiel

Lichtschalter
(Kopie von Rafael Rozendaals on and off – bitte Arbeiten nicht kopieren; habe ich nur für Demozwecke gemacht)
Lichtschalter + Cursor
Lichtschalter + Information
Checkbox-Instrument (digitales „Ding“ mit zwei Zuständen)
Spielkarten (jede Karte ist eine eigene HTML-Seite)

Lose Inspiration

Mass Files ("an archive of auditory urban landscapes")
Studio Moniker: clickclickclick.click
Raphael Bastide: Sleng Teng Modulator
HEIHEI - Noiz!
ASCII Town (Ergebnisse eines 2.5-stündigen Workshops von Mindy Seu)
u.U. interessante Quelle Xeno-Canto ("Sharing wildlife sounds from around the world")

Zeitplan

7.5.
Kickoff
bis Mittwoch 13.5. 18 Uhr:
Storyboard inkl. Erklärung (damit ich es verstehe! :) + die drei Darstellungsweisen/Bildpaare in diesem Ordner ablegen. Dafür einen neuen Ordner anlegen: vorname_nachname (ihr müsst euch mit eurem HAW-Zugang anmelden)
21.5.
Aktuellen Stand mitbringen. Gruppenkritik. Arbeiten am Projekt
28.5.
Präsentation. Feedback.

Dateiformate

SVG

Vektorgrafiken (keine Pixel)
können beliebig groß/kleine skaliert werden
unterstützt Transparent
kleine Dateigröße

PNG

Pixelgrafiken
wird unscharf oder verpixelt, wenn es vergößert wird
unterstützt Transparenz
große Dateigröße (viele Daten)

WEBP

Pixelgrafiken
wird unscharf oder verpixelt, wenn es vergößert wird
unterstützt Transparenz
mittlere Dateigröße (Datenmenge)

GIF

Pixelgrafiken
wird unscharf oder verpixelt, wenn es vergößert wird
unterstützt Transparenz
unterstützt Animation
kann nur 256 Farben

JPEG

Pixelgrafiken
wird unscharf oder verpixel, wenn es vergößert wird
mittlere Dateigröße (Datenmenge)
keine Transparenz