To have a good understanding of design, we start at the beginning with the general principles of design. This post will cover 2 principles:
- hierarchy; as well as
- colour and contrast.
The first step in designing your user interface is defining the purpose of the UI, and then deciding on the content that needs to be delivered to achieve that purpose. The principle of hierarchy can be applied to assist with the organisation of this content. Hierarchy in design refers to the way in which content is arranged to portray different levels of importance. The application of hierarchy produces an order (from most important to least) in which the users will view each element of the UI.
When creating the different levels of importance – which is the hierarchy – the following actions can be applied:
- Making use of different sizes.
- Using styles such as bold and underline.
- Using more than one font.
- Pairing colours that contrast well with each other.
A useful tool for selecting colours that contrast is Adobe Color. Using this tool, you only need to know what’s the first colour that you would like to make use of in your design. Adobe Color can generate the contrasting colour for you if you select the Complementary colour rule. There are other colour rules that Adobe Color provides that can assist you is making use of effective colour schemes. Some of these rules are Shades which are different variations of a colour and Triads which generates a 3-colour pairing (similar to Complementary which generates a 2-colour pairing).
Here is an example of the impact that hierarchy and colour & contrast can have on designs. The purpose is the same for all 3 posters – promote quiz night.
If we look at the poster on the left, we can see that there is an overuse of colour. It makes the poster too busy and prevents poster from achieving its purpose.
Next we can look at the middle poster. It is a lot less busy than the previous poster because of the use of colour. The poster has hierarchy – the reader will read the content from top to bottom because of the use of colour in the heading and different font sizes. The problem with the font size is that now it is difficult for the reader to read the content at the bottom of the poster because the font size is too small. This can prevent the poster from achieving its purpose.
Lastly we look at the poster on the right. Immediately we can see the use of hierarchy that has been created by the large image, different font sizes and the use of colours that contrast with each other. The 2 principles have been successfully applied to ensure that the poster achieves its purpose.
The principles of hierarchy and colour & contrast are a few of the general principles that you can use no matter if you are developing for mobile, desktop or web. For more general principles of design, please have a look at Melissa’s blog.