Workflow: Web Design

OS X is a remarkably versatile platform, with a huge range of software on offer. Whether you’re a designer, musician, journalist, scientist or running a business — there’s a tool to meet your needs. To help you wade through the mass of software and pick out the best bits, we’re starting a new series called “Workflow.”

Each post will walk you through all the particular applications required for a particular task. The first installment will outline all the best applications available for web design. From collecting together your inspiration to hitting publish, you’ll soon have a collection of software to make the process as easy and enjoyable as possible.

Asset & Inspiration Management



LittleSnapper is a fantastic application for creating a collection of screenshots and graphics for use in a web project. Whether gathering inspiration, design mockups, or revisions of a design, it can offer a great tool for tagging and storing images.

It’s possible to capture screenshots from any major browser — either of the entire screen, or a particular element of a web site. Annotation tools are excellent, and are completely vector-based. It’s simple to undo additions, and an image can be exported with or without all the notes you’ve added.

Screenshots can be shared with others via an FTP server, or through the integrated QuickSnapper service. This is simple to set up, and works reliably.

Text Expander — A great way for storing snippets of text, code, or copy, and easily recalling them when needed.

Yojimbo — A powerful information manager, allowing you to store almost anything at all: passwords, text, PDFs, images…you name it.

DevonThink — Similar to Yojimbo, providing another fantastic way to store web resources, screenshots, documents, client information and mockups.

Linotype Font Explorer — If you’re someone who works with type on a regular basis, Font Explorer X is a great tool for browsing, managing and activating your typography.

Graphic Design



Pixelmator offers a fantastic solution for web designers looking for a simple, inexpensive graphics editor. While it can’t match the sheer versatility and power of Photoshop, the interface and tools available are excellent for the price ($59).

The speed of Pixelmator is impressive, as it can rely upon core image technology to utilize graphics card performance, rather than passing the load of processing on to your internal memory or processor. Integration with Automator is also excellent, and setting up repeated tasks is a simple process.

Adobe CS4 — A thorough collection of graphic design tools for professionals. Not cheap, but some of the most advanced software available.

RapidWeaver — A “WYSIWYG” web design environment for OS X, with some great in-built themes.

xScope — A thorough set of tools for measuring, aligning and inspecting on-screen graphics and layouts.

Keynote — While Keynote is a presentation app, it’s fantastic for creating charts, graphics and design elements.

Slammer — A great tool for overlaying grids and measuring spacing of a design.

Development & Coding



Coda is a relatively long standing integrated application for coding and developing web sites. Managed around a collection of “sites,” each one is associated to a local folder and FTP server. Both can be kept in sync easily through the integrated publishing system within the application.

Text editing looks good and is remarkably functional. A wide variety of different languages are supported, and full subversion support is built into the application. CSS code can be edited with visual feedback, showing how changes made will affect layout.

Espresso — The main competitor to Coda, Espresso offers a similar range of features and includes the excellent CSSEdit.

TextMate — A powerful and versatile text editor, with a bunch of powerful snippets, macros, and unique scoping system.

CSSEdit — A novel environment in which to edit CSS, showing changes visual previews in real time.

TextWrangler — A completely free text editor, with coloring support for any language you care to throw at it.

SubEthaEdit — Famous for providing real-time collaboration between different users, SubEthaEdit is also a solid code editor in its own right.




Transmit is one of the best-known FTP clients for the Mac, and my personal tool of choice. Priced at $30, the feature set is impressive: Amazon S3 support, .Mac sync, Dashboard integration, server-to-server transfers, and a wonderful interface.

A few of the other applications noted below do offer similar features for a lower price, though they lack the polish and reliability of Transmit. If you’re a Coda user, you’ll also appreciate the integration with Transmit and similar cross-over of style and interface.

Cyberduck — An open-source client, with a feature set to rival Transmit. It also supports transferring to Mosso and Amazon S3.

Interarchy — An expensive application at $59, with a bunch of powerful features for advanced users.

Yummy FTP — Offering a few unique tools such as transfer auto-recovery, scheduling and alias support.

Forklift — A great-looking app, though it comes with a heavy price tag.

Fetch — A basic and fairly inexpensive app that checks off all the features expected from a traditional client.

Subversion / Git



We’ve previously covered a roundup of subversion and git tools. While the command line does work for these version tracking systems, a variety of applications can offer a much easier-to-use interface. Our featured tool of choice is Versions, a gorgeous-looking and full-featured app for OS X.

Versions includes the latest release of SVN, a visual timeline of changes, easy reverting to older versions, and thorough security features. The app feels at home on a Mac, with a solid interface and excellent visual design.

Cornerstone — A great-looking app, with all the features you’d expect for a subversion client.

svnX — An open-source GUI for most features of the svn client binary, with a slightly plainer interface.

Gitx — Featuring a history viewer and a decent commit GUI for dealing with Git.

OpenInGitGui — A droplet which allows you to open Git-Gui from finder.


The Mac provides a fantastic platform for developing web sites: organizing your material, designing, coding, uploading and version tracking. We’ve covered almost 30 applications, each with something to bring to the table in each respective area.

Feel free to make your own decision on which tool is best for your needs. If you’re a big fan of an application that hasn’t been mentioned here, please let us know in the comments!

You're subscribed! If you like, you can update your settings


Comments have been disabled for this post