In the post on color theory, What Everybody Ought to Know About Colors, we discussed in detail how colors vary by type, how they work together, and how colors fit very well on what we know as the color wheel.

In this segment, you’ll realize the importance of color knowledge in your graphic and web design sphere. Most of what is discussed below is used in Photoshop color management and image manipulation schemas.

The Basics of Color Theory

Hue

When you look at an object that has color, you ask “What color is that?” Colors come from various wavelengths of light and hue is what defines each unique wavelength. In other words, hue represents different colors. We can have hues of red, orange, green, yellow, blue, and violet.  The ‘H’ in the diagram below represents all of the various hues in the visible color spectrum.

Saturation

You’ll notice in the above diagram there is another variable represented by an ‘S’. This is also known as the saturation. Most of you probably get an idea what saturation does. If you’ve played around in Photoshop, you can saturate or desaturate an image based on your preferences. Referring to the diagram above, when you change an images saturation, you’re also changing the diameter of the hue which is what causes the image to go from full color to grayscale.

Value

The ‘V’ represented in the diagram above tells how much of Red, Green, and Blue to use in the color. In other words, value is also the brightness of color. Values 255,255,255 will create the color white (#FFFFFF). The combination of Hue, Saturation, and Value make up the HSV model used to create a three-dimensional view of color.

Luminosity

Luminosity is also known as how bright a color is.

How it Works in Design

The following diagram shows you how Photoshop and other digital software allow you to use what we’ve just covered:

You see above that we have all the parts we’ve discussed: Hue, Saturation, Luminosity. Photoshop even allows you to create color based on whether you prefer the HSB(V), RGB, or the CMYK models.

In part II of this lesson, we will cover Chroma, Tint, Colorfulness, Shade, Intensity, and other color manipulation techniques.

Popularity: 91% [?]

As part of our Quick Design Tips series, we will be covering a lot about colors, color use, prover vs improper, safe vs unsafe and so forth.

A color is essentially your groundwork for making your design stand out, look unique, and most of all, look professional.

Primary and Secondary Colors

Sadly enough, there are many self-taught designers who absolutely have no idea what the difference between primary, secondary complementary, and tertiary colors are. This is essentially the groundwork for creating color schemes that match and are compatible with each other.

Primary Colors are your “core” colors. From these colors, you can create various degrees of other colors such as the ones we see in the above picture. Primary colors come in two groups with three primary colors in each morel:

1. Additive Model Colors are colors that are produced from a black background creating three main colors: Red, Green, and Blue. These three colors are the primary colors for the additive model and are also known as the RGB Model. And as the name mentions, when you overlap each of these three colors, you end up with other colors (as seen below).
2. Subtractive Combination coloring is opposite of the traditional RGB model. In contrast to the Additive model, colors in this model are reflected off of a white background, so instead of getting your standard colors Red, Green, and Blue, you see Cyan, Magenta, and Yellow (also referred to as the primary colors of the subtractive system – or the CMY Model).

   QUICK TIP: Most people print on white paper, which is the reason why you have Cyan, Yellow, and Magenta cartridges in your printer rather than Red, Green, and Blue.

Examples of Combining Colors:

• Red + Green  = Yellow ; Yellow + Magenta = Red
• Blue + Green = Cyan ; Cyan + Yellow = Blue;

The Inverse Relation:

• Cyan + Magenta + Yellow = Black
• Red + Green + Blue = White

Secondary Colors

Secondary Colors are also a simple term to understand. Secondary colors are any combination of two primary colors.  This means looking at the color diagrams above, these colors would be where the circles overlap. (i.e. blue, green, red in one diagram; cyan, magenta, and yellow in the other)

Complementary Colors

Another term used often is complementary colors. These are colors opposite of each other on the color wheel as shown in the diagram below.

Tertiary Colors

Finally, in order to make our color wheel complete, there is another color mix we add to the group. This is a combination of a primary color with its adjacent secondary color resulting in what is called a tertiary color.

The Color Wheel

Combining all of the terms above, we now have a complete color wheel which we will explain how to use effectively to create professional color schemes for your designs.

Popularity: 99% [?]

It is no doubt difficult at times to choose which 5 designs to feature in our Extreme Designs of the Week contests, and it is even harder to stand out in contests such as 99Designs when you’re competing against other freelancers, professionals, or even design companies. So what makes a great design? Here are some of the factors I take into consideration on what makes a design (whether it be webpage or logo) stand above others:

1. Simplicity - Everyone these days is all about simplicity. Why? Because it works. Simple logos, simple web pages, simple business cards, simple brochures, etc. The reason behind this psychology is because simple a) looks good and b) simple is easy to remember. In math terms, it’s easier to remember 10 + 10 rather than 4+2+1+5+7+1. In both cases the answer is the same, but if asked to repeat the equation, you’d probably remember the simpler one.
   In design terms, it works exactly the same way. We want to get the message across, not how many different effects you can stick on a 150px by 150px area. And besides, businessmen also like the idea that they can actually have a logo on their business card and still have room for their name and company information.
