Better Life Index

Better Life Index

Hannah Wels

Bei dem Kurs Programmiertes Entwerfen 2 geht es darum Daten aus einem davor selbstgewählten Datensatz in Zusammenhang zu bringen und zu visualisieren. Die Schwerpunkte liegen hier bei auf Form, Farbe, Anordnung, Abstände, Größen, Interaktion und Animation. Auf Piktogramme und bildhafte Elemente sollte ganz und auf Beschriftungen weitestgehend verzichtet werden. Das Projekt wurde mit den Programmiersprachen JavaScript und jQuery umgesetzt.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker
Fabian Rauch

Vorübungen

Die Vorübungen sollten uns auf die bevorstehende Aufgabe sensibilisieren und zum Nachdenken anregen.

Form & Position


Bei der ersten Übung sollten wir aus einer Datenreihe (7, 2, 4, 10, 13, 8, 11) unterschiedliche Wetterinformationen einfach aber einprägsam und semantisch aufgeladen darstellen. Die Schwierigkeit: Wir sollten entweder nur mit Punkten, mit Linien oder flächigen Formen die Daten visualisieren. Die Daten aus der Datenreihe stellen hierbei Werte von sieben Tagen dar. Einmal sollen Sonnenstunden abgebildet sein, einmal die Niederschlagsmenge und zu letzt die Temperatur.

Darstellung mit Punkten
Darstellung mit Linien


Farbsensibilisierung


Bei der zweiten Übung sollten wir eine Farbsammlung erstellen, bei der die Farben unterscheidbar sind, aber auch ein harmonisches Ganzes bilden. Alle Farben sollten immer gleich wichtig sein.

Farbsammlungen je sieben gleichwertige Farben


Zu dem sollten wir Farbskalen erstellen:

  1. Hintergrund schwarz – Skala von wenig zu viel Arbeitslosigkeit (oben links)
  2. Hintergrund weiß – Skala von hohem Verlust zu hohem Gewinn (oben rechts)
  3. Hintergrund grau – Skala von -15°C zu +35°C (unten links)
  4. Hintergrund weiß - Skala von leicht zu schwerem Gewicht (unten rechts)

    Die verschiedenen Farbskalen


Programmieren


Zu dem haben wir als Einführung ins Programmieren ein paar der Darstellungen aus der ersten Übung umgesetzt.

Temperatur
Niederschlag
Sonnenstunden