Avenir Next Case Study

Typographical Specimen Landing Page

Introduction

This was my first design project. I was to create a landing page that showcases Avenir Next, a geometric sans-serif typeface.

This was my first time using Adobe Photoshop in a long time. Needless to say, I was very excited to get started.

Research

In my research phase, I found out this geometric sans-serif is used in a variety of ways. It was used from business cards, to movie poster title, to design studio websites, to apps in different parts of the world. It is very versatile with 6 weights.

Through my landing page, I wanted to showcase Avenir Next as the modern typeface that looks professional and sophisticated.

Moodboard

Mood & Visual Language

I created a moodboard by searching for these keywords:

  • Soft
  • Light
  • Modern
  • Refreshing
  • Neat
  • Professional
  • Trustworthy
  • Sophisticated

I really loved the geometric shapes in my moodboard. The piece on the left was really beautiful and inspiring. Since Avenir Next had rounded shaped letters, I wanted to incorporate that in my design.

Base on all the information and moodboard in front of me, I want the design to feature smooth flow, and lots of negative space to look clean. In terms of colour and texture, I wasn’t sure.

Wireframes

Wireframes are skeleton of webpages. It was a new concept for me. But it did help me to think about what content I want to put on the landing page before I dive in with tools like Photoshop. After 10 iterations of low fidelity wireframes, I am happy with the final version.

Design Process & Challenges

It’s time to realize my vision. Here comes the most exciting part. I had challenges finding a stock photo to work with that fits with my aesthetics for this project.

At one point, I decided instead of spending endless hours finding the perfect stock photos, why not create my own design from the start? I knew that I want to play with shapes for this design. So I launched Photoshop on my MacBook Pro and started drawing some round shapes, and playing with lines.

Early Iteration

I started to work on rest of the content on my landing page. Through research I knew it was used in Apple Maps and Paper app on iOS. I want to feature them at the top. Then, I went on to showcase how Avenir Next looks on the web and how it can be used in print in addition to showing different weights and the letters.

I played around with 2 call to action buttons, but it ended up being too confusing so I sticked with one. I wasn’t able to completely follow my wireframes because some elements weren’t as visual appealing as I thought they would be, such as the 2 side by side circles on the photo above.

Key Learnings

I had always been interested in typography but never looked into it beyond “that font would look good here”. This was the first time I really took the time to research about one typography. I really like Avenir Next.

In addition, this project gave me hands on experience with Photoshop.

Avenir Next Landing Page Final Version
Like what you read? Give Lily Yang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.