Sketching in Mockups

Author: Mike, Balsamiq UX Blog · Published: April 28, 2011 · URL: https://blogs.balsamiq.com/ux/2011/04/28/sketching-in-mockups/ (dead; read via the Wayback Machine)

One-line: A designer at Balsamiq on why interface design should start with tiny, disposable thumbnail sketches, and how he rebuilt that paper habit inside his company’s own wireframing tool.

Summary

The post opens with a definition: “Interface sketching is a path focussed on generating ideas and finding solutions.” Borrowing from Bill Buxton, the author treats sketching as the activity that leads to finding the right design — generating many options before committing to one. After the research and the conversation about the problem, there is always a need to see the solution, and the quick sketch fits because it stays on the idea without getting attached to how it looks. His four rules: create quickly, create a lot, don’t worry about how it looks, don’t become attached.

Sketchboards. Interaction designers make this easier with templates — sheets divided into 6 or 8 small frames, like storyboards — so a team produces as many ideas as possible at thumbnail scale and then adds detail, selects, iterates and refines. He cites Adaptive Path’s sketchboard technique (Brandon Schauer and Leah Buley) and Todd Zaki Warfel’s 6-8-5 method: six to eight sketches in five minutes.

Balsamiq’s design loop. A feature comes in (from Pivotal Tracker or a Skype chat); ideas are mocked up in broad strokes, the stage where he used to sketch on paper; the team picks the idea with the most merit and iterates on flow and interaction; the approved mockup becomes the UI requirement and gets built. With the myBalsamiq web app maturing, which behaves “like using a wiki with version control,” he moved the rough ideation, critiques and alternate proposals into the tool as well.

Why thumbnails come before wireframes. Even hand-drawn-looking wireframes, with their crooked sharpie lines and unattractive font designed to stop people fussing, “can become precious” once you work on them long enough. Starting at wireframe scale risks diving into detail too early. Thumbnail sketching is like standing 20 feet back and blurring your eyes: rough boxes, squiggles in place of text, captions for the story. He rarely starts a wireframe at full scale.

The kit. He built a Balsamiq symbols library — 6-up and 8-up sheet templates plus a small set of elements (heading, paragraph, list, text input, checkbox, radio, button, rule) in straight and squiggly styles — made mostly from two primitives, the box and the line, plus arrows for flow. Interaction is walked through as storyboards or in Dan Brown’s page description diagrams, and only once a concept is chosen does the team move to 1:1 wireframes. He closes by pointing to Dave Gray’s point that all drawing is combining basic forms and lines.

Full text

Archived privately against link rot, with the post’s diagrams and sketch images: ../attachments/sketching-in-mockups/sketching-in-mockups.md

Connections

• User-Centered Design — the generate-many-then-converge loop is the ideation half of human-centered design; the sketchboard exists to keep options open.
• Product Design — the practitioner’s view of the earliest stage of designing a product, before anything is pixel-accurate.
• The Beginner’s Guide to UX Prototyping — the same fidelity ladder from conceptual to high-fi, and the same warning not to get attached to low-fi work.