IDEA
Create an interactive timeline illustrating the history of photography
INSPIRATION
http://jessandruss.us is a one-page website that narrates a couple’s relationship with the use of a timeline. I think this website has a clear visual hierarchy, and uses text, image, and animations tactfully and playfully to call out pieces of information. I also enjoy the subtle, whimsical background image and the consistent back-white-gold color scheme.
The https://mixpanel.com/about/ page has a timeline that is very straightforward and easy to follow. I like how blocks of paragraphs point to a plotted point on the timeline, and each year is called out on a larger plotted point on the timeline. This makes browsing and scanning the entire timeline easier.
PROCESS
Color Ideas
Neutral tones will give stability to a timeline that contains a lot of information. A pop of color will provide interest and highlight important information.
Preliminary Mock-Ups
In my mock-ups, I started by adding a central axis that would run the entire length of the page. I then arranged information to the left and right of the axis, in an alternating fashion. I also explored creating a more whimsical timeline with loops and curves, but I decided against this because I did not want to cause any confusion to my users. I also expermented with different color schemes, navigational menus, and pop-up/modal windows.
FINAL DESIGN
website demonstration
full-page layout
modal window examples
In the end, I chose to place all of my images inside of modal windows instead of on the main page. This way, each image can be loaded individually when called upon, and the main page is able to load more quickly. Inside each modal window, I also placed external links for users to explore if they wish to seek further information. These links also serve as references and help to increase the website's credibility.
