The idea of Web page blank Space design

Source: Internet
Author: User

Blank, in the Web page mainly refers to the space other than the graphics & text content. 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.

Xerox published the "Xerox standards", they describe the principles of their design: "The main goal of page design is visual cognition and clear readability." 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. ”

Now, with some examples, let's talk about some simple understanding of blank design.

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.

The above is only a very small blank application examples, here is also holding the attitude of learning and exchange in writing some of the small design experience collected at ordinary times. Hope that we have a lot of support ~ ~ More hope to master correct Exchange ~ ~

Article Source: reprint Please indicate the source link.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.