40 Comments

Summary:

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

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.

TextWrangler

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.

FireBug

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.

  1. That is a great list. I just picked up a mac to do some 3d design and animation, but was looking around for web development software! Thank You!

    Share
  2. If you’re someone who doesn’t hand code, you should look at ‘Nvu’. It’s an opensource (free) wysiwyg html editor. It’s been described as the poor man’s dreamweaver.

    http://www.nvu.com/

    Share
  3. I just downloaded ColourMod…what a great little tool that is! I, too, have been opening up Photoshop or Illustrator just to get Hex colors. I didn’t even think to look for a dashboard widget to save me time. Thanks for the list!

    Share
  4. Wow that does sound familiar, I used to start Photoshop up just to check colour hex values too. Now I just use ColourMod. Do wish there was a easier way to crop and resize images and manipulate brightness/saturation other than having to start up Photoshop.

    Share
  5. You know, weisheng, there are some apps out there that do just that using some OS X Core Image. I’d have to dig a bit to find them…

    Share
  6. Thanks Yasser. I only use Photoshop on occasion for more complicated graphics stuff. Generally there are lots of apps out there that allow crop/resize and a couple of other editing options, but I haven’t come across one that does brightness/saturation. I usually use that to touch up images before posting them on the web.

    Share
  7. For those interested in some image tools that rely on Core Image (and are therefore pretty speedy) check out ChocoFlop (freeware) and Image Tricks (shareware, $9.95).

    Share
  8. [...] Last but by no means least, we have ‘The Apple Blog’ and their round-up of free web design tools. Invaluable. [...]

    Share
  9. just got my new macbook and I do dabble with design so i was looking for an equivelent to frontpage. i did download NVU but having issues with it, any idea what else is good and FREE?

    Share
  10. Sahibinden emlak ilanlar satilik kiralik emlak gayrimenkul almak satmak isteyenleri bulusturur.

    Erdoğdu Emlak LTD ŞTİ adına Osman Erdoğdu

    Share

Comments have been disabled for this post