UX Sketching  — UX Planet

 

 

When I start my UX process every surface becomes a sketchpad to jot out quick ideas. Sometimes its on the back of a sushi menu, the floor to glass ceilings at the Digitaria office, or the pages of a moleskin notebook.

 

  My go-to notebook used by the likes of Oscar Wilde, Vincent van Gogh, Pablo Picasso, Ernest Hemingway and Henri Matisse

My go-to notebook used by the likes of Oscar Wilde, Vincent van Gogh, Pablo Picasso, Ernest Hemingway and Henri Matisse

 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

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.

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

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.

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

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 pencilsprismacolor markersand 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:

 

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

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 unill you’re ready to present to your client alongside your functional specs.

1-AuQWB1Dpg1zfUU-GRUk80g (2).jpeg

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

Paper Prototyping All the Way

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 though” 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)

 

1-8dDJVhKtIiCcCdRPyuuVsQ (2).jpeg

 

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