interactive timeline / designer
OCTOBER - NOVEMBER 2019
Paul Rand was a graphic designer known by many as the master of Modernist design. My task as the sole designer of this website was to create a prototype of a working site that honors Paul Rand's legacy and work for a hypothetical commission by the estate of Paul Rand . I designed the prototype in a timeline format that displays Rand’s top clients and work from each year of his career in a comprehensive space.
EXAMINE each part of the problem
ORGANIZE information so that it is easily understood
DRAW CONCLUSIONS that allow you to move forward
REFINED sketches emphasizing best ideas
COMPOSED RESPRESENTATION of design concepts
EXPRESSIVELY + CLEARLY communicate an idea
DEFINING the problem
PREPARATION of visual elements
EXECUTION of ideas
PRODUCTION of final product
PRESENTATION of product to client
To prepare for the design of this website, I first read Paul Rand's book Thoughts on Design.
I deeply analyzed Paul Rand's existing website showcasing his legacy, life and work. I took notes on this website and its usability according to Rand and Krug's standards in order to identify what parts of the website I could use for inspiration and what I should exclude.
I referred to Steve Krug's Don't Make Me Think Revisited to study the rules of modern web design for maximum usability. I chose a few of these concepts to focus on in my design.
After analyzing Rand's Thoughts on Design, I constructed a list of 32 rules of design according to Rand. I made a table with two columns: one for the rules and another to record how I followed those rules in my own design.
My design began as a combination of a concept that I have experimented with in many of my interactive designs as well as a new concept that I was excited to play around with for this project. The concept that I am building on consists of a multicolored header or logo with the colors of the site being extracted from said component.
The new concept was inspired by Rand himself: making letters and spelling words out of shapes. It is a combination of his emphasis on using representative symbols, and his claim that style, individuality and effectiveness can be more important to a design than readability (Rand 13, 76). I incorporated this concept into the logo and site ID of my website, with multicolored triangles and shapes that spell out PAUL RAND. The logo is meant to allude to the concept of design as a whole by being made of geometric shapes and a combination of light and dark hues of high-contrasting colors.
COLORS + Shapes
I incorporated the colors and shapes from the logo into the site so the design would be cohesive. I implemented triangles as symbols to represent arrows that guided the user down the home page. Since these triangles are aligned throughout the entire page, they served as a line for the timeline to stem from. Solid triangles are aligned and repeated to create movement down the home page, while outlined triangles serve as markers for years.
The logo is also made up of rectangles, and I resolved to separate the designs from each year with rectangular containers that match the colors of the logo. As in a traditional timeline, the years alternate on either side of the timeline, so they are presented vertically in rows of two. Because the logo contains high-contrasting colors, the rectangles placed side by side and centered in the middle of the page create the illusion of a line down the middle of the page. The use of light and dark hues of complimentary colors throughout the site alludes to both the concept of design and Rand’s work specifically.
I had the idea of separating Rand’s work into a timeline to show the progression and evolution of his style. This design choice helped narrow down his work, as it made sense to include only one design per client per year. The greatest challenge of this project was figuring out how to create a timeline within a two-dimensional interactive space.
Traditionally, timelines are lines that span horizontally or vertically with alternating years on each side of the line as a means of separation. As in a traditional timeline, the years alternate on either side of the timeline, so they are presented vertically in rows of two. Because the logo contains high-contrasting colors, the rectangles placed side by side and centered in the middle of the page create the illusion of a line down the middle of the page. I included the timeline in the navigation bar making it the first thing a user sees on the landing page, followed by a photo of Rand and reassuring text that claims the website is a timeline makes the purpose of the website immediately clear to the user.
The design of this website began with thumbnail sketches of the ideas I conceptualized during the earlier stages of this process. I knew the concepts that I wanted to implement into this design, and I alternated between sketching the ideas out and testing them in a prototype. The following are rough sketches of the layout of the design and the colors and shapes I would use throughout the website.
rough sketches of the logo
final logo and site ID
The following is the working prototype of this website. This design was never intended for public use, but more so as a tool for me to explore the possibilities of design within a limited context. I wanted to display the work of Paul Rand, a graphic designer who has moved audiences including myself with his careful design choices. The wisdoms of both Rand and Steve Krug show themselves in the design of this website. By following their teachings, I was able to design a website that played with an ageless concept in a modern context, and display the legacy of the master of modernist design in a space that can live forever.
Note: This is not a fully functioning prototype. The interactivity of the prototype is limited to show the potential of how the website would function.