The Web Designers Toolbox

Warning: Contains gratuitous analogy

It struck me recently that one of the benefits of experience is knowing how to make life easier for yourself.

Designing websites for a while, for example, has allowed me to develop a standard routine which I'll use every time I approach a new project. Obviously this involves the more ethereal things like design methodology but it also involves a practical list of applications, tools and web resources that I'll dip into at various stages throughout the build. Kind of like a toolbox.

In this article I'm going to break down the design process into it's different stages and look at the various resources that I use when making a site. So let's get on with it.

Stage 1: Planning & Research

Ok, the first step, and we're still ages away from coding in anger. The early stages in a project are all about planning and research.

You'll obviously talk to the client, extracting their requirements, but you're also going to want to see what else is out there. It might be an existing website that's going to be redesigned or it might be competitor sites.

At this stage, I used to use Wow Web Designs a lot. It's full of nicely designed sites, broken down into their fields (Arts, Entertainment etc) but unfortunately doesn't seem to be updated anymore.

Pretty soon you're going to want to write a Functional Spec. Or probably you don't want to write one, but you'll have to if you want to keep the client happy. Don't fear, there's the excellent mojofat tutorial that'll help you get your head round what to do.

Stage 2: Designing Mocks

Once the planning phase has been completed and the site functionality agreed upon, you're probably going to start designing the mocks. The vast majority of designers will be using Photoshop for this, but if you're really skint or just have masochistic leanings then you can try the free open source equivalent GIMP. Personally I wouldn't recommend it.

If you're lucky you'll already have a brand/identity to work with, or at least some direction from the client, but you're going to need some inspiration yourself.

I can't express strongly enough how important it is for beginners to learn from other well designed sites. Picasso once said "Good artists borrow, great artists steal". Now, I'm not advocating ripping off someone else's site (it's wrong and you'll land yourself on pirated sites for one thing), but there's nothing wrong with basing your design or elements of a design on an existing site.

For design inspiration I'm currently using a bunch of site:

www.cssbeauty.com
www.cssvault.com
www.stylegala.com
www.unmatchedstyle.com

These are all excellent sites, and, in my opinion, represent the cutting edge in modern design. They all place a large emphasis on web standards and CSS so they're great for picking up code hints too.

Choosing a colour scheme can also be tricky. Recently I've been using colormatch redux as it offers some nice suggestions for complimentary tones once a base colour has been picked.

Stage 3: Building the Site

Ok so you've got the final mock now, and you're ready to start building this baby. If text and images are the wood and HTML is the nails, then the HTML editor is the hammer that fits it all together. I use Dreamweaver but there a lot of free options out there too. Nvu is currently making a big stir as the new open source alternative to Dreamweaver. It's still only in beta, but you can download it from the site.

For the code purists, there lots of free HTML editors available. I often just use EditPad lite, but I've heard a lot of good thing about 1st Page 2000.

Images are probably going to factor into the design. The client might provide these, but not always and if you have to source them yourself you've got a few options. You can buy images from somewhere like Getty and pass the cost on to the client, but this can be extraordinarily expensive, or you can get free ones from somewhere like stock xchange, which I use a lot.

If you're going to be implementing a dynamic backend into the site there's lots of good sites out there where you can get the code you need. Some ones that I use are:

http://codewalkers.com/index.php
www.sitepoint.com
www.devshed.com

Remember that Google is your friend, and if you're stuck for something do a search and you'll most likely come up with a solution.

Stage 4: Testing

Ahhh, the spirit levels of web design. The tools that allow us to check a site is working as expected, on as wide a variety of platforms as possible.

Start off by validating your HTML and CSS, and if you're well behaved, check it's accessibility as well.

The Firefox Web Developer toolbar is a veritable Swiss Army Knife of tools indispensable for web designers. It allows you to validate HTML, CSS and WAI at the click of a button, and it's got so much more. You should get it. Now.

Cross browser testing is also important. Even valid code can look wildly different on different browsers. Evolt has an archive of old browsers that you can download to test your site out. Also check out this useful tutorial on installing multiple versions of IE on one PC.

Stage 5: Publishing the site

If you're not using something like Dreamweaver to publish your site, you're going to need a FTP client. Again there's lots out there, but I recommend Filezilla as an excellent free FTP client.

So that should be about it, your sites live, the clients happy and you're licking your chops on easy street. All thanks to a bit of hard graft and your handy little toolbox.

Every designers got their own way of working, so if you've got your own toolbox, drop me a mail. I'd love to know.