11 ms·

The Messy Art Of UX Sketching

167 points by cwan 15y ago

brd 15y ago
Always refreshing to see someone advocating paper prototyping. There is nothing better than starting with an unbiased blank canvas when trying to brain storm the best user experience possible.
haydenchambers 15y ago
IMHO the video looks like someone rendering a preconceived idea not ui problem solving which makes the exercise useless. Want a pretty pic to show front end coders? fine.
mrbgty 15y ago
This looks a lot more like drawing than what I would consider sketching. To me, sketching would use a single pen/pencil/marker and look much uglier.
- andrewflnr 15y ago
  Eh, it's a continuum. It's definitely on the refined side of sketching. Really, sketching is a subset of drawing.
alexwolfe 15y ago
This is definitely a great way to focus on the actual layout and UI elements. Starting with photoshop can often lead to designers block, going to paper keeps its simple and allows you to start at the lightest detail and build on top of that. btw, nice video.
SoftwareMaven 15y ago
I've started using iMockup on my iPad for this. I've never had a good hand, so if I draw, I spend too much time worrying about those mechanics. The iPad gets me away from my desktop and puts me into much the same mode as a notebook would. That said, I'm not a great designer (more of a product generalist: I can start with an idea and end with a complete product). I have to optimize for that path. :)
arrel 15y ago
Once you involve a photocopier in your "sketching" process you've officially jumped the shark. I am a big advocate of sketching wireframes before moving to the computer, but that means paper, ball point pen, and a minute or less per sketch. What he is creating is hand-crafted design - it looks beautiful, it communicates ideas very well, but it is totally inefficient in reaching the end goal of a usable, functional product.
- notyourwork 15y ago
  "but it is totally inefficient in reaching the end goal of a usable, functional product." Why? Inefficient, yes your opinion but this does not prove this process would not yield a usable product. Your comment makes me wonder how we ever got to where we are today with computers.
  - arrel 15y ago
    It's definitely possible to design a great product with a very manual design process, but you can also write a great novel using pen and paper. Computers make a lot of things a lot easier, and you should leverage them when they make sense. (like for instantly making exact copies of designs you make, or even better making slight variations along the way.)
- krschultz 15y ago
  It is definitely more efficient to communicate your point clearly - even if that takes more time - than to have multiple jump in and start working without being on the same page.
- andos 15y ago
  I think using a photocopier has more to do with keeping oneself away from the computer to avoid distractions. Moreover, if one's role is exclusively as a UX designer (instead of designer and coder) they might be inclined to be a little more zealous about the quality of what they produce.
andrewflnr 15y ago
I sketch UIs a lot, but all in pencil. I wonder why he doesn't even mention them. They automatically let you vary your line value, and you can actually erase them, among other benefits. It tends not to copy well, but a good scanner should be fine and if it's just a prototype then you were going to recreate it on the computer anyway.
yarone 15y ago
I used pencil & paper for wireframing for years. Scissors, photocopying, etc., exactly as the article explains. I struggled off and on with various replacements: Visio, Photoshop, Powerpoint. All of these gave me to much control over the final product, and I inevitably spent too much time trying to get things pixel-perfect, choosing the right colors, finding the right icons, and more - things that my graphic designer peers should be doing, not me. Then, I discovered Balsamiq mockups, which I've been using nonstop now since early 2009. No longer using pencil & paper.
alabut 15y ago
Nice! I like sketching so much that I devoted a big part of my portfolio to talking about my prototyping process: http://alabut.com/work.html http://alabut.com/work.html Pro tip: buy a sketchbook that has both a 24 column grid and browser chrome, so it'll feel more like the final product and give you a better sense of proportion. But don't be afraid to chuck it for something even more low fidelity, like butcher paper and sharpies. Here's the one I've been using - it has tear-away pages and alternates between full-width and 2-on-a-page layouts: http://appsketchbook.com/products/ux-sketchbook http://appsketchbook.com/products/ux-sketchbook Best $12 I ever spent. I also a fan of the double-ended art markers by Prismacolor - they're basically like highlighters but in a variety of colors, like a subtle gray. I like adding shading with those instead of dealing with the messiness of pencils and erasers. That's how I make sketches like these: http://dribbble.com/shots/230767-Stats-Page-For-iOS-App http://dribbble.com/shots/230767-Stats-Page-For-iOS-App http://dribbble.com/shots/230717-Dev-Dashboard http://dribbble.com/shots/230717-Dev-Dashboard
- anigbrowl 15y ago
  That UX Sketchbook looks neat, but I wonder why no landscape orientation. Most people I know have the browser maximised and there are still a lot of laptops and desktops out there.
  - alabut 15y ago
    The limiting factor is reading habits, not browser size. Just because you can design in a landscape orientation doesn't mean you should and wider isn't necessarily better. It's not like magazines are 3 feet across because paper's cheap, right?
    - anigbrowl 15y ago
      I wholly agree (and ended up buying a tablet precisely because I got sick of reading blogs with vast swathes of empty space at the side), but not everything is necessarily better in portrait. I was going to forward the sketchbook link to Mrs Browl, who is redesigning the UX for her firm's browser-based product right now, but then I reflected that that application involves a lot of tabular data and records management and that many uses of the product in a portrait orientation would be terribly frustrating. She is interested in bringing it to tablets, and portrait orientation would be appropriate for many use cases, but not all. I do think the UX sketchbook is very neat - the squared paper inside the broswer frame is genius. It just seems perverse to only offer a single orientation in 2 different sizes. If it had portrait on one side and landscape on the other I'd buy it in a second (he hinted, in case the makers are reading).
