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.

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.

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:

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.

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.

When it comes to tools for sketching you have your typical drafting ruler (analog rulers are surpisingly 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:

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:

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.

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

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