If everything looked the same—nothing would stand out. That’s the point of contrast.
In web design, contrast creates variety between elements and adds visual interest. In the first post in my series, Applying the 7 Principles of Design to WordPress, I’m sharing some websites that I think are using contrast in a really effective way—plus, I’m giving some tips on how I recommend adding contrast in web design.
Example: Arctic Wild
The Arctic Wild website uses strong serif and sans serif fonts. Softer fonts or pastel colors just wouldn’t have created the same overall impact. Also supporting the site’s excellent use of contrast is how the different sections use a variety of layouts—and how photography and isolated images are both used.
Example: Nancy Pelosi
Based in bold blues, greens and white, Nancy Pelosi’s site uses eye-catching color, contrasting typefaces, and a solid hero area with boxes on the right. Its contrasting elements create visual appeal with the separation of sections, the hover effects on The Latest News section, and the interesting placement of logo in the footer.
Tips to create contrast
- Use complementary typefaces
- Vary imagery and graphics
- Break apart sections using color blocks
- Use contrasting colors
- While consistency is important, not everything needs to be matchy-matchy
Have a site you think is using contrast really well? Share it in the comments. Next up— Design Principle No. 2: Emphasis.
