There is no shortage of tools and resources to help web designers work better and more efficiently. Unfortunately, the best of these tools can be difficult to find. Here are some of my top picks, divided into the essential categories of web design and development.
Colors and Fonts
Depending on the site, the choice of colors and fonts can portray as much about it as its text. While you may, or may not, already be an expert in color theory or typography, the following tools can still help you make good design choices:
Adobe Kuler – Find, create, and modify color schemes
Font Squirrel – Large free font collection, allows commercial uses
WhatTheFont – Automatically identify fonts
Typetester – Compare fonts, side by side
sIFR – Use non-standard fonts on sites, without breaking compatibility
Graphics and Icons
Graphics, from logos to interface icons, are both an effective way to provide the user with information, and add to a design. The following resources can help with the graphic design process, or are ready-to-use openly licensed graphics:
stock.xchng – Free Stock Photography
Silk Icons – Popular free 16×16 icons
IconBuffet – Swap icons with other users
Vecteezy – Free collection of vectors
Liquidcity – Vector icon collection, designed for websites
Coding and Testing
Now that your design is shaping up, it’s time to begin coding and testing. The following tools can help you code, find bugs, and cross-browser test efficiently:
Spiffy Corners – Purely CSS Rounded Corners
Browsershots – See your page as it appears in dozens of browsers
W3C Quality Assurance Tools – Find coding errors, broken links, etc
Web Developer – A Firefox addon with many essential design tools
Firebug – Another Firefox addon, which aides in debugging
HTML Tidy Online – Automatically clean up your HTML source
