Screenshot of the use of alternating backgrounds in VWO's design
pattern-img-border

Pattern 8: Alternate section backgrounds

This design pattern probably seems obvious to you right now, but when you’re in the middle of designing a long page it’s easy to forget that you don’t have to keep the background color the same all the way through. So here’s your reminder.


Sales pages, landing pages, and other areas with lengthy content can become easier to read and scan when you separate sections visually. You can do this with divider lines (horizontal rules) and other decorative elements, but changing backgrounds is also a useful pattern.

Examples of alternating section backgrounds

Screenshot of the use of alternating backgrounds in Stripe's design

Via Stripe

Screenshot of the use of alternating backgrounds in Heroku's design

Via Heroku

Screenshot of the use of alternating backgrounds in Simple's design

Via Simple

Screenshot of the use of alternating backgrounds in Buffer's design

Via Buffer

Screenshot of the use of alternating backgrounds in VWO's design

Via VWO

Reasons to alternate backgrounds

Changing up the backgrounds just looks nice, which is often reason enough to do it. But you can use this pattern with specific intents too.

  • Separate headers, footers, navigation elements, and comment sections from the rest of the content
  • Visually signal transitions in the content’s subject matter
  • Emphasize important sections (like headlines or signup forms)

Looking for something specific? Email us here to suggest a design pattern.
Written by Jarrod Drysdale.


Share this article:


Objective Creative Design Bootcamp

Learn to succeed as a designer without compromising your creative vision

Objective Creative is a free mini bootcamp to teach you how to get hired as a designer without selling your soul to the devils of commerce.

You'll learn about the hidden factors limiting your success as a designer, how to overcome them, and how to show others the value of your work—without making compromises.

* email required

No spam, ever. Unsubscribe anytime. Privacy Policy.

Or, learn more about the bootcamp