A Refined Web Sketching Template
I feel the right way to start designing a site is with a pen and paper. Rattling off ten or twenty quick design sketches accelerates you through the obvious and naive approaches and gets you to the good stuff faster. I’ve designed a printable template that makes this easier. You can download it at the bottom of this post.
We used to use the downloadable templates that Konigi offered. Specifically, we liked the “Storyboard with Notes” template. The template has 6 small grids and space for some notes. It offered just enough space to lay out a rough structure and not enough to get too detailed. Here’s what their template looks like:
Objectively, it’s a great template and it was a huge help to us. However, it wasn’t perfect. We didn’t like the heavy rule on the perimeter of each grid. It distracted from the design. It also used a 17-column grid. As a prime number, it is impossible to cleanly subdivide. Not sure why they did that.
So, I designed a new template for us to use. It has a light rule on the outside of each grid. Each grid is 12 columns wide, so it can easily be divided into a 2, 3, 4, or 6 column layout. I preserved the same note-taking space as the Konigi template. Here’s what ours looks like:
It’s subtle on the screen, but looks great in print.
We’ve been using this template at Agile Commerce for a while now and it works great. It provides just enough structure without getting in the way. We’re loving it and hope you find it useful as well.