The joy of sketching

6 minutes read

What do you think is the most important tool for a UX designer? A trusty laptop (Mac of course)? Nope. A good drawing and wireframing package? Nope. A kick arse prototyping package? Nope. The most important tool for any UX designer is a pen and a stack of paper. Why? Because before you even think about using any of these for design work you should be sitting down to sketch out your ideas, to get the creative juices flowing and to explore the infinite universe of design possibilities out there.

Why sketch first?

When asked to come up with a new design, or look at how an existing design might be improved its very tempting to jump straight in and start pushing pixels. But you must resist doing this. Sit on your hands and count to 1000, think about what a bear would look like in a bikini or listen to the latest Radiohead album until the urge goes away. Instead of jumping straight in it’s a good idea to sketch your designs and ideas out first. Here’s why.

Sketching stops you wasting your effort

Sketching your designs first allows you to quickly explore lots of different design alternatives without investing too much time and energy in each one. Seems like a design isn’t quite as awesome as you thought it would be? No problem – rip up your piece of paper and start again. What? You mean you spend days meticulously prototyping that design using your fancy pants prototyping tool – Opps!

Sketching encourages you to focus on the steak, not just the sizzle

Unless you’re some budding Leonardo da Vinci (in which case you must try to resist your artistic tendencies) sketching forces you to concentrate on the essence of the design itself, rather than all the fluff around the design. When creating wireframes and prototypes it’s often tempting to spend a lot of time making the wireframe look beautiful and the prototype very rich and high fidelity. With sketching you shouldn’t have to worry about this and can instead focus on getting the core of the design right.

Sketching opens up design to everyone

Not everyone can use Visio, Omnigraffle, Axure and the plethora of other design, drawing and prototyping packages out there but everyone can sketch (well pretty much everyone). That means that anyone can roll up their sleeves and participate in the design process. Sketching really does open up UX design to the masses (hey that would be a good title for a UX blog).

Sketching is fun

Nuff said.

Adding some structure to your sketching

I’m not a big believer in lots of rules and process, but when it comes to sketching I’ve found that it’s good to have a bit of structure because it’s often all too easy to get carried away with the sketching bug. Here’s what I do.

1. Identify the pages / components to be sketched

Before you start sketching willy nilly it’s good to have an idea of the steps, pages and components that you’ll need to sketch out. You might have drawn up some user journeys, scenarios or storyboards outlining how a user might use your site or system. Out of this should emerge the various pages and components that you’ll want to sketch. For each page you might then outline:

• The purpose of the page – What’s the goal? What does the design need to achieve?
• The features of the page – What needs to go on the page? What does a user need to be able to do?
• The user requirements for the page – Who will be using the page? How will the design need to support them? If you’ve got a set of personas for each persona you might outline what their respective needs and requirements are. For example, Sarah needs to be able to see her recently viewed products; Patrick needs to be able to see when he can expect to receive an order.

2. Start sketching

Get your pen (it’s best to use a pen rather than a pencil because it eliminates the temptation to continually erase and redraw) and start sketching. For each page I’ve found that it’s good to try and come up with up to 6 or so different variations and possibilities for the design. This allows you to explore the different types of design and stops you getting too fixated on any one particular design path.

You can design straight on to plain A4 or A3 paper, although I’ve found that having guidelines helps and using a template works well. Leah Buley (of Adaptive Path) has a good six designs to a page template (pdf) and a one design to a page template (pdf) that you can download and print out. I wouldn’t recommend sketching on to a white board because it’s then difficult to capture your sketch for prosperity. It also doesn’t feel as natural as sketching on to paper. Finally, don’t worry about making your sketch look pretty – the important thing is to capture the essence of the design. Remember that you’re creating a design sketch, not something that will hang in an art gallery!

If you’re working in a team then perhaps get everyone in the team to sketch out their ideas – as many as possible. You can then discuss and critique these as a group afterwards. I’d shy away from sketching designs as a group because I’ve found this to be cumbersome and akin to design by committee – you’ll only end up squabbling over whether a drop down or radio button would work best and not really getting anywhere (by all means try it though).

3. Scan your sketches

It’s far too easy to lose your original sketches under that massive pile of paper on your desk (unless of course you’re ultra neat and tidy) so it’s a really good idea to scan your sketches as soon as possible so that you have a digital copy. Not only does this make it easier to retrieve sketches but also means that you can add them to any project repository. It also means that you can send any sketches to other people and easily make copies. Try to use a decent scanner and a relatively high resolution so that you’re not constantly trying to decipher exactly what the sketch is of! This is also when sketching with a pen helps because pencil sketches often don’t scan very well because the contrast isn’t good enough.

4. Have a cup of tea

Having done a bunch of sketches reward yourself with a nice cup of tea (or what ever your beverage of choice is – hell even a cold beer, or a nice pint of Old Speckled Hen) and take a bit of a breather. You want to clear you head before you (and probably the rest of the team) go through the sketches to workout which work best.

5. Evaluate the design sketches

Having sketched out a bunch of designs you now want to workout which work best. Ideally you want to whittle your stack of designs down to one or two that show the most promise. Of course this doesn’t necessarily need to be a particular design – it could be combination of designs. If you’re in a project team then you might want to run a design critique to evaluate the various design sketches (checkout Scott Berknun’s excellent article about how to run a design critique).

There are all sorts of ways that you can evaluate your design sketches. You could:

• Do some quick and dirty user testing. For example you could carry out some paper prototyping to evaluate the design sketches with users
• Use pairwise comparison to compare and contrast the different designs
• Create a Sketchboard showing all the various designs and sketches for people to view, evaluate and comment on
• Carry out some cognitive walkthroughs
• Evaluate the design by role playing your users. This would give you a great excuse to reacquaint people with any personas that you might have created
• Use your design intuition (be wary of the HIPPO in the room though)

Using your sketches

Once you’ve whittled your design sketches down to the most promising designs (incidentally this is something that Apple apparently do, taking 10 designs down to 3 and then down to 1) what do you do now? Well the next step is probably to start creating more detailed designs. This might be of further pages, more detailed versions of the designs you feel work best, or even components of pages. You might also start creating page wireframes based on the design sketches or a prototype. Don’t just sketch initial designs and then junk you pen and paper for your shiny computer – you should be sketching through out the design process (see – I told you that a pen and paper are the most important tools for a UX designer).

Finding out more about sketching

Unsurprisingly there are a number of resources out there about sketching UI designs. A couple of good books to checkout are:

• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces by Carolyn Snyder
• Sketching User Experiences: Getting the Design Right and the Right Design by Bill Buxton

Adaptive path also have some good articles about sketching on their website, including their favourite tools for sketching. Now go forth and experience the joy of sketch (just keep it clean!).