Prozess

Der erste Screen

Als erstes habe ich versucht, meinen Entwurf für Screen 1 umzusetzen. Hier sieht man, dass ich ganz einfache Buttons in Farbe orange erstellt habe und der Hintergrund noch weiß ist.

Hier habe ich bei den Buttons den Text entfernt und eine Animation eingefügt, sodass beim drüber hovern sich die Farbe des jeweiligen Buttons ändert. Außerdem kam noch der Titel dazu und der Hintergrund hat auch eine neue Farbe bekommen.

Im Gestaltungsprozess habe ich experimentiert sowie mit den Buttons (Form/Farbe/Animation/Platzierung) sowie mit dem Hintergrund und der Überschrift. Auf diesem Screen sieht man abgerundete grüne Buttons und einen farblich anderen Hintergrund.

Zu dem veränderten Layout kamen auch neue Funktionen dazu: eine Lupe und eine Legende zum Filtern von Punkten. Außerdem war der Hover-Label immer neben dem Punkt aber jetzt wurde er an eine fixierte Stelle unten platziert.

Die Platzierung der Überschrift änderte sich im Laufe des Prozesses.

Im Folgenden sieht man die Entwicklung der Navigationsbuttons.

Der zweite Screen

Beim zweiten Screen habe ich die Idee mit dem Balkendiagramm umgesetzt und im Laufe der Zeit hat sich die Hintergrundfarbe geändert, das Diagramm wurde skaliert und die Balken nach der Höhe, sprich der Anzahl der Milliardäre pro Land, absteigend sortiert und eine Farblegende erstellt.

Der dritte Screen

Die Idee mit den Sun-Burst-Diagramm wurde auf dem dritten Screen realisiert.