UI Design Principles

During this lesson you will learn the basics of effective user interface design. You will learn how to carefully choose colours and font styles to generate meaning with your user. You will use the skills you learn during this lesson when you plan and create a user interface of your own later on.

Part 1: What is considered to be good user interface design?

We all interact with user interfaces every day. But what is it about them that makes them so easy to use?

• Colours

• Contrasts - fonts and icons contrasting with background colour.

• Font Styles and Sizes

• Icons and buttons

• Layout, balance and hierarchy - most important items stand out/bigger/at the top.

Part 2: The importance of choosing fonts!

The purpose of this part is to show how your font choices can speak louder than the words they create. Fonts play a part in just about every aspect of design. In this part you will learn about selecting the right font for the audience and purpose.

Below is a set of 18 words, find fonts that represent the look or idea of each word. Don't just put them on the page, design the look of the page. Make it attractive, and try to use Hierarchy to guide your audience's eye around the composition.

Step 1: Open up either a blank Google Slides or Microsoft PowerPoint presentation. You will use one single slide to present this activity.

Step 2: Type each word in its own text box. Review each word. What does it mean to you? Choose a font from the font list that generates that meaning.

Tips: Design the page, don’t just place words randomly. Use different font sizes, weights and placement (only use black font. The reason for this will be clear later on). Think about making the whole page visually appealing.

WAGOLL

Below are some examples of the typographic image you will create following the completion of this part:

Part 3a: The importance of choosing colours

Humans have evolved to see meaning in colours. For example, it is commonly understood that red is a warning colour. Something that humans need to watch out for. But what are the meaning of other colours? Spend a few minutes thinking about this. Look at each colour below one at a time. Jot down on paper the first words, images or ideas that pop into your head when you see the colour. Where do you think these 'meanings' came from?

Part 3b: The importance of choosing colours

Think about the meaning of the words in part 2. You chose a font style that you thought represented their meaning. Go back to this activity now and choose a colour for each of the words. Again you should think carefully regarding the meaning of the word and which colour helps to represent that meaning. This is a quite a challenging task. You may struggle a little bit to choose a colour for some of the words but try your best. The colours you choose will be unique to you and there is no right or wrong answer.

WAGOLL

Below are some examples of the typographic image you will create following the completion of this part:

Part 4: The importance of contrast

It is very important when creating a user interface to think about the users! One of the most important things you should consider is your use of contrasting colours. You could focus too much on the meaning you want to generate with your font styles and font colours and accidently forget to check that the colours contrast well with the background. Poor contrast can result in your users being unable to read the text easily. Some people who are colour blind might not be able to read the text at all if the contrast is not right. Have a look at the examples below. Can you see why the blue one is easiest to read? It has the best contrast out of the three. Do you agree?

Look back at the activity in part 2. You should by now have chosen font styles and font colours to generate the meaning of the words. Copy and paste the slide of words so that you have two identical copies of it. Click on the text boxes for each word and change the fill colour. For the first slide of words, choose background colours that don't contrast well at all. Choose the worst combination of background colour to text colour you can find that make the words unreadable. Next, on the second copy choose the best contrasting background colour for each word. Make sure every word is clear and readable.

Part 5: Choosing a colour palette

Using Adobe's Colour Wheel website, choose a selection of colours that you think would be suitable for the following user interfaces:

1. A child's educational app to be used on a tablet computer.

2. A website for an expensive brand of cars such as Mercedes to be used on a laptop.

3. A phone app that gives the user information regarding the weather.

Challenge yourself: Choose a couple of different colour palettes for each user interfaces above. Explain which of your choices is the most suitable and give at least one reason why.

Part 6: Design Principles Summary

On paper, jot down some notes in response to the following questions:

1. What is a 'user interface'?

2. In your opinion, what is the most important design consideration you need to make when creating a user interface and why?