Today, grids are the foundation of almost all web design. These invisible lines create a sense of space rhythm and visual smoothness, they are the basis for making the webpage more harmonious.
However, the purpose of the grid is to help you create a good design. When you start to adapt to the existence of the grid, don't be bound by it. You don't have to be 100% constrained by the grid. Occasionally breaking the design of the grid may make your design more eye-catching. However, it is skillful to break the grid and maintain the coordination of the web page, and not any "breaking" design is good. Today, let's talk about this.
Understanding the grid system
To break the grid, you must first understand the grid system. No matter what style of grid you use, it is the "infrastructure" in your web design process. It helps you determine how elements are placed and helps you ensure that different controls are stacked on the page without appearing. Unexpectedly, it helps to keep the page organized.
In fact, designers in different fields have been using grids. Take a look at newspapers and books. Before web designers started using grids, they were already playing with the system.
There are many things a grid can do:
Keep content organized. Under the grid system, the elements are arranged clearly from left to right and from top to bottom to keep the layout consistent.
Make design more efficient, because regular grids make the arrangement of various UI elements regular.
· Make different pages of the web page look consistent · Let the spacing between elements be the same and keep the whole design tidy Since the grid has so many advantages, why break the grid?
It is not difficult to understand that the grid creates a consistent and coordinated look and feel, and the elements that break the grid naturally appear more "glare", which is undoubtedly an emphasis. There are many ways to make this element break the grid and match it with other elements.
Placing different elements on different layers ensures that some elements extend beyond the grid, while others remain consistent.
Due to the popularity of Material Design, many web pages today have begun to use layers to manage different elements in a web page. Different elements move in different layers with different rules, overlap each other and distinguish each other, and operate more efficiently.
Cmmnty on this page has lines and texts overlapping with pictures, with the use of misplaced typography to create an unbalanced effect. You will see traces of the grid throughout the design, and the visual imbalance at this time will be quite conspicuous.
Purposeful use of blank space
To emphasize an element, white space is always the most useful means. Only by creating white space in the right place can the surrounding elements stand out.
We often think that on the mobile terminal layout, a single-column or single-row layout is more reasonable, but a multi-row and column layout is actually feasible. It is important to create a more integrated visual design.
For example, when SAS uses a blank space to break the traditional layout, the text is left-aligned across different blocks, and the icon is centered. This design makes these grid-breaking elements more eye-catching and attracts users' attention. The use of white space creates the opportunity to be "attention" to these elements.
Put elements in a container
When elements are contained in other containers in some form, even if the grid system is destroyed, it often gives a sense of integrity. Just like the web page above, the grid-broken text is placed in a colored background, and this is how it works.
This kind of element placed in a container often gives people an interrelated feeling even if it does not follow the grid's specifications.
This inclusion in the container also breaks the design of the grid system, which is a rather interesting means. Many containers are designed to be completely symmetrical, but the elements are not, which in a sense breaks the original monotonous design.
Adjust specific elements
The best way to break the grid is to do this with the help of details. But this doesn't mean that you have to add details everywhere. It's the same as leaving blank space. If the website is full of details that break through the grid, then the website will completely fall into chaos. Therefore, it is more effective to select specific elements for adjustment.
Dotted elements are a very good choice. For example, attach a bold and eye-catching color to an element that needs to be emphasized, adjust its position, or fine-tune its position to make it break through the grid system.
The Land Of Nod website uses longer parallelograms to "break the grid". First of all, this shape is not common. The striking red and its semi-superimposed position make it stand out from the entire design.
Make it move
It's also a good idea to use dynamic effects to separate elements from the grid system. Same as the previous one, when a single element moves, the effect will be very obvious, and it can even make the overall grid system not so obvious.
Of course, the method used by Trippeo's website is more radical: it keeps the graphic position of the middle billing unchanged, and all elements of the background move with it. The entire webpage incorporates multiple technologies such as video background, grid system and parallax scrolling. It is definitely a high degree of fusion of whimsy and technology.
Create the illusion of breaking the grid
Sometimes breaking the grid doesn't require you to actually "break" it. You can create "broken" effects with interesting shapes and asymmetrical combinations in the grid system.
The advantage of not breaking the grid is that you still make full use of the advantages of the grid system, and at the same time you can do something different. The best way is to design with odd rows and columns, and add incomplete or insufficient element filling to create the effect of errors, omissions, lacks, and asymmetry.
Just like the website Marche Notre Dame above, although it looks asymmetric, the content in it still follows the grid layout.
Conclusion Breaking the grid design is not easy to achieve, because poor control often messes up the entire design. How to join the whimsy without breaking the whole project? There is always nothing wrong with practicing more.