Visual focus-analyzing geometric circles in web design

Source: Internet
Author: User
Keywords Focus web design we anatomy application

Why your design is flat, why not attract other people's eyeballs, here first to say what is the focus (also can be called Interest Center or Visual center), I think the focus can be more simple and accurate elaboration. Some people use the popular method to interpret the focus, in the design of the page of the most eye-catching place, the focus of sight on the intersection of places, this position is called focus, in the daily life we use the camera on the face of people, it is also in the acquisition of a focus. In Web design, guide users to focus on the screen you want him to focus on, which will give you the focus and highlights of the design.

How visual focus is handled

People use visual access to the information in the environment, to your attention will be blurred around, you focus on the center point is the clearest. The first, visual appearance of such a state is that there is no focus on sight, the overall fuzzy, is a square vision frame. The second slides the third, the two flowers in the figure is the most beautiful bright spot, beautiful things will attract attention, you will notice the last one or the next one, attention to any one flower, the eye focus will be the shape of the circle to the outside gradually blurred, the most central point is the focus. As the elements of the design, the circle naturally adapts to the visual perception.

Visual strength

Beauty can be independent to become a visual focus, but when we add a circular border to the beauty, the visual focus shifted to the round border included to the beauty, and finally the circle filled, the visual focus shifted to fill the color of the rounded beauty.

Below I did a little contrast picture

Fig. 1 The overall picture is flat, the character arranges without the level, the vision gives the person to feel very disperses.

Figure 2 by adding a circular background box, the graphic you want to express first enters the user's eye.

Figure 3 Not only add a round background box, and then distinguish the size of the figure, primary and secondary, focus, the screen active stereo.

Geometric comparisons

As we can see in the above figure, the square is over to the circle, the circle is made up of extremely small corners, the shape becomes more and more interesting in the change, the circle has smooth and smooth edges in the geometry, and the circle is more relaxed and enjoyable. Design needs to be fun, we can use the smooth lines of graphics to make the page active.

Instance effects are compared

In this page, the circle provoked the beam, supporting the entire page, the character smiley picture combination of the circle surrounded the bottle, mapped the drink to bring us happiness. The circle not only strengthens the focus, but also strengthens the level of the page, so that the page will not be thin, no strength.

Although the same with the box to focus the object, the same as the overall picture of the circular frame stiff, rigid, lack of active feeling.

The rhythmic design, the coherent round element combination, the main body of the website has the rhythm shape, has created the website lively atmosphere. The combined structure of the square makes the website a lot more rigorous.

Circular on the price of the label, so that users of the temptation to more interested in the price, very good to create a commodity atmosphere.

Round elements and other geometric figures, with sleek features, people feel relaxed, pleasant, reasonable use will improve the level of the page, so that focus more prominent, enhance the visual sense can also create an active atmosphere. We are constantly trying to make the page look beautiful and lively, create a dynamic page, so that the site gives people the visual feeling of good feelings, grasp the focus of the design, so that the effective communication of the page information, the use of interesting circles to design the page is a very effective way to design.

Source: http://www.xmued.com/?p=1122

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.