
The Messy Art Of UX Sketching - cwan
http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/
======
joshwa
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-...](http://designshack.net/articles/inspiration/close-photoshop-
and-grab-a-pencil-the-lost-art-of-thumbnail-sketches/)

 _trying to upload some sketches of mine but the szx airport wifi is oddly not
giving me any upload bandwidth..._

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

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

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

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>

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/230717-Dev-Dashboard>

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

~~~
alabut
That's a fair point - just because the portrait orientation works for most
sites doesn't mean it works for _all_ sites.

So have I got a tip for you, friend. In case your wife hasn't found the right
paper for her project yet, the best thing I can think of is to get a giant
11"x17" pad of Edward Tufte's grid paper. Scroll to the bottom of his shop
page here:

<http://www.edwardtufte.com/tufte/posters>

Not only is it large and easily usable in landscape mode, it uses what he
calls a "ghost grid", where the grid is printed with a barely noticeable light
ink so that it's visually less dominant and it fades into the background
compared to the ink drawings you make on top of it.

I used nothing but Tufte's paper for years and was deliriously happy with it.
It was so big that I could use it for all kinds of stuff, whether site flows
or detailed UIs, whatever. The only reason I switched away is that not every
project needed that much real estate and it's not the easiest thing to carry
around. It's like having to tote around a whiteboard.

If she wants something smaller and more portable, there's the dot grid book by
Behance:

<http://www.creativesoutfitter.com/product/34/dot-grid-book>

Hope that helps...

~~~
anigbrowl
Wow - thanks for those links. I shall be adding a dot grid book to the gift
list.

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

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

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

------
mrbgty
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
Eh, it's a continuum. It's definitely on the refined side of sketching.
Really, sketching is a subset of drawing.

------
6ren
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
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-
sty...](http://37signals.com/svn/posts/1880-the-different-sketch-styles-of-
the-designers-at-37signals)

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

~~~
alabut
Cool, sounds like a fun gang. I didn't say anyone's not awesome, just that
each is different and that the natural variation in types of skills also seems
to carry over to sketching styles.

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

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

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

------
periferral
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/>

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

