Analysis and application of the "contrast" principle in web design

Web design is made up of many different elements, and these elements have different importance. Some elements need to be particularly prominent, some elements are related to each other, and other elements have no correlation at all. What is more difficult is how to effectively convey the relationship between elements visually. This is where the principle of contrast comes into play.

Contrast is the difference between two or more elements. Through contrast, designers can create visual interest while directing users’ attention. Imagine if all the elements on the page looked the same, then the content would feel unorganized, there would be no "(sight) flow", there would be no clear structure, and it would be difficult to understand and accept. Therefore, contrast is an important part of web design.

In this article, we will see how to design better web pages through the contrast principles of color, size, and alignment.

color contrast

When most people hear the word "contrast," the first thing they think of is color. Although there is more to the contrast principle than just color, color can go a long way in helping users identify different elements on a page.

Generally, pages include a header, content area, and footer. Then we need to clearly distinguish these three different parts visually. A good way to do this is to use different background colors.

The churchmedia website is a good example. Use a darker background color for both header and footer, and white for the content area. Through this difference, the content can be clearly highlighted and its importance shown. If we look a little deeper, there is also a different background color contrast in the content area: a light blue is used for the “case” section. Because the contrast between it and other content parts is very small, it means that the two parts are related.

Phil Renaud's portfolio This website uses a unique layout and an extremely beautiful color scheme. The website is designed in brown as a whole, and he uses a golden yellow to increase the contrast between the vertical navigation area and other areas.

Color can also be used to create contrast between text. In Billy Tamplin, different colors are used for the title, subtitle, and article paragraphs to reasonably distinguish each part and establish a visual structure, which ultimately achieves good results. As a blog interface, it is important to establish contrast between the article title and the main content. This way, when users scroll the page, they can clearly see where the article begins and ends.

size comparison

Another way to contrast in page design is to use different sizes for different elements. In other words, make some content larger than others.

When color cannot be relied upon, it becomes important to create contrast through size. Taxi comes in few colors and has a lot of news in its pages. Therefore, to establish the structure of the three-column layout, designers used a much larger width in the middle column—more than twice as large as the left and right columns. Let users see at a glance that the middle column is the most important part of the page.

Just as titles can use color to create contrast, so can size. Headings are a great way to establish visual structure in website content. Imaginaria Creative’s website uses large headlines to grab users’ attention and retain them so they will read more of the smaller paragraphs below.

Alignment comparison

Good alignment plays a large role in high-quality web design. Things generally look and feel better when they are lined up. Therefore, I feel that using different alignments to create contrast is harder and should be used more sparingly. But it can be very effective if done right.

LegiStyles uses a large white space to the left of the content block below the title. Coupled with the large size of the title, it creates a nice contrasting effect. If you want to use different alignments, be sure to make this different scale larger, otherwise it will end up looking like a bad design mistake.

Centered large blocks of text are a typographical no-no. Because it will make the text difficult to read. However, try mixing up left-aligned text paragraphs with center-aligned headings. This is another great way to create contrast using different alignments. Combined with a nice serif font, you can also get a beautiful effect.

Simon Collison uses center-aligned titles and left-aligned text in each content block. Although the title text is not much larger than the paragraph text, the difference can already be seen.

A List Apart is another great example of a centered heading with left-aligned paragraphs.

Do it

Learning to create appropriate contrast in your designs is like learning other design principles – it takes practice. Spend some time studying the work of great designers and see how they use contrast. Remember, contrast is "different". If two elements are very different in nature, make sure they are visually distinct.

Original English text: The Principle of Contrast in Web Design