Shulou(Shulou.com)06/02 Report--

In this issue, Xiaobian will bring you about how to design and make web pages. The article is rich in content and analyzes and narrates from a professional perspective. After reading this article, I hope you can gain something.

In the understanding of web design, many people still seem to stay at the height of web production. Think that as long as you use a good web page making software, you can do a good job in web page design.

In fact, web page design is a complex process combining perceptual thinking and rational analysis. Its direction depends on the task of design, and its realization depends on the production of web pages. As the so-called "kung fu is outside the poem," 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, and lies in our own aesthetic and grasp of the page.

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

I. Design tasks

Design is an aesthetic activity, successful design works are generally very artistic. But art is only the means of design, not the task of design. The task of design is to achieve the designer's intention, not to create beauty.

The task of web design refers to the theme and function that the designer wants to express. The nature of the site is different, and the task of design is different. Formally, sites can be divided into three categories.

The first category is information sites, such as Sina, Netease, Sohu and other portals. Such sites will provide visitors with a large amount of information and a large number of visits. Therefore, attention should be paid to page segmentation, reasonable structure, page optimization, interface affinity and other issues.

The second category is the combination of information and image sites, such as some larger companies, domestic universities and so on. This kind of website has higher requirements in design, which not only ensures the above requirements of information websites, but also highlights the image of enterprises and units. However, on the status quo, such sites have shoddy suspicion. https://www.yisu.com

The third category is image websites, such as some small and medium-sized companies or units. This kind of website is generally small, some have a few pages, the function that needs to be realized is also relatively simple, the main task of web page design is to highlight the corporate image. This kind of website has higher requirements for the designer's art level.

Of course, this is only from the overall point of view, the specific situation needs to be analyzed in detail. Different sites should be treated differently. Don't forget the most important point, that is, customer requirements, it is also the task of design.

After defining the task, the next thing to think about is how to complete the task.

II. Implementation 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 done on paper. The second part is the production of web pages, this process is completed on the computer.

The first step in designing a home page is to design the layout. We can think of the web page as a traditional newspaper magazine to edit, which has text, images and even animation, we have to do is to arrange the most appropriate way to the image and text in different positions on the page. In addition to having a well-configured computer, software is also necessary. It is not easy to say whether a 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 meet the designer's requirements. The author commonly used software is Macromedia Dreamweaver, Fireworks, Flash and Adobe Photoshop, imageready, these are very good software. The next thing we have to do is to use the software to turn the blueprint of the design into reality, and the final integration is usually completed in Dreamweaver. Although we sketch the outline of the page, inspiration usually comes during the production process. Design works must be creative, this is the most basic requirement, no creative design is a failure. In the process of production, we will encounter many problems, the most sensitive of which is the color of the page. https://www.yisu.com

III. Use of Color

Color is a strange thing, it is beautiful and rich, it can arouse the human mind perception. Generally speaking, red is the color of fire, enthusiasm, unrestrained; it is also the color of blood, which can symbolize life. Yellow is the highest brightness color, looks gorgeous, noble, bright. Green is the color of nature plants, meaning pure nature and growth, symbolizing peace and security, such as green food. Purple is a symbol of nobility and has a sense of solemnity. White can give people a feeling of purity and innocence, indicating peace and holiness.

We know that color is produced by refraction of light, red, yellow and blue are the three primary colors, and other colors can be reconciled with these three colors. Another way of thinking, we can use color changes to express the effect of light and shadow, 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 exchange, which varies according to people's age, region, era, nationality, class, economic region, working ability, education level, customs, religious beliefs, living environment and gender differences.

Pure color has no practical meaning, and different colors match, it shows different effects. For example, green and gold, light white collocation, can produce elegant, comfortable atmosphere. Blue and white mix, can reflect supple, elegant, romantic atmosphere. Red and yellow, gold collocation can render festive atmosphere. The combination of gold and millet will bring warmth to people. Color schemes vary according to the task being designed. Considering the adaptability of web pages, web-safe colors should be used as much as possible.

However, there is no certain rule for the use of color. If you must use a certain rule to set it, the effect will only be counterproductive. Empirically, we can first determine a main color that can express the theme, and then apply color approximation and contrast to complete the color scheme of the whole page according to specific needs. The entire page should be visually integrated to achieve a harmonious and pleasing visual effect.

IV. Combination of modeling

In web design, we express themes primarily through visual communication. In visual communication, modeling is a very important element. Leaving aside the question of whether it is a picture or a text, all elements on the screen can be treated as the basic elements of the screen, points, lines, and surfaces. In a successful work, it is necessary to combine and match points, lines and surfaces to construct the whole page.

