Here is a list of very helpful tools you should keep handy:
1. balsamiq — This is probably the greatest tool for rapid prototyping and “sketching” mockups of your website design you’ll ever use. The images and icons are designed to look like you actually sketched the design with pencil and paper. A very cool tool!
2. WebAIM Color Contrast Checker — Just as the name suggests, use this tool to make sure you use the right color contrast ratio between foreground and background colors. The minimum color contrast ratio to meet 508 accessibility standards is 4.5:1 for Web Content Accessibility Guidelines (WCAG) 2.0. Here’s a quick Section 508 Checklist to familiarize yourselves with.
3. Paletton, Color Scheme Designer — Use this featured packed resource to quickly choose a color scheme for your website. Set your primary color, then fool around with the different presentation choices until you get a palette that suits you. The basic themes are: Monochromatic (1-color), Adjacent colors (3-colors), Triad (3-colors), Tetrad (4-colors), and Free style (4-colors).
Do yourself a favor and explore all the features of this nifty tool. You’ll be amazed at what it can deliver.
4. Adobe Color CC (formerly known as Kuler) — this is another great color scheme tool you should really take a look at.
5. Find Icons — this is a neat resource to quickly find free icons for your mockups and finished designs. You can browse through hundreds of icon packs, search by tag name, there’s also an “Excite Me” tab for even more options.
6. 16:9 Video resize Tool — this tool will allow you to easily decide on a widescreen video size (16:9 aspect ratio) for your website. To use this tool, simply change the value of the width and the height will be automatically calculated for you.
7. 4:3 Video resize Tool — likewise, this tool will calculate the height for a given width in the 4:3 aspect ratio.
8. Pixel to Em conversion tool — a super cool tool to convert from pixels to Em’s and vice versa.
9. SpritePad — Use this tools to create CSS sprites within seconds – not minutes or hours. Just drag & drop your images within the SpritePad grid to have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles. SpritePad does all the heavy lifting for you.
Stay tuned for more helpful hints, tool recommendations, and web design techniques. Feel free to list some of your most used web design tools in the comments section.