INTERSTATE, BOLD AND BRAVE
Typography Specimen and Landing Page Design
Background
This was my first project at RED Academy UI course. In this project, I was tasked to create a well-structured and designed web desktop landing page that is optimized for conversion and showcases a typeface which was assigned by our instructors.
My designated typeface was the Interstate. So join me now and embark on a journey to discover the uniqueness of the Interstate typeface!
RESEARCH
History
Interstate is a sans-serif typeface designed by the famous type designer Tobias Frere-Jones and released through Font Bureau in 1993. The design of Interstate was based on letters found on the US interstate highway signs. This typeface works well as a signage font due to its clear legibility even at a distance and clearly-differentiated letterforms.
Frere-Jones’ Interstate typeface, while optimal for signage, had several refinements later, making it suitable for text setting in print and on-screen, and gained high popularity since the 1990s.
Uniqueness
I discovered that this typeface has some very unique features: First of all, the counters have open apertures (which means the strokes don’t touch each other) in order to enhance legibility;
The terminals of ascending and descending strokes are cut at an angle so it showcases a sharp and edgy feeling;
And for the terminals on curved strokes, they are drawn at a 90 degree angle also for legibility concerns;
Next, for the capitalized E and F, the middle strokes are a bit shorter. And the punctuations are based on a trapezoid shape.
All these aesthetic traits contribute to the unique spirits inherited in the interstate typeface that is like no other.
Existing Clients
After some more digging, I found out that a lot of organizations are already using this typeface. Like Lamborghini, they use it as the corporate typeface and the main typeface of their website; Stutterheim use this typeface in their brand logo; UK overseas campaigns use this typeface to make all of their posters, and it is the corporate typeface of CITI Bank. So without doubt, Interstate typeface is well-received by the industry.
The Spirits
From the above research, we can see that this typeface is often associated with road signages, journeys, outdoors, running, racing, explorations and cars, etc.
Following this direction, the Interstate typeface is endowed with spirits like being brave and bold, eager to explore the unknown but at the same time being very reliable.
DESIGN INCEPTION
The Why
After I explored the spirits within the Interstate typeface, I came to a conclusion that for my design inception “why”, I would like to make clients impressed by the spirits of the Interstate typeface and thus purchase a license.
Mood board
For my mood board, I want to convey the brave and bold spirits, together with the feelings of being forever adventurous and on the road. I was also inspired by the illustrative styles and energetic colours.
Visual Language
So here comes my visual language:
Colour: I used bright orange, forest green, turquoise and scarlet in my colour palette to showcase the bold and brave vibes.
Movement: I expected the movement to be very interactive, especially with the illustrations so that I can create a fun and gamified user experience.
Shape: For the shapes, I used geometric ones accompanied by round edge buttons to create a visual balance.
Space: Last but not least, I want my page layout to be spacious, with boxy sections and places to hold big illustrations.
Design iterations
After design inception, I did 2 wireframe sketches for my landing page. One featured more realistic illustrations and the other was more of a modern flat design style.
I tested them with my classmates and received mixed feedbacks. My instructor advised that I could actually combine the 2 styles and find a mid-point, so here is my final visual style:
I combined illustrations with modern flat design, with bold colours and a sleek layout. The header font size is very big so that I can showcase the aesthetics of the typeface.
And since I adopted an illustrative style, I would need to make all visual elements unified and coherent. Like for Tobias’ headshot. I did the illustration in Adobe Illustrator and then imported back to Photoshop.
Below is my final style tiles:
Deliverables
Digital Prototype
Please check below for an interactive prototype:
Page Summary
Reflections
In summary, I used illustrations, bold colours, big font size to showcase the uniqueness of the interstate typeface in order to impress the potential clients with its spirits and thus make a purchase.
Key Take-aways
For future projects with Photoshop, I think it is necessary to always remember to group layers, and name them properly. This good practice would save you from a lot of troubles.
