Repetition, contrast, alignment and intimacy are the four major principles in layout design. Various layout forms and rules are derived based on these four major principles, and mastering these guiding design principles , can help us achieve the design goals faster and better in a short period of time
In this issue, we will explain to you one of the four major principles - the contrast principle
What is the contrast principle "Contrast "Emphasize the differences between things. When designing, you should avoid visual elements on the page that are too similar. If the elements are meant to be different, it is necessary to increase the contrast to ensure that the contrast is obvious and the page is clear
We can find contrast everywhere in life, and the forms of contrast are also diverse: people are used to contrast in life, and if there is no contrast in the picture, it will feel monotonous
Contrast can highlight the key points, make the layout have a sense of hierarchy, and display the key points of the content in a more organized manner. The clearer the contrast relationship, the stronger the visual effect
With contrast, the picture will be lively and with clear priorities
p>
The role of contrast 1
Highlight the key points. Appropriate contrast can well create the focus (the main body of the picture). In the layout, visual differences can be effectively used through the contrast between the constituent elements. Drawing the reader's attention to the main part of the picture and improving the attention effect of the layout are the top priorities of layout design
Using sharp contrast can form a strong contrast effect and achieve the first Allow readers to capture the main subject and key points at once
This case mainly uses color contrast. The main character and text are extremely conspicuous in the layout, because it creates a strong difference compared with the surrounding visual elements.
2
Enriching the hierarchical contrast of images is the most effective way to establish an organized hierarchical structure in the layout
Strong contrast can form a visual gap and establish good information Layers, enhance the rhythm and liveliness of the layout
3
Break the rigidity and liveliness. The form of contrast can avoid the monotony and plainness of the layout, make the layout more interesting, and make the layout more interesting. The layout is more lively and vivid, creating a good visual experience and stimulating readers' interest in reading and watching
Use direction, size and color to create contrast, making the hierarchy of the title and text clearer, while adding texture contrast Create a three-dimensional sense for the subject, making the layout more lively and eye-catching
Contrast of text layout. In theory, all changeable characteristics of elements can form contrast. This issue only gives examples of some commonly used text layout comparisons. Form
1
Size contrast achieves the effect of creating visual conflict through the difference between the volumes of visual elements
The size of the visual elements forms a The division of levels, the larger the volume, the higher the level and the more prominent it will be
The information that needs to be presented on the layout will generally be divided into titles, subtitles, and text, as well as key information and Non-key information
Enlarge important information and reduce secondary information to form a size contrast
The advantage of this is that it can reduce the interference of secondary information on important information, so that It is easier to be accepted, and the size contrast can also make the layout richer
2
Thick fonts are heavier than thick fonts, and thin fonts are lighter. The changes in font thickness form a Contrast between light and heavy
You can use thicker fonts for main information and thinner fonts for secondary information. Use this method to create visual streamlines and guide the audience to read the information
The above case , only one font is used, Siyuan Blackbody, but using different font sizes and thickness comparisons can also distinguish the primary and secondary levels of information
3
If the font comparison There is a lot of information in the layout, but if you only use one font, it may look monotonous. Using fonts for comparison can not only distinguish different information, but also enrich the layout
Different fonts There are different temperaments, and the comparison of fonts is the collision of different temperaments
When comparing fonts, you should also consider deeply: whether the choice of fonts matches the main content
, how much contrast can the font style create, etc.
4
Color contrast The use of color contrast can effectively highlight key points, distinguish information, and can also play a role in decorating the picture
The large area of ??background color and the small amount of main color form a strong contrast effect, which can directly guide readers to the text information and the protagonist
High brightness and high saturation yellow The main text and the low-brightness, cold black background form a strong contrast, making the layout full of vitality and effectively highlighting the text information
5
The directional contrast separates the text information in the layout Arranging them in different directions can effectively increase the sense of dynamics and space in the layout.
6
Density Contrast Arranging large sections of text densely can make the text form a blocky, visually pleasing More compact
The remaining large area can be used to display the theme of the picture. Such changes in density can not only form a good reading rhythm, but also strengthen the theme
7
Texture contrast Texture refers to the texture structure of the surface of an object. Different materials have different tactile and visual manifestations
Add texture to text or background, using roughness and delicacy, simplicity and gorgeousness, and thickness Contrasted with lightness and thinness, it can increase the richness and expressiveness of the picture
The main body of the calligraphy character "Ye" has the dynamic feeling of handwriting and has texture itself. The texture of ink and wash is further emphasized the effect
It can well distinguish the primary and secondary relationship of text information, and also increases the visual beauty and artistic expression of the picture
8
The contrast between dynamic and static is often diffused in layout design. The arrangement of graphics or text that has a sense of movement or fluidity is called "dynamic"; and the arrangement of graphics or text that is horizontal or vertical and stable is called "quiet"
"Dynamic" means The entire layout is full of vitality and attracts higher attention, while "quiet" gives the layout a stable effect. Combining the two can produce a certain sense of spatial hierarchy
The movie poster "Shadow" is wild and wild The reverse-white calligraphy characters in the background have a strong sense of movement, which is in sharp contrast to the tranquility of the protagonist. The combination of yin and yang, hardness and softness reflects the strong classical Chinese aesthetics
9
Space Contrastive layout design is not limited to levels on a plane, but can also allow elements to have some front-to-back relationships
The text and images are overlaid or arranged in front and back to make the layout appear hierarchical and make the layout more vivid. Lively
The contrast between virtual and real can also create spatial hierarchy. Using a blurred background to highlight the foreground can not only highlight key information, but also better create a sense of atmosphere, scene and three-dimensionality
Use the contrast between far and near to reflect the spatial relationship. According to the principle of perspective, the near is bigger and the far is smaller, which can create a sense of hierarchy in the near shot, middle shot and distant shot
Case Demonstration 1 In order to let everyone deepen their understanding of " Understand the "Principle of Contrast", extract the main content of this issue's articles as original data, and use the "Principle of Contrast" to conduct design demonstrations
Use the "Principle of Intimacy" to group information and adjust distance; Follow the "Alignment Principle"; use the "Contrast Principle" to prioritize the information level, and add contrast in text size and thickness; use the "Repetition Principle" to set text at the same level to the same text style to increase organization and strengthen unity.