Page 115


Designing for the Web ~ Layout

Chapter Twenty—Four

Breaking the grid

One of the biggest complaints from designers that I’ve heard in relation to grid—based design is that they can limit your creativity. I don’t agree, actually, but I can see how that viewpoint has arisen. Sticking to a rigid grid can seem stifling when compared to a free, creative, fluid design process many designers are comfortable with. At times, designing using a grid can feel more like mathematics or engineering. As designers, it’s our natural inclination to want to do things differently. Not to conform. And you know what? That’s okay. It’s okay to break free of the grid every now and then. In fact, I’d encourage it.

Should Everything Always Line Up? Before CSS was widely adopted by the browser manufacturers as a good thing, web designers used HTML tables to layout their web pages. At the time, this was good. It allowed web designers to create layouts in a visual language they understood — columns, rows, gutters, (or padding), and margins. But, we all know now that tables for layouts are a bad thing. Now, we use CSS to lay out our web sites. We can still use the same terminology to create our columns and rows, our gutters and margins. The only difference is, we’re using different HTML markup in the background. Of course, CSS uses the ‘box model’ to render the various elements such as padding, margins and content. This is good as well — boxes fit


Grid systems provide answers to compositional problems. They’re there to help. But sometimes, it’s useful — no, crucial — that we break free of the grid to provide emphasis, importance, visual interest, or increased usability. Sometimes breaking free of the grid is exactly the thing you should be doing. The trick is, knowing when to do it.

Breaking your own rules First thing to remember is that this is your grid system. You designed it to help you with a layout. It shouldn’t be a rigid tool that you can’t change. There are many times when I’m halfway through a project, for whatever reason, i realise that the grid system is not helping me. Either there is not enough flexibility in the columns, or I failed to grasp the complexity of the constraints of the project. Both of these things necessitate tweaking your grid system, or, in some cases, going back to the drawing board. And, you know what? That’s just fine. Don’t beat yourself up about it. Projects are fluid, and things sometimes don’t work out. So, change them.

Content Out Designing grids for print publications is similar to designing grids for the web. For newspapers, the grid design is abstracted from the content — a designer doesn’t know day—to—day what content is going to populate the grid. Instead of guessing, a designer needs to establish what content ‘types’ will populate the grid. These can range from simple lists, headings, and paragraphs through to more complex tables and illustrations.

well into our columns. But what happens when we want to break free of those boxes? Why would you want to do that?

licensed to Denis (1 user license)

Profile for anh7

Five simple steps designing for the web  

Designing for the web

Five simple steps designing for the web  

Designing for the web

Profile for anh7