Summary of web designers' experience and skills in learning web design

As the company's influence grows and its products continue to improve, the related image design must keep up and need to be gradually improved, so we hired a fresh graduate web designer to grow together. Fresh graduates are hardworking and willing to learn, but they also have unrealistic ambitions. Their starting points are similar, so how to train web designers becomes crucial. I would like to share with you some of my experiences in contacting and learning design, and hope to get more suggestions from you.

1. Color matching

In fact, the sense of color is the most basic quality that a designer should possess. Their works are widely used in web interfaces, system interfaces, product packaging, etc. Some basic theories, such as warm and cool colors, contrasting colors/complementary colors, color psychology, matching principles, etc., are everywhere. If you are interested, just search for one or two and take a look. For web designers, color is more of a feeling, just like the feel of shooting a basketball. This feeling can be developed through observation and practice. When Mars first came into contact with design, he would pay attention to the color matching of the signs of certain companies and restaurants on the roadside even when riding the bus. He always paid attention to the beauty of color matching in life. He can't even remember how many color screenshots he took.

Mars believes that designers generally use colors in several stages:

1. Primary stage: Use the 1-2 colors that you feel are the best , without considering other factors or other people's feelings;
2. Transition stage: You start to feel that one or two colors are monotonous, so try as many different colors as possible . In this stage, it is very easy to mix and match without purpose.
3. Mature stage: At this stage, designers understand the public's aesthetic taste for colors, start to rationally match 1-2 colors , and appreciate the subtle differences in the same color with different color values. Most designers are at this stage.
4. The ultimate stage: using one color to the extreme , or even using only black, white and gray, completely immersing oneself in a certain color, even a little abnormal, but the creative effect makes the designer in the third stage know that it is the work of a master at a glance.

In fact, this is also a process of continuous practice and accumulation, so that the sense of color will be improved.

2. Layout

In addition to having a good sense of color, web designers must also have a good grasp of layout. The quality of the combination directly affects the effect of the work. In fact, it is not difficult to do a good layout design. It is nothing more than the following steps:

1. Layout preparation : Clarify what necessary text and pictures are needed for the main part of your content. Don't think too much about the details.
2. Layout format : There are many different layout formats. You can freely choose the layout as long as the key content is placed in the most conspicuous place. For web pages, based on the browsing order of most people from top to bottom and from left to right, the most important content, pictures, etc. should be placed on the left and top of the page.
3. Detailed layout : consideration of the overall color scheme, fonts, spacing between modules, illustrations, addition and reduction of content, and other aspects. This step is a delicate job.

Mars thinks the best way to practice layout is to make a PPT. It is not easy to make a PPT beautiful and concise. For pre-sales personnel in the software industry, how to make beautiful PPT should be a compulsory course for their self-study. Once the PPT layout is completed, the graphic layouts of other web pages, brochures, etc. should be easy to come by.

3. Details

The famous saying "Details determine success or failure" is even more important in the field of design. Many details may be overlooked by viewers, but designers must never miss them, such as background color, color gradient, spacing between components, title style, highlight style, font/size/color, line/paragraph spacing, illustration position/edge treatment, input box width and height/border color/background color, button position, etc. As before, only if you look at and compare more can you see these details. Some people think these details are not a big deal, but when multiple details are combined together, it makes people feel uncomfortable.

For example, the following is a form for adding comments under an article in a certain system. The upper part is the program written directly by the programmer without any beautification (above), and the lower part is the form interface designed and beautified with the assistance of a designer (below).

People with normal aesthetic taste would definitely think the following is beautiful, but they don’t know what’s good about it? Listen to Mars explain it from various angles:

1. Color matching: The font color seems to be taken directly from the 32-color palette without any consideration; the form border color is too dark; the form background is the same as the page background, and there is no prominent hierarchy.
2. Layout: This component does not have multiple lines of operations, so there is no need to use a list format. It is unreasonable to place the Save button above the component title. The position and size of the component title are not eye-catching enough.
3. User experience: Make it clear that this is an interface component in a system. So since this person has already logged in, is it still necessary to fill in the recorder? The time is definitely the submission time; the submitter mainly submits his own comments, so provide him with a large input box for the submission content, which is simple and clear; the submit button, in the above picture, requires filling in the comments and then folding back to the upper left corner to click "Save", which is obviously unreasonable. The interface in the following picture has a large button on the right hand side, which looks obvious and is comfortable to operate.

The above aspects are all about improving personal aesthetics . If you are not planning to conduct aesthetic research, I think too much pure theoretical learning will not improve your aesthetics much. So my advice is: watch more, imitate more, do more, and compare more. Be careful not to create blindly without any aesthetic sense. In fact, there is nothing shameful about imitation. It is a necessary stage of learning. It's like if someone imitates MJ's dance, even if they don't look exactly like him, they will at least be liked and admired by a small number of people, such as at a school/class's Christmas party; but if they don't understand the public's aesthetic taste, they will most likely dance like Sister Furong, which will just be a joke. Developing good aesthetic values ​​can be applied to all aspects of life, and all aspects of life can also exercise your aesthetic values, such as photography, decorating your room and desk, clothing matching, etc., which can improve your taste in life.

4. Mindset

During the accumulation stage, you should keep a calm mind, be steady and patient , and avoid being impatient. Being a web designer is a delicate job, and there is no point in being anxious. With a basic aesthetic view, you need to relax when creating, do what you want to do, eat what you want to eat, follow your heart, and provide yourself with an environment for creative inspiration. Don't just sit in front of the computer and think about it. You will get half the result with twice the effort and will end up depressing yourself.

5. Skills

With a good aesthetic foundation and creativity, the next step is production. Compared with the cultivation of aesthetic values ​​and the emergence of creativity, Mars feels that some tool skills are easy to learn. It is nothing more than a question of whether I use a pencil or a brush to draw. Here is a brief introduction to the tools Mars comes into contact with:

1. Graphics skills: Photoshop (graphic processing, etc.), Illustrator/CorelDraw (vector graphics), Flash (animation), Premiere Pro (film and television post-production), etc. These are just application tools;
2. Web programming skills: html, css, JavaScript, etc.;
3. Optimization skills: compress pictures, optimize web pages, etc.

There are a lot of tutorials on the Internet for the above tools. I recommend the NetEase tutorial. You can find some basics to read, and after practicing it often you will master it. You can study and improve the more advanced techniques in the future. You should learn while using them so that you will remember them deeply.

6. User Experience

User experience generally appears in web design and system interface design. It is the interaction process between users and the human-computer interface. The ease of interface operation directly affects the user's impression of the product. User experience is a higher requirement for web designers, and it even goes beyond the scope of web designers. However, only when web designers understand this can they design the interface layout, overall matching, etc. more reasonably.

Mars knows the importance of user experience, but has not studied it in depth. However, Mars will record the convenience of other people's web pages and systems, and will reflect it in his own design next time. It can be regarded as an imitation stage. This is also the way Mars has always learned.

Finally, I would like to state that Mars is not a professional designer and has no theoretical foundation. The above summary is all based on practical experience, and I hope to get more good suggestions.