Landy: Doing web design have grid is known to all, there are also vertical grid horizontal grid, the grid provides the content layout specifications, let the information organization more organized, we do design within the grid specifications, up and down the left and right sides, vertical center alignment, horizontal vertical, boxy looked at comfortable, information layout is clear and easy to read, the surface will be a problem, but the house is often a bit rigid, Lack of energy.
How to break through the “grid” of the page layout in the visual design, so that the design has more characteristics and distinctive, the following through a few tips to solve the rigid problem of the page layout.
extension
The ancient word “spring in the garden can not be closed, a red apricot out of the wall”, is this feeling, so that the main content is not limited to the page within the rules, the appropriate extension, across the two modules, not only can break the rules of the layout, but also can let the two modules have a certain sense of extension and connection.
Below: The picture of the computer is not limited to the blue Beijing area, but extended to the next module. In addition to covering up the rigid dividing line between the two modules, the user can more smoothly transition from area A to area B when reading without breaking the middle.
Below: The camera picture is in the middle of the two modules, extending from the green background module to the light gray module, removing the rigid dividing line in the middle of the module, a perfect transition scheme.
curve
In web design, it is inevitable that the content module is divided. This kind of straight lines will naturally make the picture rigid. We can solve this problem by changing the way of straight lines, such as curves and slashes.
Curves are used to achieve the purpose of segmenting modules and express the characteristics of data products.
Both the background and the main figure are tilted at a 12-degree Angle, which makes the picture come alive.
The transition
Of course, most of the time, we still cannot avoid the straight lines in the segmentation, and it is impossible to change all the straight lines into curves. At this time, we can make appropriate use of some elements to make a transition between modules.
△ Left and right split screen is one of the more popular layout methods in the recent year. This layout can more emphasize the color toneness of the brand and avoid the interference of the superposition of pictures and words in reading. The problem is the rigid dividing line in the middle
The yellow play icon provides a smooth transition between the line drawing on the left and the real picture on the right, and also serves as a finishing touch.
hidden
Some information may not be completely displayed, you can only show the most important part, put the unimportant outside the picture, moderate hiding, more conducive to highlight important information, but also can make the picture has a certain sense of extension, not rigid.
Some of the graphics are left out of the browser, making the picture more dramatic.
cascading
Graphics, pictures, text and other information are stacked, breaking the traditional left and right, up and down layout, increase the perspective and hierarchy of the picture.
▷ The characters of the subject are superimposed on the text, and the text does not affect the reading although it is hidden.
Instead of a dry interpretation of a picture, multiple elements are used to create layers, perspectives and scenes.
dislocation
Graphics, pictures, text and other information dislocation layout, not constrained by rules and regulations.
△ The picture and the background block dislocation layout, seems to be unfinished, in fact is the designer’s careful layout, so that the picture is full of dynamic, at the same time, the projection of the picture also makes this part of the information suddenly have a sense of layers.
The text, box and main picture are interwoven to make the pieces of information merge into a whole and give a visual sense of hierarchy.
▽ Four pictures of products are arranged in a wavy way. Although the horizontal alignment is slightly changed, the picture is filled with rhythm immediately.
conclusion
The above method is not just for breakthrough and breakthrough, is based on the premise of browsing experience, to make a more characteristic visual form, designers do not have to stick to the traditional layout, also do not have to be subject to the impact of similar product forms, can boldly try a variety of layout, make innovation and characteristics.
“Learn point, line and plane well,Web designNot bad”
- How to Improve visual Tension with “Points” in Graphic Design?
- “Real combat tutorial! Talk about the style and gameplay of plane forming the middle line”
- Basic Design Skills! Talk about point, Line and Plane in Plane Composition (Many cases)
- Talk about the style and play of “surface” in plane composition.
Address: Zhuanlan. Zhihu