20 Comments

Summary:

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 […]

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

LittleSnapper

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

Pixelmator

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

Coda

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.

Publishing

transmit2

Transmit

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

versions

Versions

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.

Conclusion

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

  1. 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).

  2. Henry Balanon Monday, April 13, 2009

    A Versions app for Git would be money.

  3. What to read on the GigaOM network Monday, April 13, 2009

    [...] team (WebWorkerDaily) Even in a bad economy, wind turbines just keep on spinning (Earth@Tech) The best OS X apps for web design (TheAppleBlog) [...]

  4. John Ellenich Monday, April 13, 2009

    Great list of apps– maybe an article on how someone would use these in a typical workflow would be useful…

  5. I don’t believe that Espresso includes CSSEdit.

  6. 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

  7. 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.

  8. Hello! Unrelated, but I was hoping women over 40 would go here:

    http://fourthrow.wordpress.com/2009/04/14/women-over-40/

    It’s a homework assignment about the feminist movement! Thanks for your answers!!

  9. osCommerce Templates Tuesday, April 14, 2009

    Great tools I must although I have only tried using Adobe. The images you put makes me want to use the tools that you have listed. What Macromedia Fireworks and Ulead PhotoImpact, I know they are tools for designing.

  10. osCommerce Templates Tuesday, April 14, 2009

    Great tools I must say although I have only tried using Adobe. The images you put makes me want to use the tools that you have listed. What about Macromedia Fireworks and Ulead PhotoImpact, I know they are tools for designing.

Comments have been disabled for this post