Tools for Sketching User Experiences

A paper wireframe template in action.

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

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 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.

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.

Get a quality notebook

My Moleskines, small and large.

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.

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.

Sketches to prepare the design of my paper wireframe templates.

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.

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

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.

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!

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Excellent post Jason! Thanks for sharing your tools/process. I’m anxious to try sketchboarding on my current project. Are there any other sketchboard photos on your flickr?

  2. nice write up!

    Loved seeing the process. I will be referring back to this post as I work on sketches.

    ~ Aaron I

  3. A truly amazing read, very spot on comments and also very easy to read. Thanks very much.

  4. Amazing write up, thanks for the great advice!

    No Utrecht store around here :(

  5. What an epic post, this is taking wireframing it to the next level, which I love.

    Well done :)

    • 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.

    • Don’t worry Jason, I know as much as anyone, the importance of wireframes. I preach it as often as I can and have made a couple of videos on them as well.

      I just like how you took your wireframes to the next level.

  6. 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.

  7. Very well written, Jason. Thanks so much for sharing this post with us!

  8. what a great article! Truly inspiring. Thank you for sharing this.

  9. @ Jess: Yes, I have a whole set of sketchboard photos, from start to finish. I’ll probably write an article just on the creation of this one sketchboard.

    @ Kyle: Awesome. Let me know how they work out for you. I can send you the PSD’s if you’d like to make some small changes for yourself.

    Thanks everyone. Glad you’ve enjoyed it! :D

  10. Fantastic read. I always enjoy seeing other peoples process. Thanks!

  11. Thanks for the fantastic article. The Denver UX book group will also be discussing Sketching the User Experience on Oct 28
    http://groups.google.com/group/ux-bookclub-denver

    • Thanks for mentioning that, Lys. I’ll pass this article their way, since I’m sure it’ll be a little extra fuel for the fire. Cheers!

  12. 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. :-)

  13. @ 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.

  14. nice post, thnaks

  15. 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.

  16. 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.

  17. 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

  18. Nice tools,thanks for sharing.

  19. Nice stuff! I’ve been spending so much time lately trying out prototyping tools it’s great to be reminded that good ‘ole pen and paper is where it should really all begin.

  20. 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!

  21. Excellent post! I’ve got to spend more time on sketches & wireframes and less time on the computer.
    Maybe what I needed was the motivation and the proper tools. And you delivered that! Thanks ;-)

  22. Really nice post :D

  23. Great post. I admit I’ve gotten away from paper sketching for software sketching. But you reminded me how fun and satisfying it can be.

    Personally, back in the day I preferred Pilot Extra Fine SCUF Markers. I need to try your Sakura Micron.

  24. from my expirience, the best use of sketchboard are the erasable whiteboards. cannot imagine doing a project without them

  25. Thank you all for commenting. Glad I could impart a bit of incentive to sketch early and often. Cheers!

  26. Thanks for this great article. I have had the same experience and it was fun to hear someone articulate it so well.

  27. 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.

    Also worth noting, Sean Flannagan from Etsy also has an extensive list of Moleskine alternatives.

  28. Tim Oswald October 7, 2009

    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.

  29. That’s the greatest article I’ve ever read on sketching! You are a genius! I can’t wait to get some new markers and moleskin ASAP!

  30. excellent post – best I’ve read in a while.

    I don’t use templates much myself (yet) but I’ve long been a believer in sketching before wireframing.

  31. WoW great post. Lots of sketching information. Thanks for sharing this nice article.

  32. 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.

      Glad you mentioned that. And thanks so much for reading! :)

  33. Hey Jason! That’s a very good idea .. maybe I’ll scan some and put them up on the blog this week :) Cheers! Keep writing fab stuff!

    • Thanks for writing such an easy-to-unsdertand article on this topic.

  34. 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.

    • Thanks Devi I’m so glad you liked it. And it’s mighty kind of you to take the time to say so. :)

      I hope you’ll feel compelled to share what you create. Cheers!

  35. Really love this post thank you. It is something we cover in Week 1 of our Beginner course as we know it is just THAT important to get the UX right!

  36. Nice post, Jason. I love the style of your work, and have seen most of it previously over at Wireframes Magazine (http://wireframes.linowski.ca)

    Thanks!

  37. Hey Jason – thanks for the awesome article and resource. Despite the fact that they’re just regular old boxes, they really helped me with wireframing one of my client’s sites. :)

  38. Good stuff. Now to see if I can track down those pens in Göteborg. Been using the gel hard tip pens .38 and .5 from MUJI, but they don’t fry fast enough.

  39. @ erik: Thanks for the link, that’s a great resource for wireframes!

    @ James Costa: Awesome, if you get a chance, upload your sketches to Flickr and share with me. (I’m “jasonrobb” over there.)

    @ Darryl: Good luck! Who knows, you might find a better set of markers over there. I’d be interested to see what you settle with. Cheers!

  40. IleenieWeenie October 13, 2009

    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!

  41. 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 again!

  42. Jason Pippin October 14, 2009

    Fantastic! Sketching UI ideas is my favorite part of the UX process. It’s good to see a post covering it in more detail! (bookmarked!)

  43. Another great post! I am often ‘on again, off again’ with sketchbooks. You have inspired me to keep a quality sketchbook with me for sketching ideas that often come and go without being captured.

    • Like the guys at Field Notes say, “I’m not writing it down to remember it later. I’m writing it down to remember it now.” :)

      Keeping a notebook nearby is a large part of the battle. If you want to get into the habit, start small. Get a pocket-sized notebook and take it everywhere. Good luck, Scott!

  44. jason,

    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).

  45. Awesome post! It’s really interesting to learn about other designers and their ux process. Here’s my take on the matter: http://maquinastudio.com/blog/2009/08/the-fine-art-of-wireframing/

  46. It’s incredible that during years one simple thing like a pencil become so useful!

    Sorry for my english!

  47. Thanks for the generous & helpful post. I love your specifics on markers and how you put everything into ‘war room’ mode.

  48. Haha, “war room” — that’s a great way to put it. Sketchboard sessions can feel war rooms at times.

    Glad you liked the article, and thanks for taking the time to say so. Cheers! :)

  49. Great Post!

    I see various examples using yellow, but I don’t quite understand what is the actual purpose of using yellow in the photographs shown.

    I’m sure it’s meant to “highlight” something, but in these particular cases, what is it being used for, exactly?

    Thank you!

    P.S: I’ve purchased most of these markers from the links provided here –great stuff!

    • Diego, I’m glad you asked!

      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.

      Thanks for commenting! =)

      Cheers,
      Jason R.

  50. Hello Jason,

    really nice post and I like the ‘classic’ pen and paper. But have you also tried online wireframe tools or software such as http://www.pidoco.com?

    My hand drawings are not nearly as perfect as yours, therefore it helps me lot.

    What do you think about them? Limitations? Advantages? …

    Thanks, Jacek

    • 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.

      Digital tools have a purpose. My only warning is that if your wireframes aren’t going to BECOME the final product, don’t waste your time. Check 37Signals point of view on the subject: https://gettingreal.37signals.com/ch11_Dont_Do_Dead_Documents.php

      Thanks for commenting, cheers,

      Jason R.

  51. 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.

    Thanks
    Albert

    • 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!

      Cheers,
      Jason R.

  52. Nice article. I’ve been involved in usability testing for some time now and I’m ready to translate findings into design. This will help me!

  53. This page says there are 74 comments, but I only see two…?

    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.

    • Oh that is weird, I see that too… only a few comments. I wonder what happened?

      Thanks for stopping by Mike, glad you enjoyed the article. =)

      Cheers,
      Jason R.

    • Oh fun. This is a good problem to have. We’re working on it guys.

  54. Go here for the first 70+ comments: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/comment-page-1/

    I’m not sure why the pagination isn’t showing up. I’ve alerted the UX Booth troops! Thanks for your patience.

  55. 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

    • Ditto. When will they make an everlasting Sakura .45mm marker? Soon I hope.

      Thanks for the comment, Bari.

  56. 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!

  57. The unnamed 1mm Black pen is called a “Pigma Graphic” Pen, which for some reason isn’t stocked by Jason’s favorite online arts store – you’ll need to Google it.

  58. Wow that is an awesome article…Thank you. The way you broke it down helps and will help me. I’m trying to get better at graphic design and I thank you for the help.

  59. Hi, this is my first time on your website and this was a damn good first impression!

    I like the way you explain stuff and they way you write in general!

    So I just wanted to say that thanks, and that you will see more to me :)

    And btw, this inspired me to make my own wireframing template to my company. I have been used to sketch on blank paper!

    • Thanks for stopping by Helge-Kristoffer, but this isn’t *my* website. It’s just an article, written for *this* website. My personal site is jasonrobb.com.

      Glad to hear you made your own templates for your company. I’m actually returning to blank paper myself. Now I just draw the box on the page the size that I need. It’s an on-demand template.

      Cheers!

  60. Sorry for the bad english, have not slept for 24 hours! :P

  61. Hey, great article! I was particularly impressed with your drawing style. I guess practice makes perfect. Thanks!

  62. 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.

    Keep up the great work!

    Cheers.

    • Thanks for the reply, Jacob. Blind drawing, sounds painful! I can’t imagine how awful my sketching would be without looking. Though I admit I’m interested enough to try it.

      Interesting usability testing app. I just might take you up on that offer.

  63. Thanks for helpful posting.

  64. This is really interesting, Thanks for sharing.

  65. Excellent article. Very informative. I am a fan of your sketch notes and this article will give enough info to try my hand with sketch-noting. Tanks Jason.

  66. Luca Perugini March 15, 2010

    Hi, interesting post.

    Have you never tried Mockups Balsamiq? http://www.balsamiq.com

    I think with this tool we can do better :-)

    Luca

    • 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.

  67. Iestyn Lloyd March 23, 2010

    Anyone know of a place to get these pens in the UK or anything that compares? Non bleeding pens is a must.

  68. Great article, really finding it hard to get your suggested kit to try out over here in Europe :( None of the companies I can find ship outside the US. Any suggestions?

  69. Sorry, UK folks. I haven’t the slightest idea where or how to get these pens to you. But I bet you there are alternatives.

    The way I found these was literally by buying one pen of every type from the art store and trying them out. It took months of testing and trail and error until I discovered those were just right.

    Thanks for reading!

  70. Jeffrey Potter April 23, 2010

    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.

    I’ve found real pleasure using: Tufte’s ‘Archival Graph Paper for Artists and Scientists’ – Graph paper with a ghost grid printed on acid-free paper (same paper used in his books), 48-sheet pads. http://www.edwardtufte.com/tufte/posters (scroll to bottom of page).

    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!

  71. 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.

    More details coming soon.

  72. Excellent Post! I’ve learned a lot! Thanks a lot for sharing your experience.

  73. Great ! Good article ! Thanks for sharing.

  74. Interesting in that details which changed in time, thanks for sharing

  75. Thanks for reading and commenting everyone. Really glad you enjoyed the article.

  76. I have discovered my new idea of thinking about the tools of sketching. Already i have done several works by following your experience. Many many thanks.

  77. thats really need for advanced user to sketch anything plan

  78. 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?

  79. *Phew* “Scanned.” At first I worried that you were tearing pages out of your moleskin.

    Great advice, though. I’m always impatient to just Get To The Code, Dammit, and I’ve started sketching instead in the hopes of getting more solid designs out the door.

    • 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.

  80. Fantastic! Sketching UI ideas is my favorite part of the UX process. It’s good to see a post covering it in more detail! (bookmarked!)

  81. Hi Jason!

    I was trying to download yr pdf-files…but the links are broken? … :(
    P.S nice article btw!
    ^_^)
    F/

    • Fernando, what pdf’s are you trying to download? Reach me on Twitter and I’ll get you a working link. Sorry about the trouble!

  82. A good thing is to use drawing pencils to set up the fail-proof skeleton, and then if you’re pretty sure of what you got, then you drop the ink.

    Awesome post, I’m bookmarking.

    • 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.

  83. Nice tips & tools you have mention here Jason Robb. Very useful resources for photoshop professionals like me. Thanks for share this wonderful post. :)

  84. Aardvarked October 28, 2010

    Great article.

    I’m trying to source alternative markers to the ones you listed as your preferred ones aren’t available in the UK. Do you know the nib size of the dual tip markers by any chance?

    • Aardvarked October 30, 2010

      I actually managed to find a UK based store that stocks most of the pens you listed and has good alternatives to the ones it doesn’t.

      If anyone else is interested the address is – http://www.cultpens.com/

  85. Through a word I can say that is a great blog. thanks

  86. great stuff, thanks!

  87. Abhijeet January 19, 2011

    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

  88. judy mealy January 5, 2012

    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!!

Related Posts