The Messy Art Of UX Sketching

Advertisement

I hear a lot of people talking about the importance of sketching when designing or problem-solving, yet it seems that very few people actually sketch. As a UX professional, I sketch every day. I often take over entire walls in our office and cover them with sketches, mapping out everything from context scenarios to wireframes to presentations.

My Desk1
My desk.

Although starting a prototype on a computer is sometimes easier, it’s not the best way to visually problem-solve. When you need to ideate website layouts or mobile applications or to storyboard workflows and context scenarios, sketching is much more efficient. It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.

Many articles discuss the power of sketching and why you should do it, but they don’t go into the how or the methods involved. Sketching seems straightforward, but there are certain ways to do it effectively. In this article, we’ll cover a collection of tools and techniques that I (and many other UX and design folks) use every day.

Sketching ≠ Drawing

Some of the most effective sketches I’ve seen are far from perfect drawings. Just like your thoughts and ideas, sketches are in a constant state of flux, evolving and morphing as you reach a potential solution. Don’t think that you have to be able to draw in order to sketch, although having some experience with it does help.

  • Sketching is an expression of thinking and problem-solving.
  • It’s a form of visual communication, and, as in all languages, some ways of communicating are clearer than others.
  • Sketching is a skill: the more you do it, the better you’ll get at it.

When evaluating your sketches, ask yourself, “How could I better communicate these thoughts?” Getting caught up in evaluating your drawing ability is easy, but try to separate the two. Look at your sketch as if it were a poster. What’s the first thing that’s read? Where is the detailed info? Remember, the eye is drawn to the area with the most detail and contrast.

Just as one’s ability to enunciate words affects how well others understand them, one’s ability to draw does have an impact on how communicative a sketch is. The good news is that drawing and sketching are skills, and the more you do them, the better you’ll get.

OK, let’s get started.

Work In Layers

Often when I’ve done a sketch, the result looks more like a collage than a sketch. Efficiency in sketching comes from working in layers.


Quick video showing how you can use layers to effectively build your sketches.

Technique

Start with a light-gray marker (20 to 30% gray), and progressively add layers of detail with darker markers and pens.

Why?

Starting with a light-gray marker makes this easy. It allows you to make mistakes and evaluate your ideas as you work through a problem. Draw a crooked line with the light marker? No big deal. The lines will barely be noticeable by the time you’re finished with the sketch.

As the pages fill up with ideas, go back in with a darker marker (60% gray) or pen, and layer in additional details for the parts you like. This is also a great way to make a particular sketch pop beside other sketches.

Sketching in layers also keeps you from getting caught up in details right away. It forces you to decide on the content and hierarchy of the view first. If you are sketching an interface that contains a list, but you don’t yet know what will go in the list, put in a few squiggles. Later, you can go back in and sketch a few options for each list item and append them to the page.

Caution

If you start drawing with a ballpoint pen and then go in later with a marker, the pen’s ink will likely smear from the alcohol in the marker.

As you get more confident in your sketching, you will become more comfortable and find that you don’t need to draw as many underlays. But I still find it useful because it allows you to experiment and evaluate ideas as you sketch.

Loosen Up

Technique

When sketching long lines, consider moving your arm and pen with your shoulder rather than from the elbow or wrist. Reserve drawing with your wrist for short quick lines and areas where you need more control.

Why?

This will allow you to draw longer, straighter lines. If you draw from the elbow, you’ll notice that the lines all have a slight curve to them. Placing two dots on the paper, one where you want the line to start and one where you want it to end, is sometimes helpful. Then, orient the paper, make a practice stroke or two, and then draw the line. If you look closely, you’ll see this in the video above.

A bonus to drawing from the shoulder is that much of the motion translates to drawing on a whiteboard; so, in time, your straight lines will be the envy of everyone in the room.

Play To Your Strengths

Technique

Rotate the page before drawing a line in order to draw multiple angles of lines more easily.

Why?

Very few people can draw lines in all directions equally well. Rotating the page allows you to draw a line in the range and direction that works best for you. Don’t try to draw a vertical line if you find it difficult; rotate the page 90 degrees, and draw a horizontal one instead. It’s super-simple but amazingly powerful.

Caution

This does not translate well to a whiteboard, so you’ll still need to learn to draw vertical lines.

Sketching Interactions

Technique

Start with a base sketch, and then use sticky notes to add tooltips, pop-overs, modal windows and other interactive elements.

Why?

