A grid system can be a designer’s best friend! That’s because the grid system works in the background of page layout, making sure that all content is well positioned. The grid system applies to all forms of design- posters, banners, etc., and you’ll most easily notice grids in action when you see any newspaper since the text is already set up on grids/columns. One grid is versatile and allows for many layouts, as sections are resized.
The Super Adaptive Pinterest!
Pinterest is an awesome example of a grid done right. It flexes depending on the content that it is fed. For example, behold this user’s wall. Note the strict width, but completely flexible height, exemplified by contrasting the Stay Puft Marshmallow Man vs. Godzilla and the Super Hero Manatees.
Holy Horizontal Scroll, Batman!
Here’s a cool example of a site that sticks to the grid, but not strictly. It shows how things can be mixed up with the images going past the vertical line and varied layouts for each piece. Check it out here!
Grids, Schmids
Once the concepts are mastered, one can intentionally break it to create eye-catching focal points. Now, before you decide that you’ve mastered the grid and want to break the grid like so many Kit Kats, slow down, because if you rush into it, your site may end up like this:
The grid is like glass blowing. A slow and safe adherence to the rules will create a well formed, pleasing design. If you decide, instead, to go all big, bad wolf on it, you’ll have a big, bad, hot mess. Seriously, a scalding hot mess that will leave a bad impression on anyone unfortunate enough to get in the way. What you can do, when feeling adventurous, is give your work just a little extra character here and there to make it unique. This way people will talk about the interesting quirks, rather than the 3rd degree burns.
So, take heed my friends. The grid can be your greatest companion, and if you are the big ole risk taker you think you are, you better have the experience and GUTS to break the grid – or else it’s all gonna blow up in your face!