77 Resources to Simplify Your Life as a Web Designer
Published September 10th, 2007 in Design
PSD to XHTML – Webzio.com
If you’re looking to learn more about design websites, please see our post Learn Web Design for plenty of resources to help your educational pursuit.
As a web designer, achieving efficiency in your workflow will have a significant impact on your success. Fortunately, there are a number of great resources that have been created with the intent of making your life easier and your work quicker and more effective.
Color Tools
Choosing the right color combination can be a difficult task. Try some of these tools to make it an easier decision.
Color Schemer Gallery
COLOURlovers
Website Color Picker
I Like Your Colors
For more color-related tools, see Find the Perfect Colors for Your Website.
Free CSS Navigation Menus
CSS-based navigation menus are used by most websites now, but they don’t need to be created from scratch. There are hundreds of menus already created and available for your use. You can use them as is, or customize them to meet your needs and match your website.
Listamatic
Exploding Boy
Alvit.de
Dynamic Drive
Our own collection of CSS Menus
DHTML Navigation Menus
Xtreeme DHTML Menu Studio is a great tool for quickly creating dynamic navigation menus (cost: $49).
Photos for Your Website
Quality images greatly enhance the look and appearance of a website. You can find photos for free or buy higher quality photos for as little as $1.
Stock.Xchng – free stock photos.
Stock Expert – Low cost stock photography.
iStockphoto – Low cost stock photography.
Big Stock Photo – Low cost stock photography.
Icons
IconFinder.net – Icon search engine
31 Sources of Quality, Free Icons
Blank WordPress Templates
If you design WordPress themes you can save yourself a lot of time by downloading these blank themes (from Tomorrow’s Laundry). The blank themes provide you with a very basic starting point to work from (UPDATE: the link has been removed because this site is no longer available).
CSS-Based Design Templates
You may be able to save time by starting with a basic CSS-based template. Most websites are built off a one of several different layouts that can be started from a template.
Layout-O-Matic – A tool that lets you create your own CSS-based template.
CSS Creator – CSS layout generator.
Layout Gala – Collection of templates.
Open Designs – Open source templates.
Open Source Templates – More open source templates.
Eric Meyer’s CSS Sculptor
One of the leading CSS designers has created CSS Sculptor to speed up the creation of CSS-based layouts. If you design a lot of websites this $149 software may be very helpful.
Dead Links Checker
Dead links are extremely frustrating to visitors, but checking them manually is not realistic. These tools will do it for you.
DeadLinks.com
Online Link Validation Tool
Testing in Multiple Browsers
Adequate testing is a part of the design process, and unfortunately that means testing in a variety of browsers.
Browser Shots
Browsercam
NetMechanic
For more information on this subject see Effectively Testing Your Website in Multiple Browsers.
Validators
Valid code is generally more accessible and it should be one of the first things you test when you encounter a problem.
HTML
CSS
RSS and Atom
RSS, Atom, and KML
Scripts
There’s no need to re-invent the wheel. Save yourself some time by using free scripts that others have created.
JavaFile
PHP Freaks
DynamicDrive
The JavaScript Source
PowerfulScripts
DHTMLGoodies.com
PHP Open Source Scripts
Favicon Generator
Favicons are very popular right now, and they don’t have to be difficult to create. Try these free tools to create your own and help brand your website.
Dynamic Drive
Favicon from Pictures
FaviconGenerator.com
Favicons with text instead of images
Graphics Guru
Fonts
Typography and fonts can make or break a design, but it can be time consuming to try a number of different options. Try some of these resources.
80 Beautiful Typefaces for Professional Design (Smashing Magazine)
dafont.com
Urban Fonts
1001 Free Fonts
Web 2.0 Tools
Most of the modern web 2.0 and social media sites have several design features in common. Help to make your designs look more modern by incorporating some of these design tools.
Stripe Generator
Web 2.0 Badges
More Web 2.0 Badges
Web 2.0 Icons
Web 2.0 Logo Creator
Button Makers
Buttons are everywhere. Easily and quickly create your own buttons with these tools.
Dynamic Drive
Kalsey.com
Lucazappa.com
Blog Flux
Yugatech.com
MyCoolButton
Buttonator
Gradient Image Tools
Gradient images are another staple of web 2.0. If you don’t have Photoshop there are some other ways to create gradients.
Dynamic Drive
4u2ges.com
Rounded Corner Boxes
Creating boxes with rounded corners is easy when you have the right tools.
CSS Rounded Box Generator
Spiffy Corners
CSS Speech Bubbles
Speech bubbles will give comments and quotes some variety and add to your design.
WillMayo.com
CSS Play
CSS Tools
If you’re looking to clean, optimize and compress your CSS code, here are some choices.
CSS Tidy – a CSS parser and optimizer.
Clean CSS – a CSS optimizer and formatter.
CSS Optimizer
CSS Analyzer – a validator plus.
CSS Mate – online CSS editor.
CSS Compressor
