Ten web design skills

There are many problems in making a website, so web designers usually have to play a variety of roles and master how to build an effective and practical website layout knowledge. Most of the experience you have learned in web design comes from work experience. Learning is an iterative process, and there is no better way to acquire knowledge than making mistakes (learning from mistakes). In this article, we will discuss the important and routine skills of 10, which every novice web designer should know. The following is related knowledge, welcome to read.

1. Optimize the picture for better page loading speed.

Learn how to optimize web pictures by choosing the right format and ensure that the file size is small enough in the feasible range. Although people use broadband now, some people still dial up the Internet. In addition, despite the popularity of mobile device technology, mobile devices may not necessarily support the same speed as broadband, and the size of picture files may still prolong the loading time of web pages and may drive away users.

Here is a trick to choose a suitable file format: if the picture is monochrome, it is best to save it in PNG or GIF format; If it is a continuous tone (such as a photo), it is best to save it in JPG format.

There are many tools that can help you further optimize your pictures and reduce the file size. You can refer to this tool list to help optimize your pictures. Minimize the number of pictures, use pictures flexibly, and minimize the file size. This will greatly reduce the page reading time and improve the performance of the page.

Step 2 keep it simple and clear

A good web design is not only beautiful, but also user-friendly. Generally speaking, a clean and concise web design will eventually become a highly available web design, because it will not be confused in the interaction with users. When there are too many website functions and components on the page, it will distract the attention of website users and lose the original purpose of browsing the website. Make sure that every page element has a purpose, and then ask yourself the following questions:

1. Do you really need this design?

2. What does this component do and how does it help users browse?

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

4. How to combine these elements with the goal, information and purpose of the website? In addition, although it may be a cool new concept or interface design pattern, you should ensure that the design is still convenient and intuitive for your users. People are used to the common interactive mode, website function and 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 (column/column) is the most important design.

The most important part of a website is the navigation of the whole website. Without it, users will be stuck in this page no matter which page they are on. With this obvious practical direction, let's discuss some important points of building website navigation.

First of all, it is very important to invest enough time and a lot of planning in the navigation structure of the website. Although this is common sense, there are still many designers who take it for granted to design website navigation.

Location, style, technology (javascript or CSS), usability and readability of web pages are all factors you need to consider when designing navigation.

Without CSS, your navigation design should also be available, which is text-based browser compatibility. You can laugh at text-based browsers all you want, but they are still very popular on many mobile devices. Perhaps more importantly, for screen users (99.99% of the time), navigation functions without CSS can still be accessed.

Without client technology (such as JavaScript or Flash), the navigation function should be easy to enter and use. For security or company policy reasons, users may not open or install it.

So do a good job in the location where the navigation system can be placed, such as in a conspicuous place. Good navigation function, as long as the page is loaded, it will appear without scrolling down with the mouse. This is why it is important to keep the page clean and simple. Complex rather than traditional designs may confuse users.

Even for a moment, users will not wonder: "Where is the website navigation?"

Finally, establish the hierarchical structure and multi-level management of the website. Ensure easy navigation between parent and child layers. In addition, no matter which web page you are on, you should be able to easily reach the home page (such as the home page of the website).

The main goal is to navigate your website, minimize operations (actions), and try to let users browse what they want to browse.

4. Use fonts wisely and methodically

Although there are thousands of fonts, you can only use a few (at least until the major browsers fully support CSS3). So stick to the safe font of the web page. If you don't like the safe fonts on the web page, you can consider using sIFR or Cufon to enhance the web page design step by step.

Keep the font consistent, and make sure that the contents of the title and paragraph look different. Use white space, adjust line height, font size and letter spacing attributes, so that users can read and scan content easily and happily.

Perhaps the mistake that web designers often make is to use the wrong font size. Because we want to cram all the content into a web page as much as possible, we sometimes set the font size to make users feel uncomfortable. If possible, try to keep the font size above 12 pixels, especially the paragraph content. Although many people will not encounter reading difficulties because the font is too small, think about the elderly, myopia and other similar visually impaired groups.

5. Understand the color auxiliary function

After talking about fonts, we also need to point out the importance of using correct colors. For example, black text on a white background. If you use high contrast, the red text on the orange background will make your eyes nervous.

In addition, for special forms of color blindness, use some user-friendly colors (the inspection tool is called Vischeck, which can test some types of color blindness).

Some tones are only suitable for the foreground scenery, but not for the background scenery. For example, dark blue text with pink background and pink text with dark blue background all use the same color, but when used in different parts, it will affect their readability and reading comfort. It is important not only to use a good hue, but also to use it on the correct elements in the page.

6. Know how to write code

With all kinds of WYSIWYG fckeditor flooding the market, web page design has become a simple 1-2-3 step to design a good website. However, most fckeditor are mixed with unnecessary code, which leads to poor design of your HTML structure, difficult to maintain and update, and leads to the expansion of web pages.

Through the web page code written by yourself, you can get concise code, which can be read and maintained happily and conveniently. You can proudly say that you wrote the code yourself. But knowing how to use WYSIWYG IDE or preview function will not hinder learning HTML and CSS. You need to know what happened to create an effective and highly optimized web design.

7. Don't forget search engine optimization

When designing a website, a good web designer should always keep in mind the basic concepts of SEO. For example, the content structure of the web page, the title expressed in words (that is, the title and logo of the web page). At this point, the ability to learn how to code properly 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, which can not only show the content more accurately, but also help search engines rank. In addition, it's a good idea to know that CSS is used instead of background, text and pictures.

8. Understanding people is impatient.

Ordinary people need a few seconds to decide whether to read more web pages or go to other websites. So as a web designer, there should be a good way to encourage users to choose the former (read more) in these precious seconds.

You know, if users can't see what they are interested in at the top of the page, not many people will scroll down to see the whole page. So, put the important elements in the header of the website where it is easy to see, but don't crowd the top half of the page too much, otherwise users will be scared and won't continue reading. Remember the selling point of the first half of web design: think of it as a salesman and let people have the idea of buying, that is, what they want to see on your website.

9. Understand (and realize) browser compatibility.

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

10. Make the design flexible and maintainable

A good web designer can ensure that the website can be easily updated or modified in the future. Designing a plastic and easy-to-maintain website is a sign of a great web designer. Try to change your work from structured to modular.

The web design industry is full of vitality and "young". Things often change in a short time. Keeping this idea in mind will promote the establishment of more flexible web design.