Big ideas often start with a simple drawing. Whether it’s a new business idea or the solution to a problem. The same is also true for great User Experiences.
It might be hard to believe that some of the world’s best online experiences started with a sketch.
A sketch!? Yup. Not a project plan or a big requirement document, but an easy to understand drawing that answers the questions of “what do we want to create and how will it help the customer?”.
Why sketched wireframes are useful
‘Wireframes’ are one of the ways we can plan digital experiences – they are illustrated representations of what an online experience (whether its a mobile application or desktop website) will look like, before a single line of code is written.
My favourite way to start wireframes is with a pen and paper. Although tons of software exists to create wireframes, I start with pen and paper because:
- ■ it’s far quicker to sketch an idea than it is to mock it up using software
- ■ it’s easy to share and iterate sketched wireframes with a large group
- ■ you can spread out drawn wireframes on a table, so as to understand the larger context how they all work together
A simple sketched wireframe can look like this:
And here’s one with a little more going on:
4 essential pen-and-paper wireframing tools
Many people I work with have said things to me like “I can’t draw, how can I sketch a wireframe?”.
Everyone can sketch, period. No joke. 99% of people I’ve worked with are genuinely surprised just how much they can do provided they’re willing to give it a go for 10 minutes.
Here are 4 tools I use and recommend to others for wireframes.
1. Blank Sketch Pad and Sharpie Pen
Simple as it may sound, there are few substitutes for a landscape A4 sketch pad (with decent paper) and a Sharpie pen.
If you like to free-form your sketches, this is the way to go.
After much hunting in Melbourne, I buy mine from Melbourne Artist’s Supplies and prefer to ones with the ring binder, as I often tear out pages so as to share them. You’ll be able to pick up a sketch pad from any good art supplier.
2. Sketch Pads
If you prefer to sketch your ideas within a frame of reference, why not try online-specific sketch pads?
These are excellent tools to provide you with a frame to work within.
You can find sketch pads at App Sketchbook and UI Stencils. Both ship internationally.
3. Print your own wireframe sheets
Now, if you want more variety in your sketch templates, you can also print your own. This gives you the added flexibility of selecting which template you wish to use for your sketches, so you can switch formats when you have different subjects (whether it be a website, a mobile app, or a tablet app).
Smashing Magazine collated an incredible set of 29 free printable templates for Websites or Smartphones. Also included are other templates for a variety of uses which range from ‘presentations’ to ‘task flows’.
Specky Boy also provides a useful collection of printable wireframes.
4. Stencil kits
Stencil kits are excellent in providing pre-defined forms and patterns for your wireframes.
What’s more, these stencils leverage patterns used commonly by specific devices and their operating systems.
iPhone Stencil from UIStencils.com
UIstencils.com is the best site for these stencils and they provide a whole range to choose from so you can select the stencils you feel most connected with.
And if the stencil doesn’t have the icon you’re looking for, you can draw your own 🙂
