Introduction

The importance of color in design is not only important, but a deciding factor on the success of you and your works. Learning to master the art of color design is a tool that will greatly affect the future of your portfolio. In this post we will look into how you may communicate using colors, and represent different actions properly with color association.

Color Scheme Concept

Color Scheme is defined as “an arrangement or pattern of colors or colored objects conceived of as forming an integrated whole”(Cite). Creating a color scheme is one of the first steps in designing. This may be a well thought out process or just mixing and matching colors together, which ever path you take, a color scheme is made.
In web design, there are many ways to go about making a color scheme for yourself. Choosing a base color would be the fist step. Usually a solid, dark color, such as black, or charcoal gray, or a subtle light color such as white or arctic blue as brief examples.

Starting with a basic base color, gives you range to use more vibrant or dull colors on your secondary color. The secondary color in your design is best used in logos, headers, other images and some action buttons. Secondary colors are meant to be flashy. Bright, colorful colors are commonly used on dark base colors, although vibrant colors are often used on light base colors as well.
The third color of color schemes in web design are often text or content boxes. Typically text is black, as it is easily readable on a light background. When using a dark base, and the text is placed without a light container, it is difficult for readability. On a similar note, the base color may create a static display for content in the same color, confusing the user.

Understanding Effective Color Implementation

Becoming effective at color implementation will provide you with the skill to grab the attention of the audience, manipulating their focus to present the content you want the user to see using color schemes. Combined with the ideas from above, using color schemes, I have complied a few examples of attention grabbing web sites.

Shown are 4 examples of excellent color combinations and implementation of color schemes.

Common Colors Uses For Events

When you approach a stop sign, you stop. When you see a green turn signal in your lane, you proceed to turn. When you see blinking orange lights on the car a head, you slow down as cautious of their turn. All around us we use colors and associate them with alerts such as stop, go, caution. We do the same thing on computers. Errors, save confirmations, important information alerts, etc.
Especially in web applications it is crucial to present the user with the correct message if there is a need to address the user. Is there an error? Errors are a problem developers wish magically fixed themselves, but designers have to anticipate and alert users if there is a problem. Perhaps you have an email application and you click send, but nothing happens. Do you click send again, possibly flooding the recipients inbox with duplicate messages? If there was a clear message that showed the user the message had been sent successively. Maybe you would like to tell a user, for their security to change their password, but they overlook the message because it blends in.
To fix these issues we can use color to grab the users focus, and communicate the proper message alert.
Red, stop, delete, error, something is wrong. When a user views a red prompt, they may have a certain level of panic, and frustration. Maybe their document has not been saved due to an error, or their password is wrong during a log in. Below are a few great uses of red as alerts.

Green, go, save, success, Everything is fine. Coming across a green prompt a user may feel secure, and achieved. Documents have been saved, messages sent, registration complete. Below are two examples of fantastic uses of green as alerts.

Yellow/Orange, caution, new information, confirmation, attention requested. When presented with an alert in this color, a user may feel informed. The use of these alerts are vast, most common are informing users of new content and warning of security issues. Below are several examples of yellow/orange as alerts.

When and What to Communicate With Color

To further explain what to communicate with the colors for alerts, it is necessary to know a few key things about the users. In a web application where the users can add, delete, and modify any data, there is significant need to use the correct colors to communicate an alert message. If a user is greeted with a new alert, quickly judging the color before reading the message will allow the user to be prepared to take the action needed to fix the alert. It is important to use colors to communicate messages to the users, as it will substantially reduce confusion on your design.

What kinds of events should be alerted?
Any form of error that a website can encounter, including (but not limited to)

• 404 page
• Database connection errors
• Login errors
• Registration errors
• Delete confirmation
• Delete success
• Close application

Anytime a user has successively created, saved, modified, or needs to move on, including (but not limited to)

• Saving
• Editing
• Creating
• Updating
• Adding
• Moving to next(button)

Any type of important information that is relevant to users.

• Security precautions
• New features
• New items

In Conclusion

Using colors effectively can greatly increase a users understanding of the messages you are communicating to them. Taking into consideration schemes, different alerts, and implementation of the colors best for each, you can create a user interface with minimal confusion.

Resources

Here are a few tools and websites to aid you in designing with colors.
COLOURlovers
Kuler by Adobe
Hex Color Chart