Timeline
Type: Timeline website
Role : Designer
year : 2024
The task: Create a timeline website based on the history of a typeface.
My goals: As a user explores the content, I want them to have a sense that they are traveling a linear path, from one year to the next.
I chose to feature the typeface P22 Underground from P22 Type Foundry. Because the history of that typeface is directly linked to the London Underground, it would be a shame to miss the opportunity to incorporate the rail line itself as an element of design in this linear journey.
Navigation Options
Horizontal Scroll
My goal was to create a sensation of traveling in a linear path because we tend to discuss time as a linear path. I realized that if I design the page to scroll in the same direction that one would read (designing in English) the eye would not have to change direction as often or abruptly, contributing to the sensation of fluid forward direction.
Dropdown menu
From the dropdown menu. users can navigate to any point on the timeline with a click. Each link includes the year, the topic and a brief tagline about the topic.
Timeline bar
The bar across the top, stylized like old maps of the London Underground, has two roles. First, as one scrolls through the page, the year on the bar correlating to the user's location within the page becomes highlighted. Second, the years on the bar can be clicked to send the user to that year within the page.
Static Screens
(Scroll )
(Scroll)
(Scroll)
Styles
The color palette arose from a desire to modernize something from a past era, just as P22 has done with this typeface.
I started with the idea of using blue and orange/gold of moderate saturation, thinking of faded dark colors or the yellowing of old paper. But, to bring excitement, depth and modernity to the scene, I instead opted for colors of high saturation, adjusting the opacity and blend mode of layers.
typography
Components
Spacing
Earlier Iteration
This earlier version shows a color palette that is more subdued, giving a more vintage and aged feeling to the content, as to reiterate that the content is focsed on past times.
The change in color ultimately arose because the page needed more contrast and depth.
You may notice I introduced a second typeface for body copy in this version. On second thought, that felt ridiculous - the web page is all about a typeface that offers enough verstality for any situation.
These pages had way too much body copy…apparently people don't like to read anymore, so the new version has less text to be easier on viewer's attention spans.
The biggest change came with converting a multi-page site to one page, coupled with a swap from vertical scroll to horizontal. As mentioned above, that change is meant to create more continuous, linear experience.