Avenir website case study

About the project

This is a typographical specimen project to showcase the typeface Avenir in terms of its usage, applications and fonts. The website can also provide background or story behind the development of Avenir in order to create more context, identity and depth as to how, why and where they can be used as both a typographical or visual element. The ultimate goal is for users to purchase the typeface.

Phase one: prototyping

There are two questions crucial to the success of the design. In phase one, I was trying to answer the first question: what are users looking for on a font website?

After some research, I gathered some core information about Avenir and put together a mood board.

Avenir means “future” in French and it is a humanist typeface. So vibrant blue is chosen to show Avenir’s modernism.
Avenir gives an impression of simplicity and fun.
There should be some usage examples to showcase Avenir’s applications

Color scheme

From my research I drew the conclusion that blue is the the most suitable color for Avenir. Next, I chose pink to pair with blue to create a vibrant contrast.

Information architecture

It is critical to understand potential users expectations in order to decide the information hierarchy of the website. I made a list of what users come to the website for:

  • to browse basic information of the typeface
  • to look at the typeface in details to decide if the typeface fits in their design
  • to see some application examples to help them see the typeface in their own design
  • to try it out themselves
  • each step above leads to the decison- to purchase it

Therefore, I designed five sections to cater to these needs: overview, styles, samples, try it and purchase.

Phase two: style concepts

In phase two, my task was to find an answer to my second question: how to make the website interesting?

First, why is making the website interesting important? The major users of the website are designers or people who design in a broader sense. When the target audience is them, an interesting design of the website are more likely drive more traffic and sales.

After identifying my target market, it naturally came to my mind that simplicity will be important. Not only because Avenir is a simplistic typeface, but also designers or anyone really are usually fond of simplicity verses complexity or chaos. In another word, the website will try to avoid crammed information and too many visual elements.

Style tile

Phase three: bringing it together

It is a tricky task to be both simplistic and interesting. I took the advice from my instructor and went for a diagonal layout. It is a gentle surprise and rather effective grid.

the complete page

Display and samples

For these two sections, I want to reduce any redundant information and visual elements, so instead of showing duplicate alphabet boards in different styles I chose to put controls around the display panel so that users can manually choose and compare. Same rule goes to samples section. Carousel was chosen to showcase the examples because users would be able to look at each sample by itself on a white background. It is also easier to imagine their own works with the use of the typeface on a white canvas compared to another display option: multiple examples crowded in the same space.