Navigation

Fully Understanding Contrast in Design

Design, How To, Resources | Sep 17, 2010

Usually the subject of contrast is reserved for beginners. Books will say “black and white have contrast, red and orange do not” – but there’s so much more to it.

Beginners books usually only touch on color contrast, but what about size and shape contrast? Often the easiest way to tell an amateur designer from a professional one is to look at their use of contrast.

Creating a structure of importance using size, shape and color is what gives a page impact and legibility to the reader.

In this post, we’re going to look at contrast in detail, examining big typography, funky shapes, clear divides, imagery, and how they properly fit together using contrast for a good user experience.

 

An Introduction to Contrast

Contrast can be defined as “the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.” In plain English that could be described at its most basic level as “things which look different from one another.”

For designers in all walks of the practice, but particularly web designers, contrast is at the root of pretty much everything. We are constantly trying to establish hierarchies of importance, draw people to certain areas of a page and communicate a clear and concise message at the very heart of our work. Creating relationships between different elements of a design is just about the most important thing that you can do. You’ve probably been doing it a great deal already, consciously or not.

Obvious examples of contrast are black and white, big and small, fast and slow, thick and thin. Opposites are the easiest way to grasp what contrast is, but when applying contrast to design work it’s never quite as black and white. If you were wondering, that’s where the saying about a situation being “black and white” comes from, which also leads to the saying of something being a “gray area”. In design we are often comparing things which are different but not opposite, for example an H1 and an h1, or an “add to cart” button and a “check out” button. This is where greater levels of contrast come into play.

Let’s take a look at the different types of contrast and some examples of how they’re used in web design.

 

Color Contrast

The most common example of all, this is pretty much where it all starts. If two colors are different to each other (say, black and white) they have high contrast, whereas if they are very similar (red and orange) then they have low contrast.

tekroc

TekRoc use very obvious color contrast here by overlaying bright and vibrant image on top of a very dark background. The bright orange and blue clearly stand out and the eye is immediately drawn to them above all other things on the page.


gowalla

Tim Van Damme makes superb use of color contrast in the GoWalla site design. Not only does the multi-colored border at the top of the page stand out and create visual interest by being different from the pale background, but he has also added extremely subtle 1px drop shadows to the text on buttons. The slightly darker orange really helps to create contrast between the white text and the orange background.


envato

Envato are the masters of subtle contrast and the trend of using 1px borders for this can probably be put down to them more than anyone else. All their sites feature multiple single pixel borders to create contrast between sections. In the screenshot above the two content areas could have been divided by just space, or a single line, however by using two lines (one dark, one light) they create subtle contrast between the two sections which is extremely effective.

 

Size Contrast

The next most common form of contrast is using size. Something big beside something small generally indicates that the bigger item is far more important. That’s right, we’re saying that size matters!

madebywater

MadeByWater is the design portfolio of Jordan Vitanov. He uses size contrast with extremely large typography to instantly convey a quote by Bruce Lee which defines why he has chosen to brand himself with the MadeByWater name.


28thiers

28Thiers is an attractive upmarket bar in France. Their website makes great use of size contrast to draw your attention immediately to the large photograph of the Martini with assorted ingredients surrounding it. It’s instantly clear that this is the most important element on the page and the designer wants you to look at that image and be sold on the fact that it is an extremely classy establishment.


slidescreen

SlideScreen make multiple uses of size contrast in their site. As well as having their product displayed with a large screenshot, they also use very large buttons for their primary calls to action. They want you to watch the video of their product in action, and then they want you to download it. These are the most important elements of the page so they are substantially larger than the other things surrounding them.

 

Shape Contrast

Shape contrast means making things notable in by their difference in physical shape compared to other things on the page. At its most basic level this can be used in things like adding rounded corners to buttons, but taken to more extreme levels it can attract a lot more attention.

anebstar

Anebstar uses shape contrast to showcase three important images in the header. Because most things on the web are rectangular, one of the easiest ways to achieve shape contrast is to use a circle. Of course this example also has a little size contrast mixed in as well, but you can clearly see how the circular elements stand out from everything else on the page.


carbonmade

Carbonmade is a stunning site with a real mix of gorgeous illustrations and well presented content. A simple sign-up button here would have worked, but size and colour contrast probably wouldn’t have set it apart enough from the busy background. Adding a friendly octopus behind the button really gives it that difference in shape to draw the eye directly to it.


wireframeplus

WireframePlus use a simple but extremely effective bit of shape contrast to highlight the price of their services. They want you to read their content but above all they’re trying to sell you on their great price by putting a big circle behind it.

 

