Case Study Tungsten Typography Specimen Landing Page

Jennifer Ta
Jul 24, 2017 · 4 min read

Overview:

Coming from a very logical, objective, linear thinking, and technical world of development, it was a huge adjustment for me to transition to the world of design which focuses on intuition, creativity, and emotions. The challenge of exercising my left brain for the first time was prominent right off the bat when I was asked to look at different types of fonts and to describe how they made me feel. I just thought… what? It’s just a font.

With that said, you can probably imagine that there was a lot of self-doubt as I venture through my first project of designing this landing page. As with most challenges in the story, there is usually a rewarding outcome at the end. For me, that reward was a brand-new appreciation for the art of typography, introducing myself to new tools in Adobe Photoshop, and learned how to present subjectively by justifying all of my design decisions.

It was such a rewarding learning experience and definitely not the end of the entire story. Please read on to learn more about my introduction to design and typography.

Project Goals:

The task of this project was to design a landing page that showcased a randomly selected typeface and to make sure that it was optimized for conversion.

The design process:

Research:

My perspective: Learning about my own perspective for this font without any biases consisted of a whole day of just looking at the raw font. I observed the shape, height, curvature, and spacing of the letters as I compared it to other fonts side by side.

Perspective of the original font designers Hoefler and Frere-Jones: Another part of my research included learning about the intention of the design by Hoefler & Frere-Jones. Naturally, one would assume that researching about font specimen would be scientific and technical. It actually looked more like this;

“disarming instead of brutish”

“one that employed confidence and subtlety instead of just raw testosterone”

“more Steve McQueen than Steven Seagull”

The designers used drinks, personalities, and people to demonstrate the characteristics of the font. This really helped me relate to the font because it’s a lot more familiar to relate specific personalities to people than it is to a font on its own.

History:

Designed by Hoefler & Co in 2009, Tungsten is a flat sided san serif that is mainly known as a strong and bold heading font. This style of a flat-sided sans –serif is known as a gaspipe and was being used by graphic designers for posters because the flat sides made it easier to space letters. The designers created 4 widths; normal, narrow, condensed, and compressed and 8 different weights in order for Tungsten to be versatile. Although, initially designed for print, Tungsten is moving into the modern world as it is commonly used in websites, and app because font is clear, bold and easy on the eyes.

The Design Inception:

1. The Why

All great designs start with Why. So the next step of my design process was to think about why anyone would want to use the font. I started with myself, and brainstormed with sticky notes of when I would choose tungsten over anything else.

I then had to think about other designers. So who better to ask than other designers. I asked my classmates, my instructors, and of course looked online at other designs that used Tungsten. I read case studies about other people’s designs and why they chose tungsten as their primary font. More sticky notes were then added.

My sticky notes helped me conclude the Why for my design and that is “To convince and sell the font Tungsten to designers that need to create a message or art piece that is persuasive, impactful, and confident”.

2. The Mood

The next challenge was to describe the why into a mood. Again, going back to sticky notes, I brained stormed what persuasive, impactful, and confident moods look like.

When I think of Impactful: Storm like weather, and loud

When I think of Persuasive: strong, powerful, energetic, and influential

When I think of confident: bold, fearless, brave, and secure

The more that I thought about the mood of Tungsten, I started to imagine a person; that person was a modern James Bond.

3.Visual Language:

The mood then needed to be conveyed into the 4 visual languages of design; Colour, Space, Shape, and Movement.

Colour: I chose the following colour palette, black, grey, white, and red as they were bold strong, and loud colours.

Shape: I wanted a combination of tall shapes with some curvature as I wanted the landing page to represent the shape of the font.

Movement: When I thought about movement, I used angled shapes to seamlessly guide the viewers eyes through the page.

Space: Just as how Tungsten is to take center stage, the landing page is designed is to use space to support the images and text. Thus, I intentionally made the space quite empty and open in order to accomplish that.

Mood board:

This was my favourite part of the design process because it was when I can start visualizing the look and feel of my landing page. Utilizing Pinterest as my platform, I starting collecting images and getting inspiration. At one point, I noticed that my pictures didn’t quite make sense and I started to see multiple designs instead of one. I then filtered my image using my design inception as a strict guide and came up with my final mood board.

Wireframes:

Hand Sketched Low fidelity: I started to sketch out my landing page roughly to get an idea of how I wanted to put my content together.

Medium Fidelity: From here, I took my low fidelity wireframes, and went to Photoshop to clean it up to get a better visualization of my landing page. This is where I started to incorporate movement, shapes, and space together.

High fidelity Prototype: Finally, I began to add images, colours, and text to my wireframes to bring my design to life.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade