A visual history of Stills
Exploring the visualisation of time through a series of digital prototypes
Background
If taken at face value it would be easy to assume that Stills is a recently established gallery – the aesthetic of the space is sleek and minimal. And of course by its very nature as a contemporary photography gallery the works on display only enhance this feeling of modernity. When I was told that Stills was actually established in 1977, albeit at a different location nearby on The Royal Mile, I was surprised but also immediately saw an opportunity to tap into what would undoubtedly be a vast and rich history.
Man Ray, Cornel Lucas, Richard Learoyd, David Goldblatt and Walker Evans are just a few of the highly revered photographers who have had work featured here over the years. Subsequently there is an amazing archive of historic exhibition posters.
I began to think that it would be great if I could represent this rich artistic history through a digital visual timeline. Timelines are all the rage online these days, with Facebook’s recent profile timeline UI design being perhaps the most ubiquitous example.
Below you will find links to the three timeline prototypes that were explored during the project. Ultimately the third version was preferred by Stills and I am proud to announce that this went live on their domain at stills.org/timeline
Version 1
Scrolling Parallax
The first iteration of the Stills timeline was inspired by the parallax effect – a recent trend in web design where users can scroll multiple objects simultaneously at different speeds, creating a feeling of time passing. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax scrolling can be used to determine distances.
Version 2
Lazyload
The main focus of the timeline is the posters and I wanted to present them in a way that would show their design evolving through time whilst giving users the opportunity to view the artwork in detail. The second prototype uses a similar navigation method as the original version whereby users scroll the page while images load in the background, or they can choose to select a year. All exhibitions for a given year are displayed together and the posters can be opened in a lightbox allowing them to be viewed up close.
Version 3
Timeline JS
The final version of the timeline revisited the full screen size image technique of the initial prototype, and introduced a more intuitive scrolling navigation method. I used Timeline JS – a JavaScript based solution that can pull in content from a variety of sources such as Flickr, Twitter, Google Docs and more. It can be served up through a Google spreadsheet making it very easy to manage, although the version you see here stores the content in our own WordPress install and uses JSON to manage the data.