Der Kurs vermittelt die Grundlagen der Datenvisualisierung mit einem Fokus auf das Gestaltungsmittel „Farbe“. In einem kurzen Projekt wird die ordnende Beziehung und vermittelnde Qualität von Form und Farbe erprobt.
Die Darstellungsmittel zur Umsetzung beschränken sich auf den Einsatz von abstrakten, geometrischen Formen und der systematischen Anwendung von Farbe. Das formale Repertoire, d.h. die Organisation, die Form- und Farbgebung der geometrischen Zeichen, assoziative Bezüge zum Inhalt. Die zu entwickelnde visuelle Ordnung stellt weitestgehend den Anspruch, die darin enthaltenden Informationsschichten bereits „lesbar“ zu machen.
Das gleiche Thema soll zusätzlich in einer dynamisch / interaktiven Form gestalterisch erfahrbar gemacht werden.
Im Rahmen des Kurses Programmiertes Entwerfen 2 lag der Fokus zunächst auf der Auseinandersetzung mit Farben. Wir beschäftigten uns mit ihrer Wirkung, Kombination und Anwendung im digitalen Raum. Aufbauend darauf sind wir direkt in ein praktisches Projekt eingestiegen, bei dem das Ziel darin bestand, eine Datenvisualisierung in Form eines Kalenders zu gestalten.
Mein Kalender
Für meinen finalen Kalender habe ich mich auf die Visualisierung der Mondphasen konzentriert. Das Konzept orientiert sich an der Idee, dass wir während des Jahres vor allem in Wochen denken. Die Woche bildet ein eigenständiges System. Daraus entstand die Entscheidung, das Septagon (siebeneckige Form) als zentrales Gestaltungselement zu verwenden.
Ein bewusster gestalterischer Bruch entsteht zu Beginn und Ende eines Monats, da nicht jeder Monat mit einer vollständigen Woche startet oder endet. Diese Unregelmäßigkeit wird im finalen Design visuell deutlich hervorgehoben. Zur besseren Orientierung sind die Monate in den vier Quartalen des Jahres angeordnet.
Die Farbgebung bewegt sich innerhalb einer zusammenhängenden Farbfamilie. Die Variationen basieren auf Eigenschaften wie Kälte, Wärme, Helligkeit und Dunkelheit – so, wie sich die Jahreszeiten anfühlen. Entsprechend sind auch die Monate farblich den Jahreszeiten zugeordnet.
Eine zusätzliche Informationsebene bildet die Darstellung der Mondphasen. Vollmonde erscheinen fast weiß, behalten jedoch einen leichten Farbstich zur besseren Erkennung des jeweiligen Tages. Neumonde sind in einem grauen Ton dargestellt. Als Verweis auf ihre Unsichtbarkeit am Himmel, aber bewusst wahrnehmbar im Kalender. Halbmonde werden durch Gradient visualisiert, der von links oder rechts verläuft, je nachdem, ob der Mond zu- oder abnimmt. Dabei ist jeweils eine Hälfte farbig, die andere weiß.
Animierter Kalender
Im Kurs Programmiersprachen 2, der parallel verlief, bestand die Aufgabe darin, den Kalender zu animieren mit Figma oder anderen Tools. Der Prozess begann mit dem Entwurf eines Userflows in Form von Skizzen, die anschließend in Figma als Wireframes umgesetzt wurden.
Die Interaktion in meinem Kalender folgt einem Prinzip von groß zu klein. Zunächst sieht man eine Jahresübersicht. Beim Hovern über einen Monat wird dieser hervorgehoben und der Monatsname erscheint oben links. Mit einem Klick öffnet sich eine Monatsübersicht mit den zugehörigen Kalenderwochen. Auch mit einem Hovereffekt. Wählt man eine Kalenderwoche aus, erscheint eine detaillierte Wochenansicht mit einzelnen Tagen. Beim Cover über die Tage, wird ein kleiner Countdown angezeigt, wie viele Tage noch bis zum nächsten Vollmond verbleiben.
Im Prototyp in Figma kann man den Kalender dann durchklicken.
