Web and Graphic Design Color Scheme Tools

Anyone who works on websites frequently knows, one of the first steps in developing a new web design layout, logo, branding item, etc. is to choose a color scheme.

Choosing a color scheme is vital to the success of any design. Absolutely VITAL. Don't believe me? Let us use a horrible example to demonstrate how badly a BAD color scheme can ruin any web design:

BAD Color Scheme Example

Well, there are many tools available out there to find the best color scheme for your projects. Even artists need some inspiration! So, here are my top picks

Web 2.0 Color Palette

the Web 2.0 color palette, this tools is awesome, and I use it all the time. But, it is limited only offering a particular number of colors, which of course demonstrates the Web 2.0 philosophy of simplicity. But, for those of us who dare to venture outside the box once in a while...

Online Color Schemer

This website has been around for a while, but they have recently revamped! It is totally awesome, for lack of a better phrase, and definitely stands up to some of the newest color scheme tools out there.

They also have a library that I've utilized more than a few times already on projects, it's a really beautiful library of color schemes and I suggest everyone take a look:

Color Scheme Library

Also, don't forget to download their FREE color pix download. What is the color pix? It is this cool little light weight square dialog box that lets you run your mouse over ANYTHING and I mean ANYTHING on your screen and the color pix will choose that color and give you the specs for it....AWESOME! :)

Here's a screen shot of the little color pix box while I run my mouse over the Google Logo:

Magic CSS Rollovers using One Image

Magic your say? Why yes, that's what I said when my programmer friend introduced me to the concept. Now, please don't go point and laugh "Newb!" all the way to your Mac, I'm not sure why I didn't know about these cleaner, prettier, more efficient rollover techniques. But, I'm sure glad I know now.

For those of your who are baffled right now and never once uttered, "Newb" through your shameful newb lips, let me explain myself...

In short, they're called "Sprites" and apparently when the old schoolers developed video game animations they used them. It's the concept of taking one image, and moving it around, mapping it using coordinates, beneath other images depending upon the animation you had in mind. Well, there's a way to use this concept to make CSS rollovers cleaner looking and easier to create!

It's the concept of consolidating every rollover image and every pre-rollover image into one single image. After this, you map the position of the background image of each div and link according to the area that defines that rollover.

Here's an image that might communicate what I'm talking about a little better:

I'm not explaining this very well, I'm sorry, it's new to me too! Check out the more in depth example and tutorial on A List Apart: CSS Rollover Sprites

Website Design Planning and Implementation

Designing websites can often be a very organic process....Especially if you're designing for yourself, for fun and are very familiar with the process. But, if efficiency is something you're interested in when it comes to designing websites, it is important to plan and implement your web design projects in a somewhat similar fashion. If implemented correctly, it stream lines your web design process and also has other benefits incuding (but not limited to):

1. Less time making structural changes and edits
2. Ensures proper XHTML standard compliant formatting
3. Organizes styles
4. Saves you time, Everytime!
5. Allows other (employees, contract workers) to make changes and edit your project

What do I mean by implementing each project in a similar fashion?

Creating 1-2..3...4 different website project template files within a folder that include all the necessary components, applications, styles, etc. of what is needed for those projects. The reason why many website designers haven't done this already, is probably due to the time involved with creating template projects and the fact that there is no direct income associated with the process of doing this. But, it will ultimately save you tons of time in the long run, allow you to make educated estimates on prices of different client projects and expedite your turn around time. All of which will earn you more income in the long run.

I'm writing this post to introduce my readers to a new series I am going to write that involves creating project folders, with template files and how to utilize this to BE A MORE EFFICIENT web designer. Why am I doing this exactly? Because I recently had to buckle down and do just this. Let me tell you, what a sweet sigh of relief to begin a web design project with a more clear idea of what I'm doing by using my predefined templates and simply adjusting them.

The series will cover the following topics:

Components of web design project template folders

Commenting and making the code easier to adjust

Creating applications ready to go!

Style sheets and the basics of creating a simple CSS file that can work with ALL your projects

Folders and file systems within projects

And more!

Stay tuned for the series on efficient web design process and template creation for your web designs.

External Link Resources

Related Design Posts