Back Home
Visualization

Hierarchy

Used to portray the elements of a system, organization, or concept from its highest position to the lowest. Connecting lines explain the relationship between different objects.

Visual Example

View image source

Types

Types are variations or derivatives of an individual element. They can help you choose what to include in your design.
Horizontal
Vertical

Interaction States

Interaction states communicate the status of an element on the user interface. Consider all of the following states when designing this element:
Empty
Initial
Default
Hover
Error
Loading

Chart Features

For this particular visualization, you may consider these additional features.
Title
Annotation
Tooltip
Legend
Download
Share
Print
Filtering
Label
Zoom
Search

Building a design system?

Track your progress while building your design system using the Design System planning tool in Airtable.
Learn More

View more:

Column

Used to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
Visualization

Gantt

Used for displaying overlapping tasks over time.
Visualization

Upset Plot

Used to visualize intersections of multiple sets of data, as in a Venn diagram.
Visualization

Gauge

Used for comparing values between a small number of variables, either with multiple needles on the same gauge, or multiple gauges.
Visualization

Categories

Documentation
Interaction Patterns
Page Templates
UI Components
UI Tokens
Visual Language
Visualizations

Other Resources

Social Media

The Design Encyclopedia is a passion project by Jon Moore, and was designed and built in Webflow (this is an affiliate link). If you would like to reference the encyclopedia in a separate project, partner on a collaboration, or have a general inquiry, send me an email.

© 2020 Design Encyclopedia. All rights reserved.