Understanding the visual hierarchy in Web pages

Original from &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp; Webdesign tuts+ Original Translation-Design theory

Visual level is one of the important principles of efficient web page design. This article will show you why it is so important to design a Web page with a visual level. After you understand these principles, you can apply that knowledge in your own basic design exercises.

As the core: the overall design is visual communication. As an efficient designer, you must have the ability to clearly communicate your design ideas. People are variable, and if you give them huge amounts of information, there's a pretty high probability that 100 out of 99 people will get tired of looking at it. And why? Because people are a visual admirer of nature, not data processors.

To understand this, it is important to know how some people look at things. People are not equal to so-called "equal opportunities". Not only do they collect visual information and process data, but the brain also collates the "visual relationship" of the things they see.

Let's look at the following two ordinary circles:

Most likely, you don't think of them as "two circles", but rather as "a black circle and a smaller red circle".

The reason is very simple: when something as simple as the two circles is presented, people often see more than two ordinary circles, and they will search for the differences between the two circles. A circle may be bigger, smaller, or color, or something different. These differences give us the information that distinguishes the object and give the graphic a specific meaning.

Let's take a look at a more complicated picture:

The increased complexity forces us to analyze their relationship. The same and different points become the framework of our thinking about these issues. The proportions convey to us that "an object is nearer to us than any other, or that the object has a dominant position relative to other objects"; The color difference tells us that each object may have its own unique characteristics, which distinguishes it from other objects. Such a simple picture conveys so much information to us in the most basic way.

... Understanding that arranges'll you'll be there designs in terms of relationships are crucial to becoming a more effective designer.

Let's take a look back at web design, because Web design is about visual information exchange, understanding that "users will be able to organize their own design content" as the core of our efficient design. The way a lot of information is thrown out of a large number of pages seems boring, and as web designers, our task is to divide the information that has not been processed into a piece of the pertinent delicacy that users will read more conveniently. More importantly, we need to understand that the efficient exchange of information is the key behind the Web page.

At first glance, there are hundreds of explanations of the visual hierarchy that explain why people look at problems according to their relationship. If you want to go back to anthropology and discuss it, you may conclude that the ancient hunter-gatherer people are thinking about the connection between these things, which is a survival technique.

may be a more comprehensible explanation, and that's how our brains organize information: organize similar visual elements into a group, and put them into a certain type of meaning, like the natural eating and drinking habits of humans. In other words, the fact that the information in the brain is sorted out at a certain level is more efficient in communicating than without the information.

Look at the following two pictures:

In the above example, we can see the most basic level of textual application. There is no difference between the examples used in the two pictures, but how does it dramatically change the way people understand and digest the content? When we discuss the visual level with the example of typesetting, this is the problem we want to analyze. The proximity, proportion and similarity of the text organization make the readers naturally classify the subordinate content into headings and sections. The hierarchy gives the title more meaning, not just information, but also makes the content easier to accept.

Well, that's just one of the most basic examples, right? Let's take a closer look at other examples to see how to use these basic rules to become a sophisticated designer.

Visual levels are important, but how do you create hierarchical effects exactly? The tools we are looking for are just like the carpenter's toolbox-hammers, nails, saws and so on-how you use them is the most important thing.

1, size

Larger objects have greater appeal. The control of dimensions as a tool for manufacturing is a very efficient way to guide the reader's vision. The combination of size and importance in design is critical. Most of the elements of the largest element have the greatest importance, while the smallest element should be the least important.

2, Color

Color is a very interesting tool, he can play a role in both organization and personality. Eye-catching, contrasting colors can cause greater attention (such as buttons, error messages, or hyperlinks) in special elements. When used as a tool for individuality, color can extend to a more refined level, and a luxurious, comfortable color will bring emotional appeal to the page. Colors can affect every corner of the page, from the logo to the image. Color application in Visual hierarchy design can do information classification effect, like the following example:

3, Contrast

Contrast shows the relative importance. Dramatic changes in font size will convey the importance of a message or require some special attention. Switching from a lighter background to a darker background will quickly distinguish between core content and footer content.

4, Align

Alignment reflects the organization of the elements. It's even easier to differentiate between "main" and "sidebar". But alignment can also play a more complex role at the visual level. Consider, for example, the power of the content in the upper-left corner of the page. Because the user most of that place information and profile, account number, shopping cart and so on related. What was put in that place was given some kind of "official" sex. Alignment can also arouse the interest of the user in a particular way, such as the following example:

5, repeated

Repetition embodies the relationship between elements; If all the paragraphs are gray, when a user sees a new gray text, he may think it's another paragraph; when the same user encounters a blue link or a black caption, he can safely interpret it as something other than a paragraph.

6, Intimate

Intimacy separates elements from each other and creates levels of subordinates. You may see a lot of widgets that are separated by whitespace in one page, and new levels, headings, subheadings, and content in these parts. Intimacy is the quickest way to organize tightly related content. In the following example, it is easy to distinguish between main content and other content through intimacy.

7, close and white

Dense elements give a feeling of "heavy" and messy, and the distance between elements is too great for them to lose contact with each other. When a Web page is designed just right, the eye will accurately organize the elements.

Source Address: http://lazymaru.com/blog/?p=176