Mirificam Press

12 Tools I Use Every Day as an Independent Web Designer

June 25th, 2008 in Business & Process

by: Matthew Griffin

Every web designer has a list of favorite tools—a set of indispensable programs and resources that we couldn't live a day without. Fortunately (or unfortunately) for us there is constantly a newer, better tool emerging for just about everything a web designer does daily. I thought it would be interesting and helpful to share my current list of die-without-it web design tools. Of course, by the time I actually post this article, the list will probably have changed; but that's the nature of the industry.

1. Adobe Dreamweaver - I jumped on the Dreamweaver bandwagon back when it was still called UltraDev and I've never looked back. My hat goes off to all of you purists out there who fire up a glorified notepad and code blind, but I couldn't make it a day without Dreamweaver. The latest edition (CS3) with it's incredible CSS and standards support has only further solidified my commitment. Dreamweaver is in a class of its own.
2. Adobe Photoshop - I'm trying to get the Adobe products out of the way first. No more, I promise. I first used Photoshop in high school in the lat 90s to crop and resize photos for my yearbook class. Soon after that, version 6 was released with the new slicing and "save for web" features. I haven't found anything that even comes close to Photoshop for building design mockups and creating web graphics in all the years I've been doing this. Of course, Adobe Illustrator is a wonderful companion, but with the raster nature of the web, Photoshop is my workhorse. I tried to use Macromedia (now Adobe) Fireworks a few years back and it just couldn't compete. I use Photoshop every day and I couldn't live a day without it.
3. Google Docs - Honestly, I didn't get into Google Docs right away. For some reason, though, about half way through 2007 I started using it to save and share text and spreadsheet documents. Now, I'm not sure what I did without it. I mainly use it to keep contractors and clients up-to-date on important information about projects. It's easy, it's free, and it's accessible to pretty much everyone.
4. 30boxes.com - You'd think with my infatuation with Google Docs, I'd be using Google's calendar as well. I really like the Google calendar but it just doesn't compare with 30boxes.com. 30boxes.com is actually one of my browser launch pages now. In addition to the obvious calendar functions, I use it as a constant running checklist of all my to-dos. It also sends me text messages to alert me of upcoming events. I usually click over to it fifteen times a day or so. I couldn't recommend a tool more highly.
5. MeasureIt Firefox Extension - The MeasureIt Firefox extension allows you to measure website elements by clicking and dragging across the screen. Before I knew what MeasureIt was, I had to do a screen capture, paste it into Photoshop and measure pixels there. I didn't realize how much time I was wasting. I use MeasureIt constantly.
6. Netvibes.com - There are a ton of feed readers out there but Netvibes was the first of a modular genre that's been copied ad nauseum. Still, I think Netvibes has stayed ahead of the competition and proved that it's still the best. I usually start out my day by checking my favorite blogs and news on Netvibes.
7. ColorZilla Firefox Extension - Much like my dilemma before I got the MeasureIt Firefox extension; anytime I wanted to know exactly what color was being used on a specific website, I had to do a screenshot, paste it into Photoshop, and use the eyedropper there to get a color code. As the name implies, the Eyedropper Firefox extension is an eyedropper tool build right into the browser. It's great.
8. Web Developer Tool Bar Firefox Extension - The Web Developers Tool Bar is incredible. It sits at the top of the browser (I have it hidden most of the time and just bring it out when I need it), and lets you dissect and contort web pages in all kinds of helpful ways. You can look at styles for a given web page, disable styles or javascript altogether, validate HTML and CSS, resize the browser window to match various resolutions, and bunch of other stuff.
9. Diigo.com - Diigo is a social bookmarking site a lot like del.icio.us but with a twist. Diigo lets you highlight text on pages and attach sticky notes that appear every time you revisit a web page. All of your bookmarking data is saved online so you can log onto diigo.com from anywhere and search all of your bookmarks and sticky notes by keyword. I use Diigo now to research every blog article I write. The more I use it, the larger my catalog of tagged pages gets, and the better research tool it becomes.
10. Flock - Flock is a web browser based on the Mozilla platform. It works a lot like Firefox even allowing Firefox extensions. But Flock was built with the social web surfer specifically in mind. That means it automatically integrates with major social networks like Facebook, Flickr, Blogger, etc. For example, I can upload a photo to my Flickr account simply by dragging and dropping it into an expandable Flickr upload bar at the top of the browser. If I want to see what my Facebook friends are up to, I can activate a fly-out panel that shows me. I actually wrote a review a few months back if you want to know more about it. Since I spend most of my day on the web, Flock has become a mainstay in my web designer tool set.
11. PipelineDeals.com - PipelineDeals.com is an online sales lead and project manager. I've been using it for over a year now and find it an indispensable part of my project management process. Its simple and intuitive interface makes it easy to add deals and track progress, contacts, and proposals. Also, like Diigo, since it's all stored in the cloud, I can get to important information from anywhere. Its $15/mo. price tag is well worth it.
12. MS Notepad - It may sound weird but I actually use MS Notepad just about every day. I constantly get web content emailed in a variety of formats, most of which retain undesirable elements when they are copied and pasted into a web page. Notepad is the fastest and easiest way to strip all that out. I just paste the content into Notepad first and then copy and paste into the web page. Viola! No more funky formatting. Notepad is also nice to have open just to temporarily hold miscellaneous text, links, etc.

That's all twelve. I'm sure you've heard of at least a few of these but there are probably few you haven't. This list is meant to point you to new tools, but also to show you new ways or reasons to use the tools you are already acquainted with. I'd love to hear about the tools on your list as well, so please comment.