Style

Be IBM, with data.

Visual principles

Scientific, with personality

Charts and graphs are scientific representations of data, but that doesn’t mean that they shouldn’t be expressive and visually intriguing. Convey uniqueness and distinction, without affecting readability and accessibility.

Ask yourself

  • What do you need to communicate?
  • What organizational strategies will suit your message?
  • Which elements are primary and secondary?
  • How much data will you show at once?

Connect to the past

Analyze IBM’s design heritage to inform the future and extract a shared vocabulary of stylistic choices, visual patterns, color combinations, and composition principles.

Animation of IBM 8 bar logo

Focus on details

Choosing a specific color, shape, or movement is never a only matter of style; every element represents something. Consider all the variables you can play with (visual, animation, and interaction layers) to help elements feel recognizable and unified.

Stylize classics, design new customs

In some cases, simply adding a minor stylistic feature to a standard chart creates the personal touch: changing a color, adding a pattern, or editing the background might be enough. In other cases, designing a custom visual model will be the best solution. Don’t be afraid to experiment, always balancing familiar elements and novelty.

Visual inspiration for IBM Design sketch from Geogia Lupi

Inspired by the arts

To expand your style inspiration for data visualization, look back at hundreds of years of visual information. Consider the evolution of music notation, from the medieval times to contemporary music. Dive into experiments with geometric shapes that characterized the abstract, avant-garde artists of the last century.

These visual languages clearly pursue different goals, but have a lot have in common with data visualization. They draw on common perception principles and use simple shapes, selected symbols, and a definite range of colors. Draw ideas from them to create visual compositions that deliver a message and please the eye.

IBM Radial Flower Chart

Add new layers of discovery to the traditional bubble chart with the IBM Radial Flower Chart. In this chart, animated lines grow and spin to reveal a bloom of relevant data to an existing object on the chart.

Use the chart when you want to create an overview indicating subdivisions in categories. Apply different styles (e.g. fill versus stroke) to create a strong visual separations between two partitions of the same value (e.g. filled lines: revenues among products categories, stroke lines: revenues among stores).

Since the radial representation creates a sort of glyph, it works well in a small multiples layout where you can graphically highlight differences. The single glyph can lead to a further detailed exploration of the values that it shows.

Do not use this chart if you are trying to make highly detailed comparisons between categories. Its radial shape makes it hard for a user to see differences in the lengths.

IBM Geometric Granular View

Taking inspiration from the printed punch card, the Geometric Granular View promotes deep analysis of a data visualization. This example shows how users can drill down further into a basic visualization, like a tree map, into a more sophisticated view. In this example, color, shape, and value are used to bring specific information into the foreground and give users fine grained control over the data.

IBM Alluvial Diagram

The IBM Alluvial Diagram communicates patterns and trends over time. It overlaps different layers of information represented in bold hues as graphic shapes.

Multiple flows can show how different categories evolve over time. Circles can be a second indicator which add another layer of information. Reduce the layers overlapping to fewer than five when possible, aiming to remain clear and readable.

Apply the style

Use color to tell stories

Use color contrast to attract the eye towards a main element. Augment color with other strong visual features, like shape, line, or pattern to make the focal point immediately recognizable.


Details on black

Detail on color

Example stacked bar chart of customers by office over time

Customers by office over time

Los Angeles

San Diego

San Francisco

Sacremento

San Jose

Develop a palette

As one of the most powerful sensory cues, color is a highly influential visual property. Color can be used to label and categorize elements, to measure quantities, to show intervals and to highlight key elements. Don’t use different colors to represent the same kind of data. Instead, use contrasting colors to show contrasting data, complementary colors for complementary data, and similar colors for groups of data.


Two color contrast

Three color palette

Analysis of stores

A scatter plot example visualization show order quantity and profit

Add layers

In info vis, color paired with overlapping shapes, for example, communicates a message of relationship, mutual existence or co-incidence, adding a rich layer of meaning to your visualization. In situations like a venn diagram, it can be used to enhance attributes and properties of a data set.


A
A & B B

Intersection of parameters

Sold out time slots

Example heatmap showing sold out time slots

Enhance with texture

Patterns are one of the most distinctive visual variables: One example, the IBM logo, is based on a pattern of 8 horizontal lines. Patterns are not just a decoration but become a way to convey information. Use lines with different weights and play with the density of elements.


0.0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1.0

Increasing values and density

Population density per county (people per km2)

Map showing population density per county

Create a custom pattern

Use the IBM 8 lines structure to create a grid. The same module should be used as a basis for a custom pattern that can be used as shown before to represent data.


Ten pattered squares showing how to create a custom pattern Ten pattered squares showing how to create a custom pattern
Three vintage IBM posters showing how custom patterns can be used

Pursue geometric purity

The design heritage at IBM maintains its strength due to its visual simplicity and effectiveness. Pursue the same graphic purity when designing an information visualization. Use classic geometric shapes and rules.


Illustration of four shapes emphasizing the concept geometric purity Illustration of four shapes emphasizing the concept geometric purity

Population density per country (people per km2)

Three bars showing population density per country
Set of three IBM posters inspired by geometric purity

Build spatial harmony with math

Bring science and mathematics into your design through the construction of grids and rules to communicate solidity, accuracy and reliability.


Triangle overlayed by grid representing spatial harmony

Analysis of stores

Heatmap showing an analysis of stores
Vintage IBM poster

Select basic, essential shapes

Shapes are a critical visible variable that can be used in a scatter plot, placed on a map, filled on a matrix or simply used with different sizes to compare values. Avoid decorative features, and use elementary shapes.


Showing shapes with sharp edges versus shapes with rounded edges
Example shapes with sharp edges
Example shapes with rounded edges

Monthly trends

Custom chart showing monthly trends of units sold over time

Have a sharp touch

In case of trendlines, and in other linear representations, polygonal shapes are preferable to curvy lines. Avoid misleading curvatures in favor of a more technical, scientific feel.

Checkmark
Line chart with precise lines
Checkmark
Line chart with curved lines

Create hierarchy and highlight key messages

Use details to identify the focus of the chart. Create a sharp contrast between colorful elements and wireframe ones (solid and outline) to gain the user’s attention. Use visual differences to tell stories and convey messages.


Hexagon evenly divided in to five pieces with one highlighed Hexagon evenly divided in to five pieces with one highlighed

Amount of European students by university

Bar chart showing amount of european students by university

Frame with a signature background

Even if grids are in the background, they greatly support readability of a chart. IBM grids are rich with color applied and generous spacing. Avoid gray backgrounds, let the grid breathe, and explore with colors and contrast—instead of trying to make the grid disappear. Use these techniques to develop something bold that serves as the base layer of the visualization.

Checkmark
Chart background in color, distinctive background
Checkmark
Chart background in gray, non-distinct background
Back to top