10 applicable rules for Web UI design

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,anyforweb today for the rookie of the Web UI design 10 applicable rules, hoping to let everyone brain hole open, in the design to get help and inspiration.

1. Tangle of time, let nature make decisions 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.

2. 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.

3. 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 of being sprayed dead by customers-, "You are not lazy Ah!" How content so little! Do you really do design ah!@#￥%......&*! "), another possibility is 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.

4. 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.

5. About fonts, suitable for more important than novelty!

"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.

6. Only the strong and weak will 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.

7. You need a pair of eyes that are good to find.

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.

8. Peach Red & Light orange! They're the real hundred!

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.

9. Navigation is the most important design in 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:

10. Subtract the same presence 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.

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

Summarize:

The above is anyforweb for the efforts of the people who summed up the Web page UI design rules, you may have heard of the above content, but the meaning of the need to gradually explore the practice of understanding.

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

Anyforweb can only help you here ...