Sketch With A Purpose

Dave wrote this on February 18, 2011 in . It has 20 reactions

We're in process of developing a number of new apps and we're furiously working through sketches. We write a lot about sketches and it's an important part of our process. For us the real value of a sketch is not to look pretty, but to sell an idea.

Sketching with purpose means having an agenda for the conversation the sketch will start. Every sketch needs to be a micro-presentation that has a considered intention and direction. A business professional wouldn't come to a meeting to present with a pretty slide deck and no agenda to sell something. The same is true of designers. Sketches should have a clear value and purpose and not just be structural lines on a page. Here are some ways we use to make a sketch effective in selling an idea.

Less Is More

The reason sketches are so awesome are because they are quick and disposable. Designers love digging into the details, but sketches aren't meant for details. Consider the following sketches. Let's assume we want to convey that the new marketing page for an app needs a video.

The left-hand sketch is nicely executed, but the purpose is lost in the sea of details. In contrast, the sketch on the right is absolutely clear about the message behind the sketch. To convey purpose, less is more with sketches, so keep focused on the message and let the rest take a back seat.

Know Your Audience

Understanding your audience is critical for sketching effectively. Whether you are collaborating with a fellow designer or presenting to a client, consider your audience. This helps ensure that the purpose of your sketch is heard. A perfect example is chatting with a business owner about a design decision to restructure the homepage of their site.

The sketch on the left is clear about the intention of moving the primary call to action, but to what end? The sketch on the right was done with the audience in mind. Business owners care about conversion and, ultimately, profits (of course not to say there aren't other altruistic business motives, but we'll keep it simple for this example). Showing the financial results of restructuring the homepage is going to be selling point for working with the business owner, not the increased usability or visual balance.

Show Your Process

The ultimate purpose behind any sketch is to visually convey an idea to an audience. Sometimes one sketch is all it takes, but sometimes problems are more complicated and require guiding your audience through your process. Does this mean presenting sketches and ideas that aren't perfect just to share the thought process behind the final answer? Absolutely.

For more complicated ideas, understanding the investment and process can make understanding the purpose much easier.

At ZURB we love sketching for so many reasons and have written about why people need to sketch and secrets to successful design sketches. We think sketching is one of the most important parts of the design process, but what do you think?


It has 10 comments.

Nicholas Holland (ZURB) says

Good stuff... sketching is powerful stuff when done correctly. We actually use sketching in a variety of manners, including letting the client sometimes draw. Conveying the 'idea' is right - but we also think that the process & freedom of thinking while drawing is equally valuable.

For example, its great to just draw the main concept (similar to your yellow video) and then write thoughts all over the page. Squiggles, calls outs, arrows to contemplate moving... red ink, blue ink, black ink... etc. Then you can pause, discuss, and then start a new sketch.

Think Agile development meets Agile Sketching... Paper is so versatile that you can blow through 10 iterations in no time & you have the freedom to be as creative or conservative as you want. But its the freedom to completely destroy a sketch that we (at least myself in particular) find so empowering.

Once all the good ideas rise to the top, the final few sketches really capture what you want - and then it can both convey detail and be be clear in its idea because everyone got there together. Of course, sketching without the client or team means you need to be more clear in the idea (aka: the premise of your post), so it all depends on your process.

Cheers!


Patrick Forringer (ZURB) says

I find myself always drawing a loose sketch of a website UI mockup on a small piece of paper when the initial inspiration hits, afterwords when the detail stage hits I'm too lazy to re-sketch the design then it gets too crowded with arrows pointing here and there…

I guess I find myself always thinking about the details instead of focusing on the overall loose sketch. To me a loose sketch represents too vague an idea for what I'm shooting for.


Chris (ZURB) says

@Patrick- There are other forms of sketching that we do as well. Sounds like what you are referring to as more detailed sketches are low-fi wireframes. The idea of a quick sketch is to spark a conversation or show a potential opportunity.

The loose sketches help build up to decisions that will effect the overall detailed phase of the project. If you find yourself sketching that initial spark, take an extra 20 minutes to throw in more ideas that might spark something you didn't see before. I can't name that amount of times a little extra sketching made the whole project 10x better.


Dave (ZURB) says

@Nicholas - You're absolutely right about the value of sketches for creative exploration. We're focusing on the presentation of ideas here, but sketches are also the perfect medium for opening up the problem and visualizing thoughts. Annotating sketches with notes is huge too - we created sketchsheets with a special space to keep thoughts a little more organized too - check them out and let us know what you think: http://www.zurb.com/article/229/zurb-sketchsheets-available-for-download


Christofr (ZURB) says

Re:

The left-hand sketch is nicely executed, but the purpose is lost in the sea of details

Less -can be- more, however I've found that with some clients, it pays to not stray too far from the context which you're improving on. Detailed sketches or mock-ups do run the risk of muddying the message you're trying to get across, however when you're working with a client who has their current homepage layout burned into their retinas, graphically introducing a new feature alongside their existing visual language can pack quite a punch.


Nick Plekhanov (ZURB) says

Sketches are great tools, but what about wireframes and prototypes? What role do they play in design process at all, and at ZURB?


Chris (ZURB) says

@Nick- Sketches are definitely great tools and they have there place at ZURB, but we also utilize wireframes and prototypes in our process. We use low-fi wireframes to pin down basic page structure and content blocks. These can be quick and aren't necessarily how the hi-fi wireframes will look, but they get the general layout down.

When we move into hi-fi wireframes we're trying to fine-tune most of the details. We don't like to use Lorem Ipsum so we use text that fits for the final design mock-up. These wireframes start hinting more at final visual design. The spacing and structure that is setup in the hi-fi wireframes is typically the same or close for the final visual designs.

When we create prototypes of our applications it helps us validate our decisions and play out a lot of the interactions. As good as a sketch can be to solve interactions problems, sometimes you discover new ideas when you actually experience the interactions.


Nick Plekhanov (ZURB) says

@Chris Thanks for the "Behind The Scenes" tips. You are the great team of awesome guys. Keep up good work!


joel (ZURB) says

Just have to say they are some nice sketches, they looked loved.



Get a job, nerd!

via Job Board from ZURB