10 Practical rules for novice web design

Editor's note: Novice often suffer no master hands-on teaching, now the opportunity to, today @anyforweb_udc students for everyone to prepare the Web UI Design 10 Practical rules, case-wide, method of praise, very suitable for the novice who is learning progress, to rise posture bar.

A subjective very want to learn a lot of design novice in the work of the most common situation should be ... No one wants to teach! PS: The traditional thought tells us "teaches the disciple, starves the teacher", therefore the new people's such encounter also is understandable; But ... Another possibility is ... The teacher is really busy!

Anyway, today for the rookie on the Web UI design 10 applicable rules, hope to let everyone brain hole open, in the design to get help and inspiration.

　　One, tangled time, lets the nature make the decision for you!

To follow the laws of nature is always because of close to the origin of all the people to be loved, so when you are indecisive, you can choose to put design into the laws of nature, let nature for you to make the best decisions. For example, the reality and nature tell us that the light source from the sky, as people have been accustomed to this from top to bottom light source, the designer should be able to adapt to the user's view of the lighting design.

　　Second, out of color temptation, can really see the layout design

Color to the human visual impact can produce the greatest effect; a Web page user experience is qualified, from the color and layout can be seen one or two. But in the color of the "escort", the layout of the good or bad seems to have been "dwarf." In order to give designers a clearer view of the layout of the page, the use of color or "grayscale" may be more beneficial to the layout design of the novice.

Grayscale mode:

Without the color "disturb" after the page layout once you can satisfy yourself, and then according to color theory or personalized preferences to add and change colors.

Want to present your most critical content, recommend: "Suck the eye Dafa!" What are some of the ways to highlight key content in a Web page?

　　Third, the sense of design is "stay" Out!

Bold White is a theory often mentioned in the design concept, but there are few designers who can actually implement it according to the theory. May be because the designer is not big enough (PS: Afraid to be sprayed dead by customers, "You are not lazy Ah!" How content is so little! Do you really do design ah!@#￥%......&*! "), another may not in practice to understand the beauty of white.

The white space in web design is to set aside some of the negative spaces in the limited capacity, which is not a so-called "lazy" behavior. Large white leaves in the domestic market is very likely to face a variety of dissatisfaction, but a small range of white can be very effective to improve the entire Web page grade. For example, the space between the picture and the words in the Web page, as long as twice times and above the gap, the overall exhibition shows a bright concise feeling.

　　Try to put the text directly on the picture

This design looks pretty simple, doesn't it? But it is difficult to design a blockbuster website in this way. In the application process, in order not to destroy the site's user experience, there are several points to pay special attention to.

Text color as much as possible to use white, so that the Web page looks more atmosphere; therefore, the color of the background of the Web page to choose the main color; more detailed words can be adjusted at different resolutions, to ensure that in all cases the text or the main content is easy to identify.

　　Five, about the font, suitable than novelty more important!

"Firm Novelty" is the occupational disease of many designers, in fact, in any event, suitable, more important than anything!

In the application of Web fonts, all kinds of font styles will make designers do not know what to do, the designer may have to cross the eye, may always be in the common use of several fonts in the conversion. As for the choice of fonts, designers should be based on some elements of the image as inspiration, in order to naturally form a hidden clues in the Web page.

　　Only when the strength and weakness coexist can we get the contrast

It is the most natural way to emphasize the content in the design by the contrast of strong and weak. For example, the background of the weakening of the picture, plus a clear text or patterns, the page will create a unique aesthetic effect of the future. If the picture is more monotonous, can also be in the background and the middle of the text to add some more transparency of the linear geometry, so that the rich enrich the page, but also let the overall no longer thin.

The concrete method of using good contrast: "Design foundation work!" to help you master the principle of contrast in the four principles of design

　　Seven, you need a pair of eyes that are good at discovering

Everything around you may always bring inspiration to you, do not skimp on your eyes!

Each small part is qualified to be your design element, and you should let them make small changes that will make your design a big improvement. Filters? geometry? Each effect requires your attempt.

　　Eight, Pink & light orange! They are the real hundred-match!

Pink warm colors have always been mistaken for a very difficult color, when this type of color is mixed in the colorful "palette" is indeed difficult to match, it might as well try to use them in a monochrome background, whether it is a little embellishment, or set as the main color, you will find the charm of the publicity.

　　Nine, navigation is the most important design of the Web page

Navigation can be said to be the most important design of the entire site, the user experience comfortable or not a great decision from this. The best evaluation of navigation design should be "Beck". Ghost Button, Hamburg icon and wireless box text design is a good guide to the common design techniques.

When it's not needed, the navigation is just a little burger icon.

After unfolding, it is like this:

You can also make it disappear at any time according to your wishes.

Or it's so low-key before it unfolds:

Open to the form of color block, so that patients with myopia can also clearly distinguish:

　　Nine, subtract the same existence between pages!

The same part of the web design is meaningless, not only to make the logic of the Web page complex trivial, but also make users feel disgusted. Especially in the case of consistent layout, the difference of content is especially important. These differences can be expressed in many ways, such as color, text, style and so on.

The most complete example of differentiation: experience sharing! Ultra-practical Text processing skills

If you want to design a more specific page, you can choose to do this:

　　Summarize:

The above is we are trying to refuel everyone summed up the Web page UI design rules, it is possible that you have heard a lot of the above content, but the meaning of the need to be in practice gradually groping understanding.

Finally, a lot of practice, according to the design environment constantly optimize their actual combat experience, to be a clever designer!