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.

  • 49 Comments
  • 14701 Views

Comments

Posted By: Eric on 06/25/08

What no firebug?? :P

Posted By: Chris on 06/25/08

Colorzilla is pretty extraneous for most designers. When Photoshop is open you merely have to select the eyedropper tool, left-click and hold down the mouse button and drag your mouse over anything on your desktop, including web pages, and you'll get the exact color into Photoshop immediately.

Posted By: Chris on 06/25/08

MeasureIt sounds awesome. I'm going install that right now. Not 30 minutes ago I was opening a screenshot in Photoshop to measure something. Ha.

Posted By: Edd on 06/25/08

Really? Measuring in Photoshop? And with all those freeware onscreen rulers to be found via a google search? Yeah, I couldn't live without firebug... And sorry but Dreamweaver is a waste of bits. Homesite was the way to go until I found Eclipse... or PSPad...

Posted By: Chad on 06/25/08

All good tools. I've actually been using the XRay JS to measure elements. On their site, you can just right-click the XRay button, and save it as a shortcut in your tool bar. Firebug is a must have. Especially for keeping that code valid! I'm seeing 2 warnings on this page as I type. lol. And better than Notepad, is Notepad 2, or Notepad Plus. Google them. You get Line numbers, syntax highlighting, find n replace and more. I'll have to checkout 30boxes.com. Thanks for the tip.

Posted By: Chad on 06/25/08

Woah. no basic HTML? that's cold as ice.

Posted By: Santiago Martinez on 06/25/08

MS Notepad???? Get a MAC please!

Posted By: seanzo on 06/25/08

You could pick up iconfactory's

Posted By: Matthew Grffin on 06/25/08

Wow! You guys are vigilant. The page should validate now. Thanks for all the great tips. I knew I'd get a Mac purist like Santigo. I actually use both so only the purist of the pure and find fault.

Posted By: BladedThoth on 06/25/08

A few notes: 1: I use Dreamweaver on and off. I am a purist and have written an army of sites by hand in nothing more than a text editor. I use Dreamweaver when I want a live preview as I type, but as many people know, there are a lot of editors out there with live preview functionality now. My biggest problem with dreamweaver as a tool is that it never seemed to work well for me. 2: Photoshop. 'Nuff said. Sure, you have the GIMPers out there, but really, PS is the king for mockup. 3: Interesting thought; Though I don't see it too potentially useful overall. 4: I use a few different aspects here; ProtoPage is pretty cool. 5: Many other tools; Not dogging your choice, but onscreen rulers have been around for quite a time before MeasureIt. 6: See above on ProtoPage. Not as supported, but still pretty handy 7: Good plugin, but there are standalone apps that will work with ALL windows; Handy if you pull JPG, etc. 8: Good choice. Add Firefox and Web Dev Toolbar for IE. 9: I like this idea; I use delicious right now and losing track of things 10: Eh... 11: Looks interesting for maintaining. 12: WHY? Clipboard Fusion. Not only handy for HTML, but also for client's Word/formatted files -- http://www.binaryfortress.com/clipboardfusion/

Posted By: Dustin on 06/25/08

Yes, definitely check out firebug...you'd dig it. I also use Whois alot..look into that one too.

Posted By: Dave on 06/26/08

The web developer toolbar has a ruler built into it in the Miscellaneous menu. Notepad++ is much more functional than MS Notepad.

Posted By: Philip Seyfi on 06/26/08

"Notepad++ is much more functional than MS Notepad." > Well and that's the main problem about it... Notepad rulez as it's as easy as possible Also for thos using Opera there are two great ruler widgets available - http://widgets.opera.com/widget/5228/ and http://widgets.opera.com/widget/4536/ - both very good.

Posted By: Jermayn on 06/26/08

Like the new design a lot! However think the content going up would look better if it disappeared behind a white block as it can look a bit messy with text between the menu and browser. btw I really like the Bible scripture and the tree andhow they tie into each other

