Logo size standard: 88*3 1 general specification; 120*60 general size specifications; 120*90 big logo.
Conditions for a good logo: conforming to international standards, exquisite and unique, compatible with website style, and the website type can be removed.
Navigation bar is an auxiliary tool for indexing website content and accessing required content quickly. The number of projects at the same level should be 3~7.
Banner is a web page column, which can combine pictures, words and animations. The main function is to display website advertisements.
Content column is the main body of web content, which consists of one or more sub-columns and contains all the information and services provided by the website. Content can be text, images or a combination of both.
Copyright, legal basis and various tips can be explained at the end of the edition. The writing of copyright should conform to the legal basis of the host country and follow the general writing habits.
In addition, a navigation bar can be provided at the end of the page to provide a navigation method for users who scroll to the end of the page.
Successful web page layout design helps to attract users' attention to the web page and enhance their understanding of the content. Therefore, in order to make the web page attractive and highlight the theme appeal, we must grasp and use the spatial level, master-slave relationship, visual order and logical order of the layout.
Traditional media provide information in a linear way, that is, according to the personal feelings of information providers to spread. In the network environment, users are no longer passive recipients, but active participants to participate in information processing and publishing.
The interactive and multi-dimensional application of web media and the comprehensive application of various media are the perfect embodiment of web page layout design. Real-time interactivity is the reason why the web has become a hot spot, and it is also a problem that needs to be considered in layout design.
Multidimensional comes from hyperlinks, which is mainly reflected in the design of navigation. Using hyperlinks, the composition structure of web pages will be more abundant. Users can switch freely, breaking the traditional linear receiving mode. However, it should be noted that the relationship between pages should not be too complicated, which will bring a burden to users.
The multimedia audio-visual elements used in web pages mainly include words, images, sounds and videos. These elements can satisfy and enrich users' various sensory needs.
The decoration of web design should be concise, and the function and decoration should be effectively combined. Complex decoration will affect the loading speed and click-through rate.
Web design should follow the color rules of harmony, balance and emphasis. When people's color experience echoes the external color stimulation, it will trigger strong emotions psychologically.
1. Page Title Design
Good title design can be pleasing to the eye and form the overall style of the web page. The column where the title is located is generally at the top of the page, running through the whole page from left to right. The title background can use dynamic or static pictures, which is mainly determined by the interactive characteristics of web pages.
2. Text arrangement
Generally, the text size suitable for displaying the body of a web page is about 12 points. But in many comprehensive websites, the font size is usually 9 o'clock because there are many contents arranged on one page.
In the same page, there are few types of fonts, elegant layout and a sense of stability; There are many kinds of fonts, so the layout is active and colorful. The key is how to master this proportional relationship according to the content of the page. From the perspective of strengthening platform independence, it is best to use the default font for text. If you must use a special font, you can make the text into a picture.
Usually, the ratio of font size to line spacing should be: font size is 8 points, and line spacing is 10, which is 8: 10. But for some special pages, the widening or tightening of word spacing and line spacing can better reflect the connotation of the theme. Therefore, word spacing and line spacing are not absolute, depending on the actual situation.
There are three common forms of emphasis words: the first is the emphasis at the beginning of the line, also known as the falling form, which has the functions of attracting attention, decorating and activating the layout; Second, quoting emphasizes the general idea of a paragraph, a chapter or the whole text, so it needs to be emphasized in a special position; The third is the emphasis on single words. Taking a single word as the focus of the page, you can enhance the visual effect of words by bolding and underlining.
3. The combination of graphics and text
The layout design of web pages is not suitable for people to read only words for a long time, so it is more appropriate to combine graphics and text in the layout design of web pages.
There are two main forms of graphic combination: 1. Text is in the form of pictures, graphics are the main body of the web page, and text is the auxiliary existence. 2. In the form of matching words with pictures and texts, we should grasp the relationship between pictures and texts and flexibly match them according to different types of websites.
4. The rhythm of the pages
The rhythm of the page needs to be integrated according to the design style and audience emotion. A music website gives people a relaxed and pleasant feeling; A news website gives people the feeling that it is fast-paced; And a military website gives people a sense of seriousness. So this requires designers to choose design styles according to the content.
If web page design is classified only from the composition of web page layout, there are ten main types: skeleton type, full page type, split type, central axis type, curve type, inclined type, symmetrical type, focus type, triangle type and free type.
1. Skeleton: It is a standard and rational design form, similar to the layout of newspapers and periodicals. Common bones are vertical and horizontal columns, double columns, three columns and four columns. Generally, vertical columns are the majority, giving people a harmonious and rational aesthetic feeling. The combination of several column methods will make the web page both organized and flexible.
2. Full page: Fill the whole page with images. The page mainly takes pictures as the appeal point, and a small amount of text is embedded in the pictures, so the visual communication effect is intuitive and strong. More common in web design that emphasizes artistry or individuality. The fly in the ointment is that there are certain requirements for network broadband.
3. Split: Divide the whole page into two parts: up and down or left and right, and arrange pictures and copywriting respectively. Make the part in sharp contrast: the part with the picture is emotional and energetic, and the part with the copy is rational and calm.
4. Axis type: arrange pictures or text horizontally or vertically along the visual axis of the page. The horizontally arranged pages give people a sense of stability, calmness and implication; The vertically arranged pages give people a comfortable feeling.
5. Curved type: arranging pictures or words in a curved shape on the page can produce a sense of rhythm and rhythm.
6. Tilt style: The theme image or multiple pictures and words of the page are arranged obliquely, thus making the page dynamic and eye-catching.
7. Symmetry: The page layout gives people a sense of stability, seriousness, solemnity and reasonableness. It can be divided into absolute symmetry, relative symmetry and quadrilateral. Generally, the method of relative symmetry is adopted to avoid rigid layout. The method of four-corner symmetry is to arrange the corresponding visual elements in the four corners of the page, which can also make the page feel stable.
8. Focus type: By inducing the line of sight, the page has a strong visual effect. There are several common ways: first, put a picture or text with strong contrast in the visual center of the page; Instead, visually guide the viewer's line of sight to gather at the center of the page to form a centripetal layout; Third, visual elements guide the viewer's line of sight to radiate outward, forming a centrifugal web page layout.
9. Triangular layout: The visual elements of a webpage are arranged in a triangle. The regular triangle is the most stable, and the inverted triangle produces motion. The side triangle forms a balanced layout, which is both stable and dynamic.
1. Lack of main color
You can often see such websites on web pages, and many elements make people see things in a blur, giving people a complicated and chaotic visual effect, which makes visitors unable to clearly identify the key content.
This is a foreign company engaged in the automobile industry, so a red sports car with the same color as the webpage is selected at the top of the page, which is a bright spot on the webpage. Different shades of gray divide the whole page. The layout of the whole web page is clear, and the colors are simple but not rigid, which embodies the characteristics of industrial products.
This is the website of Matsushita Electric Manufacturing Company. Metal ash is the main color, which is consistent with the main body of household appliances. This page is divided into two parts. The upper part shows the company's main products, and the lower part is mainly subdirectories, including news, other products and advertisements.
2. Low text visibility
The colors or pictures on the web page are usually combined into the background color of the text or the color of the text itself, which leads to the color contrast problem of the text. For the viewer, the most important thing is the text, therefore, the use of screen color must pay attention to the recognition of the text, that is, the visibility of the text.
In the background of high brightness, characters with low brightness are easy to recognize. If the background is close to the person's name, it is easy to have problems that are difficult to identify. For example, in the case of overlapping pictures and texts on web pages, the text can be white or anti-white; Or use the same color system as the background with different saturation.
3. Increase the visual burden
Try to minimize the use of colors with high visual fatigue in web page color matching. Generally speaking, colors with high brightness and purity have high stimulation intensity and high fatigue. In achromatic system, white has the highest brightness and black has the lowest brightness. Of all the colors, the brightest is yellow and the darkest is purple.
Using too bright color as background looks dazzling, and designers should try to reduce the use of high brightness background. On the contrary, using a small amount of bright colors as embellishment will greatly stimulate the browser's desire to explore.
1. enlightenment
Web design should take into account people's psychological characteristics while following the artistic laws. Reasonable color matching will give people a sense of harmony and pleasure, so we should avoid using a single color with high purity and strong irritation, otherwise it will easily cause visual fatigue.
This is a casual game website, which connects each group of connection points and draws a complete pattern. The combination of green and yellow makes the player look comfortable, and with a simple button, the webpage looks more user-friendly.
Art comes from life and is higher than life. Usually, there is no need to repeat common things in life on the web page. People's feelings are fond of the new and loathe the old, and they are always biased towards something novel. Therefore, a novel idea or infectious color and plane composition will attract visitors' interest more.
This is an Argentine cartoonist's personal website, which is very creative in life. The author has a novel imagination and excellent writing and expression skills. The combination of reality and reality records the life of cartoonists, which is vivid and interesting.
2. Conform to the website style and theme
Different types of websites should use different colors and visual elements to achieve the unity of content and form, which is more in line with people's cognitive habits.
For example, jewelry websites should use colors that look expensive and luxurious, such as black and gold. It always reminds people of wealth and gold. When you meet female websites such as shopping, you can use pink to show the femininity of female websites.
3. Unique personality
Every website has its own unique personality and temperament. Without personality, it is difficult for visitors to remember this website, and the stereotyped design can only make visitors feel bored. Personalization of web pages can be well realized through tone and element composition.
French DJECO Toy Design Studio is mainly engaged in the design of children's toys. The scene design of DJECO design studio website is warm and exquisite, and the strong children's illustration style is closely related to the design orientation of children's toys. The website style is lively and lovely, and the highlight of the website is the unique animation element design, which plays a very good role in embellishing the whole station.