GET STARTED QUICKLY WITH A FREE DESIGN, THEN COMPLETELY CUSTOMISE IT TO MAKE IT YOUR OWN.
We help you make beautiful websites. Manage websites, little or large, in moments with a powerfully simple Visual Editor.
BUILD YOUR OWN CUSTOM WEBSITE DESIGN
ON DEMAND LIVE EVENTS
WHAT'S THIS? IT'S A GLOSSARY OF FEATURES
ALL FEATURES
ALL FEATURES
ALL FEATURES
ALL FEATURES
ALL FEATURES
HOW TO MAKE A WEBSITE LIKE A PRO
Web School is an end-to-end, easy to follow series, aimed at both beginners and web design pros.
2020 EVENTS ANNOUNCING SOON
Spend the day at MOBLE offices in Surry Hills and build your own website with the help from our team.
Learn MOBLE as you go with this comprehensive glossary of features and FAQs.
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.
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.
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.
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.
The main background colour.
The Header Menu Text.
The mouseover text.
The text or accent line that indicates you're on a particular page.
When you scroll down a page your Header background can change colour.
When you scroll down a page your Header Text can change colour.
You can also change the Background, Text, Hover, and Active colours for your Dropdown Menus.
The Menu Button Background and Text colours.
The Menu Drawer Background and Text colours.
The Action Button Background and Text colours.
The Link Button Background and Text colours.
The Search Button Background and Text colours.
The Top Bar replicates utilises of the elements above and adds new options for the Top Bar Colours.
Design a website in under 3 minutes!
GETTING AROUND
GET A QUOTE
A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.