Wireframes

Wireframe Effectively on the New, Improved 970 Grid System

A popular approach to designing page layouts is to use a grid system. Designers use them on wireframes to create a consistent and balanced page layout. The purpose of a grid system is to help guide the placement, sizing, order, repetition and alignment of elements on your page.

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.


Book

Affiliate

elegant wordpress themes

This Post Has 34 Comments

  1. Hugh Brown Reply

    Title erroneously says, “Wireframing Effectively on the 970 Grid System” but the CSS grid system is called 960.

    • anthony Reply

      I’m actually referring to the 970 grid system that I use that I think is better than the 960 grid system. Nevertheless, I will change the title to be more clear. Thanks for pointing out the ambiguity.

  2. Franco Reply

    Can you provide a link to 970 grid system? I was unable to google it.

  3. suckerpunch Reply

    Yes, you’re definitely onto something. The 960gs has been solid for a long time, but the padding on each side is a nuisance. And the gutters too.

    Could we see a demo page somewhere?

  4. Ricardo Saavedra Reply

    I really think the 960 grid system it’s a bad solution to css framework. Din’t you guys think thgat 14px of margin between the columns are to tight ? I use myself a grid that has 978 px wide, 12 columns with 54 width each and 30px of margin.

  5. Brian Bird Reply

    I like this a lot better than the 960px grid. A long time ago we independently determined that 984px was the maximum width we could reliably count on with a scrolling window. 960px seemed like a giant waste of space to me.

    I even like that the left over space from our findings is 1/2 of a gutter on both sides.

    I disagree that 20px is too much space between wide columns, but the benefit mathematically far outweighs any quibbles in that regard.

    • anthony Reply

      Sorry for not explaining my reasoning clearer. I have posted a graphic of why 20px is too wide. Hope that clears it up a bit.

      • Brian Bird Reply

        This is where wireframing is a bit misleading. 14px between two solid cells is plenty of space. However, between two blocks of text many users end up having a readability problem. There isn’t enough white-space to properly separate the two ragged edges created by the text. Once you space this back out to 20px the edges of the text become more distinct and you have increased readability with very little loss of cohesion in full-fledged designs. Its been a long time since, but our user testing brought this out and I’ve lived by it ever since.

        Your example with two small boxes is misleading in most cases. Expand that out to three or four columns wide and the white space becomes much less of a design element of its own and fades into the background properly. 20px between two 300+px blocks doesn’t look as much like a design feature as it does between two smaller boxes by themselves because the proportion is different.

        An easy work around to retain the 14px gutter is to add a bit of padding to the text blocks when they have trouble. Combined with a header, the effect is almost imperceptible to the eye, but the readability is increased.

        I created a graphic to illustrate this:
        http://twohousestudios.com/tmp/gridExamples.gif

        • anthony Reply

          I 100% agree with you that 14px isn’t enough for text margins. They should be much more. That is why in my examples above you’ll see that I only use 14px margins for the content boxes, not for the text. Thanks for bringing up this point.

  6. sereal Reply

    I don’t see any 970 css source code to try it out 🙁

  7. Chris Reply

    I think you’re a bit absolutist in your justifications. The value or detriment of 20px gutters is very context specific. Additionally I think you place too much emphasis on the risk of white space becoming a visual fixation. The size of the text, the leading, justification and the inclusion of graphics all factor into the effect the proportion of white space has. Saying 20px is too much just can’t be supported as a universal truth. Nor can you say that 14px is ‘just right’.

    I’m not saying 970 isn’t a valuable option. I do like an option that eliminates the outer margins. But simply saying that certain gutters are absolutely too wide or two narrow just isn’t a supportable assertion.

    There are arguments both ways, which means having both options are good depending on your design.

    • anthony Reply

      Too much whitespace between elements does yield a visual fixation. This is a fact. If it wasn’t, I would not have wrote so extensively about it and included a graphic. I’ve done testing in the past on websites with wide margins and have found this to be true, so I think saying 20 px is too much can be supported here.

      If you’re skeptical, test it out yourself and will see the same results. It may seem subjective to you, but it’s actually not. Also, try to use your own sound judgment and common sense. Do a comparison of different margin sizes with your content boxes and look at each of the content boxes and see if the margin starts to become a visual barrier as the margin sizes increase.

      • Chris Reply

        But, saying you wrote it and added a graphic does not make it fact. Saying you’ve done testing without citing the actual testing does not validate the fact.

        You are right, TOO MUCH white space can create a visual fixation, but saying 20px is that ‘too much’ without the context of resolution, text size, leading, included graphics, etc. can’t simply be stated as fact. You cannot say it will impede a design by becoming a barrier to the user. It may for certain designs, but not universally so.

        You say you think that “saying 20px is too much can be supported.” Then please do support it with your findings. That’s just it, you have not supported your findings.

        Since you have said you have done studies, please do share. I would love to see the findings and think they would be very insightful.

        • anthony Reply

          “You are right, TOO MUCH white space can create a visual fixation…”

          Do I have the testing results that proves 20 px is “too much” whitespace? No. All I can tell you is that too much white space does create a visual fixation, and you seem to agree. Did you do any testing to come to that agreement, or did you use your design sense and judgment? That’s right. You used your design sense and judgment. If you did testing, I’d like to see it. Please attach it to this comment. 🙂

          By my own design sense and judgment, 20px is unnecessarily wide for images and boxes. However, I’ve mentioned before that for TEXT 20 px is fine. That’s because when we read TEXT our eyes constantly move from side to side. We need the extra whitespace so that our eyes don’t run into the next text line when we read. Brian Bird left a comment above that illustrates this point really well. Did I ask him to show me testing results for me to believe him? No. All I had to do was listen to his design rationale, and use my own design sense and judgment. That’s all.

  8. Goran Peuc Reply

    Even tho I agree with what this article is all about (making 970 the new standard) the author has some problems adhering to the main idea of what grid is all about: consistency and predictability of content and item placement.

    For example:

    http://uxmovement.com/wp-content/uploads/2010/12/navigations.png

    The top 2 image blocks break up the grid by trying to divide 9 columns by 2.

    http://uxmovement.com/wp-content/uploads/2010/12/textimages.png

    Those bottom three images (blocks) are so out of grid it hurts when you look at it.

    So, yea, 12 column grid is nice, but you have some problems actually USING it =)

    • anthony Reply

      You’re right. Using a grid is about consistency in layout. However, it’s also about flexibility. You’re not always going to use the same margin spacing for every element on your wireframe. Different elements need different margin sizes. I explain in the article why you should use larger margins when you have paragraph text.

      I also mention that when you line things up along the column edges, you should pay attention to the gestalt of the elements, rather than individual elements. It’s okay if a few elements aren’t aligned flush with a column edge. They don’t have to, as long as the GROUP or ROW of the elements are within the grid framework.

      The alignment of the blocks you see were done on purpose to prove this point. If you look closely, you’ll notice that the individual blocks aren’t aligned flush to a column edge. However, the GROUP or ROW the blocks belong to are aligned to the grid. Like I said in the article, when it comes to aligning multiple elements the gestalt matters most.

      • Goran Peuc Reply

        The main issue here is that you are now using images (lets presume that gray boxes are images) of many different variations. You have images that are: 3 col wide, 3 and a little, 4, 4 and a little, 5, …

        If you take as an example that you are making a news-website, this means that CMS needs for each image uploaded to make variations for all of those images, because you can never be sure where the image can land. The columns and the grid is used to minimize the workload of future people working on the project, minimize the workload of server infrastructure, to help designers move objects around the grid with an ability that they always fit perfectly into place, and of course to keep things neat.

        • Mark Reply

          Limiting your capabilities and options (i.e. image sizes) because of technology is a bad idea. If the site needs 10 different sizes of images, create the CMS to handle that.

      • Adam Kochanowicz Reply

        True, I use CSS frameworks as a point of abstraction. In other words, use a model and abstract from it as necessary.

        I’ll override the grid where needed either with an inline style (gasp!) or an extra class name, but the grid provides a way to fall back on a sensible default which is consistent with most of the layout.

  9. Pashmina Reply

    I had the some of the same issues as you with the 960 grid. After using it for a few projects, I found it to be more limiting and not taking advantage of screen real estate.

    I researched other grid options, and have now switched over to The Sqare Grid: http://thesquaregrid.com/

    Check it out, you might like it too.

  10. @web_boy_uk Reply

    The 960.gs grid was perfect for the design challenges of the desktop in 2007. The Internet has now become the Splinternet and we need new ways to meet the challenge of screens that vary wildy in resolution.

    Fuild layouts as suggested by cssgrid (@andytlr ) would suggest a way forward.

    “A 1140px wide, 12 column grid. Fluid all the way down to a mobile version”

    http://cssgrid.net/

  11. bomski Reply

    fixed aspect ratios are dead; long live fluidic layouts!

    http://www.designinfluences.com/fluid960gs/

  12. Chris Brauckmuller Reply

    I’m no UX expert but if you ask me 14px is way too narrow of a gutter. Laugh if you want but my main gripe with 960gs is that the gutters were too narrow at 20px. I prefer a 30 or 40 pixel gutter between blocks of content or else it really just doesn’t have room to breathe. This is especially true when you’re setting body text at a larger font size like 14 or 16 pixels on a 22 or 23 pixel baseline, which is becoming more popular.

  13. Ilias Reply

    It’s not fluid you’re after it’s adaptive http://lessframework.com/

  14. snake Reply

    I agree with the 14px gutter in most cases. That’s usually the minimal width I use for spacing elements. Although, I personally don’t like to use any pre-design grid system solely on the fact that a website’s width, columns, and spacing should be determined by the amount of content it has and branding style.

  15. JustInMind Reply

    Free tool to create clickable wireframes for mobile and web apps http://tiny.cc/Free-Prototyper

  16. Adam Kochanowicz Reply

    I love grid systems. What do you think of Twitter’s Bootstrap? I’m surprised nobody mentioned it.

    http://twitter.github.com/bootstrap/scaffolding.html

    I think that one also uses wide margins, though.

  17. valise rigide Reply

    The 960.gs grid was perfect for the design challenges of the desktop in 2007. The Internet has now become the Splinternet and we need new ways to meet the challenge of screens that vary wildy in resolution.
    Fuild layouts as suggested by cssgrid (@andytlr ) would suggest a way forward.
    “A 1140px wide, 12 column grid. Fluid all the way down to a mobile version”

  18. Rich Reply

    What do you have against negative space? 14px margins would just make everything feel very very cramped. White space makes for a much fresher and enjoyable UX in my opinion.

  19. Marta Reply

    just wanted to say THANKS for your great post! 🙂

  20. Dale Grebey Reply

    Funny, that I wrote my own custom 970px system half-a-decade ago and have built dozens and dozens of websites on it. 🙂 Glad to see other people coming around. Most of my sites now tend to be 970px responsive for mobile and tablet.

Leave a Reply to anthony Cancel reply

Your email address will not be published. Required fields are marked *