A web design is made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship, while others are not related at all. The tricky part is being able to communicate this visually and effectively. This is where the principle of contrast comes into play.
Contrast is the difference between two or more elements. With contrast, a designer can create visual interest and direct the attention of the user. But imagine if all of the elements on a web page were the same in style and appearance. There would be no organization, no flow, and definitely no hierarchy. Content would be nearly impossible to digest. This makes contrast an essential part of effective web design.
In this article, we’re going to see how contrast can be achieved by creating differences in three aspects of design: color, size, and alignment.
Contrast in Color
When most people hear the word contrast, they think of color. Even though the principle of contrast is not limited to color, it can go a long way in helping the user differentiate page elements from one another.
It’s a given that almost all web designs have a header, a content area, and a footer. These are three completely different areas that should have a clear visual separation. Using contrast in background color is an excellent way to achieve this.
Here you will see that the Church Media Group’s website is an excellent example. The header and footer have dark background colors, while the content area is white. This clearly establishes the content as being different and even more important than the other areas. If we look a little further there is another level of background contrast within the content area. The “Featured Project” area has a light blue background. Since the amount of contrast between this area and the rest of the content is minimal, it tells us that the two are related.
Phil Renaud’s portfolio has a unique layout and an incredible color scheme. He uses a gold-yellow color to create contrast between the vertical navigation and the rest of the predominantly brown design.
Color can also be used within text to create contrast. Billy Tamplin does an excellent job of creating separation and hierarchy by giving the headings, subheadings, and paragraph text all different colors. For a blog style layout, establishing contrast between post headings and body text is critical. It helps the user easily see where articles begin and end as they scroll down the page.
Contrast in Size
Another way to create contrast in web design is to use size differences between elements. In other words, make some things bigger than others.
Creating contrast through size becomes very important when you can’t rely on color. Taxi has a lot going on within it’s layout and has a minimal color scheme. So in order to establish a hierarchy among the three columns, the designer used a much larger width on the middle column – over two times that of the left and right columns. This makes it apparent to the user that the middle column is the most important area of the page.
Just as color can be applied to typographic headings to create contrast, so can size. Big headings are a great way to establish hierarchy within the content of a website. The website of Imaginaria Creative, uses big headings to catch the visitor’s attention and draw them in so that they read more of the smaller paragraphs below.
Contrast in Alignment
Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.
LegiStyles uses a large left margin on the content blocks below each heading. Along with the the large size of the headings, this creates a good amount of contrast. If you are going to use this kind of difference in alignment, be sure to make it a big difference. Otherwise it will end looking like a mistake of poor design.
Centering large paragraphs is a big typography no-no. It makes text very hard to read. However, don’t be afraid to mix left aligned paragraphs with centered headings. It’s another good way to use difference in alignment to create contrast. Combined with a nice serif font, it can also give your typography a classic look.
Simon Collison uses centered headings paired with left aligned paragraphs in each of the content boxes. Since the font size of the headings isn’t much larger than that of the paragraphs, this helps set the headings apart.
A List Apart is another great example of using centered heading with left aligned paragraphs.
Now Go and Be Different
Learning to create the right amount of contrast in your designs is just like mastering any other principle of design – it takes practice. Take time to study the work of talented designers and see how they are using contrast in their designs. Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious.
This is awesome. Great post.
I find contrast one of the best principles to design a good layout.
Great article!
Great article, wish more designer would take this into consideration.
Nice post, thanks for that. It’s become my personal crusade as of late to catch the insane amount of mock-ups we produce at work where it’s med-dark grey text on a med-light grey background (or any other sort of similar low-contrast combination); yes it may look good, but it’s not legible.
Contrast is something you always try to get right on a site.
My main problem i always come across is whether or not to use another colour in the palette for extra contrast, lol.
very informative. 😉
For those interested in learning more, I highly suggest that you read one of the great articles on this topic by Andy Rutledge:
https://www.andyrutledge.com/contrast-and-meaning.php
Cheers!
Contrast is considered one of the basics but along with proper color selection, it is sometimes misused or ignored. Great read!
Great article. A simple principle that’s overlooked by many beginners.
Good contrast is essential for a great and successful website design. Thanks for bringing this to light.
Great article look forward to more
Very nice collection. Inspired, nw back to work 🙂
Can’t you keep you mouth shut? You always drop such bad comments.
The concept of contrast says that if two items aren’t the same, make them very different. Contrast adds visual interest to your page. You can create visual interest by using color, size and weight, or any other property of an element.
Cool Article.I Attract your post.I like so much.Designing a website is essential to the success of the company. Viewers who come across the site spend on average 10 seconds on the front page and if it loses their interest they will move on.
Very nice article. Articles like this gives us lots of information and ideas about web designing. Keep up the good work.
By the way there is a repetition of “the” in this sentence.
“Along with the the large size of the headings, this creates a good amount of contrast. “
Great article! Color contrast is a key element in fashion, in house furnishing, in all areas of style and design… Why not be same even in webdesign?! 🙂
Great article! I think that every design should read and use this tips. 😀 Thanks.
Really nice, thank you.
Very awesome! Thank you
Thanks for covering the basics; it’s good to be reminded every so often. The simple stuff can be easily taken for granted.
🙂
Contrast is very important thing to consider when designing any website. I enjoyed reading this article and especially enjoyed viewing some of the examples you have posted. Great job on this article!!!
IMO the use of different alignments is a sure sign of an amateur.
It creates conflict not contrast.
Effective designs pick one alignment and stick to it.
Again a good article to read.
Great Post!
On sites that have a lot of information to digest, using contrast in size (not just in color) will help the viewer digest the content easier.
Great post. Really makes me think about the contrast between all the elements on my webpages, and how to make the purpose of each element obvious through visual (contrast) cues. Thanks!
That’s perfect.
I was struggling with colors and you just gave me a good base to start.
And with the link to “10 super useful tools for color choosing” you just made my day… and my next web design ;-).
Thanks
Contrast, Layout and Colour Choices are certainly three of the most important design elements for helping to guide your visitors eye to those areas that increase your ROI. The human brain is a fairly predictable thing and once you have an idea of what sparks it up it’s not hard to design with it in mind.
Having said that, some of the best sites are built for content and sometimes they are so valuable that no amount of poor design would put me off them.
Cheers
Col 🙂
Nice post… thank’s……….
Henry,
there are contrast in sounds, foreground and background sounds. Especially for multimedia files. It is based on WCAG by W3C recommendation.
Truly agree with what has been said here.
Great article. Thank you.
this was a very inspiring and useful post!Thank you for sharing! 🙂
Great stuff here. I like that we’ve seen articles on the principal of proximity in design, overall quality and now contrast in blogs lately. It’s a great refresher from “See 10 Great Blah Blahs” that we normally get. (We’re all guilty) 😛
Oops, I always thought that the contrast was just about colors :p
Thanks for clearing that up
I think if a person doesn’t have some background in art, there is a big chance they won’t understand the principles involved with creating a good design. This is a great resource for people who are relatively new to web design.
it all boils down to the designers taste and eye. However this is a good post for people who are coming from print design to web design.
I loved this article. I’m a Digital Media student, learning how to create GREAT websites, and all the elements therein. This gave me some good ideas that I had not thought of. Thanks
It seems most of these designs look great on perfectly calibrated, high resolution 25″ and higher monitors. However, many users have vision deficiencies, bad monitors and/or bad lighting conditions, causing them to move away from sites using a low foreground/background contrast, using small fonts or those relying on a large monitor.
When I visited a local studio, one of the first things I noticed was the technician using 4 different speakers to assess the quality of their mixing in different settings. Perhaps web designers should do something similar: step out of their comfort zone, purchase some cheap laptops and screens or ask their 80 yo grandma to assess their designs.
A good web designer will pay close attention to contrast, this almost always is the first thing that the user sees. Contrast in color that isn’t too busy and is easy to read is key. Layout is the next most important, with all the different layout options in WordPress, you can really pick and choose what works best for the design.
I think contrast and simplicity are crucial elements of any web design. Thanks fro great examples!
Hey I doing an assignment on web analysis is this a good overview of contrast
Contrast
is making a difference in the page, elements, meaning making the fonts size
color everything different, everything in your site, so what I mean is the user
knows when to look first, because there are big and small elements contrast is the difference between elements in your websites
this can be, size color etc.. Like if
there is a website where everything would be same colour same size same style
there will be no organisation flow or hireacy
Let me know thanks
Thank you for sharing good pints about web design.