Web page design around the site center content

Web design must be centered around the content of the site, including at least four aspects:

First, from the site's entire appeal, the Web page needs to put what information can be better to achieve the demands of the site? What information is needed to be retained? And what information needs to be placed on other pages or even discarded altogether?

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, which is important, and what is the secondary information?

Four, the district divides the information the primary and secondary, in the layout, the color, the size, namely in the visual how better outstanding and the 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. The template is usually to meet the photographic user, the picture display area to be big enough, good enough; template Home one screen can see multiple graphs, dark background, highlighting the current picture, the border design to make the picture more prominent, or make the picture more beautiful. "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.

South Korea's famous portal/Search engine website Naver's Naver Shopping, its product positioning is to provide product search services, by searching for product names, can be listed in accordance with the category of goods almost all of Korea's large E-commerce site to provide the link to the product. 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.