Merriweather / A modern classic font
I was given the opportunity to create a landing page for the font ‘Merriweather’. Landing pages aren’t something I’m familiar with and
I found it can be quite challenging approaching a new project, especially if
its something you’ve not worked on before, with out a game plan; however, following the design process listed below I was able to achieve my goal. It is structured, logical and made the project less daunting as each step leads into the next one to create a solid, final end product.
Research
The first thing I decided to do was look at some existing landing pages so
I could get a feel of what I wanted to create and I then broke down those pages down to 5 key points of interest: unique selling proposition; benefits
of our offering; visual support; social proof and a single call to action.
Next up was studying the font: looking at the characters, glyphs and weights to try and get a real feel for it and to see what sort of emotion I felt it evoked and what direction I could take the design in.
After I had done that, I then looked into the origins of the font, its history
and its purpose. I learned that it was created by Eben Sorkin at Sorkin Type,
a type design foundry based in Western Massachaussets, USA. He was born
in 1967, and has been creating fonts for only the last 10 years, which makes Merriweather a relatively new font, despite its classic feel. It was also designed specifically for digital use and not for print. It has over 900 glyphs, been featured on 2,700,00 websites and it’s free to download.
Inception
The next step in the process was using the design inception sheet which is a great way to help set some parameters for your design. I put into the middle circle, the ‘why’: why would the user what to use this font? I concluded that, “You want a modern font, with a classic feel that’s designed specifically for digital screens”. From there I moved to the mood: what mood did I want the landing page to have that was inspired by the font? What sort of emotions
did it evoke? What choice of colour would reflect the mood? What shapes
did I want to create, and finally, what motion did I want the page to have?
You can see the results from this below:
Mood board
This analysis enabled me to move on to the next phase, the mood board. I set about collating some images that I felt reflected the mood from the inception sheet: modern, classic, professional, clarity and retro and I used these to set the tone and influence of my landing page.
Affinity diagram
If you’ve not done an affinity diagram before, it’s a simple process of writing down the key components of your website on individual bits of paper so you can move them around to visually create a logical and natural flow of your website or landing page. You could do this step digitally, but I found doing it on paper was much easier. Its good practice to create this diagram as it will save time when it comes to the wire frame because you will already have a good idea of the layout. If you do have any tweaks to the final layout then this can be done at the next step.
Wire Frame
Once you have your affinity diagram finalised, it should make the construction of your wire frame relatively easy as you will have already determined the bulk of your layout (a wire frame is a low fidelity drawing
of what your landing page will look like). There will always be room for refinement, especially if you are taking your grid into consideration.
The layout will need to work dynamically from desktop to mobile, which
was an additional factor I needed to think about when designing my layout.
With the mood of the landing page decided and the layout determined.
It was now time to look at how I will implement the remaining elements: colour, movement, space, and shape into the layout.
Colour
For the colour I wanted to go with a monochromatic colour scheme as I felt
it was simple and stylish and would reflect the mood of the landing page nicely. I decided the main colour would be orange as the emotions it relates
to are: creativity, success, encouragement, determination and stimulation.
I decided pair this with dark grey because greys are often associated with being timeless, practical, strong, sophisticated, and professional. I felt it would offer some contrast and balance to the orange and the key words matched the mood I was going for. Although the initial moods of orange
don’t necessarily match the key words from earlier on, I did feel it was in keeping with the retro element of my mood board.
Movement
I think the movement of the website is important as it directly influences the users experience. As I was going for a professional and modern look, I wanted to keep it slow and linear so that the eyes work their way down the page in
a natural and orderly manor which is in-keeping of the mood I was trying
to create.
Space
With the movement of the page being slow and linear, I felt the landing
page should have a significant amount of white space and for it have
a sense of minimalism to complement the movement aspect. Additionally,
all the elements should have ample space around them to give them room
to breathe so as not to be cluttered.
Shapes
Finally, the last thing I needed to consider were the shapes for the landing page. I wanted to create them based on the font itself so I took a letter that had a combination of straight lines, angled lines and curves and used these
as the foundation. Through this process, I managed to create some nice flowing shapes that lead to the subtle hint of motion within the landing page and created some retro feeling holding devices for headers, buttons and
social icons.
In summary, the brief was to design a landing page for someone who wanted a modern font, with a classic feel that is designed for digital screens. I wanted to evoke the emotion of being modern, professional, clear with a hint of retro and to take into account the 5 main key points. Overall I think I have managed to hit most of those targets, but with everything, there is always room for improvement. I really like the overall look and feel of the landing page; however, I feel I could of exploited ‘the benefits of our offering’ much more
as well as making more of the fact it has great legibility at small sizes.
I have learnt a lot through doing this landing page, specifically about colour theory; the actual design process itself, and how, if you follow the steps,
it can be applied to any design brief that will give you the foundations for some really impactful designs and concepts which allows you to reflect and consider your choices at every step along the way. I think my one big take away from this is the font its self. Initially, when I first saw the typeface,
I thought it was quite bland and uninteresting, but having worked with it,
I have come to appreciate its personality. It’s subtle but hard working; legible, big or small; understated and really versatile. I can see why its so popular
and been used on so much digital content over its short life span. To my mind, it really is a modern classic and one I’ll be coming back to for a long time.
For a link to see the final landing page, please click below:
https://projects.invisionapp.com/d/main#/console/17333820/359283709/preview
