The Toolbox

I started out designing with broad strokes; creating visuals, writing markup and dabbling in programming. Over the last couple of years, I’ve focused more on front-end design and development and find myself more often working in the browser than a graphics app. I think that’s partly because the skillset required by the average front-end designer has grown, and partly because it’s a line between design and development where I feel really good.

I know many believe tools are relatively unimportant. I think it depends at what level you want to have a discussion on design. The tools do not make the craftsman, however a good craftsman, not necessarily, but probably uses great tools. They have their place.

This post is half to showcase the main tools I work with, and half personal reflection to see what I use most and couldn’t live without.


  • 15′ MacBook Pro
  • 500bg external drive for Time Machine backups
  • iPhone 4


Usually I kick off development with a WordPress starter template (you can check it out on GitHub, it’s a constant work in progress), modified from the Bones theme, which is based on the HTML5 Boilerplate. We use Sass and Compass, do version control on GitHub and browser testing, beyond our own devices, with help from BrowserStack. I’ll keep process, plugins and libraries for another post.


  • Terminal – usually the first program I open. From it I see if anything needs to be pulled down from GitHub before launching TextMate.
  • TextExpander (Mac) – for text shortcuts and code snippets. It’s continuously running and I’m ridiculously dependent on it.
  • xScope (Mac) – I use the guides for measuring and checking alignment, but would find it difficult to get by without them. It’s great for measuring media query break points and Windows seems to be in serious need of an equivalent.
  • Gridset - for responsive grids. I’ve used Gridset on my last five projects and have had it open almost daily since I started working with it. I highly recommend it, the support is amazing and I’ve learned a lot about grids, not just using the tool.
  • Evernote – amazing notes app. It’s really an extension of me. I store account details, snippets or code chunks too big for TextExpander and which I use less frequently.
  • Pixelmator (Mac) – for pixel-based graphics.
  • Git – for version control.
  • Skitch – screengrab annotating, quick documentation for clients, documenting visual bugs.
  • TextMate (Mac) - My text editor of choice. I can feel Sublime Text 2 approaching.
  • Chrome browser developer tools.
  • Chrome plugins – javascript and CSS toggler.
  • Chrome plugin Text Statistic Counter - for grabbing character counts to keep an eye on typographical measure.
  • Chrome plugin Awesome Screenshot - for taking full screen screenshots.
  • Adobe Edge Inspect - for syncing my desktop with mobile devices for testing, also the best inspect element for iPhone I’ve found.
  • Spotify – for working to music.
  • E.ggtimer - for reminding me to take breaks. I’m a big fan of the pomodoro technique, 25/5 minute work/break cycle.
  • HipChat / Skype – for team communication. I often work remotely.
  • Gmail.
  • Dropbox – for online backup and file sharing.
  • Asana – for project management and bug tracking.
  • Transmit (Mac) -  for awesome FTPing.
  • MAMP Pro – for running local installations of WordPress mostly.
  • Pow – for serving rails apps locally.
  • Quicksilver (Mac) – for launching apps quickly. On the seldom occasion when it crashes, I usually need a minute to remember how to launch apps manually again.
  • Divvy (Mac) – for window management. I love it so much.
  • ColorSnapper (Mac) – for picking color codes in a preferred format. You can toggle between hex and rgba, very handy.
  • Jing – for taking and quickly sharing screencasts. The nearest app I’ve found to ‘Skitch for video’.


  • Pen.
  • Small notepad, A6 at the moment.
Paddy O’Hanlon is a web designer and one of the principals at Logo24. He is a lover of good semantics, well documented and architected CSS, and beautiful, content-driven design. (Really the design-guise is a cover-up so he can covertly feed his travel addiction and climb many rocks around the world). He tweets @Paddy.

Comments make us happy