The Watch Face Project | Omega Drei

Im Kurs „Programmiertes Entwerfen“ bestand die Aufgabe darin, drei individuelle und interaktive Watchfaces zu konzipieren und zu programmieren.


Dabei kamen die JavaScript-Bibliotheken p5.js und Matter.js zum Einsatz. Während p5.js als zentrales Werkzeug für die grafische Gestaltung der Watchfaces diente, wurde Matter.js, eine Physik-Engine, genutzt, um realistische physikalische Effekte wie Gravitation, Kollisionen und Bewegung zu simulieren.

Das Ziel des Projekts war die Entwicklung kreativer und interaktiver Uhrendesigns, die nicht nur funktionale Anforderungen erfüllen, sondern auch durch dynamische und spielerische Elemente überzeugen. Die Aufgabe verlangte eine gestalterische Progression, die sich in den drei Entwürfen widerspiegeln sollte. Beginnend mit einer klar und leicht lesbaren Darstellung, sollten die Designs schrittweise in zunehmend abstrakte Formen übergehen.

Designprozess - Wie sind wir vorgegangen?

Der Designprozess begann mit der Sammlung von Bildern und visuellen Referenzen, um Inspiration für die Gestaltung der Watchfaces zu gewinnen. Hierfür haben wir ein gemeinsames “Visionboard” in dem Programm “Figma” erstellt, um einen Überblick über unsere Ideen und Inspirationen zu haben. Anschließend wurden erste Skizzen angefertigt, um Konzeptideen zu entwickeln und mögliche Layouts zu definieren.

Diese zeichnerische Exploration half dabei, eine visuelle Richtung festzulegen und gestalterische Prinzipien für die weiteren Schritte zu bestimmen.
Auf dieser Grundlage wurde mit der Programmierung der Watchfaces begonnen. Während dieses Prozesses entstanden fortlaufend neue gestalterische und funktionale Ideen, die in die Designs integriert wurden. Dies führte zu einer kontinuierlichen Weiterentwicklung und Optimierung der Entwürfe.

Während der Umsetzung kristallisierten sich schließlich unsere vier zentralen Konzepte heraus, die gezielt weiterentwickelt wurden. In der finalen Phase wurden die vier Watchfaces vollständig programmiert, technisch optimiert und gestalterisch überarbeitet. Dabei wurde besonderer Wert darauf gelegt, sowohl funktionale als auch ästhetische Anforderungen zu erfüllen.

Unsere finalen Watchfaces

1. Bubbles

Probieren →

Dieses Watchface besteht aus größeren und kleineren Kreisen, die durch eine simulierte Gravitation beeinflusst werden. Die Richtung der Gravitation wird durch die Neigung der Smartwatch oder durch die Mausposition gesteuert.
Beim ersten Tap auf das Display werden die größeren Kreise von unsichtbaren Magnetpunkten angezogen. Diese Magnetpunkte sind so angeordnet, dass sie die aktuelle Uhrzeit in Stunden und Minuten darstellen und somit eine klare Ablesbarkeit ermöglichen. Die kleineren Kreise, die die vergehenden Sekunden repräsentieren, bleiben weiterhin frei beweglich und folgen der Gravitation.

Es entstehen pro Sekunde neue kleine weiße Kreise, die während die Magnete aktiv sind, sich an dem Doppelpunkt, zwischen den Ziffern, bilden. Wenn die Magnete deaktiviert sind, bilden sich diese an einem beliebigen Punkt auf dem Canvas.

Durch einen weiteren Tap auf das Display deaktivieren sich die Magnete, sodass wieder alle Kreise frei beweglich sind. Dabei werden sie explosionsartig abgestoßen, was für einen dynamischen Effekt sorgt. Die Stärke und Reichweite dieser Explosion hängt von der Position des Taps ab, wodurch sich das Verhalten der Kreise durch den Nutzer beeinflussen lässt.
YouTube video

2a. Zeitfluss

Probieren →

Das zweite Watchface zeichnet sich durch einen schwarzen Hintergrund aus, auf dem zahlreiche blaue Kreise frei schweben. Die Zeitanzeige erfolgt durch eine schwarze Maskierungsfolie, in die die Ziffern als Aussparungen integriert sind. Dadurch bleiben die dahinterliegenden Kreise sichtbar, sodass die Uhrzeit durch die Bewegung der Kreise erkennbar wird.

