The 5 Primary Principles of Potent Web Design – Part 3 : Contrast

Don't miss any updates, 'Subscribe For Free' through RSS, E-mail or Twitter.

There are 5 primary principles of effective web design. All five concepts are essential to excellence, thus it is rare to see them used individually. Rather each one must be woven through the others like the threads of a fine tapestry.

Because a basic understanding of these concepts is fundamental to the most successful web design, I do not wish to rush through this content. I am crafting this sequence with special care and spreading the lesson over five parts.

This is part 3: Contrast

Contrast is the most effective way to create a substantial effect, whether a web designer is making use of subtle drama or high impact. Contrast is created when two opposing elements are brought together within a single space to make each element stand bold against its surroundings.

The higher contrast, the more discernible the content.

Examples of opposing elements are size, classic vs. contemporary fonts, thin vs. thick lines, cool vs. warm color tones, dark vs. light shading, smooth vs. rough texture, horizontal vs. vertical lines, and big vs. small spaces.

Many designers find working with contrast to be one of the more difficult aspects of web design. Either they analyze their nearly finished designs and find there simply isn’t enough contrast to make things interesting, or they find the contrast is too glaring or quite simply not the direction the website should go.

Contrast plays a critical role in helping readers effortlessly wade through the information on a page, wordlessly sending cues to guide the reader where to look first, next, and finally last.

The right use of contrast is like a series of road signs directing the reader to the most pertinent spots on a page.

The best web designers are able to craft web content that guides the eyes swiftly around the page with seemingly little effort. These well designed pages are not only easy on the eyes, but provide maximum impact for the user experience. For contrast to truly work, however, it must be both strong in character and obvious in its execution. A reader’s eyes will appreciate the contrast, but they must realize without wavering that they are seeing something intentional.

To see if your web design has the right quantity of contrast, you can simply perform the squint test. The squint test is a manageable method to help assess the overall contrast of a page. Just close our eyes until your lids are about three quarters closed, or until the normal text is blurred and barely readable. The only thing you should be able to see are vague areas of lights and darks, alongside the website’s strongest colors, thus allowing you to clearly see the areas of highest contrast on the page.

Focus on the spot where your eyes are naturally drawn and you will have an excellent impression of the website’s most attractive elements. If these are the elements you need to help your visitors navigate the site successfully, then congratulations, you have done a wonderful job on your web design.

In part four of the series, “The 5 Primary Principles of Potent Web Design,” we’ll explore Hierarchy and creating organization in your web design.