• Sublime Text 3 icon

    Sublime Text 3

    Price: $70 (although you can evaluate it for free indefinitely)

    Sublime Text is a great text editor for writing code and markup. One of it’s stand-out features is “Goto Anything”. With a couple of keystrokes you can open a file, jump to symbols, and search documents—all without taking your hands off the keyboard. Another stand-out feature is multiple cursors. Set cursors multiple places in a file and start typing in all of them at once.

    It’s also fully extensible through packages—and the community has built tons of them. Install the wonderful Package Control and you can search and install packages from within Sublime Text with a few keyboard strokes. I recommend installing Package Control, Emmet and GitGutter packages at least.

    Sublime Text does comes with a decent learning curve. All customization is done through editing JSON files, and to take full advantage you’ll want to get your keyboard shortcuts down, but you’re a developer, right? Don’t give up too fast. Once you get the hang of it, you’ll marvel at how quickly and efficently you can write code, and you’ll wonder how you ever got along without it.

    And if you’re a VIM user like me, you can enable VIM mode in the settings and use all of the keyboard magic that you’re used to.

  • Codekit 2 icon

    Codekit 2

    Price: $29

    Along with Sublime Text, Codekit is my go-to tool for building website frontends. It handles all of the frontend magic you could ask for. It will automatically compile, concatenate, minify and syntax-check your LESS, SASS, JavaScript and CoffeeScript everytime you save. It auto-refreshes your browser on every update. Codekit 2 has a built-in server that lets you pull up your site on other devices (like phones and tablets), and they will live update too. It’s an indespensible tool if you design in the browser. Just a few of its other features include Foundation, Compass and Bourbon integration; Built-in Bower support; and support for a lightweight templating language—kit. I can’t say enough about how much I like this piece of software.

  • ImageOptim icon


    Price: Free (but you should seriously consider donating at least a few bucks)

    ImageOptim losslessly optimizes your images. That means your image’s file size gets smaller, but it doesn’t look any crappier. You just drag-and-drop your image folder onto the icon and it runs a whole slew of optimization tools to shrink your image file size without reducing quality. Some images can be reduced by as much as 50% or more. ImageOptim is essentially just a pretty GUI wrapper for a bunch of open source image compression libraries—that way you don’t have to be a wizard at the command line to use all of those compression tools. It couldn’t be simpler to use, and it’s not just for website images. Try dropping your iOS app images on it too.

  • Transmit icon


    Price: $34

    Transmit makes FTP easy. You can transfer files to your various web hosts via FTP, SFTP, Amazon S3 and Webdav. You can even mount remote volumes in Finder. In a nutshell it takes something boring like file transfer and makes it easy, if not enjoyable. For me the only thing missing is support for Rackspace Cloud storage.

  • Pixelmator icon


    Price: $29.99

    Pixelmator is a fast and powerful image editor for Mac. If you’re a Photoshop user, its tools and palettes will look familiar and the learning curve will be minimal. For me it’s replaced Photoshop for about 90% of the image editing I do, and it’s getting better all the time. The tutorials and help on the Pixelmator site are great. And the kicker… it cost $29.99. Compare that to ~$700 for Photoshop or ~$50 a month for Creative Cloud.

  • Sketch icon


    Price: $49

    Sketch is a vector design tool for Mac. Think Illustrator, but intuitive, easy to use and targeted to web and interface design. It has an infinite canvas on which you can add as many artboards and pages as you want. It has all of the vector tools you’d expect. You can add multiple fills, borders and shadows to an object; snap vector lines to pixels; and create symbols for reusable elements. When it’s time to export you can export to png, svg and other standard formats. You can even export the CSS for an individual shape. Sketch is by far my favorite app at the moment, and like Pixelmator it’s a very reasonably priced replacement for its Adobe counterpart.

  • Balsamiq Mockups icon

    Balsamiq Mockups

    Price: $79

    Balsamiq Mockups is a wireframing and prototyping tool that lets you create interface designs in seconds so you can quickly iterate and improve them. It has all of the advantages of quick pencil-and-paper sketches with the added ability to create clickable mockups. You can link different screens together through buttons and links to create a complete interface mockup you can test out on collegues and end users. It comes with tons of standard interface elements you can drag-and-drop onto the screen. Plus there is a site of community created elements you can download for free. It’s hard for me to over-emphasize how much I like this tool. It let’s me try out ideas quickly and easily with little investment in them, so that I can get to the perfect interface faster.

  • Silverback icon


    Price: $69.95

    Silverback is an inexpensive tool for doing desktop usability testing on Macs. In a nutshell it…

    1. Records the screen
    2. Video records the user session

    You can put a site design through its paces with real users and record the outcomes. One nice feature is the ability to mark tasks as you’re recording a session. You can then export composite videos made up of all users completing the same task, which makes it easier to compare outcomes for a specific task across all users.

If you have other tools you like, I'd love to hear about them. Leave a comment below.

comments powered by Disqus