Start with a pencil
The trap of pixel-perfect mocks
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.
NBA Twitter Mirror
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.
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.
The big idea
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.
