A, page tile
The page is flat, the main objects are: Navigation bar, LOGO, Banner, buttons, pictures, text. Here I will focus on the main parts of the specific explanation.
1. Navigation bar
The navigation bar if the design is just right, it will give a lot of color to the page itself (do not too fancy, it belongs to functional objects, distracting on the bad). The navigation bar has a row, two rows, multiple rows, picture navigation and frame frame quick navigation and so on various situations design. Sometimes it's horizontal, sometimes it's vertical. There are also a number of dynamic navigation bar, such as the wonderful Flash navigation. The main points of the navigation bar design are summarized as follows:
1) navigation is not much in the case, is usually a row, anyway can be, in fact, more than 6 columns can be considered with two rows.
2) navigation columns in many cases, can also be more rows, or even irregular multiple rows (a row of different numbers, or lengths of different). Commercial design or portal site usually has a lot of channels, designed to consider horizontal double row. Using vertical rows takes up too much space.
3) usually not much content in the case, may not be indifferent to the column, the site includes the specific content of navigation, as shown in figure 1.
4) dual-row navigation may not be to be together, you can be free, as shown in Figure 2: The top row has a navigation bar, the picture is separated, then another row.
5) picture-type navigation, very beautiful, occupy the page space is quite large. As shown in Figure 2 each child image is a hit hotspot.
6) I recommend that you use Flash to make navigation, its small size, many changes.
7 content is very rich site, you can consider the use of fast navigation, that frame frame shortcut navigation, because no matter where you enter the page can quickly jump to another column, will not lose direction.
8) The use of DHTML, JS, dynamic hidden layer and other technologies to achieve multiple changes in navigation, there are browser support issues. I suggest that you do not give this navigation to sites with lots of information.
9) Not all sites have navigation. We can decide according to our own situation.
2. Logo (logo)
About logo Design I will be in the future "CI marketing" a specific explanation. Here I tentatively summarize the following two design points:
1) The location of the logo is usually in the upper-left corner of the page. According to your design, it is not immutable, the so-called personality design, regardless of business or personal, are going to try boldly. Here for you to list the logo on the page of the common layout ( Figure 3) for reference.
2 website logo, although there is dynamic, but absolutely not suitable for excessive dynamic, and not all the site logo is suitable for the selection of dynamic.
3. BANNER (advertising bar) type
Several international sizes of banner are as follows: 468x60 (full size banner), 392x72 (full-size with navigation bar banner), 234x60 (half size banner), 125x125 (square button), 120x90 (Button type 1), 120x60 (Button type 2), 88x31 (small button), 120x240 (vertical banner), which 468x60 and 88x31 most use, the following is commonly used for everyone to explain.
1) 468x60 Full size banner
Although the size of the international standard, but in the design of the page, it can be based on your page to occupy space to develop banner advertising and advertising bar size.
£ (1) a page is not easy to exceed two 468x60 full size banner. Two bars, usually the top one, the following one, as shown in figure 4.
(2) Design banner with the page of two situations: Single look banner difficult to see, but put in the Web page, it will make the web design rich and dazzling, the general is 468x60 banner have this ability. Also have the design time must consider the logo and other station interchange how more suitable for other people's homepage style, therefore should do some different color different situation banner.
2) 88x31 's banner
(1) Everyone commonly known as its logo.
(2) Good banner also should conform to the style of the website. Often meet a great banner but it is very difficult to see the homepage. Although there is a sense of deception, but from the marketing point of view, the better the design, the higher the click Rate, the more successful.
(3) as shown in Figure 4, the general advertising bar in Area 7, 88x31 banner can also be used to enrich the page. Such a situation is rarely seen and deserves attention.
3) Banner Design Note points:
The banner (1) has two kinds of dynamic and static. In the process of browsing the webpage, although the flashing pattern will produce the instantaneous memory stimulation, arouses the attention, but this kind of memory often is oppressive, the long time easily produces the negative effect, thus blurs the memory. But the stable picture is not easy to cause the special attention, but if has the good interface guidance and the content, may produce the benign memory, lasts and firmly. According to a rough statistic, 1/3 of the 100 banner are static. It seems that we are more optimistic about the banner of the dynamic.
(2) Banner "Weight" to light! Take 468x60 banner For example, preferably 15K or so, do not exceed 22K. and 88x31 banner preferably around 5K, do not exceed 7K.
4) Design essentials:
(1) Banner text can not be too much, with one or two words to express it.
(2) Advertising language to be catchy.
(3) Graphics need not be too complicated, the text as far as possible use bold and other stout fonts, otherwise it is easy to be visually overwhelmed by other content of the Web page.
(4) Figure as far as possible to choose a few colors, can explain the problem of things.
(5) If you choose an object with a very complex color, consider whether there will be an obvious color stain in the case of a low color number.
(6) Try not to use rainbow color, halo edge and other complex effects graphics, this will greatly increase the number of colors occupied by graphics, increase volume.
4. button
Web design is a new industry, there is no long history and norms of textbooks, the definition of the button has long been not very clear. What kind of button is it? In figure 5, where the circle is recorded: "User login", "login button" "More Button", "Stock recommendation" and so on similar objects, usually collectively referred to as buttons. The existence of navigation in a sense is also a button, but its function is very special. If you often do Web pages, you will feel the requirements of the button design has become more and more high.
Button Design points:
1) Design button to the overall coordination of the page, not too eye-catching.
2) Some pages are monotonous and rely on fancy buttons to mention them.
3 selection of the font, selected illustrations, or illustrations and font collocation, should consider the handwriting clear, simple color, not more than four kinds.
4) A very long button may be the boundary of the frame, as far as possible to be slender, otherwise the page will be bloated.
5. Pictures
In order to beautify the page, the picture is any one page to use, but to consider the speed, suggest that we can not do without, the use of the picture should be reasonable.
The main points of the use of pictures:
1) The body of the graphic is best seen clearly.
2) The meaning of the graphic is best simple and straightforward.
3) The text contained in the picture should be clearly and easily recognizable.
4) Background and the main lightness contrast ratio should be between 3:1 and 5:1 appropriate.
5) The background of the Tint series contributes to overall harmony.
6) light-colored material background is the best, can be separated from the theme of the light-colored logo or text background can also.
6. Text
The text is also designed. Here are a few key points for you to design:
1) The length of each line of text is best 20 to 30 Chinese characters (40 to 60 English letters).
2) line spacing and kerning are defined by the software. Design-time attention to paragraph and paragraph between the blank line and the first line of indentation to assist reading.
3) title to H1 to H3 font size is good, the text font size=3 to level 4 is preferred.
4) with the layout of the best within three kinds of font.
5) The color of the text is preferably within three species.
6) The text should be different from the background in color.
7) Arranges the text to the left and maintains the appropriate distance from the left edge. You can use a table to fill in the text to achieve this effect.
8) the words in the table or list use the same font size to facilitate identification. These are for the user Service design, very important Oh!
Second, the overall planning
1. There are similarities, there is unity, there are details, there are levels.
2. To prevent deviations in the design and implementation process, do not set the number of specific information to be put to death.
3. The design of various parts, to match the overall style, exaggerated a little like VI.
4. Not only the design on the page to be unified, but also the Web site at all levels of the page should be unified.
5. The page should be "breathable", that is, the information should not be too concentrated so that the text is too tightly organized.
6. Don't have too much distracting points. Dynamic flicker should be moderate.
7. The white part of the page, to be designed according to the principle of plane design, please note that the column-type structure should not be left white.
8. Also take into account the upper part of the browser occupied screen space, to prevent the image truncation and other causes of visual effects are not good.
9. Home leave white layout Part I have prepared an example diagram for you ( Figure 6) for your reference.
Third, functional ease of use
Any website should put the problem in the first place. But please note the following points:
1. The navigation bar should be first tuned in so that the regulars can quickly reach the desired information space.
2. The length of the page should be short so that the user can move quickly in the information space.
3. Navigation design direction to be consistent. The level buttons that support navigation should be from top to bottom or from left to right, but not both, and don't mix directions.
Four, emotional expression of atmosphere
The atmosphere will naturally inspire an emotion, whether it comes from pictures, colors, headlines or dynamic advertising, as long as it comes from the page, itself has an expression of ideas. Take a stark example: how do you feel about browsing the horror site and browsing the Christmas celebrations page? This is personality.
V. Recommended SITES
1. Navigation
http://www.blashig.com/is a very good flash navigation.
http://www.mtvhome.de/German MTV site, the navigation is very elegant.
http://www.mtve.com/is worth learning drop-down menu navigation, into any page you will see that flash, really beautiful.
http://www.alistapart.com/index.html right navigation is not uncommon.
http://www.giantrobot.com/index2.html simple navigation, also very comfortable.
Introduction Two collection banner site, you can learn about other people's ideas, improve themselves.
http://www.homepagecn.com/fbl_brjx/
http://www.v-4ever.com/8dstudio/base.htm
2. button
http://www.apple.com/Apple button, classic and famous.
http://www.mtvchinese.com/Taiwan MTV.
http://www.mtvjapan.com/shows/index.html Japan MTV, I think it's a really good button. Concise, special.
3. Picture Application
http://www.mayto.com/
http://www.photoshopclub.com/
4. Home page of Leaving White
http://www.fathomcapital.com/default1.htm
http://www.litewerx.dk/
5. White in the page
http://www.mtvasia.com/music/atoz/index.html It is still the right navigation, the picture is also very good use.
6. Emotional contrast Good site
http://www.celine.com/fashion site, a great flash.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
