PLAYING WITH YOUR HEADER COLOURS
S02 | E06 | HOW TO MAKE A WEBSITE LIKE A PRO
Paul Davenport | 3 min read | 5 min video
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.
DESIGN A: Trying too hard
DESIGN B: Keeping it simple
Now let's use the Colour Key below to understand what each colour element does.
BACKGROUND
The main background colour.
TEXT
The Header Menu Text.
TEXT HOVER
The mouseover text.
TEXT ACTIVE
The text or accent line that indicates you're on a particular page.
BACKGROUND SCROLL
When you scroll down a page your Header background can change colour.
TEXT SCROLL
When you scroll down a page your Header Text can change colour.
DROPDOWNS: BACKGROUND, TEXT, HOVER & ACTIVE
You can also change the Background, Text, Hover, and Active colours for your Dropdown Menus.
MENU BUTTON: BACKGROUND & TEXT
The Menu Button Background and Text colours.
MENU DRAWER: BACKGROUND & TEXT
The Menu Drawer Background and Text colours.
ACTION BUTTON: BACKGROUND & TEXT
The Action Button Background and Text colours.
LINK BUTTON: BACKGROUND & TEXT
The Link Button Background and Text colours.
SEARCH: BACKGROUND & TEXT
The Search Button Background and Text colours.
TOP BAR ELEMENTS
The Top Bar replicates utilises of the elements above and adds new options for the Top Bar Colours.
CMS PLANS
Whatever the size of your website, all MOBLE Plans now come complete all the CMS features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course Web School!
CLIENTS & INTEGRATIONS
With a little help from our friends, we grow together every day
RECENT PROJECTS
RECENT INTEGRATIONS