Using sticky notes to define tooltips and other interactive elements lets you quickly define interactions and concepts without having to redraw the framework of the application. They are easy to move around and can be sketched on with the same markers and pens you are already using.

  • Define multiple interactions on one sketch, and then strategically remove pieces one at a time before scanning them in or copying the sketch.
  • Use different colors to represent different types of interaction.
  • Is one sticky note not big enough for your modal window? Add another right next to it.
  • Is one sticky note too big for your tooltip, user a ruler as a guide to quickly rip the note down to size.

Sticky Notes used on sketch as pop overs2
Explore a variety of interactions and ideas in a single sketch using sticky notes.

Photo copies of sticky notes on sketches as pop overs3
Upon photocopying various versions of a sketch, each with different sticky notes, you’ll end up with various distinct sketches.

Copying And Pasting For The Real World

At times, you may want to manually redraw a UI element multiple times in a sketch. This is not always a bad thing, because it gives you the opportunity to quickly iterate and forces you to reconsider your ideas. That being said, an all-in-one scanner or photocopier could dramatically increase your efficiency.

Technique

Use a photocopier to quickly create templates from existing sketches or to redraw an area of a sketch.

Why?

A photocopier is the old-school version of Control + C, Control + V. It makes the production of templates and underlays more efficient. It also boosts your confidence, because if you mess up (and you will mess up), you can easily fix it.

  • Does one part of your interface need to be consistently redrawn in multiple sketches? Run a few copies, and then sketch directly on the print-outs.
  • Did you mess up a part of the sketch? No problem. Cover up that portion of the sketch with a piece of paper or with correction fluid, run off a copy, and then start sketching directly on the print-out.
  • Are you working on a mobile project? Or do you want to make a series of sketches all of the same size? Create a layout and copy off a few rounds of underlays. Easier yet, print off underlays of devices or browsers; a good selection can be found in the article “Free Printable Sketching, Wireframing and Note-Taking PDF Templates4.”
  • Do you want to change the layout of a sidebar in your last five sketches? Sketch the new sidebar, run off a few copies, and then tape the new sidebars over the old ones. It’s that easy.
  • To use a sketch as an underlay of another similar one, adjust the density or darkness setting on your photocopier to run a copy of the sketch at 20% of it original value.

Another advantage to photocopies is that marker will not smear on a print-out the way a ballpoint pen does. So, whenever you have an area of a sketch to highlight or add color to, run a few copies first.

Caution

Paper cuts.

Sketching over a photo copy5
Sketching over a photocopy of the original to reevaluate the sidebar.

Final sketch over photo copy6
The final sketch. Notice how the sidebar and its detail are darker than the photocopy. This is intentional, because it allows you to explore ideas in the context of the overall design.

The Design Is In The Details

Use a ruler; specifically, a quilting ruler. Quilting rulers are translucent and are normally printed with a ⅛″ grid screen, letting you see the line you’re drawing relative to the rest of the sketch.

Technique

Use a ruler and a light-gray marker to draw an underlay for a detailed sketch.

Why?

This lets you quickly draw a series of lines that are offset a set distance from each other. This works great for elements such as lists items, charts, buttons and anything else that needs to be evenly spaced. It’s like an analog version of “smart guides.”

Using a quilting ruler to create offset lines7
Quickly creating evenly spaced lines with a quilting ruler and 30% gray marker.

Technique

After using a light-gray marker to lay out a sketch, use a ruler and ballpoint pen or black marker to finalize it.

Why?

When sketching in layers, you want the final design or layout to “pop.” A ruler enables you to be more precise in detailed areas and ensures that long edges are straight.

There is no shame in using a ruler. The key is knowing when to use it. Don’t start sketching with a ruler; rather, bring one in when you need the detail and precision. Remember, you’re sketching, not drawing.

Using a ruler to pop various lines on the sketch8
Using a ruler to make sections of a sketch drawn with a 70% gray marker pop.

Technique

Use a ruler to quickly rip paper or sticky notes by firmly holding the paper with one hand and ripping away the edge with the other hand.

Why?

It’s quicker then grabbing scissors; you already have the ruler with you; and you can take it through airport security.

After lightly sketching an interface with a light marker, finalize it or make one area pop by using a ruler to lay down darker lines.

Ripping a sticky note with a ruler.9
Ripping a sticky note with a ruler.

Tell The Whole Story

Technique

Draw the application in the context of where and how it being used, or frame it with the device it will be used on.

Why?

This forces you to think about the environment that the application will be used in, instills empathy for your users, and establishes understanding of the challenges unique to this application.

