How to design a web page? How to create a web page?

When it comes to understanding web design, many people still seem to be stuck at the level of web page production. I think that as long as I use the web page making software well, I can do a good job in web page design.
In fact, web design is a complex process that combines emotional thinking with rational analysis. Its direction depends on the design task, and its realization depends on the production of the web page. As the saying goes, "The real skill lies beyond the poem." The most important thing in web design is not the application of software, but our understanding of web design and the level of design and production, our own aesthetic sense and grasp of the page.
First, we need to clarify the tasks of web design.
1. Design tasks Design is an aesthetic activity, and successful design works are generally very artistic. But art is only a means of design, not the task of design. The task of design is to realize the designer's intention, not to create beauty.
The task of web design refers to the theme that the designer wants to express and the functions that he wants to achieve. The nature of the site is different, and the design tasks are also different. In terms of form, sites can be divided into the following three categories.
The first category is information sites, such as portal websites such as Sina, NetEase, and Sohu. This type of site will provide visitors with a lot of information and will have a high traffic volume. Therefore, attention should be paid 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 some larger companies, domestic universities, etc. This type of website has high design requirements. It must not only meet the above requirements of information websites, but also highlight the image of the company or organization. However, judging from the current situation, such websites are suspected of being shoddy. 123WORDPRESS.COMhttps://www.jb51.net
The third category is image websites, such as some small and medium-sized companies or units. This type of website is generally small, some have only a few pages, and the functions to be implemented are relatively simple. The main task of web design is to highlight the corporate image. This type of website requires a high level of artistic skills from the designer.
Of course, this is just an overall view, and the specific situation still needs to be analyzed specifically. Different sites should be treated differently. Don’t forget the most important point, which is the customer’s requirements, which is also a design task.
After clarifying the design task, the next thing to think about is how to complete this task.
2. Implementation of the design The implementation of the design can be divided into two parts. The first part is the planning and sketching of the site, which can be done on paper. The second part is the creation of the web page, which is done on a computer.
The first step in designing a homepage is to design its layout. We can edit web pages like traditional newspapers and magazines. They contain text, images and even animations. Our job is to arrange the images and text in different positions on the page in the most appropriate way. In addition to having a well-configured computer, software is also necessary. We cannot simply say whether a software is good or bad. As long as the designer finds it convenient and handy to use, it can be called good software. Of course, it should meet the designer's requirements. The software I often use are Macromedia's Dreamweaver, Fireworks, Flash and Adobe's Photoshop and imageready, which are all very good software. The next thing we need to do is to turn the design blueprint into reality through the use of software. The final integration is usually completed in Dreamweaver. Although we determine the general outline of the page in the sketch, inspiration usually comes during the production process. Design works must be creative, this is the most basic requirement. A design without creativity is a failure. During the production process, we will encounter many problems, the most sensitive of which is the color of the page. 123WORDPRESS.COMhttps://www.jb51.net
3. Use of color Color is a strange thing, it is beautiful and rich, and it can evoke human spiritual perception. Generally speaking, red is the color of fire, representing passion and unrestrainedness; it is also the color of blood, and can symbolize life. Yellow is the color with the highest brightness, and it appears gorgeous, noble and bright. Green is the color of nature's grass and trees, meaning pure nature and growth, and symbolizing tranquility, peace and security, such as green food. Purple is a symbol of nobility and solemnity. White can give people a feeling of purity and innocence, and represents peace and holiness.
We know that colors are produced by the refraction of light. Red, yellow and blue are the three primary colors, and other colors can be mixed with these three colors. Changing our thinking, we can use color changes to express light and shadow effects, which will undoubtedly make our works closer to reality.
Colors represent different emotions and have different symbolic meanings. These symbolic meanings are a complex issue in the exchange of ideas among people, and they vary depending on people's age, region, era, nationality, class, economic region, work ability, education level, customs, religious beliefs, living environment, and gender differences.
Pure color has no practical meaning. When matched with different colors, it will produce different effects. For example, the combination of green, gold and light white can create an elegant and comfortable atmosphere. The mixture of blue and white can create a soft, elegant and romantic atmosphere. The combination of red, yellow and gold can create a festive atmosphere. The combination of gold and chestnut will bring warmth. The color scheme varies depending on the design task. Considering the adaptability of web pages, web-safe colors should be used as much as possible.
But there are no fixed rules for using colors. If you insist on using a certain rule, the effect will only be counterproductive. Based on experience, we can first determine a main color that can express the theme, and then apply color similarity and contrast to complete the color scheme of the entire page according to specific needs. The entire page should be a visual whole to achieve a harmonious and pleasing visual effect.
4. Combination of shapes In web design, we mainly express the theme through visual communication. In visual communication, modeling is a very important element. Regardless of whether it is a picture or text, all elements on the screen can be treated as the basic components of the screen: points, lines, and surfaces. In a successful work, points, lines and surfaces need to be combined and matched to construct the entire page.
The combination techniques we usually use include order, proportion, balance, symmetry, continuity, interval, overlap, repetition, intersection, rhythm, rhyme, induction, variation, close-up, reflection, etc., they all have their own characteristics. In design, the most appropriate expression method should be selected according to the specific situation, which is conducive to the expression of the theme. 123WORDPRESS.COMhttps://www.jb51.net
Through the combination of points, lines and surfaces, we can highlight the important elements on the page, highlight the theme of the design, enhance the aesthetic feeling, and let the viewer understand the theme of the design in the process of feeling the beauty, thus achieving the design task.
The clever use of shapes can not only bring great beauty, but also better highlight the corporate image, and can organically organize various elements on the web page, it can even guide the viewer's sight.
5. Principles of design Design has principles. No matter what method is used to combine the elements in the picture, five major principles must be followed: unity, coherence, division, contrast and harmony.
Unity refers to the integrity and consistency of the design work. The overall effect of the design work is crucial. In the design, do not isolate and disperse the various components, otherwise the picture will appear messy and complicated.
Coherence means paying attention to the relationship between pages. In the design, we should make use of the inherent connections in content and mutual echoes in expression of each component, and pay attention to the consistency of the design style of the entire page to achieve visual and psychological coherence, so that all parts of the entire page design are extremely harmonious, as if they were done in one go. 123WORDPRESS.COMhttps://www.jb51.net
Segmentation means dividing the page into several small blocks with visual differences between the small blocks, so that the viewer can see clearly at a glance. When there is a lot of information, in order to make the viewer able to see clearly, we must pay attention to dividing the picture effectively. Segmentation is not only a need for presentation. From another perspective, segmentation can also be seen as a classification and summary of page content.
Contrast makes the design more lively through contradiction and conflict. There are many contrasting techniques, such as: more and less, curved and straight, strong and weak, long and short, thick and thin, sparse and dense, virtual and real, primary and secondary, black and white, movement and stillness, beauty and ugliness, gathering and dispersion, etc. Be cautious when using contrast, as too strong contrast can easily destroy the beauty and affect unity.
Harmony means that the entire page conforms to the laws of beauty and is a seamless whole. If a design work is merely a random mixture of colors, shapes, lines, etc., then the work will not only lack a sense of "life", but will also be unable to achieve 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 communicate with people's visual perception and resonate with the soul. This is the key to the success of the design.
6. Web page optimization In web page design, web page optimization is a relatively important link. Its success or failure will affect the browsing speed and adaptability of the page, and affect the viewer's impression of the website.
In information websites, text is the largest component of the page, so font optimization is particularly important. It is necessary to use CSS style sheets to specify the style of text. Usually we specify the font as Songti, the size as 12px, and the color depends on the background color. In principle, it should be clear and harmonious with the entire page. We usually use black on a white background, which is less likely to cause visual fatigue and can ensure that viewers can browse the web page for a longer time.
Images are important elements in web pages. Image optimization can reduce its size to a minimum while ensuring browsing quality, which can increase the download speed of the web page exponentially. Using Photoshop6 or Fireworks4, you can cut the image into small pieces and optimize them separately. The output format can be gif or jpeg, depending on the specific situation. Generally, we optimize small blocks with more complex color changes into jpeg, and optimize small cartoon-like blocks with only simple color blocks into gif. This is determined by the characteristics of these two formats. 123WORDPRESS.COMhttps://www.jb51.net
Table is an important element in the page and the main means of page layout. We can set the table's width, height, border, background color, alignment and other parameters. Often, we set the border of a table to 0 to position elements on the page or to determine the relative positions of elements on the page. We know that when the browser reads the original HTML code of a web page, it reads the entire table before displaying it. If a large table contains multiple sub-tables, the sub-tables can only be displayed together after the large table is read. This is the reason why when we visit some sites, we wait for a long time without any results, but when we press the "Stop" button, the page is displayed immediately. Therefore, when designing page tables, we should try to avoid nesting all elements in one table, and the table nesting level should be as small as possible. When using Dreamweaver to create a web page, a space character " " will be automatically added to each td. If the cell is not filled with other elements, the space character will be retained. After specifying the width or height of td, you can delete it in the source code.
The adaptability of a web page is very important. We will see different results on different systems, different resolutions, and different browsers, so we must take all of these into consideration when designing. Generally, we make web pages at 800*600, and the best browsing effect is also at 800*600 resolution. In other cases, as long as the basic consistency is maintained and no major problems occur, it will be fine.
Having said so much, I just hope that it can be helpful to those who do "web design". I hope that they can look at the overall situation when making web pages and live up to the word "design".

