Web design Six steps away

Design | Web page design in the understanding of web design, many people still seem to stay in the height of Web page production. I think that as long as the use of Web page production software, you can do a good job of web design.

In fact, web design is a perceptual thinking and rational analysis of the complex process of integration, its direction depends on the design of the task, its implementation depends on the production of web pages. The so-called "Kung Fu in Poetry", web design, the most important thing is not in software applications, but in our understanding of web design and design production level, lies in our own beauty and the page grasp.

First of all, we need to understand the task of web design.

I. The task of design

Design is a kind of aesthetic activity, successful design works are generally very artistic. But art is only a means of design, not a task of design. The task of design is to realize the intention of the designer, not to create beauty.

The task of web design refers to the theme that the designer should perform and the function to be implemented. The nature of the site is different, the task of the design is also different. From the form, the site can be divided into the following three categories.

The first category is the information site, such as Sina, NetEase, Sohu and other portal sites. This kind of site will provide visitors with a large amount of information, and a large number of visits. Therefore, the need to pay attention to the page segmentation, reasonable structure, page optimization, interface and other issues.

The second category is the combination of information and image of the site, such as some of the larger companies, domestic universities and so on. This type of Web site in the design of higher requirements, both to ensure that the information type of Web site requirements, but also to highlight the image of enterprises, units. However, on the status quo, such sites have been suspected of shoddy.

The third category is the image of the site, such as some small and medium-sized companies or units. This kind of website is generally small, some have several pages, need to realize the function is simpler, the main task of web design is to highlight the corporate image. This kind of website to designer's art level request is higher.

Of course, this is only from the overall point of view, the specific situation to be specific analysis. Different sites have to be treated differently. Don't forget the most important point, that is the customer's request, it also belongs to the design task.

After you've identified the task of the design, the next step is to figure out how to complete the task.

Second, the realization of the design

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 of the Web page production, the process is done on the computer.

The first step in designing the home page is to design the layout. We can look at the Web page as a traditional newspaper and magazine to edit, which has text, images and even animation, we have to do is the most appropriate way to put pictures and text in different locations of the page.

In addition to having a well configured computer, the software is also required. Can not simply say that a software is good or bad, as long as the designers use it to feel convenient and can be handy, it could be called the software. Of course, it should be able to meet the requirements of the designer. The author commonly used software is Dreamweaver, Fireworks, Flash and Adobe Photoshop, ImageReady, these are very good software.

Next we have to do is through the use of software, the design blueprint into reality, the final integration is usually done in the Dreamweaver. Although in the sketch, we have fixed the outline of the page, but the inspiration is generally produced in the production process. Design works must be creative, this is the most basic requirements, no creative design is a failure. In the production process, we will encounter many problems, the most sensitive one is the page color.

Third, the use of color

Color is a strange thing, it is beautiful and rich, it can arouse human mind perception. Generally speaking, red is the color of fire, warm, unrestrained, but also the color of blood, can symbolize life. Yellow is the highest brightness of the color, it is gorgeous, noble, crisp. Green is the color of natural vegetation, meaning pure nature and growth, symbolizing peace and security, such as green food. Purple is a symbol of nobility and a sense of decency. White can give people a sense of purity and innocence, the expression of peace and holiness.

We know that color is the refraction of light, red, yellow, blue is the primary color, and other colors can be reconciled with these three colors. Another way of thinking, we can use color changes to show the effect of light and shade, which will undoubtedly make our works closer to reality.

Colors represent different emotions and have different symbolic meanings. These symbolic meanings are a complicated problem in the communication of people's thoughts, which vary according to the age, region, time, nationality, stratum, economic region, working ability, education level, customs, religious belief, living environment and gender difference.

Pure color does not have practical meaning, and different color collocation, it shows the effect is also different. such as green and golden, pale white collocation, can produce elegant, comfortable atmosphere. Blue and white mix, can reflect supple, elegant, romantic atmosphere. The red and yellow, the gold collocation can render the festive atmosphere. The combination of gold and millet color will bring warmth to people. The color scheme is different when you design tasks differently. In view of the adaptability of the Web page, you should try to use the page security color.

But the use of color is not a certain law, if you must use a law to set, the effect will only backfire. Experience we can first identify a subject color, and then according to specific needs, the application of color approximation and contrast to complete the entire page color scheme. The entire page should be visually a whole, in order to achieve a harmonious, pleasing visual effect.

Four, the combination of modelling

In web design, we mainly express the theme through visual communication. In visual communication, modelling is a very important element. All the elements on the screen can be unified as the basic components of the screen, line, surface to deal with. In a successful work, it is necessary to mix and match the dots, lines and faces to construct the whole page.

