Tools for Sketching User Experiences

When it comes to sketching user experiences, should we opt for state-of-the-art software, or a good notepad and set of markers?

Stay up to date. Subscribe to the UX Booth newsletter.

Subscribers get a 15% coupon to Rosenfeld Media.

A paper wireframe template in action.

I’ve spent years designing websites. Having tried a variety of tools, analog ones – such as markers, notebooks and paper templates – have proved to be the most effective.

Our brains are the ultimate tool for solving problems. But it’s hard to share ideas when they’re locked away in our heads. Sketching frees our ideas from our mind allowing others to see them. A visual representation of an idea has the capacity to be shared, collaborated upon, and improved. Whether I’m trying to show the hierarchy of an information architecture, or document the nuanced interactions of a web site, sketching has proved itself to be my most valued tool for giving form to my ideas.

I have always enjoyed sketching. However, I wasn’t always good at sketching. Like most skills, if you’re not born with the ability you can acquire it by producing volumes of work. If you’re avoiding sketching because your sketches aren’t pretty, rest assured you’re not alone. I recommend breaking the habit by making 1 sketch, every day. Pick an object in your environment and draw it. Don’t erase and don’t be too critical. Do that for a month, and I guarantee you’ll be a better sketcher in 30 days.

A truly great sketching tool can be used for sketching and writing. After trying dozens of different kinds of pencils, pens and markers, I discovered that finding a tool that supports both tasks is quite a challenge. After 2 years of searching, I finally settled on the Sakura Micron .45mm black marker.

Sakura Micron .45mm black marker

Ink is better than graphite

Why a marker? Once upon a time, while I was studying fine arts at a community college, I took a life drawing course. One of the first exercises was drawing with only a sharpie marker. The black and white constraint of using merely a sharpie was disruptive at first. But I eventually learned that there is no turning back once you start drawing. I had to commit to what I was drawing before I put the ink to the paper.

A page from my Moleskine.

A pencil lacks the constraint of commitment. If you can undo what you’ve drawn, you’re not forcing yourself to think fast and make decisions. Some see this as a negative, but I don’t because I have the curse of a perfectionist. If I don’t constrain myself with the commitment a marker imposes I’ll be tempted to spend hours drawing a box just right. For me, using a pencil is a waste of time.

You might ask, “what if you need to change a label on a button?” I simply draw a single line through the text and write the correct label above it. If there isn’t any room I draw a red arrow into the margin and annotate the discrepancy there. Over time I’ve trained myself to make it perfect on the first try. I’m kidding! But with all seriousness, if I make a mistake—that’s okay because that’s the nature of sketching. The ideas aren’t permanent even if the ink is. Besides, if you’re fussing over a label on a button, you’re doing it wrong. Those details can be captured elsewhere and eventually implemented in production.

Another reason I prefer ink instead of pencil is that it’s not messy to work with. A good marker won’t smudge or fade once it’s dry. Whereas pencil can and will smudge over time, especially if you’re using a notebook. Trust me it gets sloppy!

What makes a great marker?

I bought all my markers at an art store. I’m a frequent shopper of Utrecht art stores, oddly enough they have everything but sticky notes! Find a Utrecht store in your area.

Here’s why the Sakura Micron .45mm black marker (as well as the rest of the Sakura Micron series) has me tickled pink.

Dual purpose: This marker has a tip that withstands writing furiously, and it’s still excellent for sketching.

Better than a ball-point: It has a softer tip than a ball-point pen. Ball-points dig a trough in the paper. They’re destructive and ruin the other side of the page.

Better than a sharpie: It doesn’t bleed through the paper. Sharpies are inferior because they bleed through paper of any thickness, ruining the next page in a notebook.

Non-destructive tip: The .45mm tip is soft, but not too delicate. I discovered the .005mm marker wears down and becomes jammed inside the tip easily. Even the .25mm suffers from the same weakness.

Smooth line: It leaves a consistent line, one that doesn’t bleed or gob up like some gel pens.

Fast drying, no smudges: This brand of marker dries fast. I won’t tolerate smeared lines and messy fingers. When a notebook is closed, a runny pen will leave smudges on the opposite page. Such a pity.

Markers used for adding emphasis.

Here are a few other markers that have become apart of my personal sketching style. I use them to add emphasis to my sketches when it’s necessary. The colors and shading are not superfluous, they add value by highlighting important areas and make them stand out among the rest of the sketch. They’re all about $2–3 each. Listed from left to right.

