Tools for every need

goodies!

Web Design Toolbox

By Michael Tuck

screwdriver

Want to go straight to the lessons? Get started!

This is a list – incomplete, subjective, and constantly being updated – of the various software "tools" a novice or intermediate Web designer may find useful.

Everything in this list is free for your use.

Some of the software must be downloaded download icon, others are used online online icon.

You will have to check to see which are for Windows, Mac, and/or Linux.

Some of the resources used to make this listing include:

Please contact me with suggestions for additions to this list.

Browsers

If you’re working strictly in Internet Explorer because that’s what came with your system, stop. Get a better browser. In fact, get a representative mix (one from each of the main browser "families") and test in all of them. Including Internet Explorer, which is a Trident browser.

The Gecko family of browsers
Includes Firefox, Camino, Flock, SeaMonkey, etc.
The Presto browser
Opera is the only browser in this group.
The Webkit family
Mac’s Safari and Google’s Chrome, along with OmniWeb, Shiira, iCab, Epiphany, etc.
The Trident family
Includes Internet Explorer, Maxthon, Sleipnir, NeoPlanet, etc.
The KHTML browser
The only major browser using this protocol is Konqueror, which most people associate with the KDE family of Linux. However, the browser can be used in Windows and Mac environments as well (both versions are still in the testing stages). Though it is a standalone browser, some Konqueror components are mirrored in Safari.

Confused? Too many to choose from? Download, or make sure you have, copies of Firefox, Opera, Chrome or Safari, and Internet Explorer, and test in them all. Keep up with their updates.

Charts and Diagrams

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)
Essential CSS elements on a single page.
HTML 5 Cheat Sheet (PDF)
Essential HTML5 elements on a single page.
CSS Glossary
A glossary of terms used in relation to CSS.
CSS3 Click Chart
A clickable CSS3 reference, regularly updated, and constructed with CSS3 properties so you can instantly see if your browser supports this or that property.

Code Editors

Notepad++
An excellent code editor, suitable for writing HTML, CSS, PHP, JavaScript, Perl, C++, and much, much more.
PSPad
Another powerful code editor.
Crimson Editor
Source code editor primarily designed for HTML and CSS development, though if you have the chops, you can write Perl, JavaScript, and more in it as well..
Vi(m)
Probably the most powerful code editor on this list, and not the easiest to use.
VI Editor / Linux Terminal Cheat Sheet (PDF)
Essential VI elements on a single page.
Emacs
As powerful as Vim, but slightly different in approach.
Kate
A code editor for the KDE environment.
gEdit
A code editor for the Gnome environment.
Geany
A code editor requiring the GTK2 runtime environment, which operates under Windows and most Linux systems.
HTML Tidy
The classic tool for cleaning up your HTML. An online version is also available.

Accessibility

