High-quality web design and skills No. 4 (Organization of elements)

The profession of designer is attractive to many people because the process of creating creativity is really interesting. I know the process of organizing content is not that interesting, but once you develop a good habit of organizing content, you will find that it is not as boring as you think. The way you organize content always depends on the situation. For example, what type of site is this? How important is a particular piece of content on the page?

There are so many possible permutations of how and where to place content. But there are still some tips to follow. The most basic thing is to first decide what effect your design needs to achieve. For example, are you building a website that sells things? Is it for content display? Or are you making a user registration page? Promotion page? Wait...

Business by design: 37Signals
Check out this popular website from 37 signals. It's not just luck that their things sell so well. Their website makes it as easy as possible for you to learn about their products and help you make your final decision. Everything you see is exquisitely designed and presented.

As shown in the picture, they provide four top reasons for you to buy their products. Attracting attention is the first step. They made a black area, put a brief introduction about the product, and used a thick title. Then, they use some beautiful illustrations to attract your interest to introduce the advantages of the product. Then, they want to get you to want to buy, which they can do by placing customer review quotes and product award certificates. In this case, they did so through several “What our Customers have to say” videos. The last thing to be achieved is to promote purchase action (Action); 37Signals’ website has a large number of action points (links that guide users to the next step) throughout the entire page. Because the page is very long, more action points are placed at the bottom of the page. Many action points.

Designed for content (Blog): Well Medicated
The situation is very different when designing blog pages. You don’t have to work hard to persuade your users to trust your product, your “product” is already displayed in front of them – that is, your blog content. All you have to do is make sure users can easily read your articles, explore the content, and connect with you and your blog.

Content (Content) should be the first part (one) of the blog that appears in front of readers. In the example below, a bold pink title grabs your attention and directs you directly to the content of the article. There is a preview image of a suitable size on the left, and on the right there are two or three paragraphs of article summary and a "continue reading" link. Of course, there is also the standard date and author information. This is a perfect example of what I consider “content design.” Attention can be directed to anything of interest. In this example, the beautiful RSS subscription button takes center stage. Not to mention that this focus makes readers feel connected to the content, but it also helps the site gain more subscriptions. Encouraging your readers to explore your content is as simple as adding a list of links to your latest or most popular articles on the sidebar, or making a drop-down menu, or organizing an efficient list of other content you want to push. It’s simple to do, yet effective enough, especially for bloggers. A blog is a private territory. Telling readers your contact information (Connect) through different channels can help them understand you, and it may also bring unexpected benefits.

Tips for Organizing Content
Of course you may come across times when you need to break the rules and do something unusual, but you can still follow these simple tips. To ensure good content structure and reading order.

Why are you designing?
As mentioned above, determine the goal of the design.
Use Grids
Grids help you get the most out of your pages.
Test element position
Examine the usability of the content from the visitor's perspective.
Remove all unnecessary elements
Unnecessary things should be eliminated, or at least not placed in conspicuous places
Balance of attention
Some things need to be simplified so that others Things shine brightly

The above is the content of high-quality web design and skills No. 4 (organization of elements). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!