Web Design Tools for Free

I don’t consider myself a design guru, but I do like to dabble in CSS, PHP, and Javascript — at least enough to make my blog look nice. I’m a relative purist when it comes to web design, so I rarely step outside of the text editor/web browser development duo. Occasionally, however, I need some help. Luckily, I use a Mac, which means I don’t have to shell out big bucks for simple applications.

My top five design tools are available exclusively for OSX — and they’re all free too.


Of all the programs that I use most on my Powerbook, TextWrangler is second only to Firefox. The folks at Bare Bones Software have outdone themselves with this amazingly powerful and easy to use text editor.

By default, it will detect the type of file you’re working on (be it PHP, CSS, whatever) and highlights code appropriately. It’s hands down the easiest way to tell if your code is correct before sending it to the compiler. To top it all off, it’s completely free.

Universal Access: Zoom

Enabling the Zoom feature of Apple’s Universal Access preference pane brings a new definition to the words pixel perfect. I use the Zoom shortcut (Cmd Shift =) on a daily basis to get a better view of my CSS elements. It’s fast and efficient, plus, it wows your friends. Just make sure you disable “Smooth images” in the options, otherwise you get won’t get a pixel-level view.

I also like to use the Universal Access pane to invert the screen colors. It’s a nice change of pace that helps me break into some new color schemes.

This feature comes standard with OSX, so no download or payment required. Can you feel the love?

ColourMod Dashboard Widget

There was a time when I used to fire up Photoshop just to use the color browser. Waiting around for Photoshop to load just to get a hexadecimal value? Silly me.

There are a myriad of color pickers out there for OSX, but I choose to use one of the simplest: ColourMod. It lives in my Dashboard and waits until I need it. It does nothing more than what I need it to — quick access to a color wheel and value converter. Like the rest, it’s free.

WebKit Inspector

If you’re brave enough to grab a nightly build of WebKit, the open-source engine behind Apple’s Safari, you’ll be rewarded with one of the slickest-looking DOM inspectors on the block. In a style befitting Apple’s pro line of applications, the inspector gives you a quick look into your website’s DOM tree.

WebKit Inspector

If you have WebKit on your machine (it’s beta, but it’s remarkably stable, so don’t worry yourself much about runnign it), you can spawn the inspector by Ctrl-clicking an element and selecting “Inspect Element.” If you’re into CSS or Javascript and consider yourself a power-user, it’s a must-have.


Okay, so FireBug isn’t Mac exclusive at all, but I’m pretty sure Jow Hewitt wrote it on a Mac. If you love writing web scripts, FireBug is your best friend. The Firefox addon effectively combines Javascript/AJAX, DOM, CSS, and XHTML debugging into one console, meaning you can spend less time navigating through your debugger and more time fixing bugs.


Comments have been disabled for this post