by anthony on 12/03/10 at 3:56 pm
Page layout is an important aspect of web design. A popular approach to designing page layouts is to use a grid system. Grid systems are generally used at the web development or visual design stage of the design process. However, because the purpose of a grid system is to help guide the placement, sizing, order, repetition and alignment of elements, using it for wireframes at the information architecture stage is not only beneficial, but necessary for designers to create a consistent and balanced page layout.
Creating your grid
Before you can design your page layout, the first step is to create your grid. You might assume this takes a long time, but it’s actually pretty easy. You only need to create the grid once. Once it’s created you can reuse the grid so that the information architecture on your wireframe stays consistent on each page.
Problems with the 960 grid system
There’s a lot of hype surrounding the 960 grid system. Personally, I think the use of 12 columns for a grid is perfect. However, the two major problems I have with the 960 grid system is that the gutters are too wide and the content width isn’t actually 960 pixels.
The gutters are 20 pixels wide, which is far too wide for a margin. It’s so wide that when you place two elements on a column next to each other the space between them is enough to make it a visual barrier that users will fixate on. The purpose of a margin is to visually separate elements in a way that does not induce visual fixations. A thinner gutter can give you better margins that meet this purpose.
The content width of the 960 grid system is actually 940 pixels. The reason it’s called 960 is because there’s an extra gutter added to the ends of the content width making it 960 pixels wide. That extra gutter at the end is useless and redundant. This is because the purpose of using a grid is to line our content up with the column edges, not the margin spacing. Therefore, a good grid should start and end with columns. A 940 pixel width is also far too small for the screen resolutions of today’s computers. What we need is a grid that’s smaller in gutter width and wider in content width.
Why the 970 grid system is best
The 970 grid system is perfect for what we need. With this grid, the gutters are 14 pixels wide. This is the ideal width for margin spacing. It’s not too wide and not too thin. It’s just right. Also, the content width is actually 970 pixels, which is ideal for screen resolutions 1024×768 and up. You won’t find any extra margin spacing at the ends of the grid. The grid starts with a column and ends with a column. It still uses 12 columns like the 960 grid system, but the columns are now 68 pixels wide.
The specifications for the 970 pixel grid are:
- 12 columns
- 68 pixels column width
- 14 pixels gutter width
When you put it all together, you get a grid that looks like (click image for actual size):
Placing content boxes on your grid
Once you’ve created your 970 grid, it’s time to fill it with content boxes. When you’re at the information architecture stage of the process you should already have an understanding of the content that will go on your website. The goal to wireframing an effective information architecture is to focus on the placement, sizing and order of content, and not to focus on the look and feel. This is where content boxes come in handy.
How to use content boxes
Content boxes are simply square and rectangular blocks stretched over the grid. When you use content boxes, make sure you label them with the type of content that will go in each content box. Also, make sure that your content boxes start and end on a column. It’s fine to go over gutters, but avoid landing on them. Use the gutters as margins for your content boxes.
What’s efficient about the 970 grid is that it uses 12 columns. With 12 columns you can line your content boxes up in rows of 2, 3, 4 or 6. This gives you a flexible grid to use for a dynamic layout. You can even combine multiple rows with a different number of content boxes together and the content boxes will always stay balanced with each other. The 970 grid gives you choice and flexibility for designing your page layout.
Placing navigations on your grid
No matter what kind of navigation you want to use, the 970 grid makes it easy to lay out a variety of navigations. Adding a column navigation is easy, as well as adding a top navigation. Whatever navigation you choose to use, the grid can align your navigation with your text, images and other content. This gives your overall site a balanced and consistent look.
Placing text and images on your grid
The 970 grid is also useful for sizing and placing text and images. With text you’ll want to use margins that are wider than 14 pixels. Wider margins around text decreases paragraph lengths and gives users more whitespace around text to make it easier to read. However wide you want your text margins, the grid can accommodate your needs. Using the grid can also help you figure out the right sizes for your images. By placing your images next to your text on the grid you can find the ideal size that will make your text and images compliment each other beautifully.
When you size your and place your text and images, it’s not essential for each element to line up flush with a column. What’s essential is that each row lines up with a column. In other words, when lining things up the gestalt is most important. By following this, you’ll keep your layout consistent from one page to the next.
Wireframes are the foundation
Using the 970 grid system to wireframe can have a huge impact on your site’s information architecture. It makes wireframing fast, easy and effective. More importantly, it answers all the questions most people have during the information architecture stage of the process. Once you have the first version of your wireframe completed, you can begin showing your client. You can make your wireframes more detailed than the examples show, but a general wireframe can work just as well because the details of the look and feel will come at the visual design stage.
It’s important to not spend too much time thinking about the look and feel of the design. Remember, wireframing is not about the look and feel. That comes at the visual design stage. Wireframing is about the placement, sizing, order, repetition, and alignment of content. Once you have that figured out, move forward so you can get to the visual design stage where the details matter most. As you move forward to visual design and eventually to web development, it’s extremely important that you use the same information architecture that’s laid out in your wireframes. Wireframes are a website’s foundation, which is why it’s important that the wireframe’s integrity stays intact throughout the design process. If they don’t, all reason and purpose for wireframing is lost.