WebAIM Screen Reader Simulation
Visit here to experience a simulation of a screen reader’s rendering of a Web site.
AccessColor – Online Tool for Colour Contrast
Run a page’s URL through this free tool to see if your colors contrast enough to suit the needs of visually impaired users. (Note: My site does not pass the contrast tests, though I have made several adjustments to make the contrasts stronger.)
Colorblind Web Page Filter
Put your site’s URL into the filter and quickly see how it appears to users suffering from any of the main variations of color blindness.
Colblinder
Extensive information about color-related accessibility issues (color blindness and other vision impairments.
Firelily: Color Vision, Color Deficiency online
More information about color deficiencies and designing for them

Color Schemes and Generators

Adobe Kuler
A Flash-driven online tool to generate color schemes based on a color of your choice, or to peruse thousands of user-submitted schemes.
Color Hex Hub
Hundreds of "color swatches" organized by color families. Unnamed colors are available at the related Hues Hub.
Color Schemer Online
An online, simplified version of the commercial Color Schemer program. Lighten and darken colors, see related color families, and more.
Color Scheme Designer
Just what it says, an online color scheme generator.
Pictaculous
Generates color schemes based on uploaded photos.
ColorToy
Another Flash-driven color scheme generator and picker. Not as powerful as Kuler, but still useful.
ColorCop
Color picker with a wide variety of functions.
HTML Color Picker
Gives the hex and RGB values of anything on your screen.
ColourMod
Online color picker.

Typography

Font Squirrel
Excellent source of free, high-quality fonts.
Aviano
Free high-quality fonts.
The League of Movable Type
Small quantity of free, high-quality fonts.
Acid Fonts
Very large selection of free fonts. The quality varies, so be choosy.
TypeTester
Online tool for testing one font’s appearance against another.
WhatTheFont?
Quickly identify an unknown font through this online utility.
AMP Font Viewer
Allows you to view and compare the different fonts on your computer.
myFontbook
Online tool for viewing and managing the fonts on your computer.
Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows
Excellent comparison between fonts as they appear on-screen.
Kernest
Free (subscription required) service allowing users to embed different fonts into their Web pages.
Cufón
Free JavaScript-based generator to allow users to display different fonts on their pages.
Typeface.js
Free JavaScript-based generator to allow users to display different fonts on their pages, similar to Cufón.
sIFR
Free Flash-based utility allowing users to display different fonts on their pages.
Visibone Font Card
Font "cheat sheet"; the online version is free to use, and a larger, more useful version can be bought.
Jon Tan
Excellent blog about typography and Web design.

Stock Photos

Stock.XCHNG
Source of free and commercial photos. Largest selection on the Internet. I use this site for 95% of the photo illustrations on this site.
Flickr
Huge collection of photos. Search under "Advanced Search" and check the "Creative Commons licensed" box to access photos that are free for you to use.
deviantART Stock Images
Large, lovely collection of photographs. The artistic value of the photos is generally higher than those found on other sites.
MorgueFile
Another excellent source of free stock photos.
Free Range Stock
Stock photos collected by the site staff. Smaller quantity of photos, but high quality.
Pixel Perfect Digital
Small collection of high-quality photos.
OpenPhoto
Large collection of photos, best browsed by category.
US National Archives Flickr page
Free public domain photos.
NASA Photo Exchange
Huge collection of space and space-related photos, from the US National Aeronautics and Space Agency.
Wikimedia Pictures and images
Wikimedia Commons’ compilation of freely available photos and images.
Microsoft Office Stock Images
Microsoft’s compilation of stock photos, clip art, and other images.

Icons

Silk Icons
Mark James’s huge and varied collection of PNG icons. These icons are mainstays of many designs, including this one (see the disk icon to the left? it’s from this collection).
The Ultimate Free Web Designer’s Icon Set
Enormous set of free, well-designed icons.

Firefox Extensions for Web Designers

What’s a Firefox extension?

Firebug
The most powerful and comprehensive free Web development tool available as an extension.
Codeburner
A browser extension that correlates with Firebug to add the SitePoint Reference information to the tool.
Introduction to Firebug
Video screencast showing new users how to get Firebug up and working.
Web Developer
A powerful extension with a number of tools for designers and developers.
ColorZilla
A color picker, palette viewer, eyedropper, element viewer, and more.
MeasureIt
Gives the user a ruler to measure, in pixels, anything on the screen. (Function duplicated in the Web Developer extension above.)
View Source Chart
An excellent tool for design and learning; allows the user to inspect their code in "box" format.
CSSViewer
Allows the user to view a site’s CSS in a simple view.
HTML Validator
Quick and easy HTML validation, and a "cleanup" tool which attempts to fix errors.
CSS Validator
Validates your CSS files.
Screengrab
Easy-to-use screen capture utility.

FTP Clients

FileZilla
Powerful, multi-featured FTP client or server.
Core FTP
Simpler FTP client than FileZilla.
net2ftp
Online FTP client.
Netcraft Uptime Survey
Site that allows you to determine what particular server software (Apache, Windows IIS, Unix, whatever) is running a particular site.

Graphics

Adobe Photoshop Express
Free online version of Photoshop, much less powerful than the paid version but still useful.
Gimp
Powerful open-source graphics creator, similar to Photoshop. Creates raster images.
Inkscape
Powerful open-source graphics creator, similar to Illustrator. Creates vector images.
Krita
Open-source graphics creator, part of the Koffice suite for Linux.
ChocoFlop
Graphics creator, developed for the Mac. Discontinued, but still available.
Pixia
Japanese graphics creator, with an English version available.
Artweaver
Graphics creator. Limited free version and more full-featured paid version available.
Pixen
Open-source graphics editor for the Mac.
IrfanView
Powerful graphics viewer for Windows, contains some editing features.
Aviary
Extensive collection of online tools for image editing, screen captures, and more.
Pixlr
Online graphics editor/creator.
CG Textures
Free source of texture graphics.
Blue Vertigo
Huge compilation of Web designer graphic resources, mostly stock photos, free fonts, clip art, Photoshop brushes, and icons.
Go2Convert
Easily convert graphics files from one format to another, up to 10mb in size. Supports all major file formats.
Photoshop Toolbox Reference
Web-based reference for Photoshop’s toolbox.
Photoshop Keyboard Shortcuts Cheat Sheet (PDF)
Essential Photoshop keyboard shortcuts on a single page.
Photoshop Keyboard Shortcuts Cheat Sheet (PDF)
Another Photoshop keyboard cheat sheet, this one for CS4. A cheat sheet is also available for CS3, for CS2, for CS, and for earlier versions (scroll down).
Photoshop Brush Tool Cheatsheet (PDF)
Cheat sheet for Photoshop brush tool.
Photoshop Lasso Tool Cheatsheet (PDF)
Cheat sheet for Photoshop lasso tool.
Illustrator CS2 Keyboard Shortcuts
Cheat sheet for Adobe Illustrator. A Mac version is also available. Downloadable PDFs are available as well.
Placehold.it
A very simple online tool that lets you create "placeholders" for your designs. Some nifty features to go with the basic function.

Miscellaneous

Lorem Ipsum
Provides dummy “lorem ipsum” text for designers’ use in filling unfinished designs with "dummy content."
HTML Ipsum
Provides dummy “lorem ipsum” text, specifically formatted for various uses – ordered and unordered lists, paragraphs, etc.
CSS Tests and Experiments
Bruno Fassino’s CSS Test site, where almost every CSS property you can think of is tested and illustrated. A bit dated, but still a valuable resource.
Free Website Monitoring Tool
Checks your Web site every 15 minutes to see if it is up, and notifies you via e-mail and/or SMS if your site goes down.
Pingdom Tools
Examines the way a page is loaded into a browser, giving load times for objects (images, CSS, Flash, etc). Visually oriented and easy to use.
ViewLike.us
Lets you see how your site looks in every size display, from an iPhone to a 1920x1200 wide-screen monitor.
Mockingbird
Online tool that creates wireframe mockups of design proposals.
Browsershots
Online tool for viewing your design in a large array of browsers. Your site must be online to be viewed.
Typography Keyboard Layout
Simple tool that lets you enter characters usually unavailable on a keyboard into your code.
Webappers
Extensive source of open-source applications and materials.
WriteMaps
Tool for creating sitemaps, storing them online, and sharing them with others.
EM Chart
Chart for converting pixels to ems using a base font size. Downloadable PDF, but I think the "demo" version is more useful.
EM Calculator
Converts pixels to ems, and lets you set a base font size to use for subsequent conversions.
Dropbox
Secure file storage and sharing. The first 2GB of storage space is free.
Test for Border-Radius Support
Not sure if your browser supports the CSS3 border-radius property? Click the link (using the browser in question) to find out.
Pingdom Tools
Examines the way a page is loaded into a browser, giving load times for objects (images, CSS, Flash, etc). Visually oriented and easy to use.
PDF995
Allows you to make PDF files. Very sophisticated, with a wide range of options.

Previous Page

Next Page