Case Study: Typographical Specimen ‘Interstate’
An alternative take to a well regarded typeface.
Firstly, I’d like to thank the readers into taking a look into my body of work. As I now enter into the world of UX/UI Design, I’ll be posting up many other case studies in the future .Hopefully I will look back at this post and feel that I’ve come far with my learning and understanding in this new found path.
Project Brief:
The goal for this project is to create a desktop landing page for a typeface. The landing page is to have well a balanced layout that helps to optimize conversions for user download of its content. The typeface that was assigned to me was ‘Interstate’.
Before we start on the subject matter it is important to understand what a typeface is. To simply put, a typeface (or a font family) are series of fonts that all share a common design language to which they belong to. Fonts of any typeface are then subject to the size, weight and style, subsequently to be used on a subject matter that would lend itself well to. Typeface are the written languages, styled in many ways to help invoke emotional responses.
Subject Matter: ‘Interstate’
Interstate was created by Tobias Frere-Jones, an American typeface designer hailing from New York. He is an accomplished type designer, having contributed to vast selection of typeface looks throughout his career since 1987. Some of his body of work include Armada , Benton Gothic and at present Empirica (In collaboration with Nina Stossinger). Presently he lecture at Yale University in the Master of Fine Arts.
Tobias Frere Jones, developed Interstate from its close relative, the Gothic Highway typeface. As both names suggests, the primary usage of those fonts are for road signage across the American roadways.
Design Inception:
Because words can invoke mental images to a user, the name Interstate immediately gave me a picture of an open highway. As I looked more into the typeface and its font, I could not help but feel that it was more than just fonts for road signages. Because the fonts were designed to be legible, some would think of it as being simple. But its simplicity is what I liked about it. The fonts were clear and open. So with my design inception I mapped out the over all sense of what Interstate had potential for.
Mood Board:
Based off my Inception sheet I created a mood board that reflected my own feelings of what Interstate can be like. I wanted to give it a sense of vibrancy, a more approachable friendly state. My mind kept going towards the word open to which I started to look at the sky.
Wire Framing:
Coming up with a layout proved to be more daunting than I anticipated. As someone with a Textile Design background, technically I should be able to formulate a look that would lend itself to the typeface. Sadly it took me a minute (more like hours), to at least figure out a design using the sky as a starting point. As luck would have it, there are in fact a multitude of resources that you can get inspiration from. A shout out to Leo, my instructor on introducing those resources. Those resources ultimately led to my landing page that my typeface would be represented by.
Style Guide/Tile:
Once I figured out the approach for the landing page I assembled a simple style guide(or tile) that samples the colours, and font guide to be used in the creation of the landing page. Style guides are important foundation templates as it provides a reference and in a sense, an inventory to what your page would look like.
Landing Page:
Once I managed to figure out a way to use Photoshop, I was able to assemble my landing page as you see today:
My design thinking lead me to the use of using hot air balloon for imagery. The visual elements such the sky and the saturated hues of the balloons, in my opinion, captured the potential of what the typeface can be used for. I would imagine that the balloons would move up and down as you would scroll along. An interactivity would really take a users interests as the element of fun is within the page. The Interstate font has many logo and print potentials. There are companies such as Citibank, Soundcloud and Lamborghini that have used this typeface. If you look at Soundcloud Interstate font, you can see how the crispness of it gives music listeners a subliminal cue that it is a space were music can be heard clearly, an open realm where users can upload music of their creations and likings. With my own landing page I wanted to give off a similar feeling. Sometimes, simplicity of fonts can resonate more powerfully than fonts that have more stylistic qualities. If one were to further scroll go down to my landing page, four fonts are available for a hypothetical user to download. The way I presented the font styles were in a poetic fashion that conveys its usefulness.
The landing page itself would naturally be within a a confines of a laptop (even a desktop) The result would look like this:
Critical thinking:
For my first project, I am rather happy as how the landing page has turned out. The open skies, with the vibrant hot air balloons and the clearness of Interstate fonts really gives them a fresh look rather than an a typical road signages imagery. However I do feel that improvements are to be made on my own landing page . But as far as my first project to create a typographical landing page, I am proud. Any tweaks I will eventually come to do and update here as I further advance my understanding and knowledge of UX/UI Design. Tweaks such creating interactive hot balloons is something I would like to attempt later on and upload.
Thank you everyone who has taken the time to view this case study. I am always looking to improve my understanding and skills, so that I too may able to contribute to the creative realm of UX/UI.
All Content is copyrighted and used here for educational purpose.
