The chart rate of layout design in web design

Source: Internet
Author: User

In the page design, in addition to the text, usually add pictures or illustrations and other visual intuitive content. The ratio between the area of these visual elements and the overall page is the chart rate.

To put it simply, the chart rate is the percentage of the picture area in the page. This ratio of text to pictures can have a huge impact on the overall effect of the page and the readability of its content.

The difference between the height of the chart: the same design style, the plate rate of the page will give people a lively and active feeling, conversely, the low plate rate of the page will convey a calm, quiet effect. Improve the chart rate can be active layout, optimize the layout of the visual. But there is no text in the layout will appear empty, but will weaken the layout of the visual degree.

If the overall page is all pictures, the chart rate is 100%. Conversely, if the page is all text, the chart rate is 0%.

Sometimes in the absence of image material, but because the nature of the page needs, the page needs to show a high rate of the effect of the chart. So, how do you design it?

I. Through the adjustment of the page background, get and improve the chart rate similar effect, so as to change the appearance of the visual effects of the page.

Two. If the material image size is small, but do not want to let the chart rate lower. The page structure can be organized by the extension of the color block (similar color or complementary color) or the repetition of the image to avoid the shortage of the material resources. The use of the same size with the image of the color block to maintain the unity and simplicity of the interface, and such a layout will create an illusion, so that users feel the box as a whole depends on a picture. And the original small size of the material map in the background color against the backdrop also seems to become a very large picture. This repetitive arrangement, adding changes to the method effectively avoids the monotony and boredom of the page.

Three. The layout of the strong rhythm design can also indirectly optimize the chart of the page rate. Reasonable use of the rhythm of typesetting and jump rate (text and picture jump rate, refers to the layout of the largest title and the largest figure and the smallest body font and picture size ratio). In the layout, the jump rate of the picture or the text can obtain the high attention, lets the uninteresting layout be energetic. In addition, the layout of the rich, can also distinguish between the primary and secondary information, so that browsing easier, and improve the layout of the visual degree.

Four. Increasing the graphics on the page can also improve the problem of low chart rate. Whether it is the number, serial number, angle, icon, or even the visual processing after the title text, can improve the visual degree of the page, and to leave the user with active and vivid impression. At the same time, graphics as a more intuitive way to convey information, but also to enable people to quickly obtain information, from the efficiency of the text expressed in the progressive scan.


Icons are designed to make browsing and interactive operations more convenient. The graph and the article collocation can reduce the reading fatigue feeling, also enhances the typesetting design rhythm.


Digital visual processing can also play a similar decorative effect of illustrations, become the visual elements on the page, while enhancing the design sense of the page.

  Serial number

The serial number in the page has the function of guiding the reading order, also can act as the decorative function of the picture to the page. In addition, by the number of outstanding design, you can make the layout more clear and flexible. Even if the layout is irregular, you can find the track of reading by a clear serial number.

 Handling of title text

If there are no pictures or illustrations on the page, the processing of the text and its color can also make it similar to the visual elements. The following example, for the title text are processed visually, played a whole page decorative effect. The use of this type of text size, color, shape of the flexible application to highlight the focus of the page, to avoid the monotonous sense of vision.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.