8 months ago


70 The Principles of

70 The Principles of Beautiful Web Design Figure 2.26. The Sprout Fund Spring Program uses complementary colors to a more organic effect The website for Cross Cross Coffee Cup 14 is a beautiful, textbook example of a complementary color scheme, as you can see in Figure 2.27. It’s impossible to choose complementary colors without pairing cool with warm, and the designers of this site were well aware of that. The city skyline and bright, round sun glow hot against the cool teal water. If you wanted to experiment with this exact color scheme, the secret formula is right there in the overlapping circles of the logo. To this site’s credit, there’s a non-Flash fallback for those of us trying to access it via iPhone or iPad. 14

Color 71 Figure 2.27. Cross Cross Coffee Cup: a textbook example of complementary colors Common Complementary Pitfalls Since complementary colors are so different from each other in many ways, they can cause an effect known as simultaneous contrast when placed together: this is when each color makes the other appear more vibrant and dominant. This is actually what makes complementary color schemes so successful at moving visitors’ eyes around a composition. However, it can be horribly painful when complementary colors are used in a foreground–background relationship, as they are in Figure 2.28. Figure 2.28. Beware of simultaneous contrast! Another common pitfall is to choose colors that aren’t directly opposite one another on the color wheel, yet aren’t close enough to be analogous colors. These combinations are known as discordants because the colors will often clash with one another, causing viewer discord. In fact, 1980s fashion was all about discordant colors. Seeing a discordant color scheme these days tends to bring back

Layout and Design - In Easy Steps
Boot Camp
HTML and CSS design and build websites
GD Starter Pack 2017
How to survive a redesign
Facebook Pages -
The Complete Guide to a High Converting Website
Title & Picture - Split - HubSpot
Web Site Design & Usability Testing - HIPNet
30 ways to create amazing web experiences on tablets
Download PDF -
Learn web design
Visual Design for Library Websites - WebJunction
5ml User's Guide
Creative Services - Keiger Graphic Communications
From Print Design to Web Design
Responsive Email Design Guide - e-Dialog
bright pd100
e4 Designing Brochure 8P-web version_LR_single
slides - HTML5 Developer Conference
Web Accessibility