In the course Programmed Design 2 it was the aim to deal with a calendar to a self-chosen topic. A conclusive and consistent system had to be developped which contains chronological and defined data. These data should be visualised by shape, systematic use of color and well-thought arrangement. The whole system should be experienceable by a dynamic and interactive surface. The challenge to be managed was not to use any alphanumeric characters and just to work with geometric forms.
Based on the huge data set from the Federal Statistical Office the topic of the calendar was decided: overnight visitors in Germany. The criteria were the number of stays shown at the exact location spread across the year and the division into natives and foreigners. Moreover additional information was considered such as where the foreigners came from and how long their arrival took place.
infographics
In the beginnging the right shape had to be found, so there were made some analogue and digital scribbles. After that some form studies were created. The most convincing ones were used to generate some strings and it was analysed in what way they would work in a grid.

Finally a rhombus was taken as basic shape and thereby created a grid out of it which can be seen below. Based on this grid, everything was arranged on the screen.
grid
Having tried some strings which color could work the best for this context it was decided to go with a bluish one. As alltogether three colors were needed, a bluer one representing the foreigners and a greener one displaying the natives were chosen. The two colors were combined to receive the color for describing the entire stays. It resulted in a medium light petrol. This mixed color consisted of more green related to the higher proportion of natives (82% and foreigners 18% in 2014).
colour
The application consists of two levels: The first one shows entire Germany as overview with the total numbers of stays in the year 2014. The petrol colored rhombi with the highest opacity are the areas with the most overnight visitors. In this level it can be navigated through the months of 2014 by using the arrow keys. The background changes its brightness in direct relation to the average of the daily sunshine hours per month.

To enter the second level a certain state has to be selected which is then zoomed in and shows at first the overnight stays of the natives. By clicking on the state again, the share of foreign nationals is shown after the rhombi have moved in as a function of their origin and travel time. The two colors for the natives and foreigners produce in combination the petrol color of the rhombi for the whole overnight stays.

Project

Programmed Design 2

Second semester

mentoring by Prof. Jens Döring, Prof. Hartmut Bohnacker

June 2015

Tools

Illustrator

HTML

CSS

jQuery