Alternating Color

Problem summary

The user needs to visually separate similar looking rows in a table apart, in order to match the values of each row.

Examples

No items found.

Solution

To differentiate table rows from each other, a different shade is used as background color for every second row. Keep the difference between the two colors to a minimum to preserve a gentle feeling. The colors should be similar in value and low in saturation – the one should be slightly darker or lighter than the other. It is often seen that one of the two colors is the background color of the page itself.

Rationale

The purpose of the shading in every second row is only to provide an visual aid for the every users to follow a row from the left to the right and back again – without confusing one row with another. The purpose is not to drastically change the design of the table.

A side effect of shading every second row with an alternating color is however that the table will stand out from the rest of the page. The shading in this way boxes in the table.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE