How to Design webpages

In terms of web page design, many people seem to be stuck at the height of web page creation. I think that as long as the web page creation software is used, we can do a good job in web page design.

In fact, web design is a complex process that combines perceptual thinking and rational analysis. Its direction depends on the design task. Its implementation depends on the production of web pages. In the so-called "Kung Fu outside poetry", the most important thing in web design is not in the application of software, but in our understanding of web design and the level of design and production, it lies in our own aesthetic and our grasp of the page.

First, we need to figure out the webpage design task.

　　I. design tasks

Design is an aesthetic activity. Successful design works are generally artistic. However, art is only a means of design, not a task of design. The task of design is to realize the intent of the designer, not to create beauty.

The task of Web Design refers to the themes and functions to be implemented by the designers. The nature of the site varies with the design tasks. In terms of form, websites can be divided into the following three types.

The first category is information websites, such as Sina, Netease, and Sohu. This type of site will provide visitors with a large amount of information and a large amount of traffic. Therefore, you must pay attention to issues such as page segmentation, reasonable structure, page optimization, and interface affinity.

The second category is websites that combine information and images, such as large companies and domestic universities. Such websites have high design requirements. They must ensure the above requirements of information websites and highlight the image of enterprises and organizations. However, in terms of the status quo, such websites are suspected of being shoddy.

The third category is image websites, such as small and medium enterprises. Such websites are generally small, some have several pages, and the functions to be implemented are relatively simple. The main task of web design is to highlight the corporate image. Such websites have high requirements on the level of designers.

Of course, this is only an overall analysis of the specific situation. Different Sites must be treated differently. Don't forget the most important thing, that is, the customer's requirements. It is also a design task.

After clarifying the design task, the next step is how to complete the task.

　　Ii. Design implementation

The implementation of the design can be divided into two parts. The first part is site planning and sketch drawing, which can be completed on paper. The second part is web page creation, which is completed on the computer.

The first step to design the homepage is to design the layout. We can edit webpages as traditional newspapers, magazines, and even animations, what we need to do is to exhaust images and text in different locations on the page in the most appropriate way.

In addition to a well-configured computer, software is also required. It cannot be simply said that a piece of software is good or bad, as long as it is convenient for the designer to use and can be handy, it can be called good software. Of course, it should be able to meet the requirements of designers. My commonly used software is Macromedia's Dreamweaver, fireworks, Flash, Adobe's Photoshop and imageready. These are all very good software.

What we need to do next is to turn the design blueprint into reality through the use of software, and the final integration is generally completed in Dreamweaver. Although we have made a general outline of the page on the sketch, the inspiration is generally generated during the production process. Design works must be creative. This is the most basic requirement. A non-creative design fails. During the production process, we will encounter many problems, the most sensitive of which is the page color.

　　3. Use of colors

Color is a strange thing. It is beautiful and rich. It can arouse human perception. In general, red is the color of fire, enthusiasm, and unrestrained; also the color of blood, can represent life. Yellow is the highest brightness color, looks gorgeous, noble, Bright. Green is the color of natural vegetation, which means pure nature and growth. It symbolizes peace and safety, such as green food. Purple is a symbol of elegance and has a solemn sense. White can give people a pure sense of purity and innocence, indicating peace and holy.

We know that color is produced by the refraction of light, and red, yellow, and blue are the primary colors. Other colors can be combined with these three colors. In another way, we can use color changes to express the effect of light and shade, which will undoubtedly make our work closer to reality.

Color represents different emotions and has different symbolic meanings. These symbolic meanings are a complex problem in people's ideological exchanges, it varies with age, region, times, ethnicity, class, economic region, working ability, education level, customs, religious belief, living environment, and gender.

A pure color has no practical significance. It works differently with different colors. For example, the combination of green, golden, and pale colors can produce an elegant and comfortable atmosphere. The combination of blue and white reflects a soft, elegant, and romantic atmosphere. The combination of red and yellow and gold can render a festive atmosphere. The combination of gold and corn brings warmth to people. The color scheme varies depending on the design task. Considering the adaptability of the web page, we should try our best to use the secure color of the web page.

However, there are no rules for color use. If you must use a rule to set the color, the effect will only be counterproductive. In terms of experience, we can first determine a subject color that can express the subject, and then use the color approximation and comparison to complete the color scheme of the entire page. The whole page should be visually integrated to achieve a harmonious and pleasing visual effect.

　　Iv. Combination of shapes

In webpage design, we mainly express themes through visual communication. Shape is an important element in visual communication. All elements on the screen can be processed as the basic elements of the screen, such as points, lines, and surfaces. In a successful file, you need to combine and match points, lines, and surfaces to construct the entire page.

