Web Design Tools for Free

40 Comments

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.

40 Comments

Full Download

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.

Resim

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

araba

exturize photos more effectively so I can created electronic/digital portraits of my self and of my friends.

portrait artist

I’m also an avid user of ColourMod. Though it, choosing of color is made easier. Right now I’m studying on how to texturize photos more effectively so I can created electronic/digital portraits of my self and of my friends.

resimler

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…

vincent

hi,
I am reading more computer books. Any free ebooks and important articles available send my id.
by

vincent

osman

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

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

isaac

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?

weisheng

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.

Yasser Dahab

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…

weisheng

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.

Heidi Panelli

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!

paul

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/

Jason Drohn

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!

Comments are closed.