The principle of generalized contrast. Web Designer Knowledge Base
Printed 2016-10-20
In the section on prototypes, we found out how, when creating a simple sketch sketch, the main task of information design is solved - the location of information on the site in accordance with its priority.
Now I'll talk about how to solve this problem at a more detailed level. We finally came to the “live” layout in PSD!
The main tool that you will need, I call the method of generalized contrast. This is a well-known thing, and there are many names for it.
In order to highlight the main thing in the site design and remove the secondary, you need to- then distinguish, separate from each other the elements that make up the site. In other words, you need to achieve contrast: the main thing is contrast, the secondary is muted.
There are many ways to make elements contrast:
1. Contrast in size. This is the simplest and most obvious thing that can be. We make important blocks large, minor blocks small. Take a look at some well-done newspaper or newspaper website. You will see large headlines, a large text of the main news and small blocks neatly shoved in different angles with minor news.
2. Contrast in color. This is what they usually mean when they say the word "contrast." In the same example (on a news site), the main text can be written in black letters on a white background or even on a light gray substrate.
3. Contrast in sharpness and saturation. Any photographer knows about this: the main subject is “in focus”, it is clear and sharp. And the secondary ones are vague (or muffled, according to the principle of aerial perspective). For example, there are 10 advantages of the company with icons on the site, of which 7 are secondary, and 3 are the main ones. What you can do: make the first 3 icons bright, and the remaining 7 icons translucent, “distant.”
4. Contrast in detail. Imagine a large site full of diverse information. And in some part - a large empty white block, in the center of which is an inscription or symbol of some kind. Against the background of all the husks, all the garbage of this page, such an element will stand out sharply. This is closely related to personal space, which I will talk about later.
5. Contrast in detail is the opposite. The previous principle can work in the opposite direction. For example, there are several blocks on the site that look like an icon + text. And there is one other block, which is more detailed: text with subitems, with bulletins, icons, and its background is a light translucent pattern. In this case, on the contrary, a more detailed object is selected!
6. Contrast in shape. Based on tasks from an elementary school such as “here are 2 circles and one triangle, find the superfluous”. Yes, you can do that too. If your site has rounded shapes everywhere, then a rectangular die with some important message will stand out. True, the question here is rather how to do it graphically and stylishly.
7. Contrast in the style of design. The whole typographic layout is built on this: one word highlighted in bold or in italics is contrasting! In all these examples, the principle is the same, but the ways to achieve the goal are different.
How to apply the method of generalized contrast? I know that you want a “magic pill” again, but it's not there. Here you need to look at the situation: if the site is built on graphics and illustrations, I use more “graphic" methods, for example. And so on.
This is already creativity, because we are talking about a unique site design , not a template one.
More about composition:
Method: The principle of generalized contrast
Method: composition verification
Building a page from blocks
Personal space