richardburton 15y ago
One of the things I love most about sketching is the pure level of focus that can be attained when there are no Growl pop-ups or notifications of any kind.
neworbit 15y ago
For software tools along these lines I adore foreui - the skinning feature is great for placating pointy-haired bosses^H^H^H^H^H^H customers
rhizome 15y ago
I've been a huge fan of Konigi pads for a couple years now: http://konigi.com/tools/graph-paper http://konigi.com/tools/graph-paper
periferral 15y ago
Though I personally haven't used this, I know many people who do and use it very well. It seems like a great tool for UX proofing. http://www.balsamiq.com/ http://www.balsamiq.com/
6ren 15y ago
37signals suggested that by making a sketch less precise (more messy), people tend to not consider the precise pixel alignment of a button (for example), but whether to have that button at all. They used wider lines for this - I think gray lines would also convey it. Some kind of "spray" effect, with precision tapering off at the edge might be ideal, say with charcoal. Though charcoal is messy indeed.
- alabut 15y ago
  That was before they hired their first real creative director, Jamie Dihiansan, and now they have a variety of sketching styles, from rough and quick to clean and organized: http://37signals.com/svn/posts/1880-the-different-sketch-styles-of-the-designers-at-37signals http://37signals.com/svn/posts/1880-the-different-sketch-sty... He came from Crate & Barrel and it looks like he's got the most chops on the team for pure visual design, not that he does only that. Jamie's added dimensionality and color to what was a previously flat and boxy vibe in their work. I can't find the link (it might've been in a podcast) but I remember Jamie talking about differences in process and said that he stays in paper a bit longer than the rest because there's usually a few more things he wants to try out. That makes sense, since he's been responsible for upgrading the overall look and feel of the 37S branding and extending their visual vocabulary, starting with their marketing pages and email newsletters. I've heard both Ryan and Jason say that their roles are more like product managers now. So use the right type of sketching for what you're trying to do. Trying to cycle through concepts or overall flow? Quick and dirty with sharpies. Want to try out a new visual treatment to an existing UI, maybe play with ribbons or a stack of photos or whatever new visual trick you saw somewhere? Use grid paper and a pen, maybe even bust out a fine-tipped architectural pen and a metal ruler.
  - asianmack 15y ago
    Hi I'm Jamie. To clarify: I did come from Crate. All designers here are way better than me in many ways. You could say we all have design chops. I'm not a creative director. I'm a designer. I prefer to be called an employee (only). Ryan and Jason still design. They are intimately involved in all design. Scott Upton, Jason Zimdars, and Jonas Downey are also part of the design team. They are all very awesome.
joshwa 15y ago
Related: When working out a UI idea, I work REALLY low-fi and REALLY fast. Quick thumbnail sketches of just the overall layout of elements, or the way an interaction works, done in < 2mins. The trick is to explore the problem space quickly before even getting to the level of sketching the full UI in context. Here's a good article explaining the process: http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art-of-thumbnail-sketches/ http://designshack.net/articles/inspiration/close-photoshop-... trying to upload some sketches of mine but the szx airport wifi is oddly not giving me any upload bandwidth...

