time in dots | watchfaces

Im Rahmen des Watchface-Projekts bestand die Aufgabe darin, mindestens drei interaktive Uhrenoberflächen zu gestalten und zu programmieren. Ein zentraler Aspekt dabei war die Integration physikalischer Effekte, um die Interaktion realistischer und spielerischer wirken zu lassen. Für die Umsetzung wurden die JavaScript-Bibliotheken p5.js für die grafische Gestaltung und Matter.js als Physik-Engine zur Simulation von Gravitation, Kollisionen und Bewegung verwendet.

Designprozess

Der Designprozess begann mit einer Runde sogenannter Crazy Eights: Jede Person entwickelte frei acht Ideen für Watchfaces, die zunächst grob auf Papier skizziert wurden. Anschließend wurden die entstandenen Entwürfe weiter ausgearbeitet, digital gesammelt und in Figma dokumentiert. Um die Vielzahl an Ideen zu strukturieren, teilten wir sie in fünf zentrale Themenbereiche ein: Wischen, Schütteln, Vergangenheit, Striche und Kreise. Viele der späteren Konzepte kombinieren Elemente aus mehreren dieser Themen.
Als Akzentfarbe kommt ein kräftiges Gelb zum Einsatz, das in allen vier Watchfaces einheitlich verwendet wird. Durch den starken Kontrast zu Schwarz, Weiß und Grau fungiert es gezielt als visuelles Highlight.

Behind The Dots

Die Inspiration für das erste Watchface war eine beschlagene Fensterscheibe, auf der man mit der Hand die Fläche freiwischt, um hindurchzusehen. Diese Idee wurde auf die Uhrzeit übertragen: Erst durch eine Wischbewegung wird die Anzeige sichtbar. Um physikalische Interaktion einzubinden, wurde das Prinzip nicht als flache Ebene, sondern als Grid aus kleinen Kugeln umgesetzt. Mithilfe einer größeren Kugel, die sich per Wischen steuern lässt, werden die kleinen Kugeln weggestoßen und geben so nach und nach die Uhrzeit frei. Sobald man den Finger vom Bildschirm nimmt, kehren die Kugeln in ihre ursprüngliche Position zurück, das Grid formt sich neu und der Vorgang kann erneut ausgeführt werden.

Da bis jetzt noch nicht direkt ersichtlich ist, dass Zeit vergeht, wurde eine zusätzliche Animation eingebaut. Jede Sekunde färbt sich zufällig eine der weißen Kugeln im Grid gelb. Die gefärbten Kugeln bleiben bestehen, wodurch sich über die Dauer von 60 Sekunden immer mehr gelbe Punkte ansammeln. Nach einer Minute ist der Unterschied zwischen gelben und weißen Kugeln deutlich sichtbar, anschließend werden alle Kugeln wieder weiß und der Vorgang beginnt erneut.

Sticky Dots

Beim zweiten Watchface stand die Nutzung des Motion Sensors im Fokus. Ziel war es, physikalische Effekte wie Gravitation sowie eine aktive Interaktion über das Schütteln der Uhr einzubinden. Daraus entstand die Idee, die Uhrzeit zunächst zu verbergen und erst durch Bewegung sichtbar zu machen.

Die Umsetzung basiert auf dem Prinzip von Magnetismus: Die Uhrzeit besteht aus unsichtbaren Magnetpunkten, an denen kleine, frei schwebende Kugeln haften bleiben können. Berührt man den Bildschirm, werden diese Magneten aktiviert, und die umliegenden Kugeln beginnen, an der Uhrzeit „kleben“ zu bleiben. Durch Bewegen des Handgelenks lässt sich zusätzlich die Richtung der Gravitation beeinflussen, wodurch sich die Kugeln gezielt steuern lassen. So wird die Uhrzeit nach und nach durch physikalische Interaktion sichtbar gemacht, statt von Anfang an klar lesbar zu sein.
Wird der Bildschirm erneut berührt, deaktivieren sich die Magneten. Die Kugeln lösen sich und fallen herunter, wodurch die Uhrzeit wieder verschwindet.

