Before making a website, the overall design of the website page should be carried out first. A website is composed of several web pages, which are the interface for users to visit the website. Therefore, website design in the general sense refers to the design of each page in the website. In web design, the layout of the web page is the first thing mentioned. Whether the layout is reasonable and beautiful will directly affect the user's reading experience and access time.
Today, with the rapid development of the Internet, the network has become a part of people's life and an important way for people to obtain information resources. The presentation of information can not be separated from the web page, which is an important interface. The main role of the web page is to organize the information and resources needed by users by certain means and present them to users through the network.
With the improvement of network technology and its bandwidth, the elements of web pages have also undergone great changes. At the end of the 1990s, the main elements of web pages were a large number of texts, tables, hyperlinks and a small number of static images and gif dynamic images. In addition to the above elements, a large number of images, animations, videos, music, banner ads and various dynamic effects are added to the current web pages. [1]
With the rapid development of the Internet, websites have sprung up rapidly. As the main support of the Internet, they have become very important because people use the Internet frequently. Because enterprises need to present products, services, ideas, culture, or provide some functional services to the public through websites. Therefore, web design must first clarify the purpose of the design site and the needs of users, so as to make a practical design.
Professional web design needs to go through the following stages:
- one
It is necessary to conduct a comprehensive analysis according to the needs of consumers, market conditions, and the situation of the enterprise itself, so as to establish a marketing model.
- two
Carry out function planning with business objectives as the center, and make column structure diagram.
- three
To meet the user experience design, use axure rp Or similar software to plan the page and produce interactive use cases. - four
With the goal of exquisite page design PS 、 AI And other software to adjust and use more reasonable colors, fonts, pictures and styles to beautify the page design. - five
Adjust the page design according to user feedback to achieve the best effect.
Clear theme
Web Design Web sites should have different forms according to the different objects (institutions or people) they serve. Some sites only provide simple text information; Some use multimedia expression, providing gorgeous images, flashing lights, complex page layout, and even downloading sound and video clips. A good Web site combines graphic representation with effective organization and communication.
In order to achieve a distinctive theme and clear points, color matching and pictures should be around the intended theme; Mobilize all means to fully express the personality and interest of the website, and create the characteristics of the website.
Make full use of existing information, such as customer manuals, public relations documents, technical manuals and databases.
Design idea
- one
Concise and practical: This is very important. In a special network environment, it is best to transmit the information the user wants to get to him in the most efficient way, so all redundant things should be removed.
- two
Easy to use: consistent with the first one, it meets the user's requirements. The more suitable the web page is, the more functional it will be
- three
Good integrity: a website emphasizes a whole, and only the design around a unified goal is successful.
- four
Outstanding website image: a website that meets the beauty standard can maximize the image of the website. The color of the page is coordinated, and the layout meets the requirements of formal beauty: the layout is orderly, making full use of the beautiful form, making the page full of appreciation and improving the grade. Of course, everyone seeks to enjoy both refined and popular tastes.
- five
Strong interaction: Give full play to the advantages of the network. Every user should participate in it. Only such a design can be considered a successful design. Such web pages are truly beautiful designs.
Layout design
As a visual language, web design pays special attention to layout And layout, although the design of the home page is not the same as graphic design, they have many similarities. The layout design expresses harmony and beauty through the spatial combination of words and graphics.
The layout design of multi page site pages requires to reflect the organic relationship between pages, especially the relationship between order and content between pages and within pages. In order to achieve the best visual performance, the rationality of the overall layout is repeatedly discussed, so that visitors can have a smooth visual experience.
Colour effect
Color is one of the elements of artistic expression. In web design, the designer combines and matches different colors to form a beautiful page according to the principles of harmony, balance and focus. According to the influence of color on people's psychology, use it reasonably. If the enterprise has CIS（ Corporate Identity System ）, which shall be carried out according to VI Color application 。 Form and content
In order to organize rich meanings and diverse forms into a unified page structure, the formal language must conform to the content of the page and reflect the rich meaning of the content.
Flexible use of contrast and reconciliation Symmetry and balance By means of rhythm, rhyme and blank space, the overall balance state is established through the interrelationship among space, words and figures to create a harmonious aesthetic feeling. Composition of three-dimensional space
The three-dimensional space on the network is an imaginary space, and this spatial relationship needs dynamic and static changes Proportional relationship etc. Spatial factors Show it. In a page, the visual effect of the superposition of pictures and text or the change of page position is different. The spatial hierarchy formed by the overlapping of pictures and words is not suitable for web design. According to the characteristics of existing browsers, web design is suitable for more standardized and concise pages, although this overlapping arrangement can produce strong rhythmic spatial hierarchy with strong visual effect.
What is common on the web page is the spatial relationship generated by the top, bottom, left, right and middle positions of the page, as well as the spatial hierarchy generated by the dense positional relationship. These two positional relationships make the spatial hierarchy generated flexible, and also make people feel relaxed or urgent.
virtual reality
People are no longer satisfied with HTML （ Standard Universal Markup Language The temptation of three-dimensional world began to attract more people. Virtual reality wanted to show its charming style on the Web, so VRML language appeared. VRML Is an object-oriented language, which is similar to the Web Hyperlink The HTML language used is also a text-based language, and can run on multiple platforms, but it can serve more virtual reality environments. Multi-Media
One of the advantages of network resources is multimedia function. To attract the attention of visitors, the content of the web page can be used three-dimensional animation 、 FLASH Wait to show. However, due to the limitation of network broadband, the transmission speed of the client has to be considered when using multimedia to represent the content of the web page. Easy to use
If people can't understand or hard to understand the website, then how to understand the enterprise information and service projects? Use some striking titles or words to highlight products and services. And even if they have the best products, if customers can't see clearly what they are introducing or how they can benefit from the website, they will not like the website, which is a failure for web design.
Clear guidance
Navigation in web design hyperlink Or picture links, so that people can move forward or backward freely on the website without having to use the browser to move forward or backward. Use ALT on all pictures identifier Indicate the name or explanation of the picture, so that those who do not want to automatically load the picture can understand the meaning of the picture. Fast download time
Many visitors will not enter the website that needs to wait for 5 minutes to download. The 30 second waiting time on the Internet is the same as the usual 10 minute waiting time. Therefore, it is recommended to avoid using too many pictures and too large pictures in web page design. The capacity of the main page shall ensure that the waiting time of ordinary visitors does not exceed 10 seconds.
Non graphic content
Use dynamics appropriately when necessary“ Gif ”Pictures, in order to reduce the animation capacity, ingeniously designed Java Animation can use very small capacity to make graphics or text produce dynamic effects. However, since most people who browse the Internet are looking for information, it is still recommended to make sure that the website will provide them with valuable content rather than excessive decoration. Feedback and communication
Making customers clear about the products or services they can provide and making it very convenient for them to order are important factors for success. If customers have a desire to buy products or services on the website, can they achieve it as soon as possible? Is it online or offline?
Therefore, if it is a product or service introduction website, it should have message, telephone, online consultation and other functions or information presentation.
On the enterprise's website, we should carefully respond to users' e-mail and traditional contact methods such as letters, telephone inquiries and faxes, and answer all questions. It is better to classify the users' intentions, such as general understanding before sales, after-sales service, etc., which should be handled by the relevant departments, so that website visitors can feel the real existence of the enterprise and thus generate a sense of trust.
Test improvement
In fact, testing is to simulate the process of users asking about the website, so as to find problems and improve the web design. It should be arranged with the user Website test 。 Content update
After the establishment of the enterprise website, it is necessary to constantly update the web content. The constant updating of site information will help visitors understand the development trends and online positions of enterprises, and will also help enterprises establish a good image.
Don't promise things that can't be realized. Don't ask users to input information or list a lot of phone numbers that you can't reply to in time until you are really capable of handling replies. If visitors are required to voluntarily provide their personal information, they should publish and earnestly fulfill their personal privacy commitment.
In web design, there is always a tendency to observe or track the trend of web designers' strengthening with specific technologies. There are supporters dedicated to proprietary and open source and free technologies. However, in recent years, free and open source technologies have been increased, including monitoring and approval, supervision and implementation by W3C and WHATWG.
The trend can be found not only in the use of technology in the fashion field, such as website and matching logo are clear preferences. The famous WordArt Web 2.0 has played an important role in helping.
Web design is an industry that constantly updates and brings forth new ideas. It requires designers to keep abreast of the latest design trends, so as to ensure that they are not eliminated by this industry. In 2013, responsive design, flat design, infinite scrolling, single page, fixed headers, bold colors, fewer buttons and larger page width were popular in web design.
1. The page content should be novel
The selection of web content should be unconventional, and the focus should be on a "new" word. This principle requires that when designing website content, one should not copy other people's content, but create a website based on his own actual situation. From a broad perspective, many personal homepages on the Internet are simply "grocery stores", with all kinds of content and the same theme. Everyone is "software download", and everyone has "network navigation". From beginning to end, there is no sense of "freshness". When designing web pages, we should focus on selecting materials.
2. Timely update the webpage
Because web page production is temporary, and maintenance and update work is done every day. If you want to delete the invalid connection on the web page in time, you should delete it immediately. For example, if the user accidentally clicks a connection on the page, and after waiting hard, the result is that they can't access it, then they will be disappointed in the web page and may never visit it again. If you can't update the homepage in time, you'd better publish information on the homepage and tell the visiting friends that you have to leave for a period of time due to special circumstances and can't update the homepage in time. I hope you will forgive me, so that you can give people a sense of responsibility to others and win the trust of netizens.
3. Pay attention to visual effects
When designing a Web page, be sure to observe it separately with appropriate resolution. Many browsers use a resolution of 1024 * 768. Although some Web pages look attractive at a high resolution of 1280 * 1024, they may be eclipsed in the 1024 * 768 mode. Make a little effort to design a webpage that can be displayed normally under different resolutions.
4. Keep an eye on website upgrades
Keep an eye on the operation of the website. Hosts with good performance may run slowly as the number of visitors increases. However, if you don't want to lose visitors, you must carefully plan the upgrade plan.
5. Make good use of tables for layout
Don't list the content of a website in one, two, three or four places like a report. Pay attention to using tables to highlight the hierarchical and spatial nature of the website content, so that people can see at a glance that the website is focused and structured clearly.
To successfully design a website, you must understand HTML (an application under the standard general markup language). Most website designers suggest that novices should look for answers from books about HTML and use Notepad to create web pages. Because using HTML to design a website can control the whole process of design. However, if you are just a novice in website design, you should look for a software package that allows you to modify HTML. 7. Make a website introduction
A simple and clear website introduction can not only let others have an understanding of what the website can provide, arouse resonance or express sincerity, which is often the most impressive to readers, but also enable visitors to quickly find what they want. However, many designers have not done so. effective Navigation bar And search tools make it easy for people to find useful information, which is very important for visitors. Tell your visitors that they are providing the information they want. 8. Consider browser compatibility
However, browser users such as Netscape and Opera still need to be considered. Design style considerations, such as color matching, graphics, lines, etc. To always be considerate of users, you must test the website under at least several different types of browsers to see how compatible it is.
9. Web page style should be unified
All images and words on the web page, including background colors, distinguishing lines, fonts, titles, footnotes, etc., should be unified in style throughout the site. In this way, the reader looks comfortable and smooth, and will leave a "very professional" impression.
10. Make the website interactive
One Static Web Page It always gives people a stiff feeling and lacks a kind of vitality and vitality. It is better to provide some tools for answering questions and other designs with interactive performance on the website, so that visitors can get interactive information from the website, so that visitors have a sense of freshness and achievement in participating in network construction. [2] 
Web Design 1. "National" font
It can also be called the "same" font, which is the type preferred by some large websites. That is, the top is the website title and banner banner, followed by the main content of the website. There are two pieces of content on the left and right, with the main part in the middle, listed together with the left and right, and the bottom is some basic information, contact information, copyright notice, etc. of the website. This kind of structure is one of the most commonly seen on the Internet.
2. Corner type
This structure is different from the previous one in form, but it is very similar. The top is the title and advertising banner, the next is a narrow column of links on the left, the right is a wide text, and the following is also some websites Auxiliary information 。 In this type, a very common type is that the top is the title and advertisement, and the left is the navigation link. 3. Title Body
This type means that the top is the title or something similar, and the bottom is the body, such as some article pages or registration pages.
4. Cover type
This type basically comes out of the home page of some websites, most of which are exquisite graphic designs combined with some small animations, and put a few simple links or just a "enter" link or even make a link directly on the picture of the home page without any hint. This type is mostly enterprise websites and personal home pages. If handled well, it will bring people a pleasant feeling.
5. "T" structure layout
The so-called "T" structure layout refers to the combination of the top and left sides of the page, the top of the page is a horizontal website logo and advertising bar, the bottom left is the main menu, and the right side displays content. This is the most widely used layout method in web design. In the actual design, the form of "T" structure layout can also be changed, such as the left and right two column layout, half of which is the text, and the other half is the image and navigation. Or the text is arranged in two columns, through Background color Distinguish and place pictures and words respectively. This layout has its inherent advantages. Because people's attention is mainly in the lower right corner, most of the letters that enterprises want to publish to users can be obtained by users with the greatest possibility, and it is very convenient. Secondly, the page structure is clear, the primary and secondary are clear, and it is easy to use. The disadvantage is that the rules are rigid. If you don't pay attention to the details and colors, it is easy to make people "look boring".
6. "Mouth" layout
This is a figurative expression, which means that there is an advertising bar at the top and bottom of the page. The left side is the main menu, the right side is the friendship link, and the middle is the main content.
The advantages of this layout are rich pages, rich content, and large amount of information. It is a common layout for comprehensive websites. In particular, a row of small icons at the top center plays an active role. The disadvantage is that the page is crowded and not flexible enough. There are also ways to leave the four sides free and only use the window design in the middle. For example, NetEase Wallpaper Station uses multi frame format, and only the central part of the page can scroll. The interface is similar to the game interface. Multidimensional game entertainment websites use this format.
7. "Three" layout
This layout is mostly used for foreign websites, but not for domestic websites. It is characterized by two horizontal color blocks on the page, dividing the whole page into four parts, and most of the color blocks contain advertising strips.
8. Symmetrical contrast layout
As the name suggests, it refers to a symmetrical layout, half dark and half light, which is generally used for design websites. Its advantage is strong visual impact, but its disadvantage is that it is difficult to combine the two parts organically.
9. POP layout
POP comes from the advertising term, which means that the page layout is like a propaganda poster, with a beautiful picture as the design center of the page. Commonly used in fashion websites, the advantages are obvious: beautiful and attractive, but the disadvantage is slow. [1]
1. Didn't follow the basic principles of web design
In the mobile terminal web page design, we should actively reflect the principle of simplification, and try to highlight and simplify the key points in the page design, so that the design can better meet the personalized requirements of users, improve the convenience of web browsing and the sense of picture, and bring different visual experiences to users. However, in the current process of mobile terminal web page design, the relevant personnel did not design in strict accordance with the standard process, the design focus was not prominent, not simple enough, and the size of the mobile phone screen was too large, which caused many inconvenience to users, the web page was not convenient to browse, and the corresponding content of the web page was not concise enough.
2. The design of automatic pop-up window is not reasonable enough
In the process of browsing the web page, the web page automatically pops up, and the user waits too long, which leads to excessive traffic consumption, which reduces user satisfaction and is not conducive to the better development of mobile terminal web page design.
3. Inadequate mastery of target terminal screen features
In the process of mobile terminal web page design, relevant personnel must actively understand the screen characteristics of the target terminal. However, in actual work, the designers did not do this, and did not know enough about the screen characteristics of the target terminal. The page rendering effect was affected by the browser's pixel width. Most users often use vertical mobile phones, while tablet computers are used horizontally. Therefore, the rendering effect of user pages has been affected to some extent due to the fact that this is not taken into account in the actual design. The division of resolution range is not reasonable enough, and the corresponding screen resolution will be different if different mobile terminals are not taken into account. [3]
