Tools for Sketching User Experiences

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. None are more than $10, and most are less than $5. Listed from left to right.

• .35mm red – for annotations
• 1mm black – for thicker lines
• Chinese Red dual tip – for emphasis and big annotations
• Cool Gray 095 dual tip – for very light shadows
• Cool Gray 065 dual tip – for dark shadows
• 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.

For my paper wireframe templates 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. If readers design their own wireframes, let us know which ones are the most useful!

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.

Sketchboard full of paper wireframe templates, sticky notes, and scanned pages from my notebook.

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. Cheers, and thanks for reading!