How to apply some blank space on the Web page with example analysis

Blank, in the Web page mainly refers to in addition to graphics, text content outside the space. Although the white space in the Web page is not as romantic as "white as black" in landscape painting, he is crucial in guiding the user's vision and creating a smooth visual sensation.

The principle of design: "The main goal of page design is visual cognition and clear and easy to read." These goals must be achieved through harmonious typography, effective use of drawings and blank spaces, and controlled use (of lines). Multiple repetitions, the visual formation of the inevitable link can guide the line of sight and help readers to quickly browse. Design, leaving a large number of blank space as a blank field of expression, so that the title "prominent", large drawings to get visual extension. ”

The following, combined with some examples, illustrate how to use some of the white space on the page.

Example 1:

This is the two lottery betting page, the function of the entire Web page is almost the same, but the design of a Web site to use a more fragmented and too much content, will produce unknown where to start and do not know where to end the visual feeling, for users will spend more time and energy to distinguish and judge what is what; B Site page blank use is relatively reasonable, in the user will spend most of the operation area to retain more space, so that not only can play the role of emphasizing the operation area, while the eye to find a little rest of the area, this relatively crowded pages can help users to operate the process of not easy to worry. White space Here is the first page to look more refreshing, but also improve the usability of the Web page.

Example 2:

First look at the Soso and Baidu, it is obvious that the two pages use the same layout of the method, the result is similar. such as the layout of a table like this, there will be some ambiguous blank space around each project, please try to experience how the eye is looking for one of them in these ambiguous blank space, the result is obviously caused by the decline in the usability of the page, The user is likely to have a psychological feeling of finding something difficult to find in the process of looking for, but the Soso content is less so usability is good. If you look at Google's approach, Google's approach may be that it's a waste of space. It is true that this is a waste of space, but the advantage of this is: these two columns plus the right white space, visually gives the user enough guidance ——-very obvious from top to bottom browsing direction, relatively high availability.

The gap is actually the relationship between the graphic and the background, but the use of the yin shape in the graphic design is different, graphic design of the relationship between the bottom of the more complex, the formation of more beautiful aesthetic change, the picture may be as the theme of the visual design, thus forming a very ambiguous mutual changes in the complex graphics, such as: the following figure.

But this approach in the design of the Web page should be used with caution, so it is easy to cause the shape of the bottom of the confusion, resulting in visual distress.