UX Sketching
By: Adrienne Levin
Tags: User Experience, UX, Design

every surface becomes a sketchpad to jot out quick ideas. Sometimes it’s on the back of a sushi menu, the floor to glass ceilings at the Digitaria office, or the pages of a moleskin notebook.

In the beginning, It’s just about brainstorming. I list out a jumble of words and draw tiny sketches related to what I’m working on (and find the parallels later). Personally, I prefer paper with a grid so I can convey things responsively. Most of the time perfection isn’t an issue and the sketches are just for me.

Even a few plain white board will do, to help examine your project flow

Before I sketch out interactions

I’ll list them out to see what makes sense. At this point in your project, you’ll probably have defined a set of requirements. Use those for when you start to draw out your interactions, here’s what Smashing Magazine recommends:

Explore a variety of interactions and ideas in a single sketch using sticky notes.

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.

Upon photocopying various versions of a sketch, each with different sticky notes, you’ll end up with various distinct sketches.

The more tools you have the better

Think of it as your designer arsenal. On my computer and in the cloud I have hundreds of thousands of resources to help streamline my digital process.

Just a small example of digital resources I’ve been collecting for years and could’t live without

When it comes to tools for sketching you have your typical drafting ruler (analog rulers are surprisingly tough to find in a digital art department!) Your array of pencils, Prismacolor markers and erasers. What do I like best?

My friends over at UI Stencils have released a multitude of drawing pads and stencils to help automate your UX (or UI) sketching workflow. I just picked up a few, here’s some of my favorites:

The All mighty iPhone Stencil

When I find myself going for a “mobile first” approach, I usually start with the iPhone stencils (don’t worry Android Phone , Android Tablet, Windows 8, and Windows Phone users — there are stencils for you as well)

Here’s some of the iPhone Stencils:

This is my favorite combo, paired with the iPhone sketch pad

Since we’re doing such a big responsive design push at the agency (and all over the web) this Responsive Design Notepad is my new favorite thing:

Look at those perfectly paper breakpoints

Low fidelity all the way

This allows your team to take a faster approach to rapid iteration. You may not need to move into Axure, Omnigraffle, or InDesign until you’re ready to present to your client alongside your functional specs.

When you start with low fidelity you have a greater chance of better conveying your storytelling process.

Paper Prototyping as well

The best quick and dirty prototyping is done with any and all materials around you, to help better convey an idea. The image below is showing a “paper pull through” method of a smart watch. Each screen can be threaded through the low-cost device to give the final stakeholder a better sense of flow.

Don’t be afraid to a hack apart kitchen utensils, old devices and shoeboxes (whatever works!)

Some other examples of UX Sketching. All credit goes to Pinterest, Flickr (and a few of my own)

What’s your process?

I’d love to hear how you start your design projects, let me know?

Drop me a line on twitter @moonshinedesign