Datadog Pictogram Guideline

Pictograms are a style of illustration used in various areas, such as marketing materials, solution briefs, and empty states in the Datadog app, to convey complex and detailed ideas.

Role
Graphic Designer

Year
2022

Designer
Peng Yu Chen, Melissa Yu

Art Direction
Michael Hoang

About Datadog Pictogram

Datadog currently has product and marketing icon styles, but lacks a clear visual communication method beyond complex illustrations. Recognizing this gap, we saw an opportunity to create and develop our own pictogram style guide. Pictograms are capable of conveying richer, more complex ideas that product and marketing icons cannot. They should incorporate expressive details using the designated color palette and component styles.

Pictograms are designed for larger use cases, including but not limited to marketing materials, solution briefs, and empty states within the Datadog application.

Principles of Pictograms

Support and enhance

Pictograms are meant to support and enhance written content. They should never live on their own and should not take too much focus away from the main written content.

Abstract and literal

When developing a pictogram; a combination of abstract and literal elements should be used. Abstract elements add a layer of visual interest to keep users engaged, while literal elements are usually needed to communicate a point within the context.

Simple, yet engaging

Although our pictograms are meant to convey a sense of purpose and help support complex ideas; they should still be simple and not overly complicated. Elements should have a sense of purpose and should not be added for mere decoration.

Drafts

Roadmap

Pictograms

Pictogram Style Guide

Grid

The grid we use for pictograms is adopted from our product and marketing icon grid system.

Scale

The starting scale for all pictograms should be drawn at 480 x 480 px and scaled accordingly to fit within the composition.

Application pictograms

For pictograms that live in “empty states” on the Datadog application; the pictograms will need to be scaled down 25% to meet the 120 px x 120 px specifications.

Isometric and flat

Our pictograms are a combination of isometric and flat components. Isometric components provide an illustion of space when paired with flat components. Overall, the pictogram should feel balanced with both flat and isometric components.

Isometric components should only be drawn at 15 or 30 degree angles. Avoid using both angles in one pictogram for consistency.

Color guide

Approach

Our approach to color is using analogous colors. Analogous colors utilize neighboring hues from the color wheel to maintain a balance. There are two themes to assign to a set of pictograms. Although used separately, both themes embody the essence of the Datadog brand.

Color breakdown

The starting scale for all pictograms should be drawn at 480 x 480 px and scaled accordingly to fit within the composition.

Theme assignments

A set of pictograms should only use one color theme. Themes 1 and 2 should not be used within the same set of pictograms to stay true to the analogous approach and reduce complexity.

Theme 1

Theme 2

Gradient Guidance

The use of freeform gradients is meant to provide more flexibility and control over color distribution within a 2-color and 3-color gradient.

These are examples of how color fills and gradients can be used, but are not limited to only these examples.

Dark / Light Mode

When creating pictograms for the Datadog application; two versions will need to be created for both dark and light modes on our application.

Style Specifications

Working Size

Component style specs for pictograms should be drawn at 480px x 480px.

Arrows

Supporting lines and arrows may need to be added to pictograms outside of their grid structure.

Patterns

Use patterns within components sparsely. Patterns should be used for textural presence and should not overlap another component with patterns.

In-Situ Mockups