<<: Typical cases of MySQL index failure

>>: Analyze the compilation and burning of Linux kernel and device tree

Example code of how CSS matches multiple classes

How to design a web page? How to create a web page?

Example code of how CSS matches multiple classes

Parent-child component communication in Vue and using sync to synchronize parent-child component data

Use Firebug tool to debug the page on iPad

N ways to align the last row of lists in CSS flex layout to the left (summary)

Summary of 9 excellent code comparison tools recommended under Linux

What is em? Introduction and conversion method of em and px

innerHTML Application

How to use Navicat to export and import mysql database

Analysis and solution of the reason why the frameset tag in HTML cannot be displayed normally

Detailed explanation of nginx's default_server definition and matching rules

Recommend

Navicat for MySQL tutorial

Mini Program natively implements left-slide drawer menu

Implementation of vue3.0+vant3.0 rapid project construction

How to use Vuex's auxiliary functions

The principle and implementation of js drag effect

Sample code for realizing book page turning effect using css3

Pessimistic locking and optimistic locking in MySQL

Detailed explanation of MySQL semi-synchronization

mysql5.6.zip format compressed version installation graphic tutorial

A brief discussion on docker-compose network settings

How to use DCL to manage users and control permissions in MySQL

JavaScript implementation of classic snake game

Detailed installation and use of docker-compose

Detailed explanation of the usage of NULL and NOT NULL when creating tables in MySQL

Vue3 (Part 2) Integrating Ant Design Vue