167 points by cwan 15y ago

brd 15y ago

Always refreshing to see someone advocating paper prototyping. There is nothing better than starting with an unbiased blank canvas when trying to brain storm the best user experience possible.

haydenchambers 15y ago

IMHO the video looks like someone rendering a preconceived idea not ui problem solving which makes the exercise useless. Want a pretty pic to show front end coders? fine.

mrbgty 15y ago

This looks a lot more like drawing than what I would consider sketching. To me, sketching would use a single pen/pencil/marker and look much uglier.

andrewflnr 15y ago
Eh, it's a continuum. It's definitely on the refined side of sketching. Really, sketching is a subset of drawing.

alexwolfe 15y ago

This is definitely a great way to focus on the actual layout and UI elements. Starting with photoshop can often lead to designers block, going to paper keeps its simple and allows you to start at the lightest detail and build on top of that. btw, nice video.

SoftwareMaven 15y ago

I've started using iMockup on my iPad for this. I've never had a good hand, so if I draw, I spend too much time worrying about those mechanics. The iPad gets me away from my desktop and puts me into much the same mode as a notebook would. That said, I'm not a great designer (more of a product generalist: I can start with an idea and end with a complete product). I have to optimize for that path. :)

arrel 15y ago

Once you involve a photocopier in your "sketching" process you've officially jumped the shark. I am a big advocate of sketching wireframes before moving to the computer, but that means paper, ball point pen, and a minute or less per sketch. What he is creating is hand-crafted design - it looks beautiful, it communicates ideas very well, but it is totally inefficient in reaching the end goal of a usable, functional product.

notyourwork 15y ago
"but it is totally inefficient in reaching the end goal of a usable, functional product." Why? Inefficient, yes your opinion but this does not prove this process would not yield a usable product. Your comment makes me wonder how we ever got to where we are today with computers.
- arrel 15y ago
  It's definitely possible to design a great product with a very manual design process, but you can also write a great novel using pen and paper. Computers make a lot of things a lot easier, and you should leverage them when they make sense. (like for instantly making exact copies of designs you make, or even better making slight variations along the way.)
krschultz 15y ago
It is definitely more efficient to communicate your point clearly - even if that takes more time - than to have multiple jump in and start working without being on the same page.
andos 15y ago
I think using a photocopier has more to do with keeping oneself away from the computer to avoid distractions. Moreover, if one's role is exclusively as a UX designer (instead of designer and coder) they might be inclined to be a little more zealous about the quality of what they produce.

andrewflnr 15y ago

I sketch UIs a lot, but all in pencil. I wonder why he doesn't even mention them. They automatically let you vary your line value, and you can actually erase them, among other benefits. It tends not to copy well, but a good scanner should be fine and if it's just a prototype then you were going to recreate it on the computer anyway.

yarone 15y ago

I used pencil & paper for wireframing for years. Scissors, photocopying, etc., exactly as the article explains. I struggled off and on with various replacements: Visio, Photoshop, Powerpoint. All of these gave me to much control over the final product, and I inevitably spent too much time trying to get things pixel-perfect, choosing the right colors, finding the right icons, and more - things that my graphic designer peers should be doing, not me. Then, I discovered Balsamiq mockups, which I've been using nonstop now since early 2009. No longer using pencil & paper.

alabut 15y ago

Nice! I like sketching so much that I devoted a big part of my portfolio to talking about my prototyping process: http://alabut.com/work.html http://alabut.com/work.html Pro tip: buy a sketchbook that has both a 24 column grid and browser chrome, so it'll feel more like the final product and give you a better sense of proportion. But don't be afraid to chuck it for something even more low fidelity, like butcher paper and sharpies. Here's the one I've been using - it has tear-away pages and alternates between full-width and 2-on-a-page layouts: http://appsketchbook.com/products/ux-sketchbook http://appsketchbook.com/products/ux-sketchbook Best $12 I ever spent. I also a fan of the double-ended art markers by Prismacolor - they're basically like highlighters but in a variety of colors, like a subtle gray. I like adding shading with those instead of dealing with the messiness of pencils and erasers. That's how I make sketches like these: http://dribbble.com/shots/230767-Stats-Page-For-iOS-App http://dribbble.com/shots/230767-Stats-Page-For-iOS-App http://dribbble.com/shots/230717-Dev-Dashboard http://dribbble.com/shots/230717-Dev-Dashboard

