The Messy Art Of UX Sketching | Hacker News Reader

The Messy Art Of UX Sketching

uxdesign.smashingmagazine.com

167 pointscwan28 comments

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

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

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.

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.

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

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

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.

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.

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

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.

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?

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

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

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

I would justify that by pointing out that web pages tend to scroll vertically; even (especially?) in landscape aspect, the rendered page is usually taller than it is wide.

If you really need to just design the first screenful of a page in landscape orientation, then go ahead and draw a big horizontal line through the centre of the page -- label it "FOLD" if it helps, and just work on that screen.

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.

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.

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

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.

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

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.

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

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.

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.

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.

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.

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

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.

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/

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

Reply on news.ycombinator.com