Blog Post

Workflow: Web Design

Stay on Top of Enterprise Technology Trends

Get updates impacting your industry from our GigaOm Research Community
Join the Community!

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!

20 Responses to “Workflow: Web Design”

  1. I definitely agree with what you are saying here. I work at an auto shipping company and we all have Apple computers here in the office with the new OS system upgrade. I was very new to Apple products when I first came to work for the company but after being here for a while I have really found how useful they are for business. While we don’t use a lot of the apps you talk about in your article, something that we do often use is through the iChat for training my boss will, from his desk, show me on my computer at my desk how to do what I am trying to do. It is a very customer friendly product for sure.

  2. I also personally use Adobe CS. This extensive background of applications should be easy to follow for anyone new to these programs. This list of apps will be very helpful for those looking for something new in web design. I am not familiar with Cornerstone; will have to look more into it.

  3. I am best and cheapest web designer based in Miami florida. I have worked with clients all over united states and united kingdom. From My expierience I can say that one should not only be best webdesigner but should also be a very good representative and should know what actually the customers needcheap web designer

  4. I enjoyed reading your overview of these apps. I’m not seeing the “workflow” as much but the app overview is nice and there are definitely some gems in here.

    A few things that might some of the readers might like to know:

    1. Pixelmator while being an awesome app doesn’t have the web optimised export fire power that Photoshop and Fireworks do. If you want to get those files nice and lean, or have any kind of control on export, you need to use Photoshop or Fireworks. It’s annoying, and I’d love to see something more powerful from Pixelmator or Acorn in this realm, but for now, you shouldn’t be using them to export your images for websites.

    2. RapidWeaver feels a little out of place in the design area. Maybe in future overviews, a WYSIWYG section would be in order? Also, no Acorn? Bummer.

    3. Espresso doesn’t include the full feature set of CSSEdit (yet, anyway). Right now it’s a subset.

    4. Coda uses the text-editing engine of SubEthaEdit.

  5. Hey – you forgot iWeb, part of iLife from Apple. I got tired of hand-coding my site using html and textedit (real men code by hand, yes I know…), and I really dislike Adobe’s UI. iWeb came bundled on my Mac and I said “what the heck.” Works for me. More powerful than it looks, you don’t have to use their designs but they help you get started. – Steve

  6. Hey nice little list of applications here. There are a couple I hadn’t heard of or hadn’t paid attention to that I am going to have to check out.

    But how could you forget to include BBEdit? It may not be as sexy as TextMate but it is still one of the best text editors on the platform.

    Also while it does lack a lot of polish Gimp is a free alternative to Photoshop and the rest of your graphics editing applications. Also Photoshop Elements might not have a ton of bells and whistles but it is a very decent light image editor. The price isn’t bad and you can usually get it for free when you buy a scanner (even scanners that cost less than PSE does on its own).