I get it. No one wants to sketch out a monitor every time they draw a wireframe. I’m not saying you have to, but a few sketches with context go a long way. Especially with mobile devices, the more context you add to a sketch, the better. Moreover, I always sketch the device for a mobile interface as an underlay, and I often try to sketch the UI at full scale. This forces you to deal with the constraints of the device and makes you aware of how the user may be holding the device.

Caution

Drawing the surrounding environment can be challenging and requires a higher level of sketching competency. Don’t let this intimidate you. If you’re not comfortable sketching the environment or you find it takes too long, use a picture as an underlay instead.

Various sketching of a mobile device in context of their enviroment10
Sketching ideas for a mobile application in the context of where it will be used.

Ditch The Sketchbook

Technique

Draw on 8.5 × 11″ copy paper.

Why?

Sketches are for sharing. You can easily hang 8.5 × 11″ sheets on a wall to share ideas with others or to see a project in its entirety. When you need to save a sketch or two, you can easily batch scan them into a computer without ripping them out of the sketchbook. Still not convinced? Copy paper is cheaper; it allows you to use sketches as underlays without photocopying; and you don’t have to choose between book-bound or spiral-bound.

A wall of sketches11
One of the many walls of sketches in our office.

What Are You Waiting For?

Sketching is not reserved for designers. Developers, project managers and business analysts can get in on the fun, too. It’s the best way for teams to quickly communicate, explore and share ideas across disciplines. Also, I’ve found that others are more receptive to give feedback and make suggestions when shown sketches than when shown print-outs or screenshots.

Remember, it’s about getting ideas out, reviewing those ideas and documenting them, not about creating a work of art. When evaluating your sketches, ask yourself, “How could I better communicate these thoughts?” Getting caught up in evaluating your drawing ability is easy, but try to separate the two, and know that the more you do it, the better you’ll get.

It’s worth repeating that sketching is the quickest way to explore and share thinking with others. It focuses you on discovering the best possible solution, without getting caught up in the technology.

Go for it! Don’t get caught up in the tools. Make a mess. And have fun!

Tools

Here are links to some of the tools described in this post.

All images by Michael Kleinpaste.

(al) (fi)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1415.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1392.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1416.jpg
  4. 4 http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1334.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1365.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1292.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1356.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_13811.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1434.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/12/DSC_0038.jpg
  12. 12 http://www.amazon.com/Collins-Quilt-Sew-Ruler-X18/dp/B001EJEAPW/
  13. 13 http://www.amazon.com/Cool-Grey-Prismacolor-12-set/dp/B0007YLFC6/

↑ Back to topShare on Twitter

Peiter Buick is Senior UX Specialist at Universal Mind. He is passionate about design’s ability to directly impact peoples lives. With a background in industrial design, he brings a unique perspective to the UX community. Connect with Peiter on twitter: @pbuick .