Posted By: Leafnode on 06/26/08

I'd replaced MS notepad with notepad2 - it's also very simple, but has syntax highlighting and line numbering. It also runs from single exe file!

Posted By: Barney on 06/26/08

Check out Firebug, and use notepad++ or NetBeans. Flock is very cool, hadn't realised. Good post.

Posted By: Not A Niche on 06/26/08

Hey Matthew, you can measure things with your web developer add-on in ff already. Just go to 'Miscellaneous' on your Web Developer Toolbar and click on 'Display Ruler'. Here we go! No need to install another add-on.

Posted By: Matthew Griffin on 06/26/08

Not a Niche and Dave, I did notice the ruler in the Web Dev toolbar awhile back, but I use the ruler so much that it's a pain to open the toolbar and find the ruler every time. MeasureIt is activated by a persistent icon in the lower right side of the browser. Much easier to get to.

Posted By: Chad on 06/27/08

If you have the web developer toolbar, then you can also just press Control + Shift + F, and get the element info box.

Posted By: E. I. on 06/27/08

MeasureIt - wow! And I call myself an IT guy.... I've been using a horrible method (too embarrassed to name names) Thanks for the tip..

Posted By: Steven Snell on 06/27/08

Notepad's not weird. I use it every day too. Well, maybe I'm weird.

Posted By: Matthew Griffin on 06/27/08

Steven, yeah, I've gotten a lot of flack for having Notepad on the list. I never would have thought it would garner so much attention. Chad, the shortcut you mentioned doesn't seem to work for me. In Flock Ctrl+Shift+f activates the favorites tab.

Posted By: Will Sherwood on 06/27/08

Well Done. Thank you for posting this very useful list.

Posted By: Mayor of Kentonville.com on 06/27/08

Thank you for the post

Posted By: Abhisek on 06/28/08

Nice list. But i can't agree more on Notepad. it's been the most sluggish app for me. Why don't you go for Notepad++?

Posted By: Chris on 06/29/08

Fantastic list. I downloaded the Measurement and ColorZilla Firefox extensions, they are going to save me a lot of time. Thanks.

Posted By: Erika on 06/30/08

Nice list. I see someone else mentioned the Ruler in the web dev toolbar. And you know what, I use Dreamweaver also, but not for any practical use and definitely not for the code output. LOL

Posted By: Jason Cochran on 06/30/08

I use: Photoshop, Visual Studio 2005 (VB.Net), Firefox w/ FireBug, Notepad, Sql Studio, Google (Much faster than VS built in Help System - Bleh!), Regex Designer, Internet Explorer, and half of my brain.

Posted By: Jason Cochran on 06/30/08

Also, on the side I do some stuff for my in-laws at home. I have Ubuntu (Linux) with Sun Microsystems VirtualBox to run a virtual machine within my Linux box. Inside the virtual machine I have Windows XP, Web Developer Express, Sql Express, Firefox w/firebug, Internet Explorer and Photoshop. I highly recommend DiscountAsp.net for .NET hosting. Also, I greatly suggest you guys try out Ubuntu. It is by far the best Linux distro I have ever tried. For my uses, I love being to run a solid OS without the need for virus protection and then run Windows XP for development all on a laptop. Two very cool thing about Virtual Box is that you can save state and that the virutal machine is seen in your network as a normal computer would be. Check this out http://jcochran.homelinux.com. That is apache on my laptop using DynDNS. Super-Duper Awesome Huh!? I plan using that to setup a private shoutcast server to stream my mp3s from home. WHOA!! :)

Posted By: Jon on 07/01/08

I'd have to chime in on Notepad++, too. The language contextual highlighting alone is worth switching for. If you've ever spent time hunting down a stray quote or semicolon, you know what I mean.

Posted By: emi on 07/10/08

Instead of using notepad for cleaning text formatting, you could use PureText.

Posted By: FOxnaren on 05/19/09

gr8! i gotta those firefox tools! Thx!

Post Your Comment

Comments are closed.