5 Brilliant Examples of Effective Contrast in Web Design

Differences attract the eye, and contrast heightens differences. This is the operative principle behind using contrast for web design: subtly controlling the elements that attracts your user’s eye by what you place around them. Sounds black-and-white? The truth is actually a bit more colorful.

We can simplify the types of contrast in web design into three main categories:

Light and Dark Colors

The most easily recognizable form on contrast is black-and-white, but the light/dark contrast can be applied across the color spectrum. As the founder of Usaura Dmitry Fadeyev shows us, designers can use light and dark to show depth (as with pressed and unpressed buttons), in addition to generally accenting certain visuals.

Clashing Colors

Every color has a distinct opposite, and placing those colors near each other will draw attention to them. As discussed in the free e-book Web UI Design for the Human Eye, each color is a part of a trifecta that all complement each other.

jurassicworld

Size 

Bigger elements stand out more, but they take up a lot of screen real estate. Have the best of both worlds by shrinking other elements so that others stand out more. Alternatively, some strategic shifting of the existing elements in a layout encourages your users to perceive some as bigger or smaller.

cincodesign

While these are the main types of contrast, the uses for contrast can likewise be categorized:

Interactive Elements

Icons, buttons, and individual photographs can each contain meaningful color and size choices to combine into a rich visual hierarchy.

greenchameleon

Background and Foreground

While similar elements can be contrasted to each other, all elements on the same plane can be contrasted with another plane. In fact, creating your background with care will do wonders for how your users interact with the foreground.

tannbech

Typography

Text sizes and colors, as well as the fonts themselves, can contrast against each other, or even the background/foreground as a whole.

whilewewereyoung

But why use words to describe visuals when we could just show you. Take a look below at five of the most beautiful examples of contrast in web design.

Le Printemps du Polar’s La Femme Fatale

You don’t need to speak French to appreciate the visuals of this interactive infographic detailing the history of the femme fatale character throughout noir films.

lefemmefatale

This page makes use of contrast every way it can.

For starters, the mauve background forces the user’s attention forward to the deep blue femme fatale, while the soft green in the typography completes the trifecta. The change in light to dark takes enhances the background/foreground distinction. At the same time, the change in type size makes it clear that “Le Femme Fatale” takes center stage, while the border options seem less important.

Land Rover’s Well Storied

The Land Rover microsite tells the stories of the company’s driver, but also masters the contrasting aspects of light and dark.

landrover

While the colors may follow the same similar palette (accenting the rugged, outdoorsy feel of the brand), the shades are what we want to discuss. In the scrollable vertical navigation menu to the right, you’ll notice the center, selected option is brightest and most clearly visible. As we get farther from the selection, the other options get darker, creating a funnel effect focusing our attention on our main choice.

landrover2

Click on one of the stories, and the above menu pops up. Notice how the new narrative has its own background, distinctly darker than the home page’s background. Again, the bright white text dominates our vision so we can focus on the words of the story.

HBM FiberSensing

While this page’s main allure is the animation in the background, there is an example of contrast we’d like to point out.

hbmfiber

Clearly the text “Bringing light to measurement” is the focus of this page, as we can judge by its size. But the additional branding “FiberSensing is an HBM Brand” was not only included, but placed directly next to the main slogan. It’s much smaller text size adds extra weight to the slogan, while simultaneously suggesting that it itself is more of an optional message.

Most importantly, the use of contrast reflects on the purpose of the company. The site feels bright and luminescent, which matches perfectly with the headline message.

Joris Rigerl

Contrast isn’t always about being showy. Sometimes it’s used best when promoting minimalism.

jorisrigerl

There’s not much room for the eye to wander on Rigerl’s site, and it’s clear from the stark black/white contrast that he wants you to choose one of the six options to the left. There’s really no other choice.

jorisrigerl2

Doing so reveals another use of contrast worth mentioning. A transparent background appears, but take a look at the project description. The description titles – Project, Type, Year, and Team – are all smaller and in a lighter shade than the descriptions themselves, bowing out to keep the focus on the H2 text. Notice also the contrast between all caps in the H2 and the use of lower-case in the H1.

The reversed text hierarchy is certainly unorthodox, but works well to draw attention to the project names.

Vaughn’s V76

The V76 site by Vaughn showcases the importance of size, and the power of diversifying it.

vaughnsv76

Each of the four clickable elements on the page is varied by size, showing a set hierarchy in a Fibonacci spiral of significance. The main left-hand option is made more impressive by its proximity to the lesser bottom-right corner ones.

Conclusion

Contrast comes in more styles than just black and white, so try experimenting in the different fields for the best results. Minimalistic sites may not want to use too much color or elements that are too big, but a more fun and entertainment-based site would be well to have contrasting colors and an assortment of sizes.

For more practical advice, check out the free ebook Web UI Design for the Human Eye: Colors, Space, Contrast. Visual case studies are included from 30+ companies including Medium, Intercom, Bose, and Etsy.

For Similar Articles, Be Sure to Check Out:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.