When a website designer starts working on a site, it begins the same as any art project, essay, or apartment wall—blank.
Much like batman, or your neighborhood contractor, a website designer is equipped with a utility belt of principals and strategies to best represent your business. In order to create strong, consistent branding, each and every device in the designer’s bag o’ tricks must be used effectively. One of the first and under-evaluated tools at a designer’s disposal is contrast.
Contrast is a very useful skill and works similar to counting cards while gambling. Proper use of contrast can weight the dice and give you complete control over where the user’s eye will rest.
There’s a reason you threw away your white shirt even though it had the smallest splotch of a colored stain—it would be the first thing anyone would notice. This goes the same for design, a little contrastual treatment (website designers are allowed to make up words too) and you can impact the page by planning the most noticeable elements on the page.
Common Contrast Practices
Contrast in Colors
Behind every great design is a concise palette of colors that work together to bring a certain feeling to the user.
The most successful have three or four colors that behave symbiotically in order to achieve a sense of order or homeostasis. They are the foundation on which the majority of the information and structure of the design are built.
On this framework of team oriented colors, a rebel, known as a pop color, is chosen to rise above. This pop color’s sole purpose is to shock and awe, to call for your attention and refuse to return it. The act of disrupting the eye by introducing a pop color is a great example of the powerful influence of contrast in color.
Contrast in Imagery
Photography is a great way to convey voice, intent, or branding on your site. The right photograph is worth it’s weight in megabytes, and can help your conversion tenfold. However, without the correct approach to presenting the photograph it can be lost among the other elements on the page.
Too many photographs on a page can prove to be sensory overload and may not be as effective as a strong photograph placed in the right area. Presenting a striking photograph with the correct balance of text and whitespace will surely capture a user’s attention and prove to be effective at converting.
Contrast in Whitespace
Whitespace is a fairly controversial topic in the web design community. Some designers fall of the more liberal side of whitespace and some use is sparingly, but there’s one fact that no one can disprove “whitespace works”.
Whitespace is the absence of content in the pursuit to frame an element. If there is a certain tagline you want to highlight, you can be sure that adding some space around the area will be just as effective as changing a font color or bolding the text. Although if you wanted to truly practice contrast, using all three of those options together would undeniably grab the user attention.