Tools of the Trade

Jan 25, 2010

Some people think life as a web designer just involves just an Internet browser and one particular piece coding software, say Adobe Dreamweaver or what have you. That couldn’t be further from the truth. While I like to get ideas and information away from the computer whenever I can, there’s no question that software plays a vital role in my everyday work. I’m going to quickly go over the tools I use each and every day, not only for web design and development work, but also tools that help to improve my efficiency and workflow at any given time. Forewarning, this is heavily Mac-related.

In no particular order …


Quicksilver — Quicksilver is what the integrated Spotlight for OS X should have been. Basically, it’s an application that allows you to access or search anything on your hard drive with a few customizable keyboard strokes. Do something repetitive each and every day? With Quicksilver, create a shortcut for it and set up a few actions to create your very own, unique OS X experience.


MAMP — MAMP stands for Macintosh, Apache, Mysql and PHP. I use MAMP for configuring and testing a website before or during a launch. For instance, any CMS setup normally wouldn’t be testable without a working server, but MAMP allows me to test locally and save a potential disaster if I were to accidentally mess something up while configuring a live website.

Time Machine

Time Machine — I bought a Time Capsule over a year ago, and it’s saved my butt more than a few times. With Time Machine set to backup every hour, I feel safe knowing that if I ever need to revert to an older version of a document, I can just fish it out of a recent backup. Call it a poor man’s SVN repository, except for all your local hard drive files.


Firefox — Hands-down my favorite browser to use and test with, the Mozilla team is always on the leading edge of what’s new in web technology. While Firefox runs a tad bit slower than Safari and Chrome in own my tests, the sheer amount of add-ons available will always make this my favorite browser.


Firebug — Speaking of add-ons, Firebug is by far the most popular add-on for designers and developers alike. With Firebug, the most obvious use is in its inspection tool, allowing you to view a page’s source quickly and easily. I also like to monitor page load times with it, as well as debug and edit source code on the fly.

FontExplorer X

FontExplorer X — Just like with most font manager applications, you’re allowed to preview and activate fonts within a tidy program. What I like most about FontExplorer X is in its interface. Simple and well-designed, it looks and feels just like the popular iTunes application, except for fonts only of course. I also customize my own “sets” (ie. folders) to make browsing typefaces easy. For example, I have folders set up for serifs, sans-serif, slab-serif, script, free, etc. You get the picture.


Gmail — A well-designed interface, multiple email account handling and “Starred” labeling make Gmail my favorite email application. There’s not much to say about it that hasn’t already been said, so I’ll just leave it at that.

VMware Fusion

Fusion — VMware’s Fusion is my choice for Windows virtualization software. Easy to setup and launch quickly, I have an XP OS setup, which I use to primarily test web pages in different browsers on the Windows platform (mostly IE of course).


Tweetie — This is a Twitter application obviously, which I technically do nothing with that strictly applies to web design or development. But I listed it here for the links, information and inspiration (and sometimes distraction) it provides from the people I follow. I like to keep Tweetie open during the day to keep my up to speed on what’s going on in the web world, which is vital as a design professional. It’s like a mini-RSS feed, in 140 characters or less.


Photoshop — For obvious reasons, Photoshop is the most popular software for web designers to create their layouts/mockups/wireframes in. It’s been getting bashed on quite frequently as of late for not being a program that was created for web designers to begin with, and while some go with Fireworks, others just prefer to design straight out of the browser. For me, it seems to make the most sense to stick with Photoshop for its ubiquitousness and my own comfort level.


Droplr — As far as url shortening services go, Droplr is very new to the scene. Once I started using it as a local application however, I could right away see its usefulness. First, I don’t like browsing to other sites to create my shortened url’s (ie. or With Droplr’s local application, I can just drag and drop a site’s favicon to my OS X menu bar and get my new, shortened url copied to my clipboard automatically. I’m also a stats junkie, and Droplr provides my very own account to track my views.


Things — Things is a very popular task manager, using the GTD methodology (Getting Things Done). Just like with most Mac applications, the interface is extremely simple and elegant. I track all my web project tasks with it, ranging from project requirements that need to be fulfilled, as well as serving as a notification system to remind me when things need to be completed on specific dates. This is the only application I keep open the entire day.


Dropbox — Dropbox won .NET’s Application of the Year, and there’s no doubting why. Up to 2 gigs of free storage space to use on a synced folder across as many platforms as you need, it’s absolutely crucial to use if you ever work on more than one computer. You can also access all your previous file versions online, so I keep all my working files in my Dropbox folder serving as another form of version control.


Coda — Coda is a flexible and lightweight text editing software that I use for all my coding. Using its “Sites” feature, I set up my local and remote folders to replicate each other. I also couldn’t live without its “clips” feature and the integrated FTP service, which I use for all my transferring needs.


LittleSnapper — LittleSnapper is essentially a screencapture image manager for keeping notes, site captures or inspiration all in one application. I already have an Ember account set up to access my image captures online, but LittleSnapper also allows me to edit and annotate screencaptures without the bloat of using Photoshop for simple documentation.

Mint Analytics

Mint Analytics — While technically not an application, I wanted to add Mint because of its usefulness when analyzing into any site’s analytics. I find myself checking my stats constantly, and Mint offers your own database to keep your stats, unlike Google Analytics, which can do anything with your stats as they see fit. There are pros and cons of each, but for simple, quick statistics for your website, I find Mint irreplaceable.


Joseph Bayot

Thanks for this rundown of your favorites. I always enjoy when people write thoughtful, personal lists like this, whether it’s a designer describing his favorite apps or a chef describing his favorite kitchen tools.

David Trang

No problem Joseph, I’ve always liked reading the same of others which is why I decided to jot down the tools that help me out each and everyday. The chef analogy is a good one since there are so many ways to do the same thing and getting a job (or dish) done well, it’s all a matter of preference of how we get there though.

Daniel Romsaas Hansen

Nice tips : )