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.

• Baseline Grid (PSD)
• Baseline Grid (gif)
• Dot Grid Printable Page (pdf)

Download Files