25 Invaluable Website Design Tools

<< Flash websites now indexed by Google - A black hat's wet dream? | Home | Do you want links? Then link OUT! >>

25 Invaluable Website Design Tools

Everyone 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?

http://downforeveryoneorjustme.com

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.

http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide/

4. Flickr Website Gallery

Needing inspiration for your next masterpiece?

http://www.flickr.com/photos/splat/sets/981332/

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/

6. CSS Menus

Lots of menu styles to use in your designs
http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/
http://www.13styles.com/

7. CSS Navigations

Want more than just menus? Here are some tabs and other navigation methods

http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

8. CSS Shadows

How to add shadows to your images in CSS

http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html

9. CSS Website Inspiration

Looking for some inspiration for your next website design?

http://www.cssheaven.com/

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/