Montserrat: A UI Case Study For A Typographical Specimen
Introduction
The goal of this project was to create a desktop landing page to showcase a typeface we were given. It was a solo project and I was given the typeface Montserrat. Before diving into design, the first step was to do research.
Research
The Designer:
This typeface was designed by Julieta Ulnavosky in 2011. Her inspiration of this font came from traditional old posters and signs found in the historical Montserrat neighbourhood of Buenos Aires where she lives. She wanted to design a typeface that rescues the beauty of urban typography from the first half of the twentieth century. The Montserrat typeface draws on rich history of craftsmanship and local knowledge to combine and preserve in a new, open source free typeface ready for use in the most modern environments.
The typeface started out as a crowd funder on kickstarter aiming to raise $5,000 and was successfully funded on November 19, 2011. She published the typeface as a free web font in Google Fonts.
Features of Montserrat:
It is classified as a sans serif with 18 styles and 9 weights. This typeface is similar to Proxima Nova, Gotham, Futura, Arial and Helvetica. Some characteristics that make Montserrat special is the Q in particular, it has a cute tail and the J has a wonderful cross bar on the top of the letter.
Montserrat is very versatile and can be used in multiple domains such as websites, the publishing world, branding, editorial, logos, print, posters, etc. It is a typeface that can be used basically anywherebecause of the geometric and elegant simplicity with nice large x-height.
Target Audience:
For this project our main persona are other designers who are looking to use a new font for their designs.
Design
Design Inception:
The first step in design is to create a design inception sheet. It is a tool to allow us to organize our thoughts and different elements of the typeface into descriptive adjectives. My initial thoughts of the typeface is modern, simple, strong but timeless and chic.
The Why:
To show designers this typeface will give their work a contemporary feel while still being practical for everyday use.
The Mood:
From my research and the feeling I get, the mood I wanted to convey is strong, calm, modern and fresh.
The Space
Open and minimal
The Shape
Triangles, geometric, edgy, and angular
Movement
Guided and linear
Colours
Muted colours, blue, grey, pink, white, gold and transparent
Moodboard:
A moodboard is a curation of photos I found inspired from my design inception. From my design inception I kept thinking of mountains and nature because of the strong but familiar calming lines of the typeface. When I looked at the typeface it gave me a feeling similar to the one you get when you reach the peak of a mountain or a hike. I picked pictures with a pleasing and calming feel paired with lots of soft muted colours and strong angular shapes to balance out the softness.
For my colours, the top two (pink/blue) are accent colours, the brighter of the bunch but still muted to give the landing page a pop. The gold and dark blue are contrasting colours and the two greys are for a balanced neutral for the modern minimal look.
Paper prototype
For my wireframes I played around with using different shapes to create images to showcase the content before moving on to hifi. I only had the structure of the landing page and figured I could play around with colours later on. I originally thought the background of the landing page would be a gradient colour but decided on images to give it more character.
First Iteration
There were many changes when creating my landing page. Some feedback I got from testing was
1. It was too text heavy and didn’t allow any breathing room. I ended up separating the texts into chunks and scattered them orderly throughout the page.
2. I initially liked the triangles on the header but there was too much going on so I removed them and was going to use them on different elements of the page but ended up removing them entirely.
3. I rearranged where the weight and style icons go into their own section since they did not fit with the history section at the beginning.
Conclusion
This was my first time doing UI and there was definitely a learning curve. It was a fun project overall and I am pleased with the outcome.
Some future considerations if I had more time
1. Make it more clear that it is a free typeface. I do explain the typeface is free in the history section; however if the user is just scanning for prime information I would want to make it more prominent.
2. Provide examples of special characters, numbers, and the full alphabet. I only show certain letters but showing every single character would be beneficial.
3. Show and explain the sister families Alternates and Subrayada. These sister families aren’t as popular but it is still part of the Montserrat typeface.
4. Provide some anatomy of the typeface and really show why and how it is different than other similar typefaces.
This is the final product I made and many of the elements I wanted came out nicely. I find it is very guided and your eye follows where the triangles are as it guides you through the landing page. I made a carousel to showcase the different ways Montserrat is used to keep the minimalistic feel.
The typeface has a vast history and to reiterate the Why:To show designers this typeface will give their work a contemporary feel while still being practical for everyday use. I feel I have captured that because one of Julieta’s vision for this typeface is to “preserve it and have it used in the most modern environments…As urban development changes this place, it will never return to its original form and loses forever the designs that are so special and unique.” Julieta Ulanovsky
Below is the link to the interactive prototype on invision
