When to break out of a grid in webdesign?

Question

Grid systems like the 960 grid and BluePrint can be useful to place the main elements for a website in a mockup: header, slider, content blocks, sidebar, footer etc. But do you use the same grid system to place the content within each of these elements?

I find that often quite difficult. For example I have a sidebar covering 3 columns for a table of 5 columns. I could actually create a mini-grid for the sidebar only.

I haven´t found a resource that answers this question specifically, so I´m curious to hear how you do this and if there are any "best practices" I´m not aware of.

Cheers!

Answer 1

You can break out of it any time you want.

Keep in mind, a grid system serves as a guide, but not a hard rule. When you design a site, the grids should serve the content, not the other way around. 960grid is popular because the total width is divisible by so many numbers.

Before you get to the layout design, I recommend coming up with a good flow of the site content, and create some robust IA. Then after that point, see if any existing grid systems happen to fit your content flow nicely. If not, create your own grid.

Personally, I don't use any of the existing CSS grid templates. I find the fixed gutter width and padding too limiting. If I have to change them by a few pixels, I'd end up redoing all the calculations. Also their CSS tend to be quite bloated, and I end up not using most of them.

Answer 2

Myself and our designers use to design by the 960 grid, or create our own grid, to a greater width of 992px (to fit a res of 1024 x 768).

The web has progressed so much that our team now break outside these restrictive grids and are using technologies that expand and shrink to fill small to large resolutions. Our designers work closely with our talented developers and programmers to create advanced interfaces where possible.

That said, we still always set up our designs with a grid. I use Photoshop's grid and set its grid prefs to something like;

• Gridline Every 24px with 3 Subdivisions ... or ..
• Gridline Every 28px with 4 Subdivisions.

Then, using Photoshop's shapes, I setup a grid of columns (like the downloadable asset at 960 Grid), where each column is a division of the grid in my Photoshop prefs I've set. This column grid sits on the top layer in my file and I lock it, set it to transparent and toggle hide and reveal as I design, to use as a guide for columns. I never start a major content block/element inside a column - instead, every element aligns with a column.

I also work to a baseline grid theory, meaning each line of text whether heading, paragraph, bullet, button text etc are all using leading that relates back to my grid system and all text lies on the baseline grid. For example, if my Photoshop grid is set to Gridline Every 24px with 3 Subdivisions, then my leading is a division of 8px or even 24px... 24, 48, 96 etc - increasing as my text styles increase for headings etc.

This makes for strong design! Hope this helps.

Answer 3

It's a very good question. I would personaly say break out when the design needs it. Grids are great for rapid prototyping and good for a nice backbone to any website but don't let the grid be the website. The many CSS gallery websites on the web are filled with thousands of sites all stuck tightly onto grids following pretty much the same layout. By breaking out of the grid, even a little, you have already set yourself apart from the pack.

A couple of quotes that might help.

"It's much more effective to break out of the grid only on certain pages or only with certain elements, rather than have everything positioned without any structure – that would make for a messy, amateurish effect. (And even if someone doesn't physically place the guides on the page, most of those who work with layouts often enough have some sort of a structure in place, without the need of the guides.)" - http://www.ideastylist.com/ask-designer/ask-a-designer-breaking-the-rules

"Once the grid is established, it is up to the designer when and how to break out of it. This doesn’t mean the grid system will be completely ignored. Instead, elements may cross over from column to column, extend to the end of the page, or extend onto adjacent pages. Breaking out of the grid can lead to the most interesting page designs." - Jim Krause. “Design Basics Index.” HOW Design Books, 2004.

And, not a very in-depth article but none the less covers breaking out of the grid - http://www.alistapart.com/articles/outsidethegrid

Answer 4

I personally use 960.gs and I love it. I only use the grid system to layout my pages when it comes to areas like header, slider, content blocks, sidebar, footer etc. So I would say you are using the right approach.

Now not to say either way is right or wrong, but work does go much faster this way.