Colour is a huge part of making a webpage standout. It is very important for making divides between two or more elements on a website.
Introduction
When websites were first built they separated sections using big thick black borders, whitespace amongst many other different techniques. Since websites became something that designers became interested in, that all changed.
There was also the use of the horizontal rule (<hr>) element to separate content.
This particular chapter will focus on the different techniques employed to separate content on a webpage, for instance separating the sidebar of a website with the main content.
Borders
Separation through the use of borders is simple - using a solid border suggests that two elements are separate. The colour used for the border can be any colour apart from the colours of the elements it is trying to separate. Ideally, the colour that is used to separate the two elements should be as different as possible from either element:
Colour
Colour plays a huge role in ensuring users understand where to look for what they want. It offers an alternative to standard borders and images to make elements stand out on the page. For instance, a sidebar can be a different colour to the main content section to make it easier to identify.
Separation by colour is more difficult to achieve since many colours either do not go well together or are too similar. For this reason, colour separation is a difficult design to get right.
The following are a list of colour combinations that can work well together, creating a distinction that can be used on elements on the display:
Yellow and blue constrast each other well.
Orange and green/blue also constrast each other well.
The above orange and blue is the theme from this website.
Choosing colours that contrast each other is very important. A colour contrast can be used to create a divide between sections on a webpage. For instance, on this website the site links is a black colour, contrasted to the white of the content section and the sidebar is a grey colour contrasted to the white content.
Gradients can also be used to create contrast between elements on a webpage too.
A gradient is a gradual change of colours between two colours as shown below (only available in a modern browser):
Gradients have with time become something of the past on a lot of modern websites and solid colours have been their replacement. This does not mean that a well designed website cannot have gradients at all.
Whitespace
The last but most powerful separation technique is that of whitespace. Whitespace is a powerful ally when creating separation of content and it's ubiquitous on most websites.
For instance, these paragraphs have a fairly small margin between them which means that they are separate. This allows the page to read like an article with paragraphs.
Using whitespace is important, so make sure to use it where it is necessary!
