Visual representation of the core content of Web pages

"The optimization and refinement of information is always the first step in design." "This is Baidu Alliance user Experience Center banner on a word." In their own web design process, more and more of such a generalization has a personal experience and ideas. Of course, this refined sentence actually contains a lot of content, I personally think, including at least four aspects: first, from the site's entire appeal, the Web page need to put what information to better realize the demands of the site? What information needs to be retained? And what information needs to be placed on other pages or even simply discarded? Second, to have been determined to place the information on the page, how to better write text, select pictures to achieve functional and visual beauty of the perfect unity? What is the importance of distinguishing information and what is important and what needs to be emphasized? And what are some of the lesser information? Four, the district divides the information the primary and secondary, in the layout, the color, Dimensions, that is, how to better highlight the visual and performance?

Almost every part of these four sections has a topic to discuss, so in this article I only on the fourth aspect, that is, the Web page on the core content and visual performance of the relationship to comb and summarize their understanding of this aspect, as far as possible, I think of the content to write out, At the same time, give some specific cases to illustrate my point of view, to facilitate better understanding.

One, the core content for the page layout influence

The image below is a company that provides WordPress website construction, and it can be seen from top to bottom on its home page: navigation, logos, slogans, artwork display, reasons to choose us, contact form, log list, email subscription, Twitter information, and copyright information. The first sight is undoubtedly the company's slogan and work display, which is the core content on the homepage of this website. Because as a website construction company, the intuitive let the customer know what you are doing? It should be what the customer wants to know. So what do you think about the core content, visually?

We can see, in the slogan of the designer to "WordPress" The word used a very large text size, and color and other text, using a darker gray, stressed that the company is to build a special site to WordPress for the backstage. At the bottom of the slogan, the artwork shows a large size, width reached 540 pixels, and the entire design width of 1000 pixels, on the home page such a large size of the display can be very clear and direct to the customer to see the original works, so that the company's production level has an intuitive impression. And such a large size of the work show has actually vaguely determines the layout of the entire site. Think about it, in the upper left area of the screen with a width of 540 pixels, high 460 pixels of the rectangle, the next area should be placed what information, in fact, like a building block, according to the importance of each place on the line. Of course, this is not the only way to layout, but whatever the layout, our ideas should be in the context of functional considerations. So creative we can have, but to understand and unconstrained the pure creativity of the difference.

If the layout of the page above is still comfortable, the layout of the following hotel's homepage may make us feel something new. Can see that the background of this design with a large food picture, navigation and the main content area only accounted for the entire page height of one-third, so that the background picture large area of the display, and the above design, the purpose of this layout is not simply to be unconventional or for the sake of visual beauty, But the hotel's characteristics may be catering, so in order to highlight the core content, in the layout of the corresponding consideration. The following restaurant also highlights delicious food in the main visual section, but the two have a completely different layout, and although each has unique information architecture considerations, it may be useful to view them as the same core content in both different creative ways.

Second, the core content for color scheme impact

Lofter is the Light blog service provided by NetEase, which has four types of information, namely: pictures, music, text, video. On the Lofer template design, the puppet students in the "Lofter Light bo template Design" in the article on the main display of pictures of the template has the following design considerations, "the template is usually to meet the photographic user, the picture display area to be big enough, cool enough; Template Home screen can see more than a picture, dark background, highlighting the current picture; The border design makes the picture more prominent, or makes the picture more exquisite. "By analyzing and understanding this design idea, we can find that the image display area is large enough, that is, we mentioned the layout of the above considerations, and the background is dark that we are here to discuss the impact of the color scheme."

From the complete work of the puppet students, we can see that according to the design idea of the gray background calm and low-key, and the white picture border and background in sharp contrast, while the gray color scheme and color images will not conflict, no matter how the picture can be changed and gray and white hundred, So the color of the picture in the white background and frame against the backdrop of more eye-catching, so that the image of such important information in the visual aspect has been fully expressed.

Another example comes from the South Korean search engine service website Naver. liuman0722 in the "Efficient Design visualization" for the design of Naver wrote "Korea's famous portal/Search engine website Naver under the Naver Shopping, its product positioning is to provide product search services, through the search product name, You can list the product links in almost all of Korea's large E-commerce sites by category. So in the interface, use strong contrast tones to highlight the search function and navigation area (the green area in the upper-left corner of the page). Through visual guidance, so that users focus on the core content, focus on the focus of the user's attention, in the white-dominated page, the line of sight will see the strong tonal part, so you can also use strong tones to highlight the core content, so that the user's visual focus there. ”

All visual design is around the information to do, we must first comb the content and structure of information in order to know where to apply heavy ink, where to go. Conversely, many design ideas and ideas can be said to have been implied in the message, such as the layout and color scheme we mentioned above. As long as refining and optimizing the information, how to do in fact, in the process of carding information is gradually clear.