Responsive citylight

Responsive design adapted to interactive citylight displays

Responsive Citylight is a series of ideas prototyped for interactive citylight displays.

In technology terms these displays are replacements of static citylight displays with a built-in portrait-orientated LCD display and depth sensor to enable interactive content to be displayed and to detect user behaviour.


Music on the video: "Tenney" by CKZ.

Our idea was to adopt responsive design to such interactive citylight displays. While responsive design usually deals with different screen sizes, designing for Responsive Citylight we researched on passive user behaviour, for example the user`s distance from the screen.



For example, if you are 20 meters away from a normal citylight there is no chance that you can read the small text. Similarly, when you are 50 cm close to it, there is no use of displaying a 2 meters to 1 meter photo. We solved this problem by providing the right layout for every situation. If you are close to it, it provides details, small texts by rearranging the layout. When you get far from it the whole view will change into a large inviting photo with short slogan.

We developed three prototype variations, a bus information application for bus-stop citylights, an interactive poster with rearranging layout and an interactive poster with continuous animation.

We used Awesomium HTML UI engine and Cinder library for C++ to prototype the application.


Poster layout and animation designs


Poster design for the different zoom levels

For the content of the interactive poster prototype we used the article "New homes turn Swedes` hair green" based on a research which won the Ig® Nobel Prize in 2011 in chemistry category. The illustrations on the poster are our work.