Web design is fundamentally about visual communication. The most effective designers can keep their viewers’ attention long enough to communicate a message.
Companies have been making a big change lately as to how they communicate their messages online. Gone are the sites with walls of black text on a white background… and nothing else. And that’s a good thing. We’ve determined that most people aren’t inherently good at processing plain data, which is why 82 percent of people won’t bother to read a massive block of text word-for-word.
However, almost all humans are designed to think visually – 90 percent of information transmitted to the brain is visual, and visuals are processed 60,000 times faster than text. That’s why you need to incorporate visual best practices to ensure that your viewers get the most visual experience possible on your site.
According to Web Design Ledger, the biggest visual concept of all is contrast.
Contrast Establishes Visual Relationships
People have a natural desire to categorize objects by looking for their differences and assigning relationships among them. For example, things that appear larger suggest they are closer to us, and color variation might mean that one object is unique from the rest.
The funny thing about “uniqueness” is that objects are only unique because they contrast from the objects around them. Dramatic differences between objects suggest uniqueness, and therefore significance.
This is a great concept for visually optimizing your website. Remember that contrast makes elements stand out based on how they look in relation to their surroundings. An image that is larger than the rest draws attention to itself, as does a red paragraph amongst black ones. People can’t help it – their eyes naturally go right to the elements that are different.
Graphic designers can use this subconscious respect for visual contrast to convey a lot of information in just a single web space. By incorporating different relationships among your elements, you can organize your content and direct your user’s attention to your most important information.
7 Design Principles for Contrast
So what kinds of visual relationships can you establish online?
There are surprisingly more than you might think, and we like to call them design principles. You can create contrast in your content based on:
What do you see when you look at this image? On the left, you see a small green circle surrounded by bigger black circles, and on the right is a larger freen circle surrounded by black gray circles. Right?
Wrong. Believe it or not, both of those orange circles are the same size.
Why does the one on the right seem bigger? It’s all about relativity. An object that is larger than other surrounding objects visually takes up more space and therefore demands more attention. Consequently, smaller objects are deemed less important and hold less visual power.
You can use this to your advantage by associating size with significance in your design. Make sure your largest page elements contain the most important information for your viewers. That way, you can guide your viewer’s eye to particular sections of your page in order of biggest to smallest visuals (and most to least significant content).
Try this technique with your text as well. Use big, emphasized type fonts to add order to the page, and use smaller size text with headings and subheadings.
Cruise America has a great example of using size to indicate importance. You look at their homepage, and the first thing your eye goes to is the “Made for Cruisin” heading in the top right. Why? Because it’s significantly bigger than any other textual element on the page, so your eye views it as the most important. Next, your eye probably goes to the picture of the father and daughter, because again – it’s larger than any of the other images.
The biggest elements on the page are the ones that demonstrate the most important concepts – that the company is “made for cruising,” and that it can provide you a great family experience.
You can use color to both organize your page and give it some personality. You can organize your colors to demand attention to specific sections, i.e. using bold, contrasting colors to emphasize buttons or color-coding content by category. You can also use web color psychology to add an emotional appeal to everything from your logo to your CTAs.