Sharing the Grid
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.
11 Comments »
Search
Popular Posts
- 50 Tips To A User Friendly Website
- My Favorite Pomodoro Timers
- How to build a Gantt Chart with the Google Charts API
- Why Flash is Mostly Bad
- Why You Should Outsource Usability Testing
- 10 Tips to Better Google Wave Conversations
- The difference between User Research and Usability Testing?
- How to Label Submit Buttons
- Our New Development Process
- Paper Prototyping vs. Balsamiq Mockups


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
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
Down the Foxhole - Grid Based Design for Flash Templates
[...] Designing Interactive grid [...]
March 13, 2009
Grid Based Design Toolbox | Fuel Your Creativity
[...] Sharing the Grid [...]
March 16, 2009
Grid Based Design Toolbox | Coded Ink,Inc
[...] Sharing the Grid [...]
March 16, 2009
Brad C
I’m a little late to the party but downloading the PDF now for something I’m working on
April 8, 2009
Grid Based Tasarım « Skill Diary
[...] Sharing the Grid [...]
May 17, 2009
Grid System Based Design Toolbox | Themeflash : The Better Resources For All Your Web Needs
[...] Sharing the Grid [...]
May 24, 2009
Herramientas Para Un Diseño En Base a Una Cuadrícula | Fuel Your Creativity Español
[...] Sharing the Grid [...]
May 28, 2009
Fuel Your Interface » Grid Based Design Toolbox
[...] Sharing the Grid [...]
June 1, 2009
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