Im Ruhezustand bewegen sich die Kreise zufällig über den Bildschirm, wobei sie durch das Schütteln des Arms beeinflusst werden und eine dynamische, fließende Optik erzeugen. Diese Interaktion verleiht dem Design eine lebendige Komponente und verstärkt das organische Verhalten der Kreise.

Bei Berührung des Bildschirms verändert sich die Animation: Die Kreise beginnen, sich zufällig zu vergrößern und breiten sich innerhalb kürzester Zeit aus, bis sie den gesamten Bildschirm ausfüllen. Dieser Effekt erinnert an fließendes Wasser und sorgt dafür, dass die Aussparungen der Zahlen vollständig mit blauen Kreisen ausgefüllt werden, wodurch die aktuelle Uhrzeit deutlich sichtbar wird.

Nach fünf Sekunden kehren die Kreise allmählich zu ihrer ursprünglichen Größe zurück, und das Watchface kehrt in seinen Ausgangszustand zurück.
YouTube Video

2b. Scratch Card

Probieren →

Dieses Watchface zeichnet sich durch einen weißen Hauptkreis aus, dessen Bewegung durch eine simulierte Gravitation gesteuert wird. Die Richtung dieser Gravitation wird entweder durch den Motion-Sensor der Smartwatch oder die Mausposition bestimmt, sodass der Kreis stets in die entsprechende Richtung beschleunigt.

Ein wesentliches Merkmal dieses Designs ist die Wechselwirkung zwischen der Geschwindigkeit des Kreises und seiner Größe. Je schneller er sich bewegt, desto größer wird er, während er bei nachlassender Geschwindigkeit allmählich schrumpft. Zusätzlich hinterlässt der Hauptkreis eine Spur kleinerer Kreise, die sich in ihrer Größe anpassen, jedoch mit der Zeit kontinuierlich kleiner werden bis sie schließlich vollständig verschwinden.

Die Uhrzeit wird in der Mitte des Displays durch SVG-Ziffern dargestellt, die Stunden und Minuten anzeigen. Diese Ziffern sind in der Hintergrundfarbe gehalten und dadurch zunächst nicht sichtbar. Erst wenn der weiße Kreis hinter den Ziffern vorbeizieht, werden sie temporär freigelegt und sichtbar.
YouTube Video

3. Floating geometry

Probieren →

Dieses Watchface basiert auf drei farbigen Bällen, die durch elastische, gummiartige Bänder miteinander verbunden sind. Jeder Ball repräsentiert eine Zeiteinheit:

Der größte steht für die Stunden, der mittelgroße für die Minuten und der kleinste für die vergehenden Sekunden. Ergänzt wird das Design durch 60 kleine graue Kreise, die den Verlauf der Sekunden visualisieren. Das Prinzip orientiert sich an einer klassischen Uhrendarstellung, wobei die traditionellen Zeiger durch die beweglichen Bälle ersetzt werden.

Zu Beginn des Interaktionsprozesses werden die drei Bälle durch einen unsichtbaren Magneten in die Mitte des Displays gezogen, während die 60 grauen Kreise zu einem einzelnen, zentralen Kreis verschmelzen. Durch eine Wischgeste können die farbigen Bälle mit dem Finger bewegt und flexibel über das Display bis zu den Rändern verschoben werden.
Um die vollständige Uhrendarstellung zu aktivieren, gibt es zwei Interaktionsmöglichkeiten: Durch das Auseinanderziehen zweier Finger auf dem Display oder einen Klick auf die Website vergrößert sich der zentrale graue Kreis, sodass die 60 Kreise sichtbar werden. Gleichzeitig bewegen sich die farbigen Bälle in ihre korrespondierenden Positionen, um die aktuelle Uhrzeit darzustellen.

Beispielsweise ordnet sich bei der Uhrzeit 9:15:35 der Stunden-Ball auf dem 45. grauen Kreis an, der Minuten-Ball auf dem 15. und der Sekunden-Ball auf dem 35. Kreis. Durch das Zusammenziehen zweier Finger in Richtung Display-Mitte kehrt die Darstellung wieder in den Ausgangszustand zurück:
Die drei farbigen Bälle werden erneut von dem unsichtbaren Magneten in die Mitte gezogen, und die 60 kleinen Kreise reduzieren sich wieder auf einen einzelnen Punkt.
YouTube video