Baby Yellow 090 dual tip – for a more fetching tint of yellow (instead of a highlighter which bleeds, runs, and smudges)

Get a quality notebook

My Moleskines, small and large.

Here’s a random fact you may not care to know, it’s pronouced “Mol·a·SKEEN·a” not “Mole·SKIN.” Don’t believe me? Check the Moleskine Wikipedia article. I was saying it wrong for years. And don’t worry, I still call it a “Mole·SKIN.” (Because it’s made with real moles, right?)

I didn’t always use a Moleskine notebook, I’d use whatever pad of paper was laying around. Lined or unlined, yellow or white, a Denny’s napkin, it didn’t matter as long I could scratch down my ideas. That’s a fine way to be, but if higher quality tools have the capability of yielding higher quality work, then we need to distinguish the finer points of paper. (Note that I said they have the capability of yielding higher quality work. I’m aware that an idea on a Denny’s napkin can communicate just as well as that same squiggle in a notebook. But that’s another can of worms for another article.)

Moleskines come in various shapes, sizes and thickness. They come with grids, traditional (baseline) ruled, or plain white pages. My first Moleskine was a small pocket notebook with a grid. It’s portability was delightful and for a time I enjoyed that it was more accessible than a larger notebook. But as time passed, the grid became overpowering and I yearned for a plain white page to freely ink and jot upon. Besides, I know how to draw a straight line. My only warning with a pocket notebook is: smaller page size usually means it’s harder to share ideas. A pocket-sized notebook is a constraint, but everything within it is often reduced to vague sketches. More frequently, I need lots of space to fully explore a concept. Use the small notebook as a sort of meta-notebook, capture your ideas but flesh them out in detail in a larger one when you get the opportunity.

Eventually I settled on a soft cover, extra large, 7 ½” x 10” plain notebook. The soft cover makes it easy to leave open, unlike the hard cover notebooks which are a pain to keep open without continually creasing the pages. Folding the page open is one less thing to focus on. The paper quality of a Moleskine notebook is just right. The paper is porous enough to absorb ink quickly but won’t bleed through too easily. The glossy pages of some hard cover notebooks I’ve seen don’t absorb ink very quickly and feel unnatural to the touch. I’d suggest avoiding them. Moleskines are a joy to use, or dare I say, a pleasure to experience.

Use paper wireframe templates

I use paper wireframe templates to work through a series of design iterations. Using loose pieces of paper has several benefits over sketching in a notebook. These templates compliment the use of a notebook. Sometimes more constraints are a good thing.

Motivating to fill: Since the page has 6 empty boxes, it’s a motivational aide to come up with 6 different designs. Whereas an empty page of a notebook lacks this constraint.

Easier to share: Passing a notebook around a conference table works fine, but printing copies of your sketches and passing them around is even better.

Non-designer friendly: They’re a lower barrier to entry for business and development folks. A template with predefined boxes provides an additional frame of reference. A blank page can be intimidating if you’re not comfortable with it.

Highly visible: As soon as you’re done sketching you can post the page to a wall or sketchboard. A sketch in a closed notebook lacks visibility. I leave my sketches sitting on a desk behind my workstation. Passersby can see them and I’m frequently asked to explain my sketches to curious co-workers.

View all sketches at once: A great way to view all your sketches at once is by spreading them out on a table. It’s impossible to do with sketches in a notebook, unless you’ve scanned and printed them.

Sketchboard-ready: Paper templates are easily taped to butcher paper hanging on the wall. It aides visibility and entices colleagues to comment and discuss the work.

Paper wireframe templates in action.

I first used Adaptive Path‘s wireframe templates, but they weren’t exactly right for me. I didn’t like the grid lines, because I know how to draw a straight line. And their templates didn’t leave enough room for my notes, since I like to annotate around my sketch, rather than leave a separate column for notes on the right. So, like any scrappy UX designer would, I made my own templates.

Sketches to prepare the design of my paper wireframe templates.

My paper wireframe templates.

Download my paper wireframe templates (7-page PDF). I originally designed 7 variations of box layouts, but after using them for a month or so, I find that only use 2 or 3 of them primarily. I’d like to hear which ones you find most useful, so please let me know if you like them or not.

Sketchboards: bringing it all together

