A while ago I participated at UX-LX conference where I had the chance to learn with Dave Malouf at his workshop Sketching: The Secret Sauce of Design.
At the workshop Dave talked about the importance of sketching with your hands to help develop concepts and creativity. Truth is people are very accustomed using computer tools to simplify, pretty much, all tasks and wireframe sketching is a very good example.
The bottom line of Dave Malouf’s workshop is that by pushing yourself to draw over and over improving, adapting, changing your designs and concepts, you are developing a creative flow and upgrading coordination skills that will considerably help you on your job.
With that in mind I decided to compile and share a list of offline tools to help your creative sketching flow.
Wireframe Notepad
Konigi has been one of my favorite websites when it comes to IA related subjects. On top of that Konigi also sells some interesting products. The Wireframe Notepad is a paper block containing contains 50 sheets of paper (8 1/2 x 11 inches (~ 21 x 27 cm)) with grids created specifically for sketching wireframes.
The grids are drawn with a non-photo blue (cyan) ink that allow you to scan the sketches without the grid. Also the 24 columns grid system makes it compatible with CSS grid frameworks.
The biggest upset come when you want to order it. It’s only available in the US.
Cost: $9 each block (50 sheets)
Alternatives to Konigi’s wireframe notepad
- Paper Browser – A free grid system with 960px width separated by 32×32 pixel squares. The paper is proportionally scaled for 1024×768 screen resolution.
It comes as a PDF format so you can use it for digital work or simply print it for sketching.
- Browser Sketch Pad by UI Stencils.Cost: $9.95 (each Pad comes with 50 sheets)
Download PDF format:
Other useful resources
- Free Printable Sketching Wireframing and note taking
- A Collection of Printable Sketch Templates and Sketch Books for Wireframing
Pencils, pens & markers
photo by pigpongm
A while ago I remember reading about Pencils, Pens & Markers Sets used for offline wireframing.
Personally I’ve been in love with a Staedtler Noris H3 pencil for years. I’ve tried other models and brands but this one is the special one for me. I also own some coloring pencils of a brand called Milan and I find them great.
Usually if you are sketching wireframes you are not supposed to use color, but when sketching with paper you might want to describe certain actions or add notes and color can help in certain concepts of your visual information.
On Wireframe Magazine post they point out the most popular brands for wireframe hand sketching are Copics, Tombow and Primacolor. Unfortunately they are also some of the most expensive.
Website Stencil Kit
Although this resource kind of goes against the main idea of this post, practice productivity by hand drawing freely, sometimes, as information architects we need to do accurate straight-line sketches.
UI Stencils has this really cool set of kits of website stencils, iPod stencils and iPad stencils for offline sketching.
The includes a stainless steel stencil with commonly used iconography and a pixel based ruler, a Zebra Mechanical pencil, 2 UI Stencil stickers and a downloadable .PDF letter or A4 paper template.
Personally I like to sketch freely although having a notion of space, especially compared to
My personal resources
Although I made this list based on what some of the most known people in IA and UX use for their work, my personal resources are a bit similar but from different brands and economically more accessible.
- A4 Ambar drawing block
- Staedtler noris H3 and B2 pencils
- Uniball UM 100. The Uni-ball eye needle UN-167 also seems interesting.
It’s a very basic stock, I’m always trying to keep expenses down. On the other hand it’s important the people you work with, co-workers and clients, get a good impression from you and your work. I was fortunate enough to get a free wireframe notepad at UX LX, courtesy of London User Research Centre, afterwards I bought a decent set of pens and pencils.
Sometimes I print Paper Browser or this wireframe template by Alfonso Bozzelli for some quick sketching. Problem is that if I draw the whose website on these templates, clients usually think this is how it will show on their screens with no scroll. A quick workaround is drawing a straight line and explain what is above and bellow the fold.
I guess I’ve covered the basis for offline wireframe sketching. There are some color and visual concepts to be considered but that will be another post 
I’d love to get feedback from you. Feel free to add to this post. Leave a comment.
