Sunday, April 26, 2015

The Art of Color Coordination

The Art of Color Coordination
Colors affect us in countless ways—mentally and physically, consciously and subconsciously. Psychologists have suggested that color impression can account for 60% of the acceptance or rejection of a product or service. Good color choices should never be neglected in web design. A bad color combination can have the same negative effect as poor copy and slow load times.
Published in: Design

Transcript

  • 1. I’ . f x : { ‘ COLOR“ ———€OORD| NAT| ON—— fl. _. .'—j
  • 2. affect us in countléss ways—mental| y and physically, consciously and subconsciously (Q /1 / “
  • 3. PSYCHOLOGIST5 have suggested that color impression can account for 60% of the acceptance or rejection of a production or service. Good color choices should never be neglected in web design. A bad color combination can have the same negative effect as poor copy and slow load times
  • 4. WARM W COOL COLORS The color can be divided into warm and cool colors. As a general rule, designing a website with an excessive combination” of E warm and cool colors can confuse the viewer. It can often make the site seems busy, dirty, and untrustworthy. . ‘Q0
  • 5. ‘l _ ll WARM COLORS . y Use warm colors in your designreflect passion, happiness, enthusiasm, and energy
  • 6. Use cool colors in your design to give a sense of calm or professionalism
  • 7. PRIMARY, SECONDARY m¢ TERTIARY COLORS In the RYB (or subtractive) color model, the primary colors are red, yellow and blue. The three secondary colors are green, orange and purple are created by mixing two primary colors. Another six tertiary colors are created by mixing two primary and secondary colors.
  • 8. We PRIMARY COLORS Primary colors, according to traditional color theory, cannot be formed by mixing any other color.
  • 9. Secondary colors are the combinations of two primary colors.
  • 10. Tertiary colors combinations of one primary and one secondary color
  • 11. COLOR HARMOll li| §S m¢SCH‘EM«| E fSj Certain combinations look very pleasing, while others are painful and abrasive to look at. Why is that? It is more objective than you think: It's based on the color wheel. Color harmonies for color schemes consist of two or more colors with a fixed relation on the wheel. We've included 6 of the most common color schemes below used the 12-points RYB color wheel
  • 12. COMPLEMENTARY Gala/ ca 9 Complementary colors are those which are directly opposite each other on the colorwheel. Due to the powerful contrast of complementary colors, web designers can choose one dominant color (usually the background) and another to highlight the most important elements of the page (the content)
  • 13. ANALOGOUS Gala/ ca T. Analogous colors are those which lie on either side of any given color. Analogous color schemes are often found in nature and are harmonious and pleasing to the eye. They usually match well and create serene and comfortable designs.
  • 14. The triadic color scheme uses the power of three colors which are situated at 120 degrees from each other (as determined by an equilateral triangle) on the color wheel. Triadic color harmony is considered by some to be the best color scheme. You could use one color for a background and the two remaining for content and the highlighted areas
  • 15. SPLIT-COMPLEMENTARY Qala/ ed» The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, It uses the two colors adjacent to its complement. Split complementary colors have a high degree of contrast, but are not as extreme as complementary colors, which result in greater harmony.
  • 16. RECTANGULAR (TETRADIC) Qalaw The rectangular (or tetradic) color scheme uses four colors arranged into two complementary pairs. This rich color scheme offers plenty of possibilities for variation. Tetradic color schemes works best. If you let one color be dominant. Be sure to pay attention to the balance between warm and cool colors in you design
  • 17. SQUARE Gala/ ed The square color scheme is similar to the rectangular scheme, but with all four colors spaced evenly around spaced evenly around the color circle. This scheme offers the greatest number of possible color combinations-which can be a problem for good harmony. Be careful when using square color schemes.
  • 18. Coordinating color between layout and photo elements is a way of building unity in web design. A connection between the color of layout and photo elements needs to be found or the design won't look right. Just like poor use of color schemes, failure to consider the color balance of web elements can leave a bad first impression as well.
  • 19. TIT, f , .7“ l ; I , *S l , i ‘ if-"fr ; l=LI if‘; i H »; ._§_r I ' III Zn Ij ; WELCOME HOME ABOUT PRODUCTS CONTACTS Red Coordination Gray Coordinationi
  • 20. Some web designer opt to use large amounts of layout/ photo coordination- in some cases exclusively using the photo elements to determine the entire palette of the site. Coordinating images and layouts around similar colors provides a strong connection for the user, it suggests maximum unity.
  • 21. SMALL AMOUNTS 9‘ COLOR COORDINATION WELCOME HOME ABOUT PRODUCTS CONTACTS
  • 22. Smaller amounts of color coordination can be used to highlight specific parts of a layout. This can give additional local points, with surrounding layout colors acting like a frame. Layout elements containing this accent color such as logos are given much more impact as a result
  • 23. BACKGROUND IMAGES am COLOR COORDINATION WELCOME HOME ABOUT PRODUCTS CONTACTS
  • 24. A photo used as layout backdrop can help communicate your site's purpose quickly and effectively. When using background images, contrasting colors should be used to make other elements more noticeable, but too much contrast can make the design look uncomfortable. See what works best for you.
  • 25. nj " I "‘. ._~. =_'-av-*. .._j>‘ - I Q E Q. ; v«; .,—, _’_ . Color can be your most powerful design element if you learn to use it effectively. Coordinating color between layout elements and photographs is a great way to create unity. Coordinating makes everything look as though they belong. Keep this in mind when designing your site.
  • 26. THANKYOUfia WATCHING!
at