10 Tools for Your Web Design Toolbox

10 Tools for Your Web Design Toolbox

Regardless of your profession, we all have tools we use on a daily basis. After all, what is a blacksmith without a hammer, or a painter with no brush? They help us complete our work in a timely, efficient, and professional manner. Below I’ve compiled a list of ten tools that I use on a constant basis with my work, and would never leave home without.

myFontbook

myFontbook

Admittedly, I’ve known about myFontbook.com for quite some time, but never saw the value. Lately as my needs to quickly remember font names in my ever growing library, it has slowly become a lifesaving web app. myFontbook runs right in your browser, and allows you to tag your fonts as well as browse favorites.

It’s a great tool for hotswapping your fonts based on the design style. Making a band poster? Click on your Grunge tags and flip through your distressed and worn fonts! It even has a handy display at the bottom to show how each character looks, including the option for custom text. My only complaint is that it has some nasty load times on occasion.

morgueFile

morguefile 10 Tools for Your Web Design Toolbox

morgueFile.com is a website I’ve been pushing for a long time. At the core it’s similar to iStockphoto, however all of the images (or nearly all) are free to use for both personal and commercial use. Each photograph has a large notice below the photo displaying what usage rights you have, spelled out clearly. I currently use mourgeFile for all of my post thumbnails, and base photos for tutorials.

Notepad ++

Notepad++

Notepad++ is the text editor of choice for most of you already I know, but to those uninitiated, Notepad++ will save your life. Basically, it’s a tabbed programming and scripting environment for a majority of the languages available. It allows you to open say, all of your current template files for mass editing, including syntax hilighting and mass replace. You can even run macros and plugins, extending your usage significantly. For those of you on the go, you can also find the portable version of Norepad++ over here.

fivesecondtest

fivesecondtest 10 Tools for Your Web Design Toolbox

fivesecondtest.com is an anonymous matching system that pairs users up with your work. The service is free, with premium features, however there’s nothing too detrimental to your experience. You can choose between two test types, memory and clicks. Memory tests show your design for 5 seconds, then ask the user to list as many things as they remember; GREAT for working on visual branding.

The click test asks the user to click on an area you designate, overall I haven’t found much use for it. You can view all of your results on an individual basis, or as a lump sum.

BgPatterns

bgpatterns 10 Tools for Your Web Design Toolbox

BgPatterns.com’s usefulness is debatable. Basically it has the low-end features of photoshop, tailored towards making repeatable patters. I personally use it to generate very low opacity repeating textures, however all it really does is save me time. The basic controls are forecolor, bgcolor, rotation, size, image, and opacity. Not a ton to work with, but more than enough for basic filler graphics.

Woorank

Woorank

Woorank.com is a fairly new site analysis tool. You could compare it the most against sites like Hubspot’s website grader. Basically, it crawls your site, and gives you a checklist of factors that add up to your site score. While the scoring factor of some elements are debatable (Dublin core, really?), it’s still a great overview tool as far as SEO and web standards goes. Supposedly a premium version is in development, however what features that would encompass is beyond me.

For bonus points, go check out Woorank.com’s site score.

W3 Valdidator

W3 Validation

I can hear the groans from here, and I know, this is pretty standard. However lately I’ve been meeting quite a few blog owners that have never heard of validation, and for those users, go get validated. Now.

Styleneat

Styleneat

Styleneat.com is a quick filter I run my stylesheets through when I’m working on a project. It takes your CSS, and organizes it by category, as well as alphabetically sorting your selectors. There are a few options to play around with, but the usage is simple. Definitely makes finding a certain class a few months down the road.

Iconfinder

Iconfinder 10 Tools for Your Web Design Toolbox

Iconfinder.net is the fastest (in my opinion) way to find icon sets quickly. You can search by term, size, and license. The majority of the sets are free for commercial use, but definitely make sure before using them, as some icon sets have mixed licenses. Overall it’s a great database, in fact a majority of our icons here on the Canvas are from Gentleface.

Spoon Browser Sandbox

Spoon Browser Sandbox

Spoon’s Browser Sandbox is our final tool. For those that haven’t heard of it, it’s a plugin based browser emulator. It covers the major versions of IE (including 6), Firefox, Chrome, Safari, and Opera. As far as I’m aware it only runs on Firefox, which is a bummer for us Chrome users, but it works fantastically. I had been using IETester, but it has alot of quirks and crashing issues for me. Definately worth a bookmark if you don’t already have a  browser testing environment.

Your Turn

Well those are my favorite tools, but what are yours? If you have a great app that comes to your web design rescue, head on down to the comments and let us know!

Brandon Diaz is the creator of The Corrupted Canvas. He's a web designer with a pretty severe caffeine addiction. He's avid about many things including web standards, web development, various teas, and game design. If you'd like to get in touch you can find him on Twitter.

Logged in as . Log out »