About Using Grids in your Designs
Learning and understanding how to build a layout is one of the hardest parts of visual design to master. Many designers have trouble grasping the concept of alignment and how to use grids to make their designs balanced. The reason that grids work so well is because they help you divide content into discrete, manageable sections. This makes your content more flexible and organized. It also makes your content easier to view and experience. We will take a look at grids. You’ll see how they are used to help make layouts quicker to build and more enjoyable to view.
Types of Grids
Many designers use a grid as the base for every one of their designs. Some will use a 12-column grid, some will use a 16-column grid, some will use a 24-column grid, and others will use anything in between. The point isn’t so much the type of grid that you use, but the fact that you use one. Grids in web design are very common, and with the implementation of responsive web design, grids have become even more important than ever.
When using a grid, I prefer to use a 12 column layout. The width of each column depends on the medium (such as print or web), and the overall width of what I am designing. If I am designing something with a lot of smaller elements, I may switch to a 24-column grid. The gutter width is determined by the content itself and how much space that might be needed between each design element. If I am building a masonry-type layout, then I may only have a 1-2px gutter width. It really just depends on the application.
The reason I like 12 or 24column grids is because they offer a lot of different choices for your layout. You can choose from 1 block of 24-column wide content, 2 blocks of 12-column wide content, 3 blocks of 8 column content, 4 blocks of 6-column content, and so on. You can see this flexibility in the example shown above. This makes your design very malleable, because you can mix and match different combinations as well. You aren’t stuck with only using even and symmetrical layouts. Looking at the example below; you can mix and match different elements for a more dynamic look while still being well structured.
More About Grids…
