/Culture/ Designing with grids
04/08/2008 | Filed under Discover > Culture
Do grids force rigid designs or unlock hidden creativity? Should designers take advantage of frameworks or build their grids from scratch? Craig Grannell asks the experts for their opinions
Classical design is driven by control: the desire to present information in a coherent manner that informs and stimulates. Underpinning design from its very beginnings has been the concept of the grid, a device that enables a designer to create a strong foundation and consistent structure for their work, regardless of the output medium. Now, the concept of grid-based design is taking hold on the web, and, like many previous trends, it has its share of cheerleaders and detractors.
A common language
The concept of designing to a grid makes some designers recoil in horror. The perception is that grids are restrictive, by their very nature ‘forcing’ designs to be constrained. However, those who regularly work with grids argue that this perception is wrong and that a well-constructed grid system merely enables a designer to be creative within a framework. Designer Mark Boulton, author of Five Simple Steps to Designing Grid Systems, believes that starting with a framework is far easier than starting with an entirely blank canvas. “Not only are some visual design problems already partly solved, such as placement and alignment, but a grid facilitates a common visual language across an entire project, not just for one page,” he argues.
Many designers claim that by creating such a foundation, there’s potential for more creativity, not less. As Dave Shea, driving force behind Bright Creative and CSS Zen Garden, explains, “Grids free up decisions that have to be made during the design process. Instead of eyeballing how wide a sidebar ought to be, an established grid structure determines that for you. This type of automatic decision-making imposes a certain amount of rigidity, true, but it can also allow focus to be applied elsewhere within a design, and that extra time could lead to more creative results.” Furthermore, because a grid determines many decisions regarding structure, variations on layout are made according to an underlying principle, rather than in an arbitrary manner. Elements work in relation to each other, rather than in isolation, meaning that even white space doesn’t feel like an empty void, since it’s in alignment with the solids.
From a design standpoint, use of a grid typically leads to a more ordered result, which appeals to users. A strong page structure is more likely to house information that’s easy to find, allowing users to develop familiarity with a project and rapidly understand where specific elements are found. As designer Olav Bjørkøy succinctly puts it, “Using conventions doesn’t mean the result will be boring, just that it will be easy to use.”
Online design
Although grids have historically been commonplace in print design, web designers have been slow to embrace the concept, despite the underlying theoretical principles – organisation, ease of accessing and navigating content, coherence, flexibility within a framework and so on – being similar and relevant. The biggest differences in grid-based design online are the same as any web design when compared to print: the lack of a set canvas size, potential elasticity and scalability of some or all elements, and varying end-user setups. Additionally, whereas horizontal grid lines are common in print, with elements aligning at fixed points down the page, this is harder to achieve online, due to variable content and browsers being able to scale text. Dave Shea explains: “Say you set up your rows as 150 pixels high, and oppose a 150 pixel-high image on the left with text on the right. The text might match up in your draft, but as soon as you tie in a CMS and start editing the text, that will stop being true very quickly. The result is dead space below the image if the text grows in length, or dead space below the text if it shrinks.” It’s impossible to guarantee a perpetual match in length, and so web designers rarely attempt it; because of this, their approach to website grids rarely goes beyond considering columns.
There are some exceptions. Richard Rutter’s work on Vertical Rhythm (see 24ways.org/2006/compose-to-a-vertical-rhythm) shows how to use an online version of a typographic baseline to ape the stricter vertical grid seen in print. However, this relies on ensuring that the vertical dimensions of all elements adhere to multiples of a specific value, and while it’s a good method of making sure type across all columns conforms to a common grid, it can be restrictive when imagery and other components are thrown into the mix.
Back to basics
Whether you’re aiming to tighten up your design work by using a grid to output columns that have a site-wide relationship, or going the whole hog and including horizontal grid lines, experts suggest working out a grid first on paper, including all measurements, before building it into any visuals. Grids can be constructed using ratios such as the golden section, or they can be simple multiples. “The key is to design the grid around the requirements of the project,” explains Boulton. “The system must allow maximum flexibility while retaining a degree of simplicity.” He also advocates the rule of thirds. Common in photography, the rule is easily adapted to grid design, simply by dividing the canvas into three, although this results in a uniform grid that can lack tension. That said, the thirds split can subsequently be sub-divided.
A very important consideration is that, unlike a magazine, websites are prone to regular change. An underlying grid must be flexible enough to deal with variations over time. “The grid informs the design, but should never restrict it,” says designer Simon Collison. “You must ask yourself how your grid will work if an element spans four columns instead of three, whether it can deal with seasonal and promotion-related amends to the layout, and what happens when part of a page demands a change of pace in the content.” Simon believes grids should work outside-in, like an onion skin. Depending on the requirements of a page, you should be able to ‘peel’ back the layers until the grid accommodates the purpose of the page. “Conceptually, this is less about columns and rows, and more about a series of boundaries,” he says. “A grid should always help you place your constants, but allow freedom to be creative with page-specific content.”
Magic numbers
Upon moving from abstracts to specific numbers, opinions vary. Each designer has an idea of what works best, and if you’re going to work with grids, this is something you’ll need to figure out for yourself. Bjørkøy typically works with 24 30-pixel-wide columns, placing a 10-pixel gutter between each. This is a good number, he argues, because it’s divisible by many integers, thereby providing flexibility in layout variation. Using this method, you also end up with an overall design width of 950 pixels, which fits comfortably within a 1,024x768 display. Others recommend using a 960-pixel width as a starting point – again because it’s divisible by plenty of numbers – and using gutters that have an odd pixel-width, because that allows for more visually pleasing placement of grid lines (you can’t place a one-pixel line at the centre of a 10-pixel gutter, but you can within a nine-pixel one).
It’s easy to get carried away, though. Khoi Vinh, design director at the New York Times, and a leading figure of grid-based web design, recommends honing things instead of heading to extremes. “When I see designers creating grids with many columns and using them in too fine-grained a manner, it doesn’t appeal to me,” he says. “I advocate as much simplicity as possible, but also lots of flexibility – it’s a delicate balance.” By way of example, Vinh’s Subtraction blog has a flexible layout that’s based on just eight columns.
You’ll note that widths have so far been referred to in pixels. Although many designers recommend fluid layouts in theory, the reality of browser rounding errors and fixed-pixel-width page components (notably images) means almost everyone works with fixed grid layouts. Regarding coding, opinion is similarly unanimous: keep things simple. “This is where tables were actually better at creating layouts than web standards,” says Boulton. “They spoke the language of a designer: columns and rows. We don’t yet have those tools for CSS, although they’re coming, so keep your top-level CSS containers for the major columns and nest elements to build out the sub-columns.” To ensure that your work conforms to your grid, he recommends Vinh’s method of overlaying a semi-transparent image of columns and gutters. This can be done in Photoshop (via a layer) and also on a work-in-progress site (via a CSS background).
As grids become increasingly popular, frameworks continue to appear, with two popular examples being YUI Grids Builder and Blueprint. These provide a shortcut for creating a grid-based layout, but many designers urge caution to anyone considering them.
The most common anti-framework argument is that they hide the process. While this is fine for savvy designers who need to rapidly prototype a grid-based layout, it’s less useful for those who don’t know how they’re constructed. For many projects, frameworks come up short when you try to make them fit a grid you’ve created from scratch. And if you don’t understand the underlying technology, there’s no way of coding your way out of a sticky situation. However, an alternate opinion is offered by Ellen Lupton, author of books such as Thinking With Type. “I’m a print designer who dabbles with the web,” she says, “and anything that makes CSS a more intuitive layout tool is much appreciated by designers and, ultimately, users.”
Another important criticism levelled at some frameworks relates to the code they spit out. Some have a grasp on semantics that’s scarcely better than the defunct FrontPage’s command of web standards. An exception is Bjørkøy’s Blueprint, a CSS framework that provides a flexible grid and typographic baseline, along with powerful scripts for customising your design. Integrating concepts championed by many of those mentioned here, Blueprint even garners praise from DIY stalwarts such as Boulton, who notes that “it’s been designed to solve a design problem, not a technical problem”.
Bjørkøy himself is understandably a fan of frameworks, claiming that they’re often well-documented, with tutorials and examples to get you started. A decent framework is also lightweight, making good use of repeating code, and although Blueprint itself offers presentation-oriented class values to define its elements, users with a modicum of CSS skills can easily rename them to something more descriptive. However, he does warn that frameworks shouldn’t be seen as the only way to implement grids, and that although they can be a good learning device, beginners would also do well to look at successful grid-based sites to see how they are constructed.
Make or break
Ultimately, the most flexible grid is one you design yourself, and although it’s possible to build well-constructed grid boilerplates, most need adjustments based on the requirements of each individual project. Boulton is currently working on editorially rich sites, which require a high level of differentiation per template while still retaining a common grid, and so these grids are almost always created from scratch. Shea and Vinh add that even with a flexible grid, it’s sometimes necessary to break it, to fit in advertising. “The IAB sizes are notoriously difficult to fit within a reasonable grid system,” complains Shea. “Sometimes you need to block off a chunk of the page that doesn’t conform to the grid and make peace with that, or simply design a grid around the ad in the first place.” Vinh favours the latter approach and even considers ads helpful; they serve as fixed constraints – and “constraints are the mother of design invention”.
Some claim there’s merit in being far more radical – breaking the grid entirely – and that due to tables (effectively a grid system) and CSS layouts, web designers have become entrenched in basing designs on overly tight underlying structures. “Breaking the grid can be compelling, but it’s also easy to abuse,” reckons CSS expert and web author Eric Meyer. “How many times have you hit a site where things are scattered around just for the sake of it? It’s like the ransom-note typography of the 1980s!” The most successful examples of breaking of the grid are more considered, using the device to draw the user’s attention. Boulton also reminds us that grids, like other designs, are not a fixed thing: “Rather than ‘break’ a grid, you should redesign it or modify it to new requirements,” he advises.
By taking on this advice, even the most radical of designs can be based on an underlying grid. The grid shouldn’t impact on how creative or exciting a design feels to a user: to them it merely ensures that content appears where they’re expecting it to. While grids aren’t a magic wand that makes your site beautiful and usable, they’re a step in the right direction. “There are many important techniques related to presenting content that haven’t yet made it into mainstream web design,” concludes Bjørkøy. “But we can finally say that grids are gaining lots of deserved momentum, bringing with them exciting concepts from print, such as using a baseline – and that can only be a good thing.”
Comments
Steven Grant / 06/08/2008 / 11:05 / http://www.g1media.co.uk
I'd like to see some more articles on grid systems in the mag. I can see both sides of the argument. I've been using the 960.gs website in Photoshop/Fireworks and is very useful, without using any of the CSS styles.
Skip / 08/08/2008 / 19:44 / http://www.skip4dpw.com/
I think that there are benefits to both approaches and that people should not bash the other because it is not their preferred design method. Grids kind of remind me of clematis growing up treacles. Once the clematis is well developed, the trellis (grid) it is growing on can be totally obscured.
Paul / 11/08/2008 / 14:53 / http://www.theawristocrat.com/
Do you have any psd samples I could download and try. That would be great :)
Cheers
mike / 17/08/2008 / 17:00 / http://www.flashist.co.uk
Grids are really useful, i find good designers normally use grids even if they arent always aware of the concepts, its kind of common sense really. Anyone whos interested should check out a book called making and breaking the grid which i read recently, its very interesting and in depth
simon / 25/09/2008 / 12:41 / http://.simonoliver.co.uk
Grids can save you a lot of time when it comes to layout. Take it from someone who did'nt use them for 10 years.
