@buckhouse

Start with a pencil

The trap of pixel-perfect mocks

James Buckhouse
Feb 25, 2013 · 3 min read

You’ll make a better design if you avoid pixel-perfect mocks while you’re still deciding what to do. Why? There’s two problems: First, if you gloss a weak idea with finished-level polish, you’ll fool people into thinking your initial (but seemingly visually perfect) sketches are your final, thoughtful designs; Second, you risk seducing yourself into hanging onto a weak idea for too long because you’ve put a ton of effort into making it visually perfect (even if it’s conceptually unsound).

Instead, train your mind to sketch. Keep it sloppy, loose and inspired. Find your answer in a sketch, and then work out the details later. If you sketch digitally, that’s fine—but sketch! Don’t render final pixels before it’s time.

Think first. Sketch second. Polish third.

When I was designing a Twitter mirror for the 2013 NBA All-Star game, I started with this sketch. It was made on a plane from LAX to SFO. The bumpy ride made it hard to draw, but the conditions made me focus on what mattered—designing a physical UX that would be equal parts theatrical, enticing and fun for an NBA superstar. The digital mock was done the next day, back at the studio, once I knew want I wanted to make.

I may or may not have come up with something so weird (and yet totally appropriate for an All-Star shootout in Houston) if I had started in Photoshop. I would likely have created something much more tasteful and minimal—likely set in Gotham on near-white with a very thin grey line between sections—Photoshop just makes it so easy to be tidy!

But I didn’t. Instead, I sketched and got weird. Totally weird. And made something purpose-built for the surreal theatre that is All-Star Weekend. We shipped it, and the NBA stars loved it. And as a result, they got weird, too.

https://twitter.com/NBA/status/303300605349343233/photo/1
https://twitter.com/NBA/status/302484026160205824
https://twitter.com/NBA/status/302478265866661889
https://twitter.com/NBA/status/303295866431762432/photo/1

Time spent with a pencil is cheap, fast and totally within your control. Don’t like your design? Erase, crumple or cross it out. Iterate quickly and find a better solution before pushing any pixels. Also, a pencil can be your bridge between Designers, PMs and Engineers if you use this trick to draw together as a team.

More recently, I had to find a way to communicate the value of Twitter. My first step was text—to actually write the story. The next step was to pick up a pencil and work out the best way to show that story in action.

I threw away most of my sketches. But eventually landed on a visual system that had the right type of working blocks to support the emphasis hierarchy.

You can see the final results at discover.twitter.com.

Working pixel-perfect too soon will trap you into a whatever Photoshop (or AI or Keynote or any other tool) makes it easy to do—not what you actually need to do to tell the story and then it will fool you into being resistant to change. Skip both problems by resisting visual perfection until you’ve found conceptual perfection.

Start with a pencil, the pixels will come later.

Design Story

Complements to the human condition.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store