Usually we can use the combination of techniques are order, proportion, balance, symmetry, continuity, interval, overlap, repetition, intersection, rhythm, rhythm, induction, variation, close-up, reflection, etc., they all have their own characteristics. In the design should be based on specific circumstances, choose the most suitable expression method, so conducive to the theme of the performance. https://www.yisu.com

Through the combination of dots, lines and surfaces, important elements on the page can be highlighted, the theme of the design can be highlighted, the aesthetic feeling can be enhanced, and the viewer can understand the theme of the design in the process of feeling the beauty, thus realizing the task of the design.

The skillful use of modeling can not only bring great beauty, but also highlight the corporate image, but also organize various elements on the web page organically, and it can even guide the viewer's line of sight.

V. Principles of Design

No matter what method is used to combine the elements in the picture, five major principles must be followed: unity, coherence, segmentation, contrast and harmony.

Unity refers to the integrity and consistency of design works. The overall effect of the design work is crucial, in the design do not isolate the various components scattered, that will make the picture presents a messy effect.

Coherence means paying attention to the interrelationships of pages. The design should use the internal connection of each component in the content and the mutual echo of the form of expression, and pay attention to the consistency of the design style of the whole page to achieve visual and psychological coherence, so that the various parts of the whole page design are extremely harmonious, as if in one go. https://www.yisu.com

Split, refers to the page into a number of small pieces, small pieces between the visual differences, so that the viewer can be clear. In order to make the viewer see clearly when there is a lot of information, it is necessary to pay attention to the effective segmentation of the picture. Division is not just a requirement of presentation. In other words, segmentation can also be seen as a classification of page content.

Contrast is to animate design through contradiction and conflict. There are many contrast techniques, such as: more and less, curved and straight, strong and weak, long and short, thick and thin, sparse and dense, virtual and solid, main and secondary, black and white, dynamic and static, beautiful and ugly, gathered and scattered, etc. In the use of contrast should be careful, contrast too strong easy to destroy the aesthetic, affecting unity.

Harmony means that the whole page conforms to the laws of beauty and is integrated. If a design work is only a random mixture of colors, shapes, lines, etc., then the work will not only have no "sense of life," but also cannot realize the communication function of visual design. Harmony depends not only on the structural form, but also on whether the visual effect formed by the work can form a communication with people's visual feelings and produce spiritual resonance. This is the key to design success.

VI. Optimization of web pages

In web page design, web page optimization is an important link. Its success or failure will affect the speed and adaptability of the page, affecting the viewer's impression of the site.

Text is the largest component of a page in an information website, so font optimization is particularly important. Use css style sheet to specify the style of text is necessary, usually we will specify the font as Song, size specified as 12px, color depends on the background color, in principle, can be seen and with the whole page harmony prevail. On a white background, we generally use black, which is not easy to produce visual fatigue and ensures that viewers browse the web for a long time.

Images are important elements in web pages. Image optimization can reduce the size to a minimum while maintaining browsing quality, which can multiply the download speed of web pages. Photoshop6 or Fireworks4 allows you to cut images into small pieces and optimize them individually. The output format can be gif or jpeg, depending on the circumstances. Generally, we optimize the small blocks with more complex color changes as jpeg, and optimize the cartoon small blocks with only simple color blocks as gif, which is determined by the characteristics of these two formats. https://www.yisu.com

Table is an important element in the page and the main means of page layout. We can set the width, height, border, background color, alignment and other parameters of the table. Many times, we set the border of the table to 0 to locate elements on the page or to determine the relative position of elements on the page. We know that when the browser reads the html source code of the web page, it reads the entire table before displaying it. If a large table contains multiple subtables, you must wait until the large table is finished before the subtables can be displayed together. That's why we wait so long to visit some sites and press the "stop" button to get the page displayed. Therefore, when designing page tables, we should try to avoid nesting all elements in a table, and the table nesting level should be as low as possible. When you create a web page using Dreamweaver, an empty character " " is automatically added to each td. If the cell is not filled with other elements, the null character remains, and after specifying the width or height of td, it can be deleted from the source code.

Web adaptability is important, on different systems, different resolutions, different browsers, we will see different results, so design should be considered as a whole. Generally, we make web pages under 800*600, and the best browsing effect is also under 800*600 resolution. In other cases, as long as we ensure basic consistency, no major problems can occur.

The above is how to design and make web pages shared by Xiaobian. If you happen to have similar doubts, you may wish to refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.