updated: September 23rd, 2009 / Ross Johnson / 10 Comments

Using Grids for Spatial Awareness

In my last post I talked about the importance of spatial awareness and some basic details about what “spatial awareness” actually is. I alluded to the fact that the best way to refine your designs spatial awareness is to use a grid system, that way all of your placement and spacing of objects and elements is based on the same mathematical system. While subtle, this can have a profound impact on the quality of the design that you are creating.

Blueprint Grid

The first step is developing or downloading a grid for use in photoshop and your mock-up. With so many quality grid PSD’s out there it might not make sense to create your own over adapting one that has been fleshed out already.

Here are some grids you can try:

I have gotten used to and like the blueprint grid, as I have adapted the use of blueprint and quite like it.

Next Steps

After you have opened up your grid rather than starting to design like you normally would it pays to spend some time to just block up elements and the space that they will use. This will help you see how the visual weight of elements will effect the page in addition to how space is used (and not used, remember that negative space is just as important as positive).

Blocking out areas of visual weight

From here you should have a good idea of how elements relate to each other, how does grouping effect elements relationships, etc.

Lets look at the detail closer

As you can see all of the margins, spacing, gutters, etc are all a multiple of the same initial gutter. This creates a very balanced and polished design that would likely feel very different had we just tried to eyeball the spacing.

Example of using the grid to figure out placement

When two elements have some relationship to each other I only use one length of the gutter (or none), where if elements are of different content/context they use three gutter lengths. This visual separation tells the user that the elements are not related, but by keeping the rhythm of the design consistent it never feels like an element is out of place.

It works for Typography as well

Last year there was a lot of discussion and awareness of the “baseline grid” in typography. Simply put, developing a baseline grid for type ensures that all of the type regardless of size lines up on the same grid. Using these sorts of grid systems helps you develop that baseline grid as well. Here we can see a close up example of two type areas and sizes on the page and how they line up in addition to the spacing and awareness of other elements.

Typography can easily be set at a baseline

So pay attention to spacing

Even if you are not looking to do a very organized content intensive site the use of grids to help plan and space out your elements will create a much more polished and clean design. The time it takes to actually create proper spacing will pay for itself as your portfolio and quality of work improves dramatically over time.

If you have any tips/hints/resources/ideas related to grids and space feel free to leave a comment below.

10 thoughts Using Grids for Spatial Awareness

  1. In some cases I find space more important than whats in between the space – if you look at an design point of view.

  2. Thanks for the thought Karl, can you elaborate any more? Are you talking about negative space, or how much space an element takes up?

    ross
  3. Very good website. I liked it very much. Comments from http://www.valentineday.in

  4. Awesome post!

    I just finished reading a chapter on grids on the Layout Workbook and this is a great complement.

  5. Is this similar to spatial awareness?

    Anon
  6. Pingback: ART178: Intro. to Web Design » Blog Archive » The Grid

  7. Pingback: » Random Inspiration #2: Notepads and grids and classics, oh my! - sugarenia.com : Web Standards, Accessibility & other Girly Stuff

  8. VERY NICE BLOG

    ITS VERY USEFUL

    THANK YOU……….

  9. But if you are using Photoshop to design your website aren’t you using grids anyway?

Comments are closed.