10 Web Design Tools I Can’t Live Without

10 Web Design Tools I Can’t Live Without

Everyone has their favorite methods, tricks and tools for completing their work. As a Mac Webdesigner/developer, I thought I’d share my list of indispensable software and resources that I use on virtually every project. I wouldn’t call this list exhaustive as I have left out a couple things like an FTP client (though I do like Transmit) and an SSH client (I simply use OSX’s terminal), but it should give a little insight into how I get things done. I primarily use Firefox as my browser of choice, so some of the tools here are actually add-ons for the browser.

1. A decent text editor. I use BBEdit, though I sometimes use Eclipse/Aptana as well. Say what you want about WYSIWYG editors, they’re easier, they’re getting better, they have a lot more features, etc… I really just haven’t ever liked them. Sure Dreamweaver is much better than it used to be, Coda isn’t bad and Espresso looks pretty promising, but they still seem to get between you and the real markup IMHO. They all seem to let you down with their previews eventually anyway, so what’s the appeal? I haven’t been able to pin that down, and so until then, I edit in a text editor and preview with a browser. Honestly, I have a version of BBEdit that is a little old, so I may eventually shift away from the slightly overpriced standby, but old habits die hard.
2. Omnigraffle is tops in my book for wireframing and process documents. Sitemaps, data design, UI prototypes, etc pretty much always start here for me. I use it for sketches and for client delvierables alike. It’s easy, fast and extensible. I love it.  To enhance the already great app, head to Graffletopia.
3. Photoshop is most likely in your toolbox, too. That or Fireworks. I use the save for web for all my images feature now that Imageready is no more.
4. Kuler/ColourLovers. I seem to switch back and forth between the two color palette creation sites. Each has their pros and cons. I like Kuler’s flash tool interface a tad better, but ColourLover’s community is just awesome. When I feel creatively stagnated, I often pop over to one of them just to work up some palettes and get inspired.
5. The Web Developer Toolbar. If you don’t have this installed on your Firefox installation you are simply wasting too much time debugging and validating your markup and CSS. With the built in guides, grid and rulers, the toolbar in many ways seems to obsolete the tools in many of the WYSIWYG editors out there. I could probably write a post on just this tool alone, because each top level menu in the bar is loaded with useful utilities and features.
6. Firebug is a great combo/tag team tool to use with the Developer toolbar. The DOM inspector, HTTP request logger and header inspector along with the great inline CSS and HTML editing tools just make this another have to have editor tool for your browser.
7. Colorzilla is another handy little add-on that puts a eyedropper tool in your browser’s status bar. Sample the color of any pixel in your viewport, use the zoom to get nice and precise and then copy the hex color to your clipboard to use in an editor or your image editing program. Saves a lot of back and forth between Photoshop and the editor for me.
8. VMWare Fusion/Windows. Yes, we live in a windows dominated world. So, for my cross platform testing, I have to have a Windows partition with IE6, 7 and Firefox installed. I use IE Developer toolbars over there and also have used IE Watch in the past to track HTTP requests in the browser that everyone detests. I’m hoping we can drop support for IE6 soon, but I’m not holding my breath.
9. Pngbehavior/Pngfix. I can’t wait to not need this. But, until IE6 is no longer in my list of browsers to test against, I am going to need to be able to use one of these methods to get PNGs to render as transparent images in this aged browser. I was thinking about not including this in my list, but again, I don’t think I have produced a site in the last several years that didn’t need this.
10. My Delicious bookmarks. With nearly 800 web design focused bookmarks and no filler, this resource is one I use to solve quirky rendering problems and find inspiration or tips first. It’s like a mini Google of web design tricks, but all tagged by yours truly. Now, I can’t guarantee the answer to everything web is in there, but more than likely there is something I have saved in my account that you can use.

So, there you have it. My must haves. What have I missed? What can’t you live without in the W3C sea? I’m interested in learning more, so as always, let me know what you are using to create your work.