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.

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:

• Designified 960px Grid
• Critical Web Sample Grids
• Blueprint CSS Grid

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).

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.

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.

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.

Spatial Awareness in Design

Have you ever come across a design that is so simple, so clean, yet so beautiful that it makes you wonder “How are they able to do so much with so little?” If so, then you are probably subconsciously realizing the special awareness of the design. Huge, Inc is a perfect example of the “less is more” approach with outstanding spatial awareness.

What is Spatial Awareness

Spatial awareness is simply the understanding and use of space in an effective way on your canvas. It sounds simple but it really requires a high level of mastering to get correct. This could be taking advantage of whitespace, or even grouping elements close together to create tension.

Those designers who can harness and use space to their advantage will find that elements can be placed in all sorts of unconventional ways, yet still work. Often times beginning designers place elements based on what “looks” or “feels” right, however that is not the best way to use space as accuracy and consistency is very low.

How can I use Spatial Awareness?

The first step to great spatial awareness in a design is developing a grid system. A grid divides your canvas up into small sections consisting of margins, columns, modules, flowlines and spatial zones. The canvas then ends up looking like a a series of boxes with columns (I found an example on google images here).

With this grid you can now find where elements should and can be placed on the page in a way that activates and takes advantage of space. Because you are using space in a consistant mathamatical way the overall composition of the design feels much more consistant and unified.

Taking it to the Next Level

These same principals of consistency can be applied to the typography as well. Because the grid will dictate margins for any element on the page (if a column is 18 pixels in width, then the margins of headings should be 9px/18px/27px/36px/etc…). The line heights off all type should also follow the structure and rules of the grid.

All of these steps to better map out your designs will be a subtle but noticeable improvement in your design over the tried and passable “eyeball it” methods. Note: There are times where you want to break the grid, some designs actually benefit from the chaotic and unstructured feel. However you have to make a decision as a designer that it is in fact what should be done.

I will be posting more about spatial awareness and using grid systems in the future, stay tuned.

Have any experiences with grids or spatial awareness? Post them here!