Colors and the effects they have on everything they are placed on or displayed around are my absolute favorite things in the world. It makes me so sad to see that in this age of blogging with the freedom of expression that the World Wide Web gives us, so many people disregard the educated use of color and composition in their layout. A lot of people obviously have an eye for it, but a natural eye is not a trained eye and often going for “feel” doesn’t guarantee that you’re going to portray the message you’re going for.
I’ve also found that a simple understanding of beginning and intermediate design terms brings to light a multitude of guidelines that can help polish the creations of artists of all types, from the up-and-coming blogger to the web designer to the common teen-age girl planning to paint and set a theme to her room. Here are some color terms to think about:
- The color wheel: The ultimate tool for artists around the world. Created by Sir Isaac Newton in 1666, this is an invaluable resource for quickly visually referencing colors.
- Primary colors: These are blue, yellow and red. They are called primary because, similarly to primary numbers, they cannot be created by combining any other two colors. These colors are extremely vivid and imply a sense of cheerful urgency, which is why you often see them together in fast food logos. When you combine two primary colors, you get…
- Secondary colors: Green, orange and violet. Created with the combination of two primary colors in equal parts. These colors are also interesting and eye-catching but lack the urgency of a primary color. When a secondary color is combined with an adjacent primary color, the result is a…
- Tertiary color, which are named after the two colors that were combined to create them, separated by a hyphen, primary color first. Yellow-orange or blue-violet for example.
- Analogous colors: any number of adjacent colors on the color wheel.
- Complimentary colors: Colors which are opposite each other on the color wheel (and by theory, opposite according to the eye.) For example, blue and orange. These look really extreme, often overwhelmingly so, when placed next to each other. Also, you can add a pinch of a colors complement in order to create a…
- Muted color: When a small amount of a color’s complementary color is added to it, it serves to lessen the intensity of the color rather than simply darkening it by adding black. Muting a color effectively lowers its visual weight, which I’ll go over in a moment.(Vivid blue plus a small tint of complementary orange makes for a muted blue. If you use this shade, now you can insert some of that bright orange and it will work instinctively for you)
- Color Value: Defines how “light” or “dark” a color is based on how much white or black is in it.
And now I’d like to move on to a little information about composition. Knowing the color terms will help in understanding these ideas.
- Visual Weight: Visual weight is a term for how attention drawing a particular image or element of an image is. There are several ways to achieve visual weight. Something complex has a high visual weight. Something extremely large also has a high visual weight. Try not to combine these things because it becomes quickly overwhelming. Context helps a lot with visual weight as well. Something bright in a dark context (or vice versa) has a high visual weight. Complimentary colors have extremely high visual weight when in the context of each other. Use these with caution as they can often be painful to look at on a computer screen. Like this yellow-green on red-violet. Ouch. Analogous colors have a low visual weight but the look great together so they make a good background layout or “small print” section. You generally want to have an equal amount of visual weight in the four quadrants of your image or layout. Add a flare of extra weight in the focal points you would like to guide your viewers but don’t go crazy with it or they won’t look at anything else.
- Visual Equilibrium: The Zen of your layout. This is where you use your eye for composition and put together all the knowledge you’ve got regarding how colors interact with each other and creating a good balance of visual weight. Once you’ve created a layout, take a step back and look it objectively as a whole. Deduce if the movement and the mood of the image are in tune with the way you want it to catch your audience.
Make adjustments based on your knowledge of the effects of colors and weight until you get the right feeling and you end up with a hit, every time. Play around with them, start analyzing other blogs and websites that have similar content to yours, and start breaking down their color choices.
Guest article written by: Rebecca Chelsey loves to spend time her family and has quite a creative streak. Outside her life as mother and wife, she also works for Homeseasons, which has simplified the holidays with 4th of July decorations, Halloween Holiday arrangements and ideas for every holiday in between.
Great color wheel, thanks for the reference I design on the side! It kind of reminds me of a color theory class I had taken years ago. I remember Faber Bieren was a mathematician that worked with color, some of the best books I ever read.
I like to use colorlovers.com to get some inspiration when I create new design. I think it’s worth checking. Great article by the way!
Great article, I always start off a design project by having a look at Adobe’s Kuler website.
http://kuler.adobe.com/
Definitely helps with finding my vision of what im am trying to achieve.
I have a really weird practice of finding colours that work. Its not methodical in the slightest. I basically take screenshots of all the layouts that i like in the niche i am making a site for. Sometimes i get a client to do this.
Then i just go through them in Photoshop and use the colour dropper to make a beautiful colour pallet. Anyway, great article, i enjoyed reading it!
– Jenny.
I really loved this article!!! Thanks for it! I also like colours so much and the fascinating way they can be combined.
Thanks for sharing. It’s so true that color attract readers and i’m grateful that you shared this post. I’m making a website through Photoshop and this really helps. Thank you once again and more power.