Different Uses of Contrast in Web Design

This article primarily looks at the use of contrast when designing websites. However, the tips can be used in any design process for good effect.

When you want something to stand out on a website, contrast is great for setting apart one element from another. When hearing the word contrast, most people only consider colour. However, you can also use contrasting sizes, shapes and positions to make elements of your website stand out from themselves. This article looks at the different ways you can use contrast in web design.

All of the images in this post were created using Photoshop. We offer a wide variety of creative courses including Photoshop Training for learning how to create and edit images (including shape and colour) and Photoshop for Web Graphics training if you want a course specifically tailored for web graphic design. Other print design courses include Illustrator training and InDesign training .

Colour

There are two main methods of contrasting colours: bright and dark and opposing colours on a colour wheel:

colour-wheel

 

Here are three example of using contrasting colours:

Bright on a dark background:

contrast-web-design

Colours from opposite end of the spectrum:

contrast-web-design-2

Bright and dark colours from opposing ends of the spectrum:

contrast-web-design-3

To show why this is great for making elements stand out on a web page here’s an example of the same image with two colours next to each other on the wheel, with similar tones:

contrast-web-design-4

Complimentary colours are great for design colour schemes – especially for background images you don’t want to draw attention to – but contrasting colours are needed to make text readable and if you want to draw attention to one element (an image, text box, offer etc.)

Size

Now that we’ve picked contrasting colours, we can also use size to tell a visitor what to look at when they first load a page. Here’s an example using image size:

contrast-web-design-5

Although the images have the same colour, the larger one stands out. The same technique can be used to make text stand out:

contrast-web-design-6

Generally, the eye is drawn to the biggest shape on the page, especially if everything else is a regimented size. This is a standard advertising practice than can be applied to web design – the bigger you make something, the more visible it is.

Shapes

If a lot of the content on your website is in rectangles or squares (boxes around text for example) and you want something to really stand out then using a different shape can be great. Here’s an example of this on the Silicon Beach Training website:

contrast-web-design-7

What we have done to make our ‘sign up for offers’ button stand out is to put it in a star and rotate the text slightly. This is very different to the rounded rectangles that make up the rest of the site design so it draws attention towards the button and increases clicks.

Position

The same example from the Silicon Beach Training site can be used again here. The ‘sign up for offers’ button doesn’t fit with the positioning of the site design. The site is table-like in design with smooth edges and rectangles that fit together. The star shape stands out because it is alone between the main body and the head of the page. There is also a lot of white space around it.

contrast-web-design-8This button is a combination of all the above tips – it features contrasting colours, shapes, size (bigger text than main content) and position. It was designed like this to get people to notice it and click on it. It replaced an old button that fitted the style of the page and has a much, much higher click rate.

Hopefully if you follow the tips in the post the same can happen for you!

Similar posts you may like:

  1. 5 Reasons To Use Images to Market Content
  2. Image SEO – Gain Traffic Through Google Image Search
  3. Photoshop Tutorial – Save for the Web
  4. Using the Quick Selection Tool
  5. What is a Raw File?

Tags

, , , , , , , , , , , ,
Aaron Charlie

Aaron Charlie is a Creative Design & IT expert at Silicon Beach Training. Connect with Aaron on Google+

View all posts by Aaron Charlie

Leave a Comment