Free Web Design Tools Reviewed

There's a fantastic range of tools available to web and graphic designers, which we can use for choosing colours, layout, and cleaning our code. I've been using the tools listed below to design with, and I really can't recommend them enough. The best thing about them? They're free!

HTML Color Codes gives you the hex codes for colours, which is brilliant when working on applications programs such as forums and blogs and you want to change the colours of the background and text.

Cascader is invaluable for cleaning up your code if you use a HTML editor like Kompozer: it tidies up your divs, spans, and tables into classes and puts them into a separate CSS file.

CSS Layouts is an invaluable resource for designers. I use it all the time when designing because there's such a wide variety of choices for layout styles. Infinitely simpler than the grid-based ones I've been playing with lately, they are responsive and easy to customise. When I updated my old designs for this site, Executive Business Services, North West Small Boat Transport, and Dynamic Heights Training, I used variations of the two and three column layouts linked on those sites.

Web Page Size gives you a sneak preview of your web pages at different sizes and screen resolutions. When I saw how this site looked on a wider screen, I found that the banner was sticking out to the left like a clothing label. Needless to say, I fixed it at once, but until I checked it, I had no idea because I've got the standard 1024 x 600 monitor. Given the variety of screen sizes and resolutions, this is an essential tool.

IE NetRenderer displays websites as various versions of IE would, giving you an accurate view of how they look in those browsers. Browser Shots does the same for all major (and minor) browsers - except IE, so if you use both, you've got them all covered.