General standard for "title bar design" of business-to-business websites

In the process of designing the frame of the Business-to-business website, the title bar design is the most work, the most of the page frame. Website logo and navigation bar design, basic each page is the same as the homepage, compared to the workload will be much smaller. Whether it is the homepage, Level two column page, or navigation page, the content of the final page, excellent title bar can always make the reader convenient and quick to find content, and will not interfere with the content of the page.

1 The general standard of the title bar design of business-to-business websites

The Business-to-business Web site is mostly the same as the general business portal in the title bar design, but since more visitors and users of the Business-to-business Web site are studying and working in the office, they need a more serious atmosphere, and they need more information about business opportunities, industry information, industry know-how, and more, not entertainment and leisure. At the same time and the corporate Web site title bar design has a great difference, the page does not need to use the title bar color and shape to highlight the characteristics of the product and brand culture, so the business-to-business website to weaken the title bar of the picture and color, do not have access to the content of visitors affected, the general standard

1.1 The characters on the title bar are larger than most of the content on the page, bold, and more prominent

Maybe everyone knows this standard, but in my actual work, and accept a lot of people in the consultation process, saw some websites, and some designers to my page title bar words on the same as the words on the content of the same size, are 12PX bold, perhaps they are not intentional, perhaps they feel that has been bold, But from this point of view, some people still do not rise to the theoretical level, by feeling. Generally the font size is: 14PX, bold.

Figure (45) Zhong Nong Net homepage Information Section title bar

As shown in the figure above, for the Middle-rural network (www.ap88.com) Home Information section title bar, from the title bar can be seen, agriculture news, picture news, agricultural information, a few words, than the following not recommended the title of the article to be large, the current selected part has been bold, so that visitors understand that What is now being seen is the recent increase in the agricultural headlines. So the title bar bold, larger font size is all page designers, Web site testers must be clear basic standards. Of course, the emphasis on the content of the title, can be larger than the title bar font size.

Figure (46) The title bar of a clothing website, the font size has not been large, not bold, no level sense

As shown above, for a clothing website title bar, is not standardized, the title bar on the word neither bold, nor larger, the page does not look hierarchical sense. This aspect of newspapers, periodicals, books, the best typesetting, to learn from them, so that visitors better search for content, have a better reading experience.

1.2 title bar No matter how the design, the word no matter what effect, must be very clear, can not fancy

According to the theme of the Web page, the type of content, the title bar of different pages will be designed to different effects, but no matter how we design, we must make the words on the title bar look very clear, clear, so that visitors at a glance, not to better look, more artistic effect, and make the word look unclear, not prominent.

More importantly, because the page of the Business-to-business Web site is more serious, the title bar Word, picture and color, should look more serious, not too fancy, too beautiful, simple and generous better.

Figure (47) Some industry homepage member recommendation title bar

Figure (47) is a certain Industry homepage member recommendation title bar, the title bar "member recommended" a few words are not clear, in fact, as long as a few simple adjustments, the word up and down the middle of the display, the background color deeper, the word to do some effect, will be clearer.

1.3 The title bar can not use a large area of dazzling colors, can not be too prominent, interference users to find content

The home page of the Business-to-business website, first-level columns, level two columns, content pages, such as pages, visitors need to look for a large number of their own content from the page, and theme pages, corporate websites, and so on, in particular, the content of the brand enterprise site, the need to color, font, shape, etc. to render the brand features You can use a large area of color as the background color of the title bar, using a large size, will not be distracting, will create an atmosphere for visitors.

Figure (48) China Apparel Network Information column title bar

From the figure (48) You can see that the title bar uses blue, because the title bar is too long, so you can not use the deep blue, but the blue gradient, which weakens the visual impact of the title bar, so that visitors pay more attention to the content. As I have said before, all successful business-to-business websites, most of which have a good knowledge of the page design, we have to learn more successful industry website.

1.4 The title bar should form a whole with the content, visually differentiate

