The intimacy of efficient design principles that web designers should follow

Intimacy is the last of the "Efficient design principles that Web designers should follow". Guide users to browse the site smoothly, reasonable use of blank space, the same content together, provide a clear structure is "intimate" design standards of all content.

Interval and Association

Fig. 1Web The intimacy of design, that is, to organize similar or related elements together to separate unrelated or dissimilar elements.

When there is overlap or contact between elements, the topmost elements gain primary attention. Looking at Figure 1, do you first notice the "proximity" part? Will your eyes first be attracted by the purple part, then move up from the left to scan the other parts? If the other elements in the vicinity are in sharp contrast, the overlapping elements will be eclipsed immediately. Similarly, when multiple elements are closely aligned, elements that are in sharp contrast are highlighted. Achieving a balance between intimacy and contrast, and even adjusting the two principles can result in different outcomes. Look at Figure 2, which part of your eye will be attracted first. Will you first notice the "repetition" part?

Figure 2 Each element has a "gravitational pole" (gravitational pole) relative to its approximate element, and the degree to which one element is intimate with another affects its weight. Just as the gravity of the earth can affect the trajectory of the moon, the elements of the page relative to each other affect the weight of it and other elements.

Blank area

Another "intimacy" element is a blank area of a Web page. Use the margin to separate each element, and the inner margin is used to balance content with empty areas. Generally speaking, too much white, will make the Web page looks irregular, give a person a lack of content feeling. Of course, if your design requires artistic effect, highlighting open space to achieve attractive goals, then do it.

Intimacy and typography

The negative effects of too many blank areas are discussed above, but too much content can make the Web page look cluttered and crowded. In general, the right blank area is more attractive and more comfortable. The following two cases show the two extremes of the white space, there are too many white space in Figure 3, and there are too few white space in Figure 4.

Figure 3

Figure 4

An intuitive flow of content can strike a balance between a blank area and a typographic element (composed of text content). Figure 5 is a list of IT courses, and we try to tweak the list to make it more appropriate to read.

Figure 5

Now, take a look at the list of the same content shown in Figure 6. Each logical group is delimited by appropriate whitespace, and each group consists of large headings and unordered list items.

Figure 6

The second list divides the contents into sections, each of which includes the corresponding course list, and each set of course lists is intimately related to the title of the relevant sub section.

The "intimacy" design principle allows us to help organize content elements in the page by dividing the spacing, smoothing, size, correlation, color and whitespace and typesetting elements.

Original link: Effective design principles for Web designers:proximity

Compile Link: CSDN