Positional Contrast

Creating contrast in positioning is a very neat way to create a hierarchy of elements purely by using different alignments. In recent times this technique has been made popular by people like Elliot Jay Stocks, who used it to the extreme on his most recent portfolio site.

ejs

Elliot Jay Stocks uses a detailed grid to define the alignment of all the elements on his site. Attention is called to specific areas by them being indented to the left or the right respectively. In this particular screenshot the introductory paragraph really stands out because it’s aligned furthest to the left, where the eye looks first to read something. This type of alignment has “inspired” many other designers in the past twelve months to create designs with positional contrast in the same sort of style.


simplebits

SimpleBits is the brand which Dan Cederholm works under, you may know him from projects such as Dribbble. On first impressions the SimpleBits site doesn’t appear to have any positional contrast, however when you start scrolling, all becomes clear. Where some people use a fixed background image to create a neat stylistic effect, Dan has made his logo and navigation completely fixed in position so that regardless of where you scroll to, they always remain in the same place on the screen. This is a great example of non-standard positional contrast.


squaredeye

SquaredEye is the design shop run by Matthew Smith and the case study pages in his portfolio make fantastic use of positional contrast. You need to see the whole page to really get the idea but essentially Matthew has meticulously created specific positioning for each section of the page. This creates fantastic contrast between sections and creates a great deal of visual interest to the reader without being at all distracting.

 

Contrast Conclusion

There is so much more to contrast than just “light and dark” – it’s one of the most important principles in design and you can almost never have too much of it, provided that you use it properly.

Taking your designs to the next level isn’t about finding the next band-wagon to hop on using rounded corners and drop shadows for everything, it’s about finding better and more efficient ways of communicating the message behind the design.

Exploring contrast in detail and using it to its full potential is one of the best ways to do this.


This post was authored exclusively for WDD by John O’Nolan, a core member of the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What do you think? How much attention do you pay to contrast within your designs? Is it something you think about all the time or is it something that comes naturally?

Share this post
Comments (no login required)
  • alart

    imho things which you listed in shape,size and position “contract” relate to composition of image.

  • http://www.psyched.be/wordpress Darkened Soul

    Nice article. and even nicer featured webdesigns.
    Contrast is always needed, unless u just made some online art experiment/statement.

  • http://www.BJMRamage.com BJMRamage

    Wow! very informative and great links to show off some amazing (and different) contrast techniques used on the web.

  • http://www.tekroc.com Kal

    Great examples.
    Thanks for submitting TekRoc.

    Kal – (TR)

  • http://www.thefreelancegeek.com/ The Freelance Geek

    Great to see. Thanks!

  • http://webdesigners.ca/ Web Designers

    These are great, thanks!

  • http://www.childmonster.com/ Childmonster

    Great list ! thanks for posting

  • http://www.benstokesmarketing.co.uk Web design Shrewsbury

    Nice article – Contrast is a brilliant thing for getting the user to look at certain things on the site first . . . such as promotions, use it wisely :) Thanks guys

  • http://www.toroloco-design.com Toro Loco

    Nice article. It definitely goes to my bookmarks! =)

  • http://www.limelight-creative.co.uk Lime Web Design

    Great article backed up by brilliant visual examples. Really really good work

  • Pro PM

    OK… this is now in the “must read” for my designers. Finally I found something other than my amateur knowledge and 12-years experience in the field to make them understand that contrast has a meaning.

  • http://www.alpaproductions.com alpaproductions

    The second and third examples of the color contrast as well as the third one for size contrast could’ve been chosen better to explain/show the meaning of what you are trying to say here. Nevertheless, a great article!

  • http://www.siseo.wordpress.com Dani

    Very interesting article, I am agree with the author, there are some techniques and a wide range of resources to put contrast in the layout.
    Very educative, congratulations.

  • http://www.iamautocomplete.com Angelee

    Looking at these sites makes you groovy to start your own design, then you just know you need to look for more “How to’s” in the middle of the project cos the tendency is you’re twisting your brain to look for more unique designs.

    Its good thing experts are generously sharing this kinda stuff to other designers to be guided on what should be the best package for a website to have.

  • http://www.christianflorin.com Christian

    These are defintaly some good examples of contrast. Another great post.

  • http://davince.tengudev.com/ DaVince

    I can’t help but notice that some of these sites have very bad color contrast on the text, even when the other types of contrast are good. For example, Carbonmade’s blue text on blue background is a bit difficult to read.