Die Studierenden lernen die elementare Darstellungsprinzipien, grundlegende Techniken der Programmierung und algorithmisches Denken kennen.
In zwei Kurzprojekten und kleinen Übungen probieren die Studierenden die systematischen Organisation von Zeichenbeziehungen in Fläche, Bewegung und interaktives Verhalten aus. Ziel ist es am Ende des Semesters Gestaltung als System zu erfahren und eigenständig erste einfache Regelwerke in eine Programmiersprache übersetzen zu können.
Prof. Andreas Pollok, Benno Stäbler, Prof. Benedikt Groß
Watchfaces | Das Kollektiv
Im Rahmen eines gemeinsamen Projekts haben wir, Das Kollektiv, innovative Watch-Faces entworfen. Ziel war es, Designs zu schaffen, die von leicht lesbarer bis hin zu abstrakter Darstellung reichen. Dabei sind drei verschiedene Konzepte entstanden, die unterschiedliche gestalterische und interaktive Ansätze verfolgen. Um dennoch eine Zusammengehörigkeit zwischen den drei Watch Faces zu verdeutlichen, haben wir uns dazu entschieden, bei allen einen schwarzen Hintergrund und die gleiche Akzentfarbe zu verwenden.
Watchface 1 | Segments Clock
Die „Segments Clock“ kombiniert Schwerkraft und Magnetismus, um die Uhrzeit spielerisch darzustellen. Die Ziffern bestehen aus Segmenten, die bei Aktivierung der Schwerkraft auseinanderfallen. Erst durch Magnete setzen sie sich wieder zur lesbaren Uhrzeit zusammen.
Segments Clock
Anfangs bestanden die Zahlen aus einfachen Rechtecken, die beim Aktivieren der Schwerkraft unkontrolliert fielen. Später wurden Magnete hinzugefügt, die jedes Segment gezielt anzogen, um ein geordnetes Gesamtbild zu schaffen.
Prozess
Da die ursprüngliche Schrift zu technisch wirkte, fiel die Wahl auf die klarere Futura. Die Magnete wurden optimiert und als kleine, runde Bälle direkt in die Zahlen integriert.
Futura
Nach Feinanpassungen funktionierte das System wie gewünscht – mit der finalen Akzentfarbe war die „Segments Clock“ vollendet.
Akzent Farbe
Watchface 2 | Web
Die “Web”-Uhr wurde entwickelt, um die Uhrzeit auf abstrakte Weise darzustellen, indem Magnete und Linien in einem interaktiven Design verwendet werden. Die Grundlage des Systems besteht aus einer Matrix, in der unsichtbare Blöcke (Magnete) positioniert sind. Diese Magnete beeinflussen die Linien und erzeugen dadurch das charakteristische Netz.
Web
Zu Beginn des Projekts wurde die Uhrzeit horizontal nebeneinander dargestellt. Dies führte zu ungenutztem Raum ober- und unterhalb der Darstellung. Durch eine Umstrukturierung wurde das Endlayout entwickelt, bei dem die Stunden oben und die Minuten unten positioniert sind. Dieses Layout nutzt den verfügbaren Platz besser aus und erzeugt eine klare Trennung zwischen den Zeiteinheiten.
Prozess
Ein besonderes Feature der “Web”-Uhr ist der Standby-Modus, der durch Berühren des Bildschirms aktiviert wird. In diesem Modus bleibt das Raster erhalten, jedoch werden alle Linien in die Akzentfarbe unserer Gruppe geändert. Zusätzlich wird ein Puls-Effekt aktiviert, der im Sekundentakt aufleuchtet, um anzuzeigen, dass die Zeit weiterläuft.
Standby-Modus in Akzentfarbe
Watchface 3 | Waves
Während unserer Recherche fanden wir eine Animation von Linien, die eine Wellenbewegung simulierten. Inspiriert davon entstand Waves, ein Interface, welches diesen Effekt aufgreift und mit der Interaktion des Nutzers kombiniert.
Waves
Das Interface basiert auf einem Gitter aus unsichtbaren Punkten, die als Achsen für daran befestigte Linien dienen. Diese Linien rotieren um ihre Achse und erzeugen dadurch ein fließendes Wellenmuster. Die Uhrzeit wird durch Linien dargestellt, die sich nach einer Berührung des Bildschirms stets in Richtung der Schwerkraft ausrichten. Durch die Abweichungen im Muster entstehen somit die Zahlen der aktuellen Uhrzeit. Zusätzlich reagieren alle Linien beim Berühren des Bildschirms im Bereich um den Finger. Dabei werden sie dicker, färben sich türkis und werden von der Stelle des Fingers aus nach außen hin abgestoßen. Nach ein paar Sekunden setzt sich dies wieder zurück.
Am Anfang erstellten wir das Grid mit den Linien, welche sich immer in Richtung der Schwerkraft (vorläufig roter Kreis) ausrichten. Die Linien innerhalb der Zahlen waren um 90° gedreht.
Zwischenstand 1
Dann fügten wir eine Wellenbewegung für die Linien im Hintergrund hinzu und verbesserten den Effekt noch durch einen Schimmereffekt.
Außerdem konnte man nun die Uhrzeit durch Berühren des Bildschirms auch ein- und ausschalten.
Zwischenstand 2
Schließlich fügten wir noch die Funktion hinzu, dass sich die Linien von der Position des Fingers abgestoßen werden und sich umfärben, wenn man den Bildschirm berührt.