Usually we can use the combination of order, proportion, balance, symmetry, continuity, spacing, overlap, repetition, crossover, rhythm, rhyme, induction, mutation, close-up, reflection and so on, they all have their own characteristics. In the design should be based on the specific circumstances, choose the most suitable performance techniques, so conducive to the performance of the topic.

Through the combination of dots, lines and faces, we can highlight the important elements on the page, highlight the theme of design, enhance the aesthetic feeling, and let the viewer comprehend the theme of design in the process of feeling the beauty, so as to realize the task of design.

The ingenious use of modelling can not only bring great beauty, but also can better highlight the corporate image, and can be a variety of elements on the Web page organic organization, it can even guide the viewer's view.

V. Principles of Design

Design is a principle, no matter what method to use the elements in the screen combination, must follow the five major principles: unity, coherence, segmentation, contrast and harmony.

Unification refers to the integrity and consistency of the design works. The overall effect of the design works is vital, in the design of the components should not be isolated scattered, which will make the screen presents a mixed effect of the clutter.

Coherence, is to pay attention to the relationship between pages. The design should use each component in the content the intrinsic contact and the manifestation form mutually echoes, and pay attention to the whole page design style consistency, realizes the visual and the psychological coherence, causes the entire page design each part to be extremely harmonious, like coherent.

segmentation, refers to the page into a number of small pieces, there is a visual difference between the small pieces, so that the viewer can be at a glance. In order to enable the viewer to see clearly when the amount of information is large, it is necessary to notice the effective segmentation of the picture. Segmentation is not only a manifestation of the need. In other words, segmentation can also be seen as a sort of generalization of the content of a page.

Contrast, is through contradictions and conflicts, make the design more rich and angry. A lot of contrast techniques, such as: More and less, song and straight, strong and weak, long and short, coarse and fine, sparse and dense, virtual and real, the Lord and The Times, black and white, moving and static, beauty and ugliness, gather and scatter and so on. In the use of contrast should be prudent, contrast too strong easy to destroy the aesthetic, influence unity.

Harmony, refers to the entire page conforms to the law of beauty, seamless. If a design is just a random mix of color, shape, line, etc., then the work will not only have no "sense of life", but also can not achieve the communication function of visual design. Harmony not only depends on the structure form, but also depends on whether the visual effect formed by the works can form a kind of communication with the visual feeling of the person, and produce the resonance of the heart. This is the key to the success of the design.

Vi. Optimization of Web pages

In web design, the optimization of Web pages is a more important link. Its success will affect the page's browsing speed and the adaptability of the page, affect the viewer's impression of the site.

In the Information class website, the text is the biggest constituent element in the page, therefore the font optimization appears especially important. It is necessary to use CSS style sheets to specify the style of the text, usually by designating the font as a Arial, size designation of 12px, and depending on the background color, in principle to be able to see and harmonize with the entire page. In the white background, we generally use black, so it is not easy to produce visual fatigue, to ensure that visitors to browse the page for a long time.

A picture is an important element in a Web page. Image optimization can be guaranteed browsing quality under the premise of its size to the lowest, so you can multiply the download speed of the Web page. Use PHOTOSHOP6 or FIREWORKS4 to cut the picture into small pieces and optimize them separately. The format of the output can be GIF or JPEG, depending on the specific situation. In general, we have more complex color changes in the small block to the JPEG, and the kind of only simple color block cartoon Small block optimization for GIF, which is determined by the characteristics of these two formats.

Tables (table) is an important element in the page, is the main means of page layout. We can set the table width, height, border, background color, alignment and other parameters. In many cases, we set the border of the table to 0 to locate the elements in the page, or to determine the relative position of each element in the page. We know that the browser reads the HTML original code of the page before it is shown by reading the entire table.

If a large table contains more than one subform, you must wait for the large table to be read before you can display the child tables together. We visit some sites, waiting for a long time without results, press the "Stop" button and then show the page is the reason. Therefore, when designing a page table, we should try to avoid nesting all elements in a table, and the table nesting level as little as possible. When you make a Web page using Dreamweaver, a null character "" is automatically added to each TD. If no other element is filled in the cell, the empty character is specifier reserved, and after specifying the width or height of the TD, it can be deleted from the source code.

The adaptability of the Web page is very important, on different systems, different resolutions, different browsers, we will see different results, so the design should be integrated into consideration. In general, we make the Web page under the 800*600, the best browsing effect is also in the 800*600 resolution, in other cases as long as the basic agreement, do not appear larger problems.

Said so much, just want to do "web design" people to help, I hope that they do the Web page in the overall focus, worthy of "design" the two words. By the way, this article only represents my personal opinion, for reference only.