Each title bar below the content is a subdivision of content, the role of the title bar is to hope that visitors can find the content of their interest as soon as possible, to achieve this goal, it is necessary to use the title bar and border to surround the content, forming a whole, Let visitors visually distinguish what kind of information they are looking at.

Figure (49) Sina Finance Column homepage Toggle title bar

such as figure (49) Sina Financial Column first switch title bar, from the "Commodity-Currency" section to the "Rolling News" section, not only the text changed, the text under the background has become white, and the following content to form a closed whole. If you switch over, the color below the text or light blue, can not form a whole.

1.5 The corner of the title bar can not be too round, too cartoon, the background can not use too bright pattern, can not use oval

Business-to-business Web sites need to be more serious style, so the title bar should not be rounded corners, also can not use too bright pattern as a background, or even the use of oval. In my years of work experience, I have seen some designers to provide the Business-to-business industry website page title bar rounded corners too round, this design gives a very serious atmosphere, there is a bit of rounded corners can be. In the design of some more features of the corporate Web site or brand site, as well as you can see the QQ space, 51 spaces and other personal home page may use some personalized title bar, but in the business-to-business industry site can not be used. This is the site positioning and design of the link.

The above points, although the reason is very simple, we all think it is very easy, most designers in the design of the time can subconsciously comply with these standards. But I think, there are always some designers he will sometimes make one or more of the above errors, as the site's product managers, product testers, site managers, must be able to understand these details, in the product development process to correct these problems in a timely manner.

2 analysis of four kinds of title bars used in business-to-business websites

The following is my collection of various excellent business-to-business industry website use the most 4 kinds of title bar for your reference.

2.1 Simple and generous type

Figure (50) Alibaba home business information and merchant Community title bar (screenshot: 2011-10-18, now revised)

Figure (50) for Alibaba home page business information and merchant Community title bar, this title bar concise, generous, using the gray as the background, orange and red as the title bar of the word color, with the word to highlight the title bar, visitors can only see the word will be clear, at a glance, belong to the simple and generous title bar type, At present, this kind of title bar in a variety of sites using the most, you can use light blue, red, light green for the background, such as Tencent, NetEase, Sohu, are this type of title bar.

2.2 Key-protruding type

Figure (51) Nine positive building materials Web title bar

As shown in figure (51) for nine is building materials Network (www.jc001.cn) homepage title bar, this type of title bar I call the highlight type, using a very strong color, but only use a little heavy color, the other parts with white or lighter color, so that visitors are very good distinction, not too dazzling, too eye-catching. This type of title bar is also used in a variety of sites, red, yellow, blue, green, black can be.

2.3 Type

Figure (52) Food Business Network (21food.cn) Information column navigation page to the right of the two title bar

Figure (52) for Food Business Network Information column navigation page to the right of the two title bar, because this title bar is relatively short, you can use a darker solid color as the background color, do not bring too much impact on the user, and highlight the smaller parts of the module, and also on the right side of the page. But this aspect of the title bar we should use caution, because the use of a bad, will destroy the harmony of the page, in the page a small number of use or can be, such as: the use of lighter colors to do the background, is also possible.

2.4 Beautiful fashion type

Some websites use a lighter stereo pattern as a background, both beautiful and not fancy. This kind of navigation bar in some fashion type column, as well as pays attention to the product outward appearance design the profession, its picture storehouse column may refer to this method to design, for instance clothing. This is not much seen in the current business-to-business Web site and is a special type of title bar.

In the actual use of the process, we also often refer to a variety of excellent business-to-business website title bar, as well as integrated portal site, and business-to-business industry site in fact, in the title of the design of the same, must not go to learn corporate websites, social networking sites, entertainment games, such as the design of Web sites. A lot of reference, contact their own industry, the actual page is more innovative, generally in a page, we can synthesize the first 3 types of title bar, such as: The longer title bar using the second method or the first method, the relatively short title bar part of the use of the first, part of the use of the third, a variety of title bar mixed use, To the first or the second main, will make the page more colorful, not the whole page is a title bar, so it is too monotonous some.

Author: Li Xuejiang

Related articles: business-to-business industry Web site "Text style design" general standard