Josh Clark: The Tools I Use

The latest in our series “The Tools We Use” features Josh Clark, founder of Big Medium, a design studio specializing in what's next: connected devices, mobile experiences, and responsive web design.

I'm both a creature of routine and a captive to my own muscle memory. This makes me incredibly (often ridiculously) loyal to my tools, and it takes a lot for me to pitch one overboard for a new one.

I mean, look, I've used the same brand of pen religiously for over a decade. I've inhabited the same software for 25 years (hi there, BBEdit). When I do adopt new software it's often based on the same metaphors and keyboard shortcuts as familiar apps (Sketch works an awful lot like Keynote) so that I don't have to do heavy context switching among apps.

In other words, my tools bend to the way I work and think, instead of the reverse. This makes me conservative about jumping onto the latest and greatest, but it also lets me focus on the task at hand instead of learning new settings, features and workflows.

Related: I tend to use Apple's stock Mac software: Safari, Mail, iWork, Calendar… Individually, they're not all best of class, but as a set they fit hand in glove and of course enjoy special integration with the operating system. It's a suite of apps that talk easily to each other across devices, too, reducing friction and letting me get to work.

Here's my kit.

Brainstorming + storytelling

From project pitch to product concept to UI design, everything about good design comes down to telling a good story. Here are the tools I use for gathering and presenting my thoughts.

Zebra Sarasa gel pen: This fast-flowing and quick-drying pen is my flat-out favorite; I haven't used another brand in over ten years. I specifically prefer the 0.7mm tip for just the right mix of fluidity and friction on paper.

Sharpie stainless steel pen: When you need a marker, naturally Sharpie is a no-brainer. But did you know your Sharpie can also be chrome?

Baron Fig Confidant notebook: I treat my ideas more seriously when I keep them in a serious place, so I'm a fan of these clothbound, hardcover, open-flat notebooks. I prefer the dot grid paper, and the Confidant's ribbon bookmark keeps me on the right page.

Post-its: Nothing beats a wall full of PostIts for flushing out ideas and getting them into rough categories. For facilitation of big groups, I'm also a fan of using them as jumbo-size “dots,” for dot voting. (Tip: Post-it Plus is a nifty iOS app that lets you photograph a wall of Post-its to capture them digitally for further rearranging, editing, and sharing.)

Spreadsheets: Every single one of my projects takes shape inside a flurry of spreadsheets. (Exciting, I know!) As you'd expect, spreadsheets are great for project plans and product roadmaps, but they're also where initial screen designs happen, too. In web projects, I give every page a worksheet, with rows detailing the components on the page, in order. The first column of each row lists the name of each component; when you squint at that first column, it amounts to a first-draft wireframe of the mobile view: a single-column layout of components. Because these are typically collaborative documents, I tend to use Google Sheets for this (but reluctantly, as I describe below).

Ulysses: This wonderful writing app is where I wrangle all my words, from rough meeting notes to polished blog posts. It's a Markdown word processor, which naturally puts the focus on ideas instead of fancy formatting. The plain-text documents are resilient, future-friendly ASCII files, but Ulysses can export to PDF, HTML, Word, ePub, and Word—or even blast your prose directly into Medium or Wordpress. The Mac, iPhone, and iPad versions are all lovingly designed to create a calm and focused place to marshal ideas.

