Contrast: Design Principle No. 1

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

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

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.

About Jill Anderson

Hi, I’m Jill, a WordPress web designer/developer who partners with talented designers, copywriters, and agencies on their websites, and their client’s sites. I’m passionate about crafting beautiful and innovative WordPress websites focused on clear positioning and positive user experiences.

Get new blog postsGET NEW BLOG POSTSIN YOUR INBOX

Like this? Get new posts via email.

No spam, no worries. Just my bimonthly(ish) blog posts straight to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *