25 Invaluable Website Design Tools

Photgraph by Irish TypepadEveryone likes things that makes their job just that little bit easier.  I’ve collected below a list of tools, tips, techniques and reading that you can use on your next website design project. 

If you can think of anything that’s missing then please send me an email and if they’re useful enough then I’ll add them to the list.

1. Web site checker

Got a client on your back claiming that their web site is down but you can’t see anything wrong?


2.
Check your site in all browsers 

A fantastic tool to check the layout of your website in all popular browsers

http://browsershots.org/ 

3. Blog Design Principles

Design for a blog is different to design for other types of website. 

 
4. Flickr Website Gallery 

Needing inspiration for your next masterpiece? 

 
5. Simple CSS layout generator 

We all know that tables are a no-no for layout but CSS can be tricky. Here’s a simple template generator to get you started.
http://www.ibdjohn.com/csstemplate/

 
 
7. CSS Navigations
Want more than just menus? Here are some tabs and other navigation methods
 
8. CSS Shadows
How to add shadows to your images in CSS
Photograph by Arria Belli9. CSS Website Inspiration
Looking for some inspiration for your next website design?
 
10. Easy CSS Curved Boxes

There are lots of ways to have curved boxes in CSS but this is a nice lightweight solution
http://green-beast.com/experiments/css_smart_corners.php

11. CSS Live Editor

Plugin for IE and FF that allows you to edit your CSS directly and immediately
http://litmusapp.com/labs

12. Firefox Extensions

Useful extensions for Firefox
http://css.weblogsinc.com/2006/02/14/firefox-extensions-i-couldnt-live-without/

13. GreyBit v0.1

Convert any website to greyscale – this helps your check the apparent contrast of text and colour schemes
http://graybit.com/main.php

14. Accessibility Valet

Shows which elements in your HTML are failing W3C Accessibility standards
http://valet.webthing.com/access/url.html

15. Colour Combinations

A resource of various colour combinations that work rather well together
http://www.webdevelopersnotes.com/design/color_combinations.php3

16. Colour Combination Testers 

If you can’t find a combination that you like above then these tools will help you create and visualise your own combinations
http://www.colorcombos.com/combotester.html

http://www.ideo.com/visualizer.html

 
17. UITest.com Site Check

Instead of filling out lots of ‘website checker’ websites, this tool lists them all for you, saving valuable time. Also includes some tools that I hadn’t seen before.
http://uitest.com/en/check/

Photograph by peyri18. Fonts

100 Free fonts
Can’t find any decent fonts?  Create your own!
http://www.fontifier.com

19. Slide Generator
Turn an HTML document into a slideshow using JavaScript
 
20. Royalty Free Images

http://www.stockvault.net/
http://www.bluevertigo.com.ar/bluevertigo.htm

21. Cheat Sheets
All JavaScript, HTML, CSS etc functions in one place