10 tips for Web design beginners

10 tips for Web design beginners

Abstract: Most of the lessons you have learned in web design come from your work experience. Learning is a continuous process and there is no better way to acquire knowledge than making mistakes. In this article, we will discuss 10 important and regular skills, which should be known to every new Web designer.

Web Designers usually have to assume multiple roles and learn how to build an effective and practical website layout.
Most of the lessons you have learned in web design come from your work experience. Learning is a continuous process, and there is no better way to acquire knowledge (learn from mistakes) than making mistakes ). In this article, we will discuss 10 important and regular skills, which should be known to every new Web designer. (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)
1. optimize images to get better page loading speeds
Learn how to optimize webpage images by choosing the correct format and make sure that the file size is small enough within the feasible range. Although people are already using broadband, there are still dial-up Internet access. In addition, although mobile device technology is widely used, mobile devices do not necessarily support the same speed as broadband. The size of image files may prolong the webpage loading time, users may be evicted.
Here is a tip for choosing the appropriate file format: if the image 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 better to save it as JPG.
[Uploading images... (1)]
There are many tools to help you further optimize your images and reduce their file size. Refer to the tool list to help optimize your images. Minimize the number of images, use images flexibly, and minimize the file size. In this way, the page reading time can be greatly reduced and the web page performance can be improved.
2. Keep it clean and simple (I .e., concise)
A good web design not only looks good, but also user friendly. Generally, a clean and simple web design will eventually become a highly available web design, because it will not confuse users in interaction. When there are too many website functions and components on the page, the website users will be distracted and the purpose of viewing the website will be lost. Make sure that each page element has its own purpose, and then ask yourself the following questions:
◆ Do you really need this design?
◆ What is this component and how it helps users browse?
◆ If I suddenly Delete this component, will most people expect it to be "back?
◆ How to combine these elements with goals, messages, and website purposes?
In addition, although it may be a cool new concept or interface design pattern, you still need to ensure that the design is convenient and intuitive for your users. People are used to universal interaction modes, website functions, and network interfaces. If your design is really unique, make sure it is not too vague or obscure. Be creative, but keep it simple.
3. Navigation (bar/bar) is the most important design
The most important part of a website is the navigation of the entire website. Without it, no matter on which page the user is stuck on this page, it is inseparable. With this obvious practical direction, we will discuss some important points when constructing 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. Placement location, style, technology used (javascript or CSS), availability, and Web page accessibility are considerations when creating a navigation design.
Without CSS, your navigation design should also be available, which is based on the text-based browser compatibility. You can try to laugh at text-based browsers, but they are still popular on many mobile devices. Perhaps more importantly, for screen users (in 99.99% cases), the navigation function without CSS is still available for access.
In the absence of Client technology (such as JavaScript or Flash), the navigation function should be easy to access and use. Users may not enable or install it due to security or company policies.
Therefore, it is necessary to create 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 page is loaded, appears without the mouse scroll down. This is why pages should be kept clean and simple. A complicated and unconventional design may confuse users.
Even for a moment, the user will never wonder: "Where is the website navigation ?"
Finally, we will establish a hierarchical structure and multi-level management for the website. Make sure that it is easy to navigate between the parent and child layers. In addition, no matter which web page you are on, you can easily access the top pages (such as the homepage of a website ).
The main goal is to navigate your website, minimize operations (Actions) as much as possible, and let the user reach the content he wants to browse.
4. Use fonts wisely and methodically
Although there are thousands of fonts, what you really can use is only a small part (at least wait until the main browser fully supports CSS3 ). Therefore, we insist on using Web security fonts. If you do not like Web security fonts, you can consider using sIFR or Cufon to gradually enhance the web design.
Maintain the consistency of the font, and confirm that the title and paragraph content appear different. The blank space, line height adjustment, font size, and letter spacing attributes make it easy for users to read and scan content.
A common mistake a web designer may make is to use an incorrect font size. Because we want to render content in a webpage 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 for section content. Although many people have not encountered reading difficulties due to a small font, think about the elderly, myopia and other groups with similar visual impairment.
5. Understand the accessibility of colors
After the font is completed, we also need to point out the importance of using the correct color. For example, if the black text is on the white background and the high contrast is used, the red text on the orange background will make your eyes feel nervous.

In addition, use user-friendly colors for special forms of color blindness (Check tool named Vischeck, which can be used to test certain types of color blindness ).
Some color combinations are only applicable to the foreground color, but not the background color. For example, a dark blue text with a pink background and a pink text with a dark blue background both use the same color, however, different parts affect readability and reading comfort. It is important not only to use a good combination of colors, but also to use it on the appropriate elements of the page.
6. Know how to write code
As various WYSIWYG web editors flood the market, web design has become a simple 1-2-3 step to design a website. However, most web editors are doped with unnecessary Code, making your HTML structure poorly designed, difficult to maintain and update, resulting in page expansion.
By writing your own webpage code, you can get concise code and enjoy reading and maintenance. You can proudly say that you have written the code yourself. However, knowing how to use wysiwyg ide or preview does not prevent learning HTML and CSS. You need to know what happened to create an effective and highly optimized webpage design.
7. Do not forget the Search Engine Optimization
When designing a website, a good web designer should always remember the basic SEO concept. For example, the content structure of a webpage and text representation of the title (that is, the title and logo of a webpage ). At this point, the ability to properly Code previously learned will come in handy. After understanding the correct, semantic, and standard-based HTML/CSS, you will soon realize that Div is much better than the table layout, not only to display content more accurately, but also to help search engine rankings. In addition, it is also a good idea to change the background, text, and image with CSS.
8. Understanding people is impatient.
It takes a few seconds for ordinary people to decide whether to read more webpage content or go to another website. Therefore, as a Web designer, there must be a good way to encourage users to select the former (view more content) in this precious few seconds ).
You must know that if you cannot see the content you are interested in the webpage header, not many people will scroll down to view the content of the entire webpage. Therefore, place important elements on the website in areas that are easy to see in the webpage header, but do not overcrowd the top half of the webpage. Otherwise, the website will scare users and will not continue to read the content. Remember the selling point of the top half of web design: it is a salesman who gives people the idea of buying what they want to see on your website.
9. Understand (and realize) browser compatibility
One thing a web designer must know is that your work environment (browser) is picky and unpredictable. If your webpage design can only run in several Web browsers, that is not enough. You need to test it in as many browsers as possible. Here is a tool Browsershots that can test browser compatibility.
10. Make the design flexible and maintainability
A good web designer can ensure that the website can be easily updated or modified in the future. Designing a website with plasticity and ease of maintenance is a sign of a great web designer. Let your work shift from structured to modular as much as possible.
The web design industry is dynamic and "young ". Things often change in a short period of time. Keeping this idea in mind will promote the establishment of more flexible web design.
So what are your webpage design skills?
If you have other tips to share with new designers, please share them with you in the comments.