Usually we can use a combination of order, proportion, balance, symmetry, continuity, interval, overlap, repetition, crossover, rhythm, rhythm, induction, variation, close-up, reflection, and so on, they all have their own characteristics. In the design, we should select the most suitable performance method based on the actual situation, which is conducive to the performance of the topic.

Through the combination of points, lines, and surfaces, you can highlight the important elements on the page, highlight the design themes, enhance the aesthetic, and let the viewer understand the design themes in the Process of feeling the beauty, to implement the design task.

The clever use of styling not only brings a great aesthetic, but also can better highlight the corporate image, and can organically organize various elements on the web page, it can even guide the viewer's sight.

　　V. Design Principles

There are principles in design. No matter what method is used to combine elements in the screen, there must be five major principles: unity, coherence, segmentation, comparison and harmony.

Uniformity refers to the integrity and consistency of design works. The overall effect of the design work is crucial. Do not isolate the components in the design, which will make the picture show a messy effect.

Coherence refers to the relationship between pages. In the design, the internal links and expressions of each component should be used to echo each other, and the consistency of the whole page design style should be paid attention to achieve visual and psychological coherence, the entire page is designed to be extremely harmonious, just like in one breath.

Splitting refers to dividing a page into several small parts, which are visually different, so that the viewer can see at a glance. When there is a large amount of information, it is important to note that the picture is effectively divided. Splitting is not only a manifestation of the need. In other words, segmentation can also be considered as a classification and Induction of page content.

Comparison is to make the design more angry through contradictions and conflicts. There are many comparison methods, such: multiple and few, Qu and straight, strong and weak, long and short, coarse and fine, sparse and secret, virtual and real, master and times, black and white, dynamic and static, beautiful and ugly, gathering and dispersing. Be cautious when using the comparison. If the comparison is too strong, it will easily damage the aesthetic and affect unification.

Harmony means that the whole page conforms to the beautiful law and is integrated with one another. If a design work is only a random mix of colors, shapes, and lines, the work will not only have a sense of life, but also cannot realize the communication function of visual design. Harmony depends not only on the structure, but also on whether the visual effect of the work can communicate with people's visual feelings and resonate with the soul. This is the key to successful design.

　　Vi. webpage Optimization

In webpage design, webpage optimization is an important part. Its success or failure will affect the page browsing speed and adaptability, and influence the viewer's impression on the website.

In information websites, text is the largest component of pages, so font optimization is particularly important. It is necessary to use a CSS style sheet to specify the text style. Generally, we specify the font as, And the size as 12px. The color depends on the background color, in principle, we recommend that you see and match the entire page in harmony. On a white background, we generally use black, which makes it difficult to produce visual fatigue and ensures that visitors can browse the webpage for a long time.

Images are an important element in Web pages. Image optimization can minimize the size of images while ensuring the quality of browsing, which improves the download speed of webpages exponentially. You can use photoshop6 or fireworks4 to cut images into small pieces for optimization. The output format can be GIF or JPEG, depending on the actual situation. Generally, we optimize small pieces with more complex color changes to JPEG, and the small pieces with only simple color blocks to gif, which is determined by the characteristics of these two formats.

A table is an important element in a page and a primary means of page layout. You can set parameters such as the table width, height, border, background color, and alignment. Most of the time, we set the border of the table to 0 to locate the elements on the page, or use this to determine the relative position of each element on the page. We know that when the browser reads the original HTML code of a webpage, it displays the entire table. If a large table contains multiple sub-tables, the sub-tables must be displayed together after reading the large table. When we visit some sites and wait for a long time without any results, we press the "stop" button to display the page for this reason. Therefore, when designing a page table, we should try to avoid embedding all elements in a table, and try to minimize the number of nested layers. When using Dreamweaver to create a webpage, an empty character "" is automatically added to each TD. If the cell is not filled with other elements, this empty character will be retained. After specifying the width or height of TD, you can delete it in the source code.

The adaptability of web pages is very important. on different systems, at different resolutions, and on different browsers, we will see different results. Therefore, we should make overall considerations during design. Generally, we create a web page under 800*600, and the best browsing effect is also at a resolution of 800*600. In other cases, we only need to ensure the basic consistency without a major problem.

After talking about this, I just want to help people who are doing "Webpage Design". I hope they can focus on the whole page while doing the webpage. It is worthy of the two words "design. By the way, this article only represents my personal opinion and is for reference only.

From: http://www.cnblogs.com/nova/articles/1083286.html