What’s in Your Pencil Case?
What I’ve learned about UX sketching
At Tradecraft, we acquire the skills to succeed in UX roles at high-growth startups. Kate Rutter, instructor and sketch master, teaches us how to sketch to visually communicate our ideas on paper. Here are the literal and figurative tools that we use to sketch our ideas rapidly and effectively.
Why sketch?…
As UX designers, we need to be comfortable collaborating with multi-functional teams to build complex, meaningful products. Generating lots of ideas at the early stages of product creation is mandatory for our success because much of the time, the best ideas emerge from a generative process. Getting quick feedback on our ideas allows us to iterate and dump the wrong ideas before diving too deep.
For me, markers and paper can switch on the creative child-like part of my brain that wants to explore, which is the perfect mindset for idea generation.
What type of feedback do you need on your design?
There is a direct relationship between the level of fidelity we use and the type of feedback we can expect to get. If we show someone a colorful, detailed PSD mock-up, we might hear something along the lines of:
“Why did you pick that font?” (ie — Narrow Feedback)
Whereas, if you show someone a hand-drawn flow of UI sketches, you might get feedback like this:
“How would a user go about adding friends to their network from here?”(ie — Broad feedback)
At earlier design stages, we want broad (high-level) feedback. We don’t want people to be distracted by surface design.
Also, higher fidelity mock-ups box us in to ideas too quickly and trigger our perfectionism. By putting pens to paper, we can sidestep some of those traps.
Psychologically, the people we show our sketches to feel freer to offer constructive feedback when looking at informal sketches rather than a polished project we have slaved over. Even a black and white vector UI sketch can deter deeper feedback.
It doesn’t have to be beautiful. It just has to be clear.
Some of us don’t consider ourselves great artists. Luckily this is not art! This is communication. Even if you consider yourself a “non-artist,” learning some basic techniques and tricks will help you become more comfortable expressing yourself through sketching. Being a non-artist can actually work in your favor by allowing you to focus on the ideas, not the prettiness of your sketches.
For those of us who do consider ourselves artists, the challenge is letting go of perfection when we are working to generate lots of sketches in a short period of time. This can be tough for designers who like to create nice visuals and pretty lines. Time boxing is a great tool to help overcome this barrier to rapid ideation. Remember the goal is to create a quick communication tool.
Meet the tools:
You will need:
- Fat Sharpie-Use when you want something to stand out
- Fine Point Sharpie-Use for the main shapes
- Ultra Fine Point Sharpie-Use for smaller details
- 30% or 40% Grey Marker- Use to add shadows and to make areas feel like they are in the background
- A yellow highlighter-Use for focal points, such as an interaction area
- A stack of sketch paper
- Post-its
- Dot stickers
- A Timer
Techniques
Warm-up Exercise: At Tradecraft, UXers learn how to sketch with a timer. We start by looking at a series of website screen shots for a second and then sketching the main elements we noticed in the next 5 seconds. They end up looking something like this:
This exercise forces our brains to activate the low fidelity levers and get out of our perfectionism. We start thinking about basic visual concepts like proximity, hierarchy, and dominance. We notice what is grabbing our attention and why. It’a good idea to practice this exercise frequently to train those mental muscles.
Ideate: Then, we work on sketching ideas for a product or feature. We move through each of the following stages quickly, timing each one for 5 or 10 minutes:
1. What’s the problem? Sketch your user and their current problem:
2. How does your idea solve this problem? Sketch your user using your product to solve their problem.
3. How is the product used? — 6 quick sketches of how your user might interact with or solve their problem with your product/feature:
Pro-tip: Each square is the size of a post-it note
4. Vote on the best idea
If working with a group, use dot stickers to vote on the most interesting or important scope to iterate on (blue is your teammates’ vote. Red is your vote.) If working alone — your vote wins!
5. Come up with 5 quick UI sketches
Ideate on how this might be expressed to the user in the UI. You don’t need to sketch every piece of the interface, just the areas directly relevant to the scope you are exploring.
Then choose the UI sketch you’re most interested in.
6. Detailed UI Sketch
Here you get to expand on your best UI idea and think it through more deeply. Use annotations to clarify anything that might be unclear. This sketch should speak for itself.
Pro-tip: Keeping your user in the sketch reinforces the “why” of your design choices.
7. Sketch the Flow
From here, you can think through the interaction a bit by considering what screen might come before and after this. The yellow highlighter and grey marker come in handy here for drawing attention to the important sections and what is being interacted with.
Summary
This entire session should take about 45 minutes or so. It’s an amazing process for getting your ideas out quickly.
Get into the habit of sketching rapidly to visualize your ideas. Don’t worry about how pretty your sketches look. Worry about how clearly they communicate your ideas. Remember:
“UBU (ugly but useful) trumps PBP (pretty but pointless)” — Kate Rutter
There are lots of techniques for sketching for ideation and many philosophies about what methods work best. Practice as often as possible and discover what works for you.
I love to hear fellow designer’s and non-designer’s thoughts on sketching for ideation. Share your responses @johannaweintrau
If you like this post, please recommend it!
I’m a UX Designer at Tradecraft with a passion for design and technology, advancing my UX craft under Kate Rutter. Big thanks Ian Schoen for your help with this piece.
