AVENIR LANDING PAGE
A UI CASE STUDY
What is Avenir? |
Avenir is a sans serif font type that was created by Swiss typeface designer Adrian Frutiger in 1988. Adrian was very familiar with sans-serif fonts, in fact so much that he got bored with seeing the same repeating patterns over and over again. That is when he decided to create a new font that being Avenir which was uniquely different from the rest. Avenir is a French word that translates into “future”, and this was Frutiger’s intention to create a font more suitable for the modern evolving world. With it’s sleek yet sharp edges and linear form, combined with it’s smooth curves avenir’s intention is to portray an even balance of shape. What is it (e.g. website, native app)?
The Opportunity |
Being my first project of user interface design my class and I were instructed to design a landing page for a typeface that was to be drawn out randomly from a hat. As you can probably guess I had drawn avenir. We were given a week and a half to complete the project using the new methods we had learned during the first week.
The Challenge |
Having learned sketch from my previous experiences in design I was getting quite familiar with it. For this project we were introduced to Photoshop, I found it to be a lot more complex than sketch. This was definitely my biggest challenge in the project, going from sketch to photoshop was mind boggling.
The Why?
Design Inception |
After much research and consideration I was finally able to conclude my “why.” One key piece of research that truly helped me determine my why was a quote by Frutiger himself.
With this I was able to start connecting the dots. Seeing as there are large companies and cities such as Samsung, Snapchat, Walt Disney, and the city of Amsterdam who all use avenir as there primary typeface. All are evolving currently in the modern day along with so many more. Being called “future” and with the research provided I knew exactly what approach I wanted to take with this font. The why? To give a clear and clean representation of modern evolving trends.
Design |
Using my design inception sheet as reference I was able to somewhat visualize my design.
Although to put my visualization into reality I needed to create a moodboard.
Moodboard |
By creating a moodboard it allowed me to actually see types of shapes, patterns, and even some of the colours I wanted to implement in my design. The moodboard helped in the sense that it allowed me to look back and reflect also keeping me in check to make sure that I was sticking to the design direction of my choosing.
Once I had a clear perception of analyzing imagery I decided that it was time to start sketching and sketch I did!
The objective was to keep my design sleek yet round and smooth just like my typeface. I began by just sketching out different patterns and shapes also keeping in mind how I could combine the shapes together. I had a general idea of how I was going to go about creating the flow, but I was starting to run out of time. I wasn’t able to sketch every single screen, time constraint and lack of photoshop experience was the main reason why. So it was time to advance towards creating mid fidelity frames in photoshop.
Mid Fidelity |
Finally I was able to start visualizing the final product landing page. Yet I was still somewhat concerned with time and the usage of photoshop. I was also unsure if the layout of my mid fidelity screens matched my “why”, at this point all I could do was trust my gut and just go with it.
Final Product |
Spacing/Structure |
To stay true to my design and the font avenir I kept it as clean as possible. Not having too much going on in the background and giving the letters space to breathe. To add an essence of modernism I implemented hints of glow throughout my page where I believed necessary. Just enough to deliver a technological feel and not a gimicky playful mood.
Shaping |
The shaping came about slowly, I used decently sharp shapes with rounded corners trying my best to keep it evenly balanced throughout. You can see that balance in play as you transition from the alphabet page descending down towards the variants a very sharp and precise flow diagonally. Countered with an image of circular flow.
Future Considerations |
Had I had more time with Photoshop I would have loved to have kept iterating my design piece. In the future I would definitely consider adding more depth with shapes and imagery having gained more experience. I would also consider touching upon font pairing that goes with well with avenir.
Takeaways |
This is the first project that I did in user interface design. In our very first week were introduced to methods and concepts used in design. Starting with learning the basic elements of Photoshop which we used to create our landing page. Using these tools I was able to create this landing page. Overall I couldn’t be happier with how it turned out.