Time Dots

Die Idee beim dritten Watchface basierte darauf, nicht nur den aktuellen Moment, sondern auch den Zeitverlauf sichtbar zu machen. Inspiriert vom klassischen Zifferblatt wurde ein abstraktes System aus Kugeln entwickelt, das die Zeit in Bewegung übersetzt.

Sekunden und Minuten bewegen sich auf kreisförmigen Bahnen. Die Sekunden befinden sich auf der äußeren Bahn: Neben dem aktuellen Sekundenpunkt sind auch die neun vorangegangenen sichtbar, dargestellt durch abnehmende Transparenz. Jede Sekunde springt der Punkt einen Schritt weiter, die vorherigen rücken mit. Ist die Bahn einmal vollständig durchlaufen, ist eine Minute vergangen.

Die aktuelle Minute wird auf einer inneren Bahn als einzelner Punkt angezeigt, der wie bei einer analogen Uhr positioniert ist. In der Mitte des Watchfaces befinden sich die Stunden, dargestellt durch große Kugeln. Ihre Anzahl entspricht der aktuellen Stunde, beispielsweise stehen 14 Kugeln für 14 Uhr. Diese Kugeln befinden sich innerhalb eines transparenten Kreises und bewegen sich kontinuierlich. Berührt man den Bildschirm in diesem Bereich, reagieren die Kugeln auf die Bewegung des Fingers und folgen ihm innerhalb des eingegrenzten Feldes.

Sliced Dots

Beim letzten Watchface standen Linien, Schnittflächen und geometrische Muster im Vordergrund. Die „Blume des Lebens“ diente dabei als visuelle Inspiration. Ziel war es, die Uhrzeit abstrakt über Überschneidungen und Formen darzustellen, statt über klassische Zahlen oder Schriftzeichen.

Zu Beginn wurde mit der Idee experimentiert, die Uhrzeit direkt durch sich überlagernde Linienformen lesbar zu machen. Da dies jedoch weder abstrakt genug war noch gut mit physikalischen Effekten kombinierbar, entwickelte sich das Konzept weiter. Die neue Idee: Die Anzahl an Schnittflächen bestimmt die Uhrzeit, also die sichtbaren Überlagerungen von Kreisen. Minuten und Stunden werden über die Anzahl dieser Schnittflächen dargestellt und sind farblich voneinander abgesetzt. Hier ein Beispiel: 7 gelbe Schnittflächen bedeutet 7 Uhr und 20 weiße, 20 Minuten. Somit ist die aktuelle Uhrzeit 07:20 Uhr.

Zunächst zeigt das Watchface mehrere Kreisumrisse, die sich frei innerhalb des Displays bewegen und sich ständig neu überschneiden. Ergänzend bewegen sich kleinere Punkte, die jeweils eine Sekunde symbolisieren. Pro Sekunde erscheint ein neuer Punkt, der sich frei bewegt und dabei an den Kreisumrissen abprallt. Nach 60 Sekunden verschwinden alle Punkte, und der Vorgang beginnt von vorn.

Damit die Uhrzeit abgelesen werden kann, tippt man auf den Bildschirm. Dadurch wird die Bewegung der Kreise eingefroren und der aktuelle Moment wird festgehalten. Nun wird, wie oben beschrieben, die aktuelle Uhrzeit durch eingefärbte Schnittflächen dargestellt. Die Sekundenpunkte tauchen weiterhin im Standbild auf, wodurch der Sekundenverlauf bestehen bleibt. Ein weiterer Fingertipp bringt das Watchface wieder in Bewegung.

Erweiterung

Um das Watchface visuell noch spannender zu gestalten und den physikalischen Aspekt weiter zu betonen, wurde zusätzlich ein Blend Mode integriert. Dieser bewirkt, dass sich an den Schnittflächen die Farben invertieren, was einen interessanten visuellen Effekt erzeugt und die Überlagerungen deutlich hervorhebt.