The grid based layout has been around for a several years. It has established itself as one of the most foremost – if not the top – layouts in web design. Print media, like newspapers and magazines, that historically have always had a grid based design, are the precursors and a major influence on grid based web design. The same design principles that apply to print design apply to web design.
Here are a few examples of some great grid based layout designs.
The grid based layout is a responsive layout, usually with 12 columns which can adjust depending on the size of the browser screen. Web designers appreciate it for its ease of use and ability to speed up the work flow. These days having a responsive web design is a must, not an option. Grid based layouts have a lot going for them and that is why they continue to be popular today:
- It provides a framework to structure content, which saves time;
- From a viewer point of view the layout is a familiar design, intuitive, easy to follow;
- From a design point of view the layout is a flexible one, making it easy to update content and make changes without disrupting the whole design.
Perhaps the biggest criticism for a grid based layout is that it is restrictive. Breaking out of the grid or wanting a more elastic and flexible layout is hard to do.
However the pros often outweigh the cons when it comes to a grid based design, especially in terms of a user scanning and finding information quickly. Grid designs are user-friendly so while grids enforce restrictions, creative people find a way to be creative with those restrictions.
The broken grid or asymmetrical layout is a trending innovation on the grid based layout. With broken grids, there is a lot of layering. The asymmetry of the design keeps things interesting, while the overlap and layering of elements creates a sense of unity. Other design innovations in the broken grid layout include the use of diagonals, moving content off-center for a dramatic use of white space, arranging the boxes in an off-grid grid.
The challenge of broken grid layout design is to achieve balance and harmony with asymmetry. Lights/darks, color balance, size/shape, all need to work together in a cohesive way. The other challenge is to keep the design looking good at any scale while making it fluid and responsive. Still, this design trend is really interesting and there are a lot of great examples of broken grid layout design. It can engage users in a fresh way while still keeping the flow and readability user-friendly. This is a great design technique to try for your next website design.