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.