2. Skill – Looking at a design by someone who has only been designing for 3 months rather than someone who’s been doing it for several years, its fairly obvious who designed what.
3. Accuracy – If you’re given a task of creating an auto website, don’t go into eCommerce design. I see this with a lot of web designers that become so engrossed in their own category of design that they find it harder to adapt to another style when they’ve worked so long in one area. I find this to be an issue when you’re working for one or several clients that give you numerous projects in one category of design. Sure working like this helps you become specialized in one area very well, but I find that going out and finding clients in different aspects of web design also helps in the long run by specializing you in more areas and diversifying your portfolio.
4. Compatibility – This is something that comes with experience, but what makes a design stand out is the color compatibility. Choosing wrong color variations and styles, focusing on either the wrong primary or secondary colors (or both) often creates very incompatible and eye-burning designs that are hard to look at. I find it helpful on learning about actual colors before jumping in and designing something without knowing whether it will work or not.
5. Professionalism – You know this when you see it. Any design that stands out is one whose author took the time to make sure the all lines match up to one another. If they’re doing parallel lines ore reflective features, they actually are in perfect position. Any obscure or sharp edges are smoothed out. Slight shadows are added when needed, and so forth. Imagine looking at a design where you have lines or curves that are either a couple of pixels unfinished leaving white space, other lines go out too far, some areas of the design contain too much shadowing….would you want to even look at a design like that?
6. Uniqueness – We don’t want the same old blue colored webpage design with a Tahoma logo having a huge glass reflection and a cross-hatched web 2.0 background. Instead uniqueness shows itself when you go outside the box and add some personal touch to a site rather than create the same generic stuff.

This is how I look at a design that stands out. What factors do you consider in a design that are superb or outstanding?

Popularity: 19% [?]

I have no idea why, but the phrase “web 2.0″ has been receiving some negative attention towards it. Perhaps it is the idea of the cheezy gradients and thick striped backgrounds that are causing this to happen. Perhaps something else. To me, web 2.0 has always been an idea that is astounding and amazing in its goals and ideas.

To clarify, I have always loved that Web 2.0 revolves around:

1. Design - If it were not for web 2.0, I would not have so many clients requesting redesigns. Web 2.0 style allows me to touch up corporate sites, make them look clean, beautiful, and most of all attractive.
2. Usability - What good is an application or website when it doesn’t have any rich content? Web 2.0 turns around and adds this to its list of goals to make the end user not only attracted to the site because of a fantastic design, but also because they can actually get something out of it. Make sense?
3. Standards - As a coder, I sometime hate the strict standards mostly due to the fact that IE and Firefox don’t get along too well most of the time. Standards however, help everything be organized and efficient.
4. Sharing - That’s right. It’s all about sharing. Blogs, videos, podcasts, wikis, and RSS are all about sharing data and interacting with each other. You can even see it in action here where Askllora.com is a product of this great interactivity maze.
5. .COM Giants – Put all the above points together and you get some great results: Youtube, eBay, Wordpress, Blogger, Technorati, Engadget, and of course Askllora!

Popularity: 10% [?]

Being an avid designer myself, I would like to personally welcome and attract website designers, wordpress designers, logo designers, cartoonists, and everyone else that revolves around the business or digital art. I am always happy to discuss various design techniques everyone uses, share a few tips, and most of all, help each of you (as well as myself) enjoy what we do.

The topic of Design will be one of the main categories on this blog and I really hope each of you designers out there leave your comments, feedback, or even email me. One of my weaknesses is I spent a lot of time talking to other web developers and less work, so I would be more than happy to waste that time with you!

Popularity: 15% [?]