10 things every web designer should know

There are a lot of problems when doing Web sites, so web designers often have to play a variety of roles, and to master how to build an effective and practical knowledge of the site layout.

Most of the lessons you've learned in web design come from work experience. Learning is a recurring process, and there is no better way to acquire knowledge (learn from mistakes) than to err. In this article, we'll discuss 10 important and regular tips that every novice web designer should know.

1. Optimize the picture and get better page loading speed

Learn how to optimize page images by choosing the right format, and make sure that the size of the file is small enough for you to be feasible. Although people are already using broadband, there are still people dialing the Internet. In addition, although mobile device technology popularization, but the mobile device does not necessarily support the same speed as the broadband, picture file size may still extend the loading time of the page, it is possible to drive users away.

Here's a tip for choosing the right file format: If the picture is monochrome, it's best to save it in PNG or GIF format, and if it's a continuous hue (such as a photo), it's best saved in JPG format.

There are a lot of tools that can help you further refine your picture and reduce their file size. You can refer to this list of tools to help optimize your picture. Try to minimize the number of pictures and use the pictures flexibly, and reduce the size of the file as much as possible. In this way, it will greatly reduce the page read time and improve the performance of the Web page.

2. Keep clean and simple (ie: concise)

A good web design is not only looking good, but also user-friendly. Generally speaking, a clean, simple web design will eventually become a highly available web design, because it does not confuse it with the user's interaction. When there are too many Web site features and components on the page, users will be distracted and lost the purpose of browsing the site. Make sure each page element has its purpose, and then ask yourself the following questions:

1. Do you really need this design?

2. What is this component used to do, and how does it help users navigate?

3. If I suddenly delete this component, will most people want it to "come back"?

4. How to combine these elements with goals, messages and the purpose of the website?

In addition, although it may be a cool new concept or interface design pattern, you still have to make sure that the design is still easy and intuitive for your users. People are accustomed to the Universal interactive mode, the Web site function, and the network interface, if your design is really unique, make sure it is not too vague and obscure. Be creative, but keep it simple.

3. Navigation (Bar/column) is the most important design

The most important part of a website is the navigation of the entire site. Without it, no matter in which page, the user will happen card in this page can not be separated from the situation. With this obvious practical direction, we'll discuss some of the important points in building a site's navigation.

First of all, in the site's navigation structure, it is very important to devote enough time and lots of planning. While this is common sense, there are still a lot of designers who take it for granted to design site navigation.

placement, style, technology (JavaScript or CSS), usability, and web readability are some of the things you need to consider when making your navigation timings.

In the absence of CSS, your navigation design should also be available, this is based on the text based browser compatibility. You can try to mock text based browsers, but they are still popular on many mobile devices. Perhaps more importantly, for screen users (99.99% of the case), there is no CSS navigation features available to access.

In the absence of client-side technology (such as JavaScript or Flash), navigation features should be easy to access and use. The user may not be open or installed because of security or company policy.

Therefore, it is necessary to develop a navigation system that can be placed in a good position, for example in a conspicuous and visible place. A good navigation function, as long as the Web page load appears, without the need to scroll down the mouse. This is why pages need to be clean and simple, and a complex and unconventional design can be confusing to the user.

Even if only for a moment, users will certainly not wonder: "Where is the site navigation?" ”

Finally, the site to establish a hierarchical structure, multi-level management. Make sure it is easy to navigate between the parent and child layers. In addition, you should be able to reach the highest level of the page (such as the home page) in any Web site.

The main goal is to navigate your site, minimize the action, and try to get the user to the content he wants to browse.

4. Use fonts wisely and methodically

Although there are thousands of fonts, you really can use only a small portion (at least until the main browser fully supports CSS3). So stick with Web page security fonts. If you don't like web-safe fonts, consider using SIFR or Cufon to incrementally enhance your web design.

Keep the font consistent, confirming that the contents of the headings and paragraphs look different. Use white space, adjust row heights, font size, and letter spacing properties to make it easy for users to read and scan content.

Perhaps a web designer often makes the mistake of using the wrong font size. Because we want to put the content in a Web page as much as possible, we sometimes set the font size and make the user feel uncomfortable. If possible, try to keep the font size above 12 pixels, especially the paragraph content. Although many have not encountered because the font is too small to cause reading difficulties, but think of the elderly, myopia and other similar groups of visually impaired.

5. Understand the color barrier-free

After the font is finished, we also need to point out the importance of using the correct color. For example, black text on a white background, if you use High contrast, the red text on the orange background will make your eyes feel tense.

In addition, some types of color blindness can be tested using some user-friendly colors for special forms of colour blindness (check tool name Vischeck).

Some color combinations are only suitable for use in the foreground color, not for background colors. For example, dark blue text with a pink background and pink text with a dark blue background, both use the same color, but the use of different parts of it affects its readability and reading comfort. The important thing is not only to use a good color combination, but also to use it on the appropriate elements of the page.

6. Know how to write code

With all the WYSIWYG web editors flooding the market, web design has become a simple 1-2-3 step to designing a Web site. However, most web editors are doped with unnecessary code, making your HTML structure poorly designed, difficult to maintain and update, and causing web pages to swell.

By writing the Web code, you can get concise code, can be happy and easy to read and maintain. You can be proud to say that you wrote the code yourself. But knowing how to use the WYSIWYG IDE or preview feature doesn't prevent you from learning HTML and CSS. You need to know what's going on to create effective and highly optimized web design.

7. Don't forget search engine optimization

When designing a website, a good web designer should always keep the basic SEO concept in mind. For example, the content structure of a Web page, the caption in text (that is, the title and logo of a Web page). At this point, the ability to learn how to properly encode the past comes in handy. After understanding the correct, semantic, and standards-based html/css, you will soon realize that div is much better than table layout, not only to show content more accurately, but also to help search engine rankings. Also, it's a good idea to use CSS to change backgrounds, text, and pictures.

8. Understanding people is impatient

It takes a few seconds for the average person to decide whether to read more Web pages or to another site. Therefore, as a web designer, there is a good way to encourage users to choose the former (see more) in this precious few seconds.

You know, if the user doesn't see the content on the head of the page, not many people will scroll down to see the whole page. So, it is easy to see in the head of the Web site to place the important elements, but also do not overcrowded in the top half of the page, otherwise it will scare users, and will not continue to look at the content. Remember the top half of the web design's selling point: as a salesman, people have the idea of buying what they want to see on your site.

9. Understand (and realize) browser compatibility

One thing a web designer must know is that your working environment (the browser) is critical and unpredictable. If your web design can only run in several web browsers, that's not enough, you need to test as many browsers as possible. Here is a tool browsershots that can test browser compatibility.

10. Make design flexible and maintainable

A good web designer can make sure that the site can be easily updated or modified later. Designing a Web site that is malleable and easy to maintain is a hallmark of a great web designer. Let your work shift as far as possible from the structural to modular.

Web Design the industry is dynamic and very "young". Things tend to change in the short term. Keeping this thinking in mind will drive the creation of more flexible web design.

So, what are your web design tips?

If you have other tips to share with novice designers, please share them with us on Weibo or in comments.