A sketchboard is a phenomenal tool used to encourage collaboration and gather feedback. Sketchboards create an environment for your paper wireframe templates to live in. Here’s one of my sketchboards with all my sketching tools in action. This is my first sketchboard, and it turned out pretty well. After a month, it’s still hanging on the wall for everyone on the development and sales teams to see and comment on.

In an upcoming article I’ll explain how I used a sketchboard to develop an internal web app for my company. In the mean time, if you’d like to learn more about sketchboards read Brandon Schauer’s excellent article Sketchboards: discover faster + better ux solutions.

Bill Buxton’s book, “Sketching User Experiences.”

In closing: dive into new tools

It takes time to get the right mixture of tools, but once you find it, solving the real problems becomes all the more enjoyable. Sketch as much as possible and you’re bound to get better. And don’t be timid about trying something new, dive in and even if it doesn’t work, you’ll have learned something valuable in the process.

If you read books, and you’d like to learn more about sketching, I highly recommend reading Bill Buxton’s book, “Sketching User Experiences.” (Or if you’re in the Boston area on October 7th, come to the next UX Book Club: Boston to join in a discussion about Buxton’s title.) Cheers, and thanks for reading!

About the Author

Jason Robb is an Experience Designer, Visual Designer, and Front-end Developer. When he's not writing about design and life on his own site, he writes about good, bad, and noteworthy interfaces at UI Scraps. He's the organizer of the UX Book Club in Boston. If you like thoughtful nuggets of UX design, you should follow him on Twitter, too.

Heh, thanks David. Wireframes are just a vehicle, not the final destination. It’s advisable to get to prototyping as soon as possible. Wireframes are fine, but they don’t offer any tactile feedback. Touching paper isn’t nearly as real as clicking a button. I sketch only as long as I have to, then I just to HTML/CSS/jQuery to prototype the best ideas.

What a fantastic post. And thank you for the links to the Sakura Micron Pens. I first found those in Japan, while I lived there, and feel in love with them. But I haven’t been able to find them here in Texas.

I am going to download your paper wireframe templates and use them in a meeting this week. Thanks for the excellent resource.

Jason, thanks for sharing these great thoughts! This is good stuff for every designer. Gonna look for those Sakura Micron’s right away.

I do feel you’re lowerin’ the limbo bar a little bit when you say you’ve practiced a lot before you became good at sketching. Sketching isn’t really much about making a beautiful drawing but more like communicating or exploring an idea. I don’t really think you need any experience to establish that succesfully.

In the end I do believe it’s easier to get support from your teammates and clients once an is idea visualized more beautifully. But that’s in a later stadium.

Just to make sure people don’t runaway because they think they can’t draw. :-)

@ Henk: Yes, I agree for the most part. If you can think, you can sketch. There are two aspects of sketching that are worth noting: rendering and reading sketches.

On page 116 in Buxton’s book, he shows a picture of 2 houses. The first is drawn by a child, and the second is drawn by an architect. He points out that there is an obvious difference in the rendering (a beautiful drawing, as you said). But not so obvious is how well someone can read the sketch.

The child might have an elaborate story about who’s in the window or why there’s a chimney. The architect likewise can explain why his drawing looks the way it does.

Skill in reading is just as important as skill in rendering. And both are honed over time. Being really great at sketching does require many hours of practice. That said, you’re right that people shouldn’t be discouraged by that commitment. But this article wasn’t meant to convince those who don’t see that benefit to give it a try. Perhaps another time. =)

But it’s worth mentioning that becoming skilled at rendering is not something that happens overnight. There is no magic pill, just lots of practice. Improving your rendering abilities doesn’t necessarily improve your reading abilities. But they’re not mutually exclusive. The more you render, the more you read. If you want to get better at sketching, you have to sketch.

This is an excellent article. I usually use a marker on a white board to sketch out wireframes. I bought some white board wall paper and have it go across my whole wall so I have plenty of space. I find that the notebooks aren’t big enough for me.

Rock on, Daniel. Bigger is always better. The Moleskine is sufficient for getting started, but if you want to harvest higher fidelity feedback, you need higher fidelity sketches. Going big is great because your errors are huge, too! Thanks for mentioning that.

I also think that “Skill in reading is just as important as skill in rendering.” But the only way to get the skill is keep telling the story using sketch´s, evryday drawing will transform the child in an architect that not only render the structure, but has an story behind it.

