3 Tips On Using Contrast

If you have a website, it needs to grab attention. You have to catch a visitor's interest and make him or her want to delve into your site. Otherwise, the site won't do you much good, no matter how much traffic you're getting.

If visitors land on a page that is visually uninteresting, you will fail to capture their attention. If everything on your pages receives the same amount of visual importance, visitors are likely to be bored and unfocused.

So how do you make your site stand out visually? Employ the principle of contrast. The principle goes like this:

To create strong visual impact in your pages, make some things stand out. Big time.

Add variation by visually emphasizing differences between items. If two elements don't look the same, make them look really different. If something is important, give it extra visual weight.

Contrast works by creating sharp distinction between two items. The end result is to emphasize one item over the other, which makes that item stand out. This adds interest to your pages. It also helps organize and prioritize elements, and it focuses visitors in the specific direction you want them to go.

When you use the principle in your website, visitors are immediately drawn to the item that has the most contrast from everything else. By using contrast, you can keep your visitors from getting distracted and wandering all over the page. You'll be able to keep them tuned to the most important things.

If your pages don't use strong contrasts, they will appear dull and uninteresting. A page that doesn't have distinctions between elements lacks focus, because there is no clear place for the eye to stop. It's much harder for visitors to get excited about a page that looks boring than a page where certain elements leap out and capture interest.

How can you use contrasts? Here are a few ways:

1. Color

Color is a powerful way to establish the importance of one element over another. If you need something on a page to stand out, infuse it with some vibrant color. Usually, you should make it a brighter or stronger color than everything around it. You can do this by changing the color of the text, by placing a colored background behind the element you want to emphasize, or using a brightly-colored image or button.

Using contrasts in color doesn't always mean you need to use bright or "loud" colors. If the rest of your page uses subdued colors, even a gentle color contrast may be sufficient.

2. Size

If you're going to make a contrast in size, make a serious contrast. Most people do not make size differences significant enough. Failure to make a strong distinction results in a page that looks cluttered and messy.

The most common place to use size contrasts is in text. For example, when you make a heading bigger than your body copy, you've used a size contrast. However, you can also contrast size with other items. If you have a variety of pictures on a page, you can make one significantly bigger.

3. Direction

You can create contrast by varying the direction (horizontally and vertically) of elements in a page. This contrast is more subtle and not quite as common as color and size.

Contrasting direction doesn't necessarily mean to turn a word on its side so it is pointing upward. You could do that, but there are other ways that don't impede readability. You can contrast a long horizontal header that spans the page with two tall, narrower columns of pictures or copy underneath it. You can contrast a thin vertical column of text with horizontal rules (dividing lines) to separate different parts.

For example, take a look at Emoryadventist.org. Notice that the header at the top is wide and the four columns of text are narrow and are divided by vertical lines. The page would be much less interesting if everything on the page had a horizontal direction.

Emoryadventist.org

Finally, two important reminders on using contrast:

First, if you emphasize everything, nothing stands out. Be careful not to use so much contrast that your page is overpowering or cluttered. Contrast has to be used wisely in order to be effective.

Second, don't be a wimp. If your contrasts are too mundane, you'll appear dull and uninteresting. Be daring!

Basic Design Principles Part 2 Tone, Texture, Light, And Shade
This specifically applies to drawings more than photography, but tone and texture are very important. Tone refers to shading of light and dark on an object and texture is the visual and tactile surface characteristics of an object.
Designing for Clarity
Once you have your content, arranged it into a likely architecture, and worked out where it will sit on the page, youre ready to design the display layer. The goal is to arrange various elements on screen to maximise the users chance of using the site successfully...
How To Use Color Effectively When You Create A Web Site
Colors are powerful, and create strong feelings. They can also make your web site look professional or look like a circus. Here are some powerful tips you should use every time you create a web site...
The Basics of Colors
Learn everything about the basics of colors and use of colors!
Logos Explained
Logos are graphical shorthand that can represent a company or product, and communicate certain characteristics.
In order for a logo to be visually effective, it must exhibit certain related fundamental design characteristics...
Contrast in Web Design
What helps users to browse effectively by guiding the eye swiftly and effortlessly around the page? The answer is one word: contrast.
People don't read
The #1 most important feature to appreciate about browsing behaviour is scanning. Web sites designed to be looked at are likely to fail. Web sites designed to be scanned are more likely to succeed...
Search Engine Optimization Tips
Making SEO work for you. Tried and true tips for anyone looking to increase web site traffic.
3 Reasons Not To Use Uppercase
Sometimes its ok to use uppercase. Capital letters can add a touch of class to the apperance of your page. However, they should be used very sparingly. There are three reasons why you should avoid them in most cases: 1. It is hard for the human eye to recognize words in all caps. This is becaus....
Typography and Design
Visual contrast and page design Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space.