1、 Preface
Web design, in essence, is the graphic interface design of the website. It plans the website functions according to the information (including products, services, ideas, culture) that the enterprise hopes to convey to the visitors; Exquisite website design, as a kind of external publicity materials for enterprises, is essential to enhance the Internet brand image of enterprises.
2、 In our daily life, we are more exposed to the design of offset moving end. Why? What is the difference between the web end and the mobile end?
(1) Because in our daily life, handheld devices are more convenient, and the proportion of users of mobile devices is much higher than that of web users, the design of mobile devices is strongly function oriented, including practical functions. On the web side, brand introduction is more preferred to guide users to the mobile side.
(2) There are many functions on the mobile side, which cannot be copied to the web side; If you want to copy the functions of the mobile terminal to the web terminal, the cost will be very high. At the same time, many functions that need authorization cannot get data on the web terminal (such as microphones, photo albums, etc.), and the mobile terminal needs to scan the code to obtain permission, so the web terminal cannot advance.
3、 Classification of common web pages;
1: Web pages are divided into TO B and TO C;
The TO C webpage includes: portal website (Netease, Tencent, etc.), enterprise website (Apple, Lenovo, etc.), product website, e-commerce website (Taobao, JD, etc.), special page, video website and mobile terminal H5;
The TO B website includes: website background, ERP system (enterprise management system), Saas (customized system for service companies) and enterprise OA (office automation system);
Page Type
2: What are the characteristics of TO B and TO C web page types?
The function purpose of TO C's webpage is to establish brand image, introduce and publicize; The web page on the C side emphasizes the primary and secondary of vision, because there are many functional modules, it will lead the visual focus to the main functions;
The function purpose of TO B's webpage: data analysis, management of website foreground information; The B-end web page emphasizes the ease of interaction to improve the efficiency of users.
4、 Layout and specification of web pages; (Take the enterprise official website as an example)
1: What is the purpose of the enterprise website?
The enterprise official website is mainly used to distribute traffic, build trust and increase awareness;
2: What is the infrastructure of the enterprise official website?
The official website of the enterprise generally includes: navigation bar, banner, feature introduction, professional case, footer and other sections.
Navigation bar size: 50-100px; Banner size: 350-600px; The function of feature introduction is to let users build trust. Professional cases are used to increase users' awareness. The footer section is mainly used to place secondary information such as copyright notice, contact information, friendship link filing number, etc.
3: What should be paid attention to in web page layout?
When designing web pages, you can set grids in the sketch to simplify the layout and spacing; The total amount of the general grid is between 12 and 24 columns; The specific situation shall be flexibly applied in work.
5、 Web page specification; (Take the enterprise official website as an example)
1: The size and safe sight distance of the webpage;
Mainstream design software implies mainstream dimensions; Common mainstream design dimensions of web pages: 1366x768px, 1920x1080px and 1440x1024px; The specific size design used in the work needs to be determined according to the user group.
In general web design, there needs to be a main visual security area. The width of the main visual security area is 1200px, and the navigation and pop-up windows beside the web page are within 1440px;
It should be noted that when designing web pages, the height of the screen should be reduced by the height of the browser: 180px;
2: Web page hierarchy;
(1) The layout level of the web page, from top to bottom, from strong to weak;
(2) The text hierarchy of the web page is split according to the one-dimensional analysis method of the mobile terminal;
(3) Common fonts in web pages?
Commonly used in Windows system: Microsoft Yahei, Song typeface, Arial; MAC computers are commonly used: Ping Fang, Song Ti and Jelvetical; Special font packages can be added according to the style of the web page. The font level in the web page is ≥ 2, and the minimum font size is 12px. The spacing of text is generally 1.5-2 times of the font.
(4) What should be paid attention to in web page layout?
Display the intimacy of the same section of the web page through color and spacing comparison; Intimacy can guide the flow of data to different modules and reduce the cost of understanding.
(5) What is the proportion of commonly used pictures in the webpage?
Commonly used picture scales in web pages: 16:9, 1:1 and 3:4; Images can be compressed to reduce the resource consumption of the server. The commonly used image compression website (Tinypng).
3: Color matching and status prompt of web pages;
(1) Color matching style of web page;
The color matching in web pages is relatively restrained compared with mobile terminals; Color matching style needs to be set according to emotional color and business attributes;
For example, blue represents safety, technology and reliability, and is generally used for tool big data platforms; Orange yellow represents enthusiasm, vitality and happiness, and is generally used for shopping platforms (such as Taobao);
(2) Color matching methods in web pages;
a: A pile of color values: difficult to remember, high communication costs;
b: A color value to improve efficiency by changing the opacity;
(3) Status prompt in the webpage;
Red generally indicates submission failure and green indicates success; This is combined with the traffic light principle in life. The red light stops (does not pass), the green light goes (can pass), and yellow can serve as a warning.
