Want to learn web design: what are a few things to start with?

Web design covers quite a lot of ground, and for beginners, the most confusing part is often where to start and in what order to proceed. This article lays out a relatively workable learning path, along with the things to pay attention to at each stage.

花里云 约 1 分钟阅读~1 min read

For people who want to learn web design, the most common confusion is not "I can't learn it," but not knowing where to start—when faced with structure, styles, color schemes, typography, and tools all at once, it is easy to look at a bit of this and a bit of that, and end up with nothing solidly learned. Below is a relatively workable order.

First, build the ability to "look"

Before you start doing, look at a lot first. Find a group of websites you think are well made, and pay attention to how they organize content, how they arrange the layout, where they leave white space, and where they place buttons. When looking, do not just browse; take it apart with questions: what does this screen want visitors to see first, and by what means does it achieve that? This kind of observation requires no tools, but it is the foundation of all the work that follows.

Understand that structure and style are two different things

A web page consists of two parts: one part describes content and structure (what the headings, paragraphs, links, and images are), and the other describes what they look like (font size, color, spacing, position). It is important to understand these two things separately, because it determines which side you should change later when you encounter a problem. Even if you mainly use visual tools to build pages in the future, this basic understanding will save you many detours.

Start practicing with layout and color

Next, you can pick two specific entry points: first, layout—become proficient in the three things of alignment, spacing, and hierarchy; second, color—first master how to choose a primary color and auxiliary colors, and how to ensure text readability. These two can be practiced separately and do not require a complete project—for example, lay out the same piece of content in three different layouts and then compare the results.

Go through the process completely once

Once you have some foundation, try making a complete page from scratch and go through these steps: first determine who this page is for and what goal it should achieve; list clearly the content to be expressed; plan the information order and structure of the page; complete the visual design; finally check how it performs on different devices. Going through the complete process once improves you more than repeatedly practicing scattered techniques.

Treat image processing as a basic skill

When actually building websites, images are often the part with the most problems—unsuitable dimensions, excessive file size, inconsistent proportions. Mastering basic cropping, compression, and size unification is unavoidable. In addition, learning to first express the ideas you have with sketches is very useful when communicating with others, and much less trouble than describing them in words.

A few detours not to take

First, do not skip hands-on work. Watching a hundred tutorials is not as good as finishing one page yourself. Second, do not start with templates and then stop at templates. Templates can help you produce results quickly, but to truly master them, you need to understand why they are laid out that way and try to modify them yourself. Third, do not focus only on popular trends. Trends change, but the basics of alignment, contrast, and hierarchy do not.

Web design is a direction that requires long-term accumulation. The goal at the starting stage is not to learn everything, but to practice the basic few things until you can use them skillfully; the rest can be gradually filled in through actual projects.

花里云

西安花里云网络信息科技有限公司 · 企业数字平台厂商。十年一线交付,把项目里验证过的判断,整理成可以复用的东西。Xi’an Holypro Network Information Technology Co., Ltd. · an enterprise digital platform vendor. A decade of delivery, turning proven judgments into reusable assets.