What’s the influence of layout rate and whiteness rate on the temperament of the screen? Here’s tips for better design, I hope everyone likes it!

#1. What is the layout rate?

We all know that there must be a concept of the type page in a layout. What is the type page? The type page is to remove the remaining areas of the head, the foot, the left, and right margins. Type page is also the space for the content of our page. The area of the gray block in the image below is the core of this page.

layout rateNow we know the type page, then what is the layout rate? The layout rate is the proportion of the page occupied by the type page, the popular one is the utilization of the layout.

layout rate 2In the left picture above, the area of the core is very large, the remaining white space is small, and the utilization rate of the layout is high, so the layout rate is high. The size of the right picture of the type page is small, the layout utilization is lower than the left image, so the layout rate is lower.

There are also concepts of full and empty pages in the layout. As shown in the above figure, there is no margin on the full page. At this time, the layout is the entire layout, and the layout utilization is 100%. The empty page is 0% of the layout utilization. The layout rate from full to empty is a decreasing relationship.

#2. The influence of layout rate on the temperament of the picture

After talking about the concept of layout rate, let’s talk about the influence of layout rate on the temperament of the picture.

Generally speaking, the higher the layout rate, the greater the visual tension, and the more lively the layout; on the contrary, the smaller the layout rate, the more elegant and quiet the impression will be, and the layout will be more stylish.

influence of layout rate on the temperament of the pictureThe posters with high layout rates in the above picture are more lively than the low layout rates; the lower layout rates are more elegant.

influence of layout rate on the temperament of the picture 2It’s the same in the book. Like the picture above, the same content and pictures, but the layout utilization are different, we can find that the works on the right side of the lower layout rate are quieter and more elegant.

The level of the layout rate can affect the temperament of the layout, so we should also assign the appropriate layout rate according to the temperament of the project. For example, the elegant temperament project we will use the low rate layout if the high page rate is obviously contrary to the temperament of the project itself.

#3. The whiteness rate

After we finished the layout rate, let’s talk about white space. The concept of whiteness is well understood. The white space mentioned here refers to the negative space of the page.

Space after the content is removed from the page is the negative space, such as the following page.

whiteness rateThe gray blocks in the figure represent the contents of the image and text information. After removing these image and texts, other spaces on the page can be regarded as negative space, that is, whiteness. Of course, the white space is not necessarily white. All the space after removing the content of the page is negative space. As shown in the case on the right side of the figure above, the black part is the whiteness of this page.

The amount of negative space is how much whiteness is left. The amount of whiteness we can use to express the whiteness rate, as shown above, the negative space is small, the whiteness is definitely less, and the whiteness rate is low.

The whiteness rate is the amount of white space left in the layout. In fact, it is similar to the concept of layout rate, as follows.

whiteness rate 2The empty page has the most whiteness, and the full page has the least whiteness. Of course, this is not absolute. Although some works are full, space is vast, such as the sky or something, you can treat it as a whiteness.

#4. The impact of whiteness on the screen

The above-mentioned whiteness rate has a certain correlation with the layout rate, so their influence on the temperament of the picture is exactly the same. We can first look at several works with low whiteness and high whiteness.

impact of whiteness on the screen

Through these works, we can see that the content is richer with less whiteness, the layout is more vitality, more lively, and the affinity is stronger. More whiteness, more elegant, quieter and, more style and quality, but a weaker affinity.There is an ocean of tools you can use for typography to help you with your project, like Fotor, a powerful editing tool.

Sum up

Both the layout rate and the whiteness rate can affect the temperament of the layout. When we do the project or the editing, we will analyze the specific problems and set the layout rate and the whiteness rate according to the project temperament.