Avenir Next Case Study
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.
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.
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.
