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 used during the wireframing stage of the design process.
The purpose of a grid system is to help guide the placement, sizing, order, repetition and alignment of elements on your page. Using it for wireframes is necessary for designers to create a consistent and balanced page layout.
Creating an Effective Design 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 making 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 size for your images. By placing images next to text, you can find a size that compliment each other.
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 lay out the information architecture
Using the 970 grid system to wireframe can have a huge impact on your site’s information architecture. Once you have the first version of your wireframe completed, you can begin showing your client. From there you can improve and iterate your wireframes until it meets your client’s needs.
It’s important to not spend too much time thinking about the look and feel of the design because that comes at the visual design stage. Wireframing is about the placement, sizing, order, and alignment of content. As you move toward visual design and web development, it’s important that you use the same information architecture laid out in your wireframes. If the wireframe’s integrity doesn’t stay intact throughout the design process, the strategic work done on your wireframes is lost.