Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Messy Art Of UX Sketching

uxdesign.smashingmagazine.com

Post reply on HN
Print view View original

21–30 of 30 posts

Re: The Messy Art Of UX Sketching

#21

Post by anigbrowl »

alabut wrote: post #19
anigbrowl wrote: post #16

Earlier quoted context omitted.

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

Re: The Messy Art Of UX Sketching

#22

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

Re: The Messy Art Of UX Sketching

#23

Post by alabut »

anigbrowl wrote: post #21
alabut wrote: post #19

Earlier quoted context omitted.

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…

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

Re: The Messy Art Of UX Sketching

#24

Post by alabut »

6ren wrote: post #22

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.

Re: The Messy Art Of UX Sketching

#25

Post by anigbrowl »

alabut wrote: post #23
anigbrowl wrote: post #21

Earlier quoted context omitted.

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…

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 a…

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

Re: The Messy Art Of UX Sketching

#26

Post by iclelland »

anigbrowl wrote: post #16
alabut wrote: post #13

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 on…

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.

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.

Re: The Messy Art Of UX Sketching

#27

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

Re: The Messy Art Of UX Sketching

#28

Post by andos »

arrel wrote: post #7

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 pr…

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.

Re: The Messy Art Of UX Sketching

#29

Post by asianmack »

alabut wrote: post #24
6ren wrote: post #22

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 w…

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.

Re: The Messy Art Of UX Sketching

#30

Post by alabut »

asianmack wrote: post #29
alabut wrote: post #24

Earlier quoted context omitted.

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 w…

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.
Post reply on HN