/ Visual Design πŸ‘€

The life-saving layout design setting (1/2)


I recently attended a sharing event about Story telling for business. Most people there (surprisingly, 95% were women) had a copywriting background. An interesting role was mentioned at the event - a content writer. This role has arisen in recent years and has become exceedingly popular across different industries. Content writers are a hybrid; they are copywriters, marketing managers and media editors. The reason behind this role is obvious - we are overwhelmed by information every day and brands need someone to help them communicate clearly and concisely.

As a visual designer surrounded by copywriters, I found the future of my role even more valuable - words will always need visual support. Yes, words can speak literally on their own but they will always need visual structure i.e. typography and layout design. Let’s take a look at an example that sparked a heated discussion last year:

Left: Original televised screenshot Β© ABC; right: Β© Benjamin Bannister

In 2017, the Best Picture Oscar winner was incorrectly announced. The image on the left was the original design of the announcement card. Creative strategist Benjamin Bannister identified the flaws in the original card and redesigned it, shown on the right. Bannister shows the importance of layout and typography design. When content is written, it is crucial to design a layout that structures the content. In Bannister's design, we can easily divide the content hierarchy into 4 - listed from the most important to the least:

  1. name of the award
  2. name of the winner
  3. title of the movie it belongs
  4. logo/name of the event

    This hierarchy is well thought out for the person who is going to read the information - in this case, for the award presenter who is announcing the result just seconds after first reading the text. When you put yourself in the presenter's shoes, it is easy to understand how the mistake was made and how Bannister's design would have avoided the embarrassment felt that night.

In the past two weeks, the ITV blog that I designed finally launched. Similarly to other media, typography and layout design is important for website design. I proudly showed the developer my content hierarchy ordered from the most important to the least:

1: website headline
2. post title
3. post introduction text
4. content headline
5. content sub-headline
6. content body
7. caption
8. arthur title
9. post dates
10. links

With this hierarchy, I also included a thoughtful note reminding the developer which content shares the same typography scale. In this instance, I used only five different scales despite having ten items.

I later realised, however, that the developer and I were speaking in totally different languages. The developer had no idea what my thoughtful note was referring to. The developer's only concern was the number of headers, which he understood to be my five different scales. I needed to inform the developer what 'header 1' referred to and where to apply certain headers.

Just like other media, typography and layout design is important for web design, but unlike other media, websites are responsive, which means typography and layout are fluid and will change on different devices. After learning about the term β€œheader”, it is also essential to know about type scale. With so many different devices, it is impossible to customise the style of headers to each device. (Theoretically you can, of course, but are you sure you want to spend that much time repeating your work again and again - just changing the scale? Probably not.). Type scale is a very useful reference to maintain the typography and layout of your design. It is important to balance the scale between the big and the small screen so that the information isn't awkwardly shown - you do not want to repeat the mistake of the Best Picture Oscar award winner card in 2017.

A screen shot of type-scale.com

https://type-scale.com/ is one of the most useful tools to measure the type scale. To start with, you can test the scale by setting the base size, which is usually the body text font size. In the image above, you can see 16px = 1em for the base size. By looking at the preview of different headers, and also the paragraph text, you can immediately see the result you are looking for when you adjust the scale. With the numbers that you are given, you can then choose the header size that fits your needs. Ultimately, you'll also have a common language that both a designer and developer will understand.

As previously mentioned, responsive design is fluid - there is no absolute rule that can give perfect typography or a perfect layout scale that applies to all devices in the world. However, the type scale tool can definitely be a useful reference, not just for scaling the types but also for space setting - a crucial component of layout design. What this space to find out more about space setting.