What are the ways to highlight key content in a Web page?

I have special eye-catching skills! Today's good article is very worth reading, @ Fly House Rui uidesign students from contrast, color, fonts, white and so on to help students will be the most critical content presented, the end of the article also attached a particularly effective detection method, a glance can see your site is qualified, the weekend to recharge it.

　　Contrast: to cause interest

To better understand the role of contrast in web design, let's first explain what comparison is. Contrast is a kind of relationship between elements that occur in a relatively closed environment.

Just a slight adjustment to the size of the font, or changes to the color, will immediately change the visual effects of the entire interface. For example, when you see the following page, the lighter background is dark, and the first button of the eye-catching "try it free" in the homepage is immediately degraded visually, while the bottom "call us" is upgraded to the top button.

Let's take a look at how colors and sizes affect our interface vision in the image below. For example, many people look at the first glance and become obsolete, not only to see two of the circle. In fact, when they look at the two circles, they've got the signal "a big black circle and a little red round." In other words, the contrast relationship has been able to enter people's brain in the first time, forming a strong impression.

Business Tools: color, size and shape

When we start to design a page, we must not forget to use these powerful visual tools: color, size and space. Designer Alex Bigman believes that color and size are managing our visual attention, while space helps manage the relationships between visual elements.

　　Color

In short, bright colors can be highlighted in soft colours. This is obvious, and more importantly, in design, you can use this relationship to attract users ' attention. In addition, specific colors can also help create the overall atmosphere of the site (for example, the blue represents quiet, red and aggressive, etc.).

The above site uses the Z-mode in the visual system. In this mode, their use of color techniques is very ingenious. The water blue background immediately highlights the top goal button, the colors of the target buttons can be paired with the color "get active", hinting at the relevance of this series of buttons. The two large rectangular regions below are also linked by the similarity of the shapes, thus implying similarity between them.

　　Size

When it comes to size, what we usually say is the size of the page font. In the traditional reading mode from left to right, this is already a very powerful element. This means that a large font or a lower-right corner of a paragraph is usually the first place the reader reads. Therefore, the size of a larger play is an emphasis on the role.

In this connection, it is necessary to mention that the famous web design Bo Smashing magazine 50 of popular web interface survey, they found that these sites are usually the title font size 18~29px, and this matching article main font used 12~14PX, Only this survey is for English fonts, and Chinese fonts should be relatively large in size and easy to identify. Of course, this is only a general survey, and there is no absolute. However, you can learn more about the size ratio of the typesetting design knowledge.

Leave White

What is the goal of web design? To put it simply, create a beautiful page. So, you're going to stack all the pretty elements in the Web page? An uncontrolled increase in attraction elements is one of the design methods that quickly destroys yourself. It's important to have space in a Web page that you can breathe, which is what we always love to say about leaving the white. Reducing "visual noise" makes the page look more focused.

Usaura's founder, Dmitry, has pointed out that proper white-keeping can enhance the understanding of Web content. In 2004, some research groups surveyed that proper white-keeping could increase people's understanding of the content of the site by 20%. Although users do not directly to the white page to do something, but it can affect the user's satisfaction and experience. We can take a look at the page design of the figure below. In each subject content, retain a large number of white, the user's line of sight has been protected, so that the viewer focus on content, is the best experience.

　　Web Design Visual system testing: Fuzzy method

As I know, someone has proposed such a method to detect their own website. Especially when your site has a special emphasis on the content, very suitable. Place your home page in Photoshop and blur 5~10 pixels to determine if the content you want to emphasize can still attract attention.

The web site above has been tested with ambiguity, we will find that the registration buttons and product features are still very eye-catching. This arrangement of elements is reasonable for us.