anigbrowl 15y ago
That UX Sketchbook looks neat, but I wonder why no landscape orientation. Most people I know have the browser maximised and there are still a lot of laptops and desktops out there.
- alabut 15y ago
  The limiting factor is reading habits, not browser size. Just because you can design in a landscape orientation doesn't mean you should and wider isn't necessarily better. It's not like magazines are 3 feet across because paper's cheap, right?
  - anigbrowl 15y ago
    I wholly agree (and ended up buying a tablet precisely because I got sick of reading blogs with vast swathes of empty space at the side), but not everything is necessarily better in portrait. I was going to forward the sketchbook link to Mrs Browl, who is redesigning the UX for her firm's browser-based product right now, but then I reflected that that application involves a lot of tabular data and records management and that many uses of the product in a portrait orientation would be terribly frustrating. She is interested in bringing it to tablets, and portrait orientation would be appropriate for many use cases, but not all. I do think the UX sketchbook is very neat - the squared paper inside the broswer frame is genius. It just seems perverse to only offer a single orientation in 2 different sizes. If it had portrait on one side and landscape on the other I'd buy it in a second (he hinted, in case the makers are reading).

richardburton 15y ago

One of the things I love most about sketching is the pure level of focus that can be attained when there are no Growl pop-ups or notifications of any kind.

neworbit 15y ago

For software tools along these lines I adore foreui - the skinning feature is great for placating pointy-haired bosses^H^H^H^H^H^H customers

rhizome 15y ago

I've been a huge fan of Konigi pads for a couple years now: http://konigi.com/tools/graph-paper http://konigi.com/tools/graph-paper

periferral 15y ago

Though I personally haven't used this, I know many people who do and use it very well. It seems like a great tool for UX proofing. http://www.balsamiq.com/ http://www.balsamiq.com/

6ren 15y ago

37signals suggested that by making a sketch less precise (more messy), people tend to not consider the precise pixel alignment of a button (for example), but whether to have that button at all. They used wider lines for this - I think gray lines would also convey it. Some kind of "spray" effect, with precision tapering off at the edge might be ideal, say with charcoal. Though charcoal is messy indeed.

alabut 15y ago
That was before they hired their first real creative director, Jamie Dihiansan, and now they have a variety of sketching styles, from rough and quick to clean and organized: http://37signals.com/svn/posts/1880-the-different-sketch-styles-of-the-designers-at-37signals http://37signals.com/svn/posts/1880-the-different-sketch-sty... He came from Crate & Barrel and it looks like he's got the most chops on the team for pure visual design, not that he does only that. Jamie's added dimensionality and color to what was a previously flat and boxy vibe in their work. I can't find the link (it might've been in a podcast) but I remember Jamie talking about differences in process and said that he stays in paper a bit longer than the rest because there's usually a few more things he wants to try out. That makes sense, since he's been responsible for upgrading the overall look and feel of the 37S branding and extending their visual vocabulary, starting with their marketing pages and email newsletters. I've heard both Ryan and Jason say that their roles are more like product managers now. So use the right type of sketching for what you're trying to do. Trying to cycle through concepts or overall flow? Quick and dirty with sharpies. Want to try out a new visual treatment to an existing UI, maybe play with ribbons or a stack of photos or whatever new visual trick you saw somewhere? Use grid paper and a pen, maybe even bust out a fine-tipped architectural pen and a metal ruler.
- asianmack 15y ago
  Hi I'm Jamie. To clarify: I did come from Crate. All designers here are way better than me in many ways. You could say we all have design chops. I'm not a creative director. I'm a designer. I prefer to be called an employee (only). Ryan and Jason still design. They are intimately involved in all design. Scott Upton, Jason Zimdars, and Jonas Downey are also part of the design team. They are all very awesome.

joshwa 15y ago

Related: When working out a UI idea, I work REALLY low-fi and REALLY fast. Quick thumbnail sketches of just the overall layout of elements, or the way an interaction works, done in < 2mins. The trick is to explore the problem space quickly before even getting to the level of sketching the full UI in context. Here's a good article explaining the process: http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art-of-thumbnail-sketches/ http://designshack.net/articles/inspiration/close-photoshop-... trying to upload some sketches of mine but the szx airport wifi is oddly not giving me any upload bandwidth...