Keynote: I'm inside this app every single day; it's an extension of my brain. (Many years ago, I even wrote a whole book about using Keynote and the iWork suite; there's deep muscle memory here for me.) Sure, I use it for presentations—for talks, or anytime I need to telegraph ideas to a group—but I also use it for tinkering with animations and quick design ideas. Keynote is effective as both a visual canvas and a laboratory for simple motion concepts.

Big Medium CMS. The Big Medium website runs on an eponymous CMS I wrote starting way back in 1999. It's changed a lot in two decades, but from the start it anticipated today's fascination with static-site generators (it builds static HTML pages). It's hugely satisfying to keep folding new web technologies into the CMS as they emerge, and I enjoy maintaining independent control over my own content in a system I intimately understand.

Design + Production

I'm a product director and interaction designer, so my design production work is typically limited to wireframey UI sketches. I focus on a small suite of tools for this.

Sketch: This is where I do more UI work and tinker with vector graphics. Because Sketch is built on top of Mac OS's native graphics tools, it also feels like an extension of the familiar iWork suite. (Sketch is basically a Keynote canvas on steroids.)

The Noun Project: A vast collection of high-quality, uniform vector icons. The website is great, and the Mac app is essential.

SVGOMG!: This is a GUI for SVGO (SVG Optimizer), a terrific tool for reducing and cleaning up the cruft in SVG files. (And Sketch's SVG files are crufty.)

Code

Our design projects get into the browser as quickly as possible, so the bulk of the work happens in markup. Here are the tools I use.

BBEdit: My code editor since 1992, no kidding. (Until Ulysses stole my heart, it was also where I did all my writing.) Every year sees the arrival of a hot new code editor, but I've never wavered. The keyboard shortcuts, personal preferences, and overall experience are just too deeply engrained. It's easy for me to think here.

CodeKit: I always have this Mac app running in the background while I'm slinging CSS and JavaScript. The app compiles my Sass, compresses my JavaScript, lints my syntax, and keeps all of the necessary libraries up to date.

Pattern Lab: Brad Frost first developed his original atomic-design pattern library when we designed the TechCrunch and Entertainment Weekly websites together. Since then, it's grown into a sophisticated open-source tool for crafting a pattern library. More than that, it's the environment where we do nearly all of our work now. For web projects, Pattern Lab has become our development environment, collaboration platform, and deliverable—all in one.

Github: Like pretty much everyone else, I use Github for version control. Some troubling stories about Github's company culture have me looking around, though, and I'm eyeing Gitlab and Bitbucket as alternatives.

APIs

Recent projects and experiments with machine-learning and IoT have had me designing (and playing) with the APIs of a number of services.

IFTTT and Zapier. I use these services for quick prototypes when I need to play with chaining together digital services or tying them to physical triggers. I can't even guess how many virtual actions I've hooked up to a simple USB button with these services.

Microsoft Cognitive Services: So many great services to work with here, from speech and image recognition to understanding language to Amazon-style product recognition. This is an ample playground for working with machine learning as design material. (See also the machine-learning APIs from Amazon AI, Google Cloud, and IBM Watson.)

Collaboration

I always work with remote teams and remote clients, so constant but meaningful communication is a must. Here are the tools that make that possible.

Google Docs: For collaborative documents, there's just no escaping these apps, and believe me, I've tried. I'd prefer not to use Google's apps at all. I have a deep uncertainty (and mild distrust) about how content stored with Google might be used now and in the future. The Google robots are certainly reading all of our content looking for patterns to display better ads, to develop new services, to tailor our search results. I like some of the fruits of that, but others leave a bad taste. The trouble is that none of this is particularly transparent. I'd rather use a paid, leave-my-stuff-alone service (Quip tempted me for a while), but most of the world prefers Google Docs, and so I reluctantly acquiesce.

Dropbox Paper: For prose documents and checklists, I much prefer Dropbox Paper to Google Docs. It has great collaboration features, and their business model doesn't involve mining my content.

Dropbox: Each of my projects gets a Dropbox directory to share and archive assets and documents. For my personal files, of course, the service is my multi-device file system, keeping my world in sync.

Trello: I love me a Kanban)-style Trello board for managing all tasks in a project. It efficiently visualizes overall project workflow while letting me drill into the status of specific tasks.

Slack: Slack channels are like the live transcript of every project, which is at once great and horrible. The sheer flow of live chat often buries important content, which has me considering Slack alternative Twist. Twist emphasizes threaded conversations for a kind of hybrid between chat and email.

CloudApp: This is my go-to utility for sharing screenshots and screencasts. A quick keystroke grabs the screnshot/movie/gif, I paste the URL, and I'm done. The app's annotation tools are handy, too.

Doodle: How many hours (days? weeks?) have all of us lost trying to find a time when everyone is available to meet? Doodle takes away much of the pain with its poll-style process for identifying available meeting times.

Productivity

These tools keep my head straight and my feet moving in the right direction.

Things: This Mac and iOS app maintains all of my to-do lists across every area of my life. Its interface and philosophy are both fairly straightforward—you just organize lists of lists—but it has many thoughtful grace notes that let me adapt the system to my specific organizational style. (I'm a Getting Things Done guy from way back, and Things is well tuned for that system.)

Alfred: This is my all-purpose app launcher, clipboard, search tool, calculator, music player, language translator, dictionary, and workflow manager. Command-space is all I need to make it all happen.

Pinboard: This is where I bookmark and stash notes on everything I read online. For $25/year, the app also archives the full text of every page I bookmark, a future-friendly bulwark against link rot. On iOS, the Pinner app makes it extra-easy to save and fetch my bookmarks.

Shoeboxed: I use this online service to scan receipts for taxes and expense reports. The iPhone app in particular makes this a breeze: take a photo and the app's elves log the receipt into the proper category and even do currency conversion when necessary.

Media

These are the tools I use to stay current with a steady but manageable flow of info.

Reeder + Feedbin. Old school: I still use RSS feeds to stay current with my favorite writers and publications. I use Reeder on iPhone and iPad, combined with the Feedbin RSS service for syncing my feeds.

Instapaper: My longtime favorite service for gathering long-form reading for later. (I especially like that I can sync highlighted text as Pinboard links, a nice integration.)

Huffduffer: This marvelous little service from Jeremy Keith is Instapaper for podcasts. Grab audio snippets from anywhere on the web and add them to your own custom podcast feed.

Overcast: My preferred podcast app for iOS.

Housekeeping

A safe and secure digital life requires good digital hygiene. Here's what I use to floss regularly.

1Password: This password manager makes it possible for me to have a unique strong password for every single login I've got. The app's “Watchtower” feature even alerts me when one of the services I use may have been compromised so that I can update my password info.

Backblaze: Thsi service makes a cloud-based backup of all my files. I used to keep a local hard-drive backup, but that doesn't do much for me when I'm traveling or (heaven forbid) if my home is hit by a meteor.

TripIt: I travel. A lot. TripIt keeps my itineraries straight—and keeps me on time.

Streisand: This remarkable open-source project made it easy for me to set up and deploy my own VPN server with the minimum possible fuss. It took about 15 minutes to stand it up, and my family now enjoys much-improved security when using public wifi (or on our own home network for that matter).

Piwik: I use this excellent open-source analytics package to track web traffic, as an alternative to Google Analytics. It's a secure and privacy-conscious option (it honors the “do not track” http header, for example). And the data stays with me, instead of going out to a corporate giant.