Avenir — “A time for fonts with a human touch”
The goal of this project was to develop a design for a landing page that markets the typeface as well as to be optimized for conversion.
This landing page would serve as a typographical Specimen (Type Spec), which gives context as to how the typeface can be used as a visual element in a design. The typeface for the project was the Avenir Font.
What is Avenir?
Avenir is an elegant and modern typeface with a variety of applications in the business world. It’s uses are not only for display purposes but also for large body of texts. The different variations of Avenir make it possible to use for a variety type of mediums. For example; digital, billboards, books, blogs, and graphics.
It can be used to add style and simplicity to a project. It has an easy and clean feel. It’s simple and crisp typeface is one that brings an organized atmosphere to a body of text.
The first step was to conduct research on the Avenir Typeface. This involved finding all relevant information about its features, history, as well as process and development.
The key highlights are the following:
· Avenir was created in 1988 by famous typeface writer Adrian Frutiger
· Avenir draws inspiration from the typeface ‘Futura.’ Adrian Frutiger wanted to improve on the Futura font and add a more human feel to it.
· ‘Futura’ translated to Future in latin, wheras ‘Avenir’ means future in French.
· In order to create Avenir, Frutiger shortened the ascenders, made the horizontal strokers thinner than the verticals, and made round shapes more oval. These refinements are meant to increase the legibility of Avenir, especially when used in long texts.
· The font has 12 weights to it, which are slightly similar to each other. Each one of them however, is designed for a different purpose. The variety of similar weight conditions make the fonts optimal for varied printing conditions.
Design Inception Worksheet
This worksheet helped me verbally conceptualize the design aesthetic I wanted to deliver:
The main purpose of the design of the typeface is to market it for formal and semi-formal purposes.
The moodboard is essential in visually communicating the feel and style of the design. The follwing quote by Adrian Frutiger has really resonated with me:
“A time for fonts with a human touch”
This inspired me to portray the interdependent relationship between mankind and human nature, as well as the geometric shapes found in vintage Avenir posters.
I wanted to capture what modernity felt like in 1988:
Low Fidelity Prototype:
The font Avenir really excited me. I loved the stylish statement it creates without jeopardizing versatility and neutrality. I couldn’t wait to sketch some low-fidelity sketches. The vintage posters inspired me to use geometric shapes and colour overlays. Therefore, I came up with an idea to display the Header as a colour transition separated by a crooked line.
The paper prototype also incorporated the use of 6 grid columns, in which all the content is confined into:
One of the biggest challenges I’ve had was how to properly showcase the different types of weights of the font. If I was to list all of them on the page it would take up an enormous amount of space. However, I figured by giving the user the option to switch by clicking between weights would be the most efficient option:
High Fidelity Prototype
In order to further elaborate on the 1988 inspired style, I’ve incorporated more colour overlays between sections, as well as another crooked line to match the header section. I’ve also used a pattern overlay to give that worn old magazine texture.
In order to view the final High Fidelity Prototype please click here.
The main learning curve I had to face is learning Photoshop. I have previously had experience working in Sketch, but Photoshop was still a new experience for me. It was a bit frustrating at first, however I can now appreciate the plethora of powerful features the software has for image manipulation. However, for web design, I still hold the opinion that Sketch is incomparable.
The only element that I realize I should have added is an immediate Call-to-Action in the header section. Without this, the landing page is not optimized to conversion.
Overall, I believe the landing page design is highly successful at communicating the elegance and simplicity of the Avenir font. This was done in a style that is reminiscent of 1988’s interpretation of modernity.