Web Design tips: Design color Alignment Comparison

Original link: http://webdesignledger.com/tips/the-principle-of-contrast-in-web-design

Translator: Small pig

Web design is made up of a number of different elements that are of different importance, and that some elements need to be particularly prominent. Some elements are connected to each other, There is no correlation between the other elements. The tricky part is how to effectively communicate the relationship between the elements visually. This should be the principle of comparison.

Contrast is the difference between two or more elements. By contrast, designers can create visual fun while directing the user's attention. Imagine that if all the elements on the page were a pattern, it would feel like there was no organization, no "stream of sight", no clear structure, It's hard to understand and accept. So in web design, contrast is a very important part.

In this article, we'll see how to build comparisons with the three aspects of color, size, and alignment.

The contrast in the color

Most people hear the word "contrast", and the first thing they think about is color. Although the contrast principle contains more than just colors, colors are helpful in helping users identify different elements in a page.

General pages include headers, content areas, and footers. Then we need to visually distinguish between these three different parts. A good way to do this is to use a different background color.

Let's take a look at church Media Group's website, which is a good example. Both headers and footers use a darker background color and the content area is white. By this difference, it is obvious that the content is prominent and the importance of it is shown. If we look deeper, There are also different background colors in the content area: The case section uses light blue. Because it is very small compared to other parts of the content, it means that two parts are related.

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

You can also use color to form a contrast between text. In Billy Tamplin, the title, subtitle, article paragraph used a different color, each part of the reasonable distinction and build visual structure, and finally achieved a good result. As a blog interface, It is important to establish a contrast between the title of the article and the content of the subject. So that when users scroll the page, they can see clearly where the article starts and where it ends.

The comparison of the dimensions

Another way to contrast in a page design is to use different dimensions for different elements. In other words, make part of the content larger than the others.

When you can't rely on color, it becomes very important to build a contrast by size. Taxi has very little color, and it has a lot of news on the page. Therefore, in order to build the structure of the three-column layout, the designer used a much larger width in the middle column than the left and right columns twice times larger. Let the user see at a glance that the middle column is the most important part of the page.

Just as the title can be used to create a contrast between the colors, the size can also be. In the content of the website, the headline is a good way to build a visual structure. Imaginaria Creative's website uses headlines to attract users ' attention and keep them, so that users can read more of the smaller paragraphs below.

Comparison of alignment

In high quality web design, good alignment means a large proportion. When items are lined up, they usually look better. So, I think it's harder to use different alignments to build comparisons and use them more carefully. But if done well, it's very effective.

Legistyles the left side of the content block below the title uses a large white-left. Plus the large size of the title, forming a good contrast effect. If you want to use a different alignment, be sure to make this different scale bigger, or you'll end up looking like a bad design mistake.

A large section of text centered is a taboo in typography. Because it makes text difficult to read. However, you can try to mix the left-aligned text paragraphs with the center-aligned headings. This is another good way to build comparisons using different alignments. Combine to use a nice serif font, so you can get nice results. .

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

A List apart is a good example of another centered left-aligned paragraph.

Start doing it.

Learning to build the right comparisons in your design is the same as learning other design guidelines – you need to practice. Take the time to study the works of the best designers and see how they use contrast. Remember, the contrast is "different." If two elements are substantially different, make sure they are visually distinct. .