Business-to-business Web Design sharing: Standards for web design and production

Article Description: business-to-business Industry website "Text style design" general standard.

When we open a variety of business-to-business websites, see the most is a variety of text, expressed in a variety of ways, displayed in front of the visitors, text is the Portal type Web site The most content, while the text and pictures, video is the most important site of the three ways of expression.

Business-to-business Web site, more services to the business needs of the transaction, understand the learning needs of industry knowledge and exchange demand, the author of this article Li Xuejiang that these needs are more to be expressed and transmitted through words, different font size, color, thickness, line spacing, representing the product planners, The information that the Web designer expects to deliver to site visitors. Here is a brief explanation of the standards in the design of the Business-to-business Web site.

1 business-to-business Industry website navigation bar text font, size, thickness, color of the general standard

Navigation bar is a user came to the first part of the page to see, to guide users to different columns to visit, so the text to strive to highlight, this in front of the design of the effect diagram also said.

The General standard is:

A font: The default font song, navigation bar can not be used to make pictures, not conducive to search engine optimization, so can only use the song body.

B Font Size:14PX and above, as the business of business-to-business Web site is generally not much, most of them do not fit like Sina, NetEase do navigation bar, a row of columns, is the most business-to-business industry website design habits. Part also has two rows of columns, three rows of columns, up to 2 rows of navigation more reasonable. So in most cases, the font size to be greater than or equal to 14PX, put two row when part of a section of the column navigation and level two column navigation, two level column can be smaller, the smallest 13PX.

C thickness : If the navigation bar only a row, most of the case, should be bold, if the first level column and level two columns are written in the navigation bar, with two row display, generally only bold level column.

D Color : According to the page effect chart to make, if the navigation bar has the background, the text color must use with the background has the very strong contrast color.

Figure (92) Chinese screw net (www.luosi.com) two row navigation bar

Above the website two row navigation bar, the size is 14PX, the first-class navigation bar has been bold, the key column uses the more eye-catching orange, part of the Business-to-business website is also uses this kind of navigation way.

Figure (93) The Medical Network (www.pharmnet.com.cn) navigation bar

Above the site's navigation bar, the size of 14PX, bold, color contrast with the background is very strong white, the key column color display, such navigation is the most business-to-business Web site adopted the way.

2 The general standard of text font, size, weight and color of the title bar of the website of the business-to-business industry

The title bar is the most important part of a page frame design, also need to design the most places, we design a page, in addition to the content design, is basically in the design title bar, in the page Effect Diagram Design section also said very detailed, here from the title bar on the text, accurate to the font, size, thickness, color to briefly explain.

The General standard is:

A font: Most of the time the default for the song, because now the design of the Web page, we all like to add a link to the text in the title bar, directly linked to the level two or a column of more content, text is not a picture expression, and some also use CSS to design some effects. So in addition to some of the high effect requirements of the title bar, we only use all browsers can be normal display of the song body. If you want to make a title bar picture, you can use some serious, commercial fonts.

B Font Size:14PX, there are few exceptions, the vast majority of the title bar text size can not be less than 14PX, sometimes larger, but most of the case can not be less than 14PX. Once a designer to me his design of the Web page, I do not think it is wrong, and later found that the original title bar are used 12PX bold, does not appear to have hierarchical sense, each content block between the degree of difference is not enough.

C Thickness: must be bold, basically no exception.

D Color: According to the color of the page effect chart, the text color still has to use a strong contrast with the background color.

3 business-to-business Industry website navigation page "Normal content" link font size, weight, line spacing, color general standards

Navigation page generally refers to the home page, the first level of columns, such as pages, navigation page Most of the content has hyperlinks, visitors based on the link title to find their interest in content, so the design of the content link becomes very important.

The General standard is:

A Font Size:12PX, you can also use 13PX, most of the time is 12PX.

B Thickness: fine body, not bold.

C line spacing: generally 20PX, the highest is no more than 23PX, the lowest is not less than 18PX, otherwise either too high, or too low.

D Color: The majority of the case is black, the code is: #000000-#333333, in order to protect the vision, there is also the use of gray, color code for #444444 or #555555.

4 business-to-business Industry website navigation page "Recommended content" link font size, weight, line spacing, color general standards

To make the content a primary and secondary point, will focus on content, readers may be interested in the content of the reader to give priority to find, save users to find the content of the time, improve the site stickiness, for information, technical articles, blogs, questions and answers, in the home page, the first level of the first column of the content of the editorial push, These recommendations are very different from the normal content link style.

The General standard is:

a font size : Most of the 14PX, for a section of the day or a period of time the focus of a recommended content, the title will be larger, is generally 16px-20px.

B Thickness: Most of the case, is definitely bold, I have seen a designer design site, recommended information, although the font size is relatively large, but not bold, did not reach the focus of attention to the effect of visitors.

C Line spacing:More than 120%, generally 150%, otherwise the word is big, the distance is too tight, even show incomplete.

D color: with the general Content link color is generally different, using black, red, blue and so on, in order to achieve more prominent effects, not only from the size, thickness and other points of view, but also use more eye-catching bright colors (red, orange, blue, etc.).

5 business-to-business Industry Web site List page "Product name" link font size, weight, line spacing, color general standard

On the list page, the product name, the company name, will be more prominent than the other fonts on the page, in front of the design of the effect chart has also been said, mainly for the purchase of the Chamber of Commerce priority attention to product names, select the products they want, will be further to see the product introduction, origin and other details, then in addition to the product name will need to weaken the content.

The General standard is:

A Font size : Most of them are 14PX, also can be 13PX.

B thickness : bold.

C Line spacing:150%.

D Color: and auxiliary content color is not the same, generally do not use black, with more blue.

Figure (94) Alibaba Products List page

Figure (94) For Alibaba Product List page screenshot, product name is 14PX, blue, bold, outside the title of most of the content is gray, weakened.

[1] [2] Next page