The Watch Face Projekt | Neon Dots

Im Kurs „Programmiertes Entwerfen“ wurden wir vor die Aufgabe gestellt, drei eigene und interaktive Watchfaces zu gestalten und technisch umzusetzen. Daraus entstand eine Serie von vier interaktiven Watchfaces, die sich von klar strukturiert bis hin zu spielerisch-abstrakt entwickeln.

Mit einfachen geometrischen Formen, einer reduzierten Farbpalette und einer Prise Experimentierfreude haben wir digitale Uhren neu interpretiert. Im Zentrum stand dabei immer: Zeit erlebbar machen, funktional, aber kreativ.

Technisch umgesetzt wurde das Ganze mit den JavaScript-Bibliotheken p5.js und Matter.js. Während mit p5.js Animationen und Interaktionen visuell dargestellt werden konnten, sorgte Matter.js als Physics Engine für realistische Effekte, wie Gravitation oder Kollision und damit für ein überraschend dynamisches Nutzererlebnis.

1. Neon Drop Stairs

Schon zu Beginn beschäftigten wir uns mit der Idee einer Treppe, über die eine Kugel hinabfällt und dabei das Vergehen der Zeit symbolisiert. Während der weiteren Konzeptphase stießen wir auf die App Kontrast.me, ein stilisiertes Rätselspiel, in dem man durch interaktive Level mit verschiebbaren Objekten navigiert. Diese App war uns eine Inspiration, welche unseren Entwurfsprozess entscheidend beeinflusste.

Auf dieser Grundlage entstand unser erster Prototyp. Er war noch weit entfernt vom finalen Design, legte jedoch das Fundament für das, was später als Neon Drop Stairs Gestalt annahm.

Die Darstellung zeigt eine Kugel, welche stetig eine Treppe hinab fällt und im Sekundentakt auf jede Stufe prallt. So wird die Zeit physisch erlebbar. Begleitet wird die Bewegung durch verschiedene Plattformen, invertierte Farben und eine kleine Zeitanzeige im Fünf-Sekunden-Takt. Ist der Ball einmal komplett durchgelaufen, ist eine Minute vergangen und der Ablauf beginnt von vorn.

2. Floating Time

Dieser Entwurf spielt mit dem Kontrast zwischen abstrakter und konkreter Zeitdarstellung. Zunächst bewegen sich freie, unterschiedlich geformte Partikel über den Bildschirm, die Zeit bleibt somit unlesbar. 
Durch Interaktion (z. B. ein Klick) wird eine digitale Uhrzeit sichtbar. Bei aktivierter Magnetkraft werden die Partikel von unsichtbaren Magneten angezogen und formen sichtbare Zahlen.
Beim Anheben des Handys wird die Zeit sichtbar, beim Schütteln kehrt alles in den Ausgangszustand zurück.

3. Threads of Time

Die Inspiration für diesen Entwurf stammt aus unserem Gruppenprojekt “Algorithmic thinking”, bei dem Punkte und Linien zentrale Gestaltungselemente waren.

In dieser Uhrendarstellung steht ein großer weißer Kreis für die Stunden, während kleine blaue Kreise die Minuten symbolisieren.
 Diese Elemente sind durch elastische Linien miteinander verbunden und können per Maus oder Touch interaktiv bewegt werden.

Beim Tippen auf den Bildschirm wird der weiße Kreis durch eine magnetische Kraft in die Mitte gezogen, und die blauen Kreise ordnen sich kreisförmig um ihn herum an, wodurch die Uhrzeit klar lesbar wird.
Alle 60 Minuten werden die blauen Kreise zurückgesetzt und beginnen von vorn.
Zudem reagiert die Darstellung auf Bewegung. Beim Schütteln des Smartphones bewegen sich die blauen Kreise entsprechend der Gravitationsrichtung, somit entsteht eine organische, lebendige Dynamik.

4. Time Explosion

Die Gestaltung basiert auf der Idee, Bälle zu erzeugen, die beim Austreten aus der Mitte eine sichtbare Spur hinterlassen und zum Abschluss visuell „explodieren“.
Die Sekundenanzeige wird durch nacheinander im Uhrzeigersinn ausgestoßene Bälle dargestellt. Ein unsichtbares Magnetfeld am äußeren Rand der Fläche sorgt dafür, dass die Bälle dort haften bleiben und nicht frei im Raum umherfliegen. Das gleichzeitige Explodieren der Bälle, soll das Ende einer ganzen Minute visualisieren..

Für die abstrakte Darstellung von Minuten und Stunden entstand die einfache, aber wirkungsvolle Lösung: zwei rotierbare Rechtecke – ein großes für die Stunden, ein kleines für die Minuten. Beide bewegen sich ebenfalls im Uhrzeigersinn weiter und markieren ihre jeweilige Zeiteinheit.