What a beautiful post! I was a cynic, very skeptical about the moleskin a couple of months ago. “What’s all the fuss I thought?” after sketching in it for the very first time. It really didn’t feel any different. But as I continued over the weeks, I’ve noticed subtle differences and I can slowly see what the fuss is all about. :)

I love it! It’s the power of momentum that transforms our sketches over time! Both our ability to sketch (render the thing) and our ability to read the sketches. I’d love to see your Moleskine, care to share? :D

Excellent post. I’ve always been a fan of handwriting at planning rather than using a computer – ideas seem to flow much better at early stages when you’re not constrained by the keyboard/fingers model. You’ve inspired me to start sketching and get some decent tools for it – I had no idea there was such an awesome world of pens that I didn’t know about!

I’m fully on board with this but for one detail: I’ve noticed myself resisting marring my $20 Moleskines (which incidentally have no problem falling apart on their own).

To remedy this, I just bought myself a ream of looseleaf A4 paper (relatively hard to find in North America, but I like the aspect ratio better than letter). That way I don’t get hung up on trying to preserve the integrity of a book and can be profligate in my cutting and pasting as well as sketching.

It is also dirt friggin’ cheap, and I am hugely into cheap disposable tools and materials these days.

Great post. I thought of another reason for both ink and single page wireframes – They can be scanned. After some iterations (We use Paper Protoyping, by Snyder as a start), we can scan the images, which can become a background reference layer for designers, or email them for use in multiple location. (I know, you can Photocopy a n Moleskine), but it saves a step.

Jason, I avoided opening this post for a long time. Don’t know why, but I thought it was going to be a review of more online wireframing tools. How refreshing to see it is actually a portrait of a UI artist at work. Thanks for sharing your methods, it’s really interesting.

Todd, I can kind of see why you might have thought of that. I had some apprehension about the title of the post “Tools for Sketching…”

While it is a post about tools, specifically it’s about MY tools. My goal for this article was to showcase how I work with Analog tools. I didn’t want to get into weighting the pro’s and con’s of Analog vs. Digital either. I still use digital, although I always start with pen and paper. Hmmm… that could be an interesting post: Show the cross-section of where analog and digital meet through the lens of a single project.

Jason, Thank you for this inspiring article. As an illustrator still at heart, I’ve been trying to find ways to sketch again for web related projects. This has inspired me in many ways and I thank you. Will be shopping soon for those markers! Your sketched mockups are great btw.

Wonderful post- As a print designer just moving to web, the hardest part has been visualizing the interface. Sketching speaks to me and helps me create a structure before even getting on the computer. Thanks for the tips!

Jason, this post was fantastic! Thanks so much for the time and effort you put into it.

I just picked up two black Sakura Micron pens from a local art store here in Guelph, ON Canada, and I must say they are much better than any other pen I have used in the past. I guess I should add that I am in no way affiliated with Sakura :) Just a really great product.

thanks for mentioning us in your blog. I thought your readers would like to know that the Sakura Micron markers you like are currently on sale through 11/8/09. Also would like to let you and your audience know that Utrecht carries the line of Moleskine 7.5″ x 10″ Cahier Journal notebooks with plain paper. This link will take them to the right section of our site for those products, http://www.utrechtart.com/dsp_view_products.cfm?classID=1610&subclassID=161015&brandname=Moleskine. Those items are also available at our chain of local art supply stores.

Thanks Don, I’ll be sure to bookmark and buy through that link for my next notebook. I signed up for the Utrecht card in Pittsburgh, PA—my hometown. Seems to work fine up here, though I’ll gladly get another (since I’ve lost mine).

I love this post and I really would like to get the elements that @Jason is mentioning here, I went to Utrecht’s website but those products no longer exists. If @Jason or @Don can send me the links to the right products would be awesome!

Most of the time, my sketches are created in tandem with discussion. I add highlighting and shading as the discussion progresses. Someone might say “This part of the page is the most important,” so I highlight it. Or perhaps I say “these scribbles are links” and highlight them.

Seeing the final sketch doesn’t show the sketch unfold. Understanding the sketch therefore sometimes takes some level of explanation. But in the end, it should always make sense to the people who matter.

Jacek, haha my drawing are NOT perfect either. Don’t be fooled. They just look more tidy because I had more time to sketch them. If I’m in a hurry, or sketching in a meeting, you can expect they’ll be pretty messy!

Using digital tools isn’t as fast as analog. I’ll still sketch something before I create the digital version.

Hey Jason,
A great article in sharing how your process flows and your thoughts on tools to use.

