May 04

Sharing the Grid

Posted by: Josh Walsh in Design.

When it comes to design, I’m a firm believer in simplicity. Occasionally I’m criticized for being overly simple, but I take that as a compliment. In my design, typography, grids, color, imagery and especially whitespace all stand for themselves. They don’t need any fancy treatment or “web 2.0″ effects. They work because they are simple and beautiful in their natural state.

Grids are foundational to all my designs. I always sketch out ideas on a Behance Dot-Grid Book, (thanks to Garrett Dimon for sharing this a few months ago). While these square grids are perfect for sketching idea’s and concepts, they don’t work for fine-tuning your design.

Khoi Vinh and Mark Boulton both advocate grids which are divided into even vertical columns separated by gutter columns (usually smaller in width).

I’ve found that working from a base grid of 16 columns works really well in a variety of 2, 4 and 8 column layouts. I created a Photoshop grid template which meets my needs well. I share this with other designers occasionally and thought it could be put to wider use if I shared it here.

I hope you find it useful.

Edit: By popular request, I have also included my dot-grid printable page which I use for hand drawing UI concepts. The Behance Grid-Book above is great for formal ideas, but sometimes you just need a piece of scrap paper to scribble down some ideas. You can even make your own on-the-cheap dot-grid book with the PDF.

Disclosure: The dot-grid page was generated by an old resource on the net at imcompetech.com, but they seem to have disappeared.

About Josh Walsh

Josh Walsh is a Managing Partner at Designing Interactive. He's also an award winning designer, author and speaker on the topics of User Experience Design, User Interface Design and Usability Research. You can follow him on twitter at: @joshwalsh

11 Comments »

  1. David Mead

    Nice to see someone else in the Cleveland area using the Dot Grid books.

    Hopefully we’ll get to chat some at the next CWSA meetup.

    May 7, 2008

  2. Danny Sedor

    This is an interesting concept I am going to try on my next project. I have been using a standard story-board concept and fine-tuning the visuals in another step; this idea seems to be more fluid. Thanks for sharing.

    May 7, 2008

  3. Down the Foxhole - Grid Based Design for Flash Templates

    [...] Designing Interactive grid [...]

    March 13, 2009

  4. Grid Based Design Toolbox | Fuel Your Creativity

    [...] Sharing the Grid [...]

    March 16, 2009

  5. Grid Based Design Toolbox | Coded Ink,Inc

    [...] Sharing the Grid [...]

    March 16, 2009

  6. Brad C

    I’m a little late to the party but downloading the PDF now for something I’m working on :)

    April 8, 2009

  7. Grid Based Tasarım « Skill Diary

    [...] Sharing the Grid [...]

    May 17, 2009

  8. Grid System Based Design Toolbox | Themeflash : The Better Resources For All Your Web Needs

    [...] Sharing the Grid [...]

    May 24, 2009

  9. Herramientas Para Un Diseño En Base a Una Cuadrícula | Fuel Your Creativity Español

    [...] Sharing the Grid [...]

    May 28, 2009

  10. Fuel Your Interface » Grid Based Design Toolbox

    [...] Sharing the Grid [...]

    June 1, 2009

  11. Randy Martin

    I have used the classic 12 column grid for all my design tasks for nearly 15 years. 12 column grids came out of print, allowing one to set type full page, half page, quarter page, third page, sixth page, etc., extremely easy. More than that, keeping things on the grid puts elements in balance and harmony. The viewer may or may not notice actively, but the brain does. When things are out of balance, the brain balks at reading. The same goes for horizon lines of type. Putting half lines of space or arbitrary amounts between paragraphs creates columns of type whose lines of type do not line up. This may not be noticeable at all in one column designs (many websites) but go to multiple columns and use lines of type with dissimlar horizons and the brain tells you move to something easier to read.

    I assume with wide web formats, a 16 column grid would work as well as a 12 column for print.

    July 13, 2010

Search

Related Posts

Popular Posts

Topics