We often grab the nearest Sharpie and start going at it when working through tough problems. Sketching is a crucial practice at ZURB. Everything we do starts with a sketch. We've learned over the years that you can't easily express ideas if they're trapped in your head. You have to get them onto paper, or else you won't get to answers quickly.
We showed you last week that sketching needs to be decisive and how important it is to draw a straight line. But there are a few other secrets to successful design sketching which have remained true since we first talked about them in 2009. Using these techniques, you'll be able to blaze through a lot of ideas and break open problems.
The key to successful interface design sketching is to keep it uncomplicated. Let's take a closer look at a few others:
1. Navigation: Box, Dash, Dash, Dash
Navigation provides structure. Although the purpose of navigation is relatively straight forward, it can be incredibly complex at times.
When you're sketching, keep it as minimal as possible and focus on the key usability elements of successful navigation: simple labels and an active state to show where users are in the site.
2. Headings and Text: Nothin' But Lines
When sketching copy of any kind, headings or body text, a series of lines is often all you need. Keeping the lines as simple as possible is key to understanding what they represent. It also keeps you honest when it comes to writing that content.
We like to help people discern body text from headings by varying our use of squiggly lines over straight lines. Large squiggly lines or empty long rectangles are for headings because they garner more attention while smaller straight, parallel lines are for body text.
3. Process and Workflows: One Box at a Time
It's often important to convey a short workflow or set of pages in one sitting. For that, the best presentation will show them all on one page, separating each step with its own box. Get scrappier at this point and show even less detail around the key flow you're trying to illustrate.
4. Make It Thick: Sharpies for the Win
Chicken scratch never works when it comes to sketching. Feel free to use a finer point to convey your points as notes on the sketch, but keep things as thick as possible. This helps keep you in the "rough" mindset, ignoring some of the finer details to help focus on the bigger picture.
5. Depth and Prominence: Cool Shading
Although we advocate keeping things as simple as possible, presentation is everything.
A little shading goes a long way toward making a sketch more visually pleasing, as well as feeling more authentic. Depth perception and differentiation between blocks of content can be aided by even the smallest amount of Letraset grayscale markers.
It helps mimic the styles and visual presence most elements have in the real world, once design implementation starts.
And there you have it — five quick tips for simpler, faster and more effective design sketching. We use these techniques in our own sketches every day. It's become an invaluable service for our clients, allowing us to explore a vast multitude of ideas with low investment and high value.
Next time you're sketching ideas, think about your techniques just a little more to help simplify the message and add more value to your time and effort.
Master Design Sketching
These tips are just the start of great design sketching. If you want to master design sketching, we've created an online course to help you do just that. During the course, you'll learn how to create compelling sketches that communicate your ideas from those who do it every day. Here's the course breakdown:
- Techniques: Starting an interface sketch, how to draw a straight line, colors, representing text, and tools
- Elements: Images, navigation, form elements, sign in, and modals
- Layouts: Profile pages, content pages, marketing pages, and dashboards
- Applications: Ideation sketching, lo-fi wireframes, workflow sketching, sketch flows not site maps, creating prototypes, and sketching ice breakers