PLAYING WITH YOUR HEADER COLOURS


S02 | E06 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  5 min video

Web School Series 2 Episode 6

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


In Episodes 2 and 3 of this Series, we learned how to choose a Header and customise it with the elements that were right for your business.

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 those colours. Now in Episode 6, we'll take a look at how you tweak your colours, and after this session, your website will really start to come alive and feel like the end product.


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.

MOBLE CMS Header Colours A

DESIGN A: Trying too hard

MOBLE CMS Header Colours B

DESIGN B: Keeping it simple


HEADER COLOURS KEY

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


BACKGROUND
Header Colour Background

The main background colour.


TEXT
Header Colour Text

The Header Menu Text.


TEXT HOVER
Header Colour Text Hover

The mouseover text.


TEXT ACTIVE
Header Colour Text Active

The text or accent line that indicates you're on a particular page.


BACKGROUND SCROLL
Header Colour Background Scroll

When you scroll down a page your Header background can change colour.


TEXT SCROLL
Header Colour Background Scroll

When you scroll down a page your Header Text can change colour.


DROPDOWNS: BACKGROUND, TEXT, HOVER & ACTIVE
Header Colour Dropdown Background

You can also change the Background, Text, Hover, and Active colours for your Dropdown Menus.


MENU BUTTON: BACKGROUND & TEXT
Header Colour Menu Button Background

The Menu Button Background and Text colours.


MENU DRAWER: BACKGROUND & TEXT
Header Colour Drawer Menu

The Menu Drawer Background and Text colours.


ACTION BUTTON: BACKGROUND & TEXT
Header Colour Action Button

The Action Button Background and Text colours.


LINK BUTTON: BACKGROUND & TEXT
Header Colour Link Button

The Link Button Background and Text colours.


SEARCH: BACKGROUND & TEXT
Header Colour Search

The Search Button Background and Text colours.


TOP BAR ELEMENTS
MOBLE CMS Header Top Bar

The Top Bar replicates utilises of the elements above and adds new options for the Top Bar Colours.