Jeffrey Zeldman: The Tools I Use

When we ran a survey earlier this year about the tools designers and developers use, we got a lot of interesting results, and they made us curious. In addition to following up with some of our respondents, we wondered: what about the speakers who share the AEA stage? What tools do they use? Here we present the first in a series, “The Tools We Use,” starring none other than our co-founder, Jeffrey Zeldman.

Image: Fred Gates

Pen & Paper: I no longer do traditional wireframes. Instead, I start with super-rough, hand-drawn sketches of design patterns and pages. I draw them quickly and dispose of bad ones without a moment of regret. Keeping things loose, fast, and rough keeps me from getting hung up on presentation aesthetics, as is too often the case when I design with software, and helps me focus relentlessly on ideas and interactions. Jason Santa Maria has often explained why he starts his logo and layout work in fast, pencil sketches by saying, “Ideas are born ugly.” He's right, and it applies equally to layouts and interactions. I have so many more ideas now, and I come up with them so much more quickly. Best part? Clients love working with me this way.

xScope 4.0: “A powerful set of tools that are ideal for measuring, inspecting and testing on-screen graphics and layouts.” By my good friends at Iconfactory.

Chrome Plug-ins: While Safari is my favorite browser UI when I'm enjoying the web like a civilian, Chrome is my go-to for design work, largely because of its plug-in ecosystem. Plug-ins I find useful in my work include:

  • WhatFont, which names the fonts used on any web page
  • ColorZilla, an eyedropper and color picker tool (also available for Firefox)
  • Font Changer with Google Web Fonts, which lets you quickly swap font families and sizes globally or per-page (useful for quickly torture testing whether your design will hold up under the custom font settings some users rely on for accessibility or other reasons)
  • Dimensions, a tool that lets designers measure screen dimensions
  • CSS Viewer, which does just what it sounds like (also available for Firefox)

Adobe Photoshop CC: the great white whale. Yes, it's a monster of a program. There's still no better way to design pixel-based presentations.

Basecamp 3: Been a Basecamp user since version 1.0 and still find it a great place to share project files, tasks, notes, announcements, and more with my teammates and clients. Basecamp 3 adds a slew of new features I love—including one I use every day to share my life with far-flung friends.

Dropbox: a shared folder between all my devices, and easy sharing with the whole world. We all use it because it just works—and because file-based management is still the most comfortable way for most of us to work.

Github: The best place to tackle and share technical tasks. 

Google Docs: The ability to write collaboratively is changing not only how we work, but how we get jobs. (But we still use good old MS Word on projects with serial editing workflows, where tracking changes is a must.) 

That's all for this edition of “The Tools I Use.” Check back soon for another installment, featuring your favorite designers and developers.