PLAYING WITH YOUR HEADER COLOURS

DESIGN TIPS

In Episode 5 you decided upon your primary colours, and if you used the 'Sync Palette' Button our AI had a play at picking your entire colour palette for you in a logical way that worked with your colours. However, the AI is still very much a baby and no doubt you'll want to customise it some more.

In the colours area, scroll down to 'Header Colours' and you will see all of the elements of your Header that you can play with.

The House Rules here are again 'keep it simple', especially if you're not a seasoned designer. Less is more.

Let's articulate this with an example of some of the horrible things that you can do with a Header. In the example below, you can see DESIGN A and DESIGN B. 

DESIGN A

In Design A, the designer got a little carried away with trying to use any colours of the Fictico brand. If the objective was to get people to take action by clicking the Call-to-Action button, then this Header will most likely fail, since the pick and mix style of colours is perhaps creating too much noise and distraction.

DESIGN B

In Design B, our AI was programmed to keep it simple. It didn't sway from the Primary colours and used them with White so that there was no conflict, the Call-to-Action was prominent. The Designer then simply customised the Header (as you learned in Episode 3) to make the buttons more inviting.

Notice that both the Search and Menu buttons didn't even have a background colour. There is often a temptation to complete every element of the colour palette, though this is really not required. If you don't need a colour, then don't use it, always remember to keep it simple and less is more.

Now let's use the Colour Key below to understand what each colour element does.