Advertising
  1. 1

    Great practical article !

    5
  2. 2

    Damn Interesting!

    I really like this sentence: “It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.”

    29
    • 3

      I am with you, Nick. When I saw that line, I got into the whole article. At this stage, creativity is item #1.

      0
    • 4

      As unconventional art I find these sketches amazing. But as far as the productivity goes, I believe it will only suit people having above average interest and skills in paper drawing. Sadly, I don’t do well with pen&paper and here’s where computer sketching really saves me from embarrassing my self with my ugly pen&paper failures. :)

      One more thing: I sometimes resorted to pen&paper for doing simple sketches but I found out that graphic tablets really help saving a lot of paper. I’m unsure why you didn’t mentioned them…

      As far as I can tell, both paper and computer sketching require acquired skills. Each has stuff you have to learn before you can produce decent sketches. It’s a matter of inclination, education and choice.

      6
      • 5

        I’m a seasoned sketcher, and I learned a ton from this article. Or rather, I was reminded of the basics I learned in design school over 20 years ago – what goes around, comes around, I guess! Really glad our school focused on the non-digital fundamentals (Macs were available, but not the focus).

        I am very curious to see whether sketching on an iPad would be of great benefit. It’s certainly faster for some things (mocking up type, for example) and makes digital sharing easier. Posting on the wall, though, is a nice thing we shouldn’t forget. It almost needs both.

        On an iPad, I’m playing with using Keynote to block out rough layouts (transparent objects get the ‘layering’ effect) and having multiple slides is a really effective way to visualize states/pages.

        0
  3. 6

    Sketching is the best way to start ANY project that has to do with art, graphic design, UI design or Web design. I see kids jumping on the computer right away all the time and launching Photoshop. This is not the way to be creative. You need to work out problems first. Your end result may be beautiful either way, but if you don’t think about it for a while first, it might not be the best result for your client.

    13
  4. 7

    This is the way i work all day everyday! I sketch! I wish everyone could read this article and learn from it!

    1
  5. 8

    Evan 'OldWorld' Skuthorpe

    December 13, 2011 8:27 am

    What Tim said…

    3
  6. 9

    Great job Peiter!

    1
  7. 10

    Always amazed to see people actually use that incredible imperial measurement system ^^

    3
  8. 11

    I agree with this 100%. there is also additional value added to be able to be ready to sketch ideas on a wipe-board in meetings with clients for explanations or at brain-storming sessions comfortably.
    Good UI/UX does not rely on the technology to be good. Sketching is a Great way to get a lot of ideas out before committing to pixels. Additionally, it’s a great way to cross both halves of the brain, allowing for Creative logic instead of just once or the other.

    1
  9. 12

    Alright! I’m doin’ this!

    1
  10. 13

    Great article.
    Totally agree with what Tim said. Sketch (Look) before you leap.

    1
  11. 14

    The book Paper Prototyping is related and embraces the low-inertia of sketching. I have found that a lightbox/table is a great thing to have around for iterative sketching of UI/UX for those times when a scene has reached its layered limit and I must either baseline what’s there to a new drawing to keep adding or, more often, where I must make a large change.

    0
  12. 15

    Hear, hear. I used to start everything in Illustrator, now my desk is a sea of eraser shavings before committing to any UI solution. I also agree that the best sentence in the article is “…focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.” It keeps you from being too married to something you’ve meticulously created in production software.

    0
  13. 16

    I love this, I wish this would become agency norm. I couldn’t agree more with this article. Far to many people jump right into computers to concept.

    0
  14. 17

    I’m all for markers and sketching on paper. But that’s GUI sketching (not interaction or UX sketching).

    (Remember to finish all sketches. Even if you realize that the plan is not going to work. Having more to present than just some words is important).

    0
  15. 18

    I’m gonna do this too!!!

    (just really poorly)

    sigh

    1
  16. 19

    This bit of advice gets trotted out and passed around quite a bit, granted maybe not as well written as this, but it’s still tired. If a person is a sketcher by nature and isn’t already doing these things this is fantastic advice. However, for those of us who don’t sketch using paper and pencil regularly anymore it isn’t particularly useful. That’s not to say that sketching can’t be a useful tool for designers, but it is not a tool that needs to be built with any specific other group of tools. Over the years I have accepted and ultimately rejected this premise multiple times, forcing myself to put pencil to paper only to end up frustrated and wondering why I wasted time to halfway draw something that I would only have to draw again digitally. The longer I’ve been in this business, and the more conferences I’ve attended, and the more top professionals that I’ve talked to, I’ve come to realize that only a small number work this way except when brainstorming with other designers or to demonstrate a concept to a client. Yet almost all say that they sketch their designs. The difference is that some actually do the sketch using tools as simple as their mind or a complicated as Photoshop. The idea is to come up with a solution to a problem, and then make that idea real. The tools and processes used can be different for everyone. If sketching out every piece of a UI allows you to create better products then that is exactly what you should do. However, if you’re a person like me who tends to draw the header, the side bar(s), content area(s), the footer, and maybe show where the logo will go before realizing that I need to see what the elements will really look like to create an effective design, then skip traditional sketching. Take a look at your own process, my guess is that you will see that you already sketch, just not the way that this post recommends.

    To the author of this post, I mean no disrespect. You provide some excellent advice, and I love the twist you’ve added by sharing various method. As an example of what you do, and how you do it, this is a fantastic post. My only issue with it is that it takes the position that what you do is what everyone should do. It certainly is not.

    36
    • 20

      @joe

      “Over the years I have accepted and ultimately rejected this premise multiple times, forcing myself to put pencil to paper only to end up frustrated and wondering why I wasted time to halfway draw something that I would only have to draw again digitally.”

      I understand your frustration if your ratio of sketches to digital mockups are close to 1:1. I would argue, however, that effective problem solving through sketching should result in sketches that vastly outnumber your mockups. Your ratio of sketches to mockups should reflect the relative complexity of the problem you’re trying to solve. Ask yourself, are there multiple ways to design a brochure-ware site? Yes. Are there multiple ways to design a web-app? You betch’ya, YES!

      There’s no way you can organize all of those alternative designs in your head, so get ‘em out, onto a medium that will allow you to evaluate their strengths and weaknesses, side by side, toe to toe. Weirdly enough, our human brains can work out a lot of stuff simply through the process of observation.

      Here’s where the beauty of sketches lie: They’re dirt cheap, easy to produce, and easy to trash. Have 20 different ways to design your web-app? Try capturing them in photoshop, illustrator, or even a wireframe tool like Balsamiq. You’ll drive yourself nuts! Even if you get through all 20 digital mockups, you’re gonna hate winnowing out the weak designs. It’s gonna hurt to throw out that 3 hour mock, or even 1 hour mock — we love our babies!

      In the end, the option of sketching, in a disciplined creative problem-solving process, is really about efficiency. If you haven’t already, checkout Bill Buxton’s “Sketching User Experiences”. He covers the subject really well, and from the perspective of other creative disciplines.

      Cheers!

      7
      • 21

        While well thought out, your response suffers from the same major flaw as the original post. You assume that what works best for you is what will work best for everyone. If I expected my team to work the same way I do it would require firing some of my best people. If the goal is to get from point A to point B then that is what I want my team focused on. Becoming dogmatic about the methods they use will only get in the way of them achieving that goal. Sharing those methods make us a stronger team, insisting on certain ones because they work for me would be counter-productive. No one that I work with, to the best of my knowledge, sketches their designs as a rule. That’s ok with me, they are very good at what they do. If anyone of them start, or a new person does, I won’t have a problem with it. If anyone starts saying their method is right and others are wrong, we’ve got a problem.

        8
        • 22

          @joe : I would argue that the major point in this thread is the ability to quickly get out ideas, often in the company of other participants. I have been in many design workshops where doing things digitally in the ideation stage is just not doable. Also, the ability to stand at a whiteboard and generate ideas is a plus. I used to never sketch and am glad to have found that it’s incredibly powerful and useful in my day-to-day tasks.

          @Peiter : Great article – Thanks!

          1
  17. 23

    I love to sketch and draw, but after years of producing UI/UX mockups I have to disagree that you should always start out with a hand-drawn sketch. Sometimes a mockup in illustrator/PS is faster and more effective. The ability to collaborate using software is faster, cleaner and more iterative than handing off photocopies, if you even have a photocopier.

    7
    • 24

      I, too, am very comfortable with drawing/sketching but prefer something like Balsamiq Mockups for presenting UI and UX ideas to clients. While I start with thumbnail sketches on paper (which the client never sees) for brainstorming and vetting, I build up the ideas with software tools instead. Software gives me speed and options I just don’t have with pen/paper such as: copy and paste, undo, versioning, templates, easy color changes and size tweaking, remote collaboration, etc.

      The computer is just another artist’s tool, like pencil/paper. Having a large artist’s toolbox of traditional and software tools gives you more options and allows you to pick the right tool for the job.

      0
  18. 25

    Thanks for the link the the grey markers. Can you link to a smaller set of grey markers? And also to a small set of colored ones? Thanks!

    1
  19. 26

    I like that you incorporated the physical with the mechanical. So many people today start out on a software product and don’t think that they have the wherewithal to get to a freeform sketch style.

    For those that say Photoshop, etc. is the right way and people should move along, perhaps you’re right in some circumstances and perhaps there needs to be and understanding and allowance of a different way. I know of many that get stuck with choosing the right font and don’t get to the overall UX. Stuck in the weeds because the software is in the way.

    Well done and thank you.

    0
  20. 27

    The amazing video attached to the article – how long did this process of drawing actually take?

    0
  21. 28

    Great article! Thanks for taking the mystery out of sketching!

    0
  22. 29

    Great article, and beautiful work, but I see way more effort here than I would normally ask my team to do when sketching. Sketches for me are very organic, loose, and doodle-y. I see levels of fidelity here that I’d normally expect once the idea hits Illustrator, OmniGraffle, or Fireworks.

    This looks like the “Mad Men” version of UX design :)

    4
  23. 30

    I love the article and the passion you have, but I would have to disagree that sketching is always the genesis of a good design. All that matters is the individual designer is comfortable with his or her drafting medium – some dive right into photoshop etc while others use it to cement the ideas they sketched.

    Personally, I find that I only sketch when I am frustrated or at my wits end about a particular problem (or set of problems) which needs to be solved. In fact, I would love to sketch my designs first more often… but the twin constraints of time and deadlines limit its feasibility.

    0
  24. 31

    If you’re rusty at sketching another alternative is balsamiq.com/

    0
  25. 32

    Awesome !
    Sketching improves communication. In France we often say : “je vais pas faire un dessin” (I’m not going to draw it) which is tantamount for “I’m not going to spell it out for you”.
    It means that if the idea is perfectly clear it is not necessary to give further explanations. Ideas can be very clear for the designer but not for his team or his clients that is why sketching is a powerful technique.

    0
  26. 33

    Great article, I rarely do sketches but have always felt that I should. This post might get me to start doing so.

    Whenever I have sketched it’s been in a sketchbook with a ball point pen, likely the reason I dislike sketching because I feel like it’s a waste of nice paper.

    Thanks for sharing your thoughts and workflow!

    0
  27. 34

    Awesome !
    However it works only for long term projects..

    -1
  28. 35

    EXCELLENT ARTICLE!!!

    As an automobile designer having made his way into UI/UX, I can totally draw parallels between this and the representation techniques we use there. Though I’ve seen UX designers (myself included) using sketches extensively, markers are something that came off as a pleasant surprise! I think I now know what to do to prevent my Chartpaks from drying up :)

    End of the day, nothing beats the beauty and the feel of pen on paper!

    0
  29. 36

    Paper cuts—best line and so true. I believe in sketches, too. Excellent article.

    2
  30. 37

    I have read a lot about the importance of sketching but so far I haven’t understood it for myself.

    My work is mostly development based but I do designing too. I guess I need to learn the importance of sketching. I am sure it will help my work in a lot of ways.

    0
  31. 38

    I agree with you on the concept of sketching as a quick way to get the feel for placement of elements and the overall flow of an application. What I don’t agree with is the level of fidelity of your sketches. I’ll always go for the simplest possible sketch to prove that my concept is working. Too much detail just disturbs when trying to communicate my ideas.

    6
  32. 39

    Wow nice article.

    I’m realy jealous of people who can do that. I’ll never see myself working like that, making such nice sketches and all.

    I’ll do everything on the computer from start, but i love the charme of such sketches

    0
  33. 40

    I was cleaning my office/room the other day and there where over hundreds of those sketches. It’s fun to paint/sketch your ideas on paper!

    Good post!

    -1
  34. 41

    Ha! I was hoping for the links to the pens at the end and then BAM they were there! Huzza!

    -1
  35. 42
  36. 43

    Great article – it feels like it’s ready to go into a book on how to sketch ideas! I’m going to dust off those markers and get into sketching my web design layouts more…

    0
  37. 44

    The video above makes me want to get my hands dirty!
    Thank you for the post – I’m just about to start on a new project, and I decided to give sketching a go!

    0
  38. 45

    Great article. I’ve resorted to pen & paper just this morning to concept an application in the most free flow fashion possible, great to step away from concepting inside rigid data/ux tools and working out what the problem actually is very rapidly.

    Might try out some of those particular techniques in app architecture too.

    Thanks.

    0
  39. 46

    You lost me somewhat at the pile of Prismacolor markers. When you’re using a ruler, photocopy machine, and many colored markers, I think most people would find that less efficient than using a sketching app on their tablet or PC.

    3
  40. 47

    ‘I hear a lot of people talking about the importance of sketching when designing or problem-solving, yet it seems that very few people actually sketch. As a UX professional, I sketch every day. ‘

    Comes to me as: look at me I’m so cool and creative..

    -7
  41. 48

    Quality article right there. Not just with the content, but in the amount of writing and visual aids.

    1
  42. 49

    Thanks for taking the time to read the article and post your comments. I appreciate all the feedback and insights. Good stuff!

    It has been my experience that great design solutions rarely arise from a process solely rooted in efficiency. While I believe there is a time and place to jump on the computer when designing, it’s not during the initial ideation phase. The proliferation of tablets could change this. However, I have yet to find an alternative to sketching on paper when collaborating with a team.

    There are times we sketch at a lower fidelity than what is presented above. The great thing about sketching in layers is that it allows you to stop once the fidelity that expresses your point is reached. It also allows you to pick back up right where you left off to dig into more details as needed.

    3
  43. 50

    I prefer sketching on a tablet and avoid the paper,marker and photocopier route. It resolves also the issue of loosing any sketches because you either misplaced them or you killed it by adding something you shouldn’t have.
    Maturing an idea out is half the route; the other part is acquiring a buy-in from the stakeholders. Being able to email the sketch to all stakeholders on spot after you did the last tweaks during a meeting makes the crowd go wild.
    Good article by the way.

    0
  44. 51

    This is close to what I do when designing my themes and templates, sketch it out on paper and pencil, make notes (tons of notes), and when I start to get tired, I go for coffee and get fresh air, then come back with new ideas. I usually then go into Photoshop and start creating mock-ups (often with over a 100 layers) to get a better visual idea. Once I have a PSD template, I slice it and move into coding.

    1
  45. 52

    Great article, but it really is about drawing, not sketching. If it takes more than a minute or two, it can’t be a sketch, IMHO. Sure, you could say this is a semantic difference, a subtle distinction, but if “sketching” includes lots of cutting and taping, five different color markers, and a half an hour or more of labor, then what word should we use for when you dash off a conceptual image in only a few simple strokes?

    Designers need to be encouraged to sketch in the traditional sense of the word: Draw something quickly. Be done in 30 seconds. Fail quickly. Move on. Succed, then mess it up again. Try again. Try something else. That’s sketching.

    But designers need to draw, too. This is an excellent drawing article.

    The examples and techniques you show are great for getting a designer to become intimate with the elements of their design in a loose and fluid way, but without being so loose that the image being created doesn’t communicate a design concept in a very robust way. I wholeheartedly endorse *drawing* as a design technique, including all of the collage and color and drafting techniques you describe, precisely because of how it forces the designer to understand the nuances of the shapes and proportions and elements of their design so much better than a digital form does. Manual drawing is the most truly intimate form of design. In fact, sometimes producing a paper drawing can and should take far, far longer than the Illustrator/Graffle/Visio approach might for precisely that reason.

    The word “drawing” is just fine for what you’re teaching here. People are scared that “drawing” involves figure drawing and representational art, but it really doesn’t. It’s a great art form, and it’s far, far more than, and much different from, sketching.

    6
    • 53

      I agree with you in that this article isn’t entirely about sketching, but it isn’t specifically about drawing either.

      The article is focused on rapid paper-based prototyping, using sketching and drawing (among other disciplines) to create presentable prototypes in a quick manner by providing an easy, iterative methodology for pencil and paper.

      In this light, it’s a great article, highlighting paper as a viable alternative to computer-based prototyping by bringing one of the biggest boons of digital to paper & pen.

      4
  46. 54

    This is the very first blog post in this site i finished reading.

    3
  47. 55

    Fantastic article… Makes a lot of sense. Being an artist myself, i naturally tend to sketch a design or a layout before getting my hands on photoshop or any other tool. But for non-artists I would say sketching layouts bring in 2 advantages :

    - One, you get to brain-storm and bring out your ideas.
    - Two, over a period of time your sketching improves and sketching is the first step in becoming an artist.

    I really loved your idea of pining-up the layouts. I am really gonna do that. With more exposure to the wireframes there’s real good chance of improvising and getting the best out of us.

    3
  48. 56

    Interesting post.. but I for one am sooo sick of this. My teachers preach sketching like it is the cure for AIDS and I just can’t get around to it if I’m not forced.

    Normally in the time I’d go sketching i can get much further and to a much more mature iteration of a design if I don’t have to deal with shitty shetch iterations.

    To lay it down plain and simple. Sketching is for some but personally sketching hinders me form communicating my ideas and when I have to sketch I’ll be less creative since I won’t be able to express my ideas in a way that I’m content with.

    -1
  49. 57

    Juan Hidalgo Reina

    December 15, 2011 3:30 am

    Excellent article

    0
  50. 58

    next level sketching tools allows you to photograph sketches and generate digital wireframes through their app (Im not one of their marketers, just really found this useful :)

    0
  51. 59

    great article! thanks a lot

    0
  52. 60

    The video seems to be a lot more like technical drawings then sketching. I have found that sketching is a great way to quickly conceptualize concepts and ux patterns but as soon as you break out a ruler it becomes drafting not sketching.

    Once the overal pattern and elements have been sketched I have found it much easier and efficient to jump into digital media as it is much less permanent and easier to adjust then marker

    1
  53. 61

    A well planned and stuctured article, one of the best I’ve ever read! Also a great eyeopener and a good insight for the fledgling that I am. Thank you!

    -1
  54. 62

    Very well written. About time some one made an article like this. I always wonder how other designers sketch? The thought od drawing in layers has never occurred to me.

    Thanks for the article i’ve been looking for for ages. :)

    3
  55. 63

    Really a practical and fantastic article!

    1
  56. 64

    Fantastic article! And a big thumbs up to Smashing Magazine for including great content covering every aspect of design and development :)

    1
  57. 65

    Although I do agree that this is a great & well written article, I feel that too many people focus on how ‘pretty’ the mockups or wireframes are. I agree that too many people get easily caught up in the tech side of things, but it’s just the same with people getting caught up with the aesthetics instead of its effectiveness.

    7
  58. 66

    anybody trying to sketch with an iPad? pros? cons?

    1
  59. 67

    Thanks for this article, I really appreciated the practical techniques.

    Now that I sketch quite a bit I end up with pages and pages of paper. I’m often working on several projects at once so I need to keep my sketches handy. I also switch almost daily between working at my office and working at a client site.

    One thing I’ve started to wonder about is what ways others have found useful to organize their sketches. I like to have things loose (I don’t want a bound notebook) so that I can shuffle them around, group them into projects, and reorder them in general. Maybe just a low-tech binder with pockets is what I need, but I was wondering what others use to keep their sketches portable and organized.

    1
    • 68

      Paul,
      I keep an inexpensive flat bed scanner on my desk and scan most all sketches into Evernote. Then I can find and access them anytime (and from most anywhere).
      - Troy C

      0
  60. 69

    It amazes me that in this day and age people are promoting such old fashioned techniques. I mean talk about wasting time and trees!

    I think there are excellent tools available out there that make this whole process a lot quicker and less painful. I’m thinking specifically about wireframing tools such as OmniGraffle, which are also available on tablets making it super easy to drag and drop ready made elements on a screen. What’s the point in drawing browser screens and functional elements from scratch when these tools have ready made interface items you can just drag around a ready made template?

    Hmm I feel a blog post coming here…

    -7
    • 70

      I used to think like you. Having learnt everything off the internet, with no formal education.

      But damn, sketching is something different, ever since i started sketching with pencil my work has improved dramatically. Even though im totally crap at both drawing and sketching.

      1
  61. 71

    hi,many thanks for your article,it’s good to know how to do a good sketch at the beginning of project.

    1
  62. 72

    I use Balsamiq Mockups. It’s so easy to use that you can’t get caught up in the technology.

    0
  63. 73

    The video made this a killer post. Thanks.

    2
  64. 74

    I agree with some of the other posters. Very interesting article, sketching is very useful for SOME people and their personal workflow / idea formation.

    However – when you sit down and discuss with your colleagues or the client and they say “actually I think that bit should be more prominent”, and you have 5 page layouts that all feature that element… It really is easier to just edit it in Photoshop.

    I sketch a lot in my day to day and find doing little initial sketches for my own brains sake when I am planning a site is very useful. But when I am actually properly planning a UX then digital is much more practical.

    Having said that – for those who do want to sketch – this is still a useful article.

    -1
  65. 75

    Can’t see the mentioned video. Anywhere else I can spot it?

    3
  66. 76

    Hello, nice article, im just wondering, is there a way of getting the Prismacolor markers anywhere in Germany, or do i have to buy them from the U.S.?

    0
  67. 77

    I’m on the other side of the fence here, this article seems to be an in-depth tutorial on drawing. The tools and techniques that you use would take me twice as long as it does to quickly slap together some boxes (or even other shapes!) into illustrator then add shading, add text, copy past, re-arrange, delete, re-arrange again, copy paste, try a new layout, over and over until I’ve got exactly the same result; a number of scruffy looking alternatives, some discarded and some iterated towards a more final vision.

    It reminds me of when a teacher told me off for not using left-handed scissors when, as a left-hander, I’d learnt to use right-handed scissors perfectly with my right hand.

    Its not about the tools, its how well the process works and the end result.

    3
  68. 78

    Big ideas need big paper. Go 11″ x 17″ or go home.

    -1
  69. 79

    If you can”t draw then you might want to learn to. I wouldn’t hire a designer or anyone associated with a product’s design if they couldn’t draw. It’s basic communication technique in our industry.

    Most of the people who say they can’t draw just don’t like the pain of getting the hand and mind back in shape and operating in tandem.

    And how many of us hear this excuse, then days later we catch the excuse maker busting out these elaborate sketches on a white board to get their point across. MOST everyone can draw.

    And for the people against paper? You’re using more energy and resources storing your photos in the cloud and on some network than all the pulp you’ll use to paper prototype with in your lifetime.

    0
  70. 80

    I see people advocating sketching on paper a lot, seemingly ignoring that you can “sketch” on the computer as well. Firing up photoshop doesn’t mean sitting there until you put together a design. You can do all your experimentation with photoshop or other dedicated wireframing tools. For a lot of people that’s just as quick if not quicker then grabbing, markers, paper, rulers etc and sketching away in real life.

    -1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top