Chapter 5: How to format Grids, Charts and KPIs

With all of your content defined, information architecture set and color palette created, it is now time to start building your components. Let’s see how you can take full advantage of Pigment features to create beautiful and easy to read data visualizations.

Format Grids

1. Keep it simple

The key to clean design is to limit the amount of styling used on a single element and to remain subtle. When using too many styles, the visual design becomes distracting and takes over the content.

A single styling option is enough for your content to stand out. For example:

• Don’t use both bold and italic formatting

• Don’t use both a background color and a border

Don’t: Use lots of colors and text style

If there are too many ways to visualize your group, or too many groups, users will get confused.

Do: Limit the amount of visual elements

Highlight rows with background colors, use similar colors, and only use borders when it’s really necessary.

2. Build a hierarchy

When creating a Grid View, build a visual hierarchy in order to help the reader understand the content in a glimpse. Here are a couple of simple options to replicate:

• Use a white color background for headers to decrease their visual weight and to emphasize the content

• Use different shade of colors to emphasize the different header levels

• Make the highest level Bold

• Play with black and grey text color to build contrast

• Use simple borders or background color to emphasize a specific row or column

Don’t: Leave your grids as default

Keeping the same formatting on every level doesn’t help in understanding the content organization.

Do: Organize data visually

Bring simple text style and colors, use row heights to create a hierarchy.

Format Charts

1. Remain subtle

Don’t: Use thick line stroke and make labels overflow

Big lines will give a childish look to your chart and overflowing labels won’t be legible.

Do: Create subtle styling and make bar wide enough to show labels

Keep your line stroke to 1 or 2 and adjust bar width to view labels. If data points are too wide, better to re-format them or hide them entirely to let end-users hover over the chart to view them.

2. Colors

Don’t: Use a lot of different colors across charts and have poor contrast

The more colors you, the set of charts become less legible.

Do: Create harmony and keep legible contrast

When charts are positioned beside each other and the same items are displayed, try to keep colors in the same tint and similar color.

Format KPIs

1. Make them consistent

Don’t: Color each KPI differently

This will add too many strong visual elements to your Board.

Do: Use the same colors on a single row

The symmetry will help end users focus on the content.

Next up

Learn how to use actions and text widgets