You mention you sketch in your Moleskine as do I. Do you keep an archive of Moleskine sketchbooks once full so you can refer back to them? Your sketches look ever so neat.

I’ve found that sketching designs on paper good but lately i’ve taken to a shine in using large post it notes as site design is modular and having common components it allows me to move the post it notes around until I am happy with a layout as well as sketching on them.

I guess its each to their own in how they do things but its great in sharing your knowledge…Now to try and find a Sakura Micron .45mm black marker.

Albert, thanks for the comment, I do keep my Moleskine’s once they’re full.

When I tried to use sticky notes for modular-like design, the square size held me back more than helped. If I could cut the stickies to fit the size of my liking, that would be better. But it seemed like too much overhead for the payoff. But hey, it might work for you, and that’s great!

Anyway, great article! I found a link to your blog in the Jan/Feb 2010 Communication Arts Magazine which led me to this article. I’m definitely going to pick up some of those pens! Thanks for linking to them.

Hi,
Great Blog – I have used the Sakura Micron .45mm black marker with a team of other markers. Markers are great when they work – but My only pet peeve of “Markers” is that they don’t last long and with a price of $6 and up per piece. It’s frustrating when you buy a “Sharpy” and it lasts for less than a couple of days. Great article. Thanks

Jason, I enjoyed the article. I’m collecting information now for a series of articles on tools and process – mostly around product management but with an eye towards UX as well. So, your description of tools was really Thanks for sharing!

Really enjoyed the article Jason, it really helps to have a strong process in place and something that I think all designers need to learn!

I’m quite amused by the pencil vs marker debate too – reminds me of when we used to do blind drawing, and how that makes the lines stronger too. It’s interesting the effect it can have really, isn’t it?

We’re creating a usability tool at the moment as well – just another step in the process – if you’re interested you can check it out at http://intuitionHQ.com and if you’d like to try it out send me a message and I can set you up with a free test too.

Thanks for the suggestion Luca. Not sure what you mean by “we can do better” but here’s my take on Balsamiq…

It’s a crutch for designers and waste of time, in my opinion. If you’re not a designer, and you’re still responsible of mocking up ideas, you’re still better off sketching on paper first.

It’s dreadfully slow in comparison to sketching. And you can’t do it while you’re discussing something with a colleague. You could, but you probably wouldn’t. Sketch first, and when you go to digital make sure it’s in an application that has higher fidelity than sketching. Or go straight to code.

Thanks for sharing Jason. I love Moleskines — but maybe too much! Inevitably, while working in a bound sketchbook I find myself choking creatively, or even annoyed with the ‘book object’ itself. For me there are just too many constraints of the bound page, immediately and later, for use as working document.

Love the 11×17 size – wide open for note-taking, sketching & notations, so much space its like working a whiteboard, but then I fold it in half (8.5×11) for transport or for storage. Several sheets folded together make a tidy project booklet that can be easily shared, or appended over time. 3-hole punch it for binder storage. The paper is sturdy, just the right tooth to support pencil, ink, and marker wonderfully. No bleed thru. Buff white with ghosted warm gray grid… I’m gushing about this paper – and you will too!

It’s 7 months since the writing of this article, and I don’t agree with most of what I’ve proposed here. It’s amazing, really, to see how I’ve done an almost complete 180º turn from what I thought was important late last year.

I am looking for a tool that I can hand sketch wireframes and then upload them. Then have the ability to create templates from them and master components. Does anybody know of any tools that does something like this?

Elf, that’s good you’re sketching (even a bit) before coding. But fear not, you should feel fine with ripping pages out of your moleskine and burning them. The ideas that count are in your head. Don’t put too much stock in the artifacts.

Great point Luis. Thanks for commenting! I haven’t done that in a while, not sure why. I suppose that I’m not too concerned if my inked lines are wrong. I’ll just make another sketch if that’s the case.

I believe nothing can replace pencil in storyboards and prototypes. Its so easy and so simple to update. not only that you can incorporate thoughts of everyone one and as often as you want. And everytime my storyboard or the prototype changes, I either take a photo of it or scan and store it version wise in my PC

I need some help,Im having a sketch,wine and cheese party in june.I was going to give every one a sheet of sketch paper and drawing pencil,but cant figure how they can sit there and draw without an easel or some sort of support for their paper,any suggestions,I dont want it to be costly,because there are going to be 30 people there,help!!