DESIGN RESOURCES

The Design System Encyclopedia

A complete, visual encyclopedia of UI tokens, components, interaction patterns, and visualizations.

Before we get started, I’ve documented everything listed here plus way more over at the Design System Encyclopedia website. Check it out!

I’ve been designing professionally for almost 10 years now, and I’ve come to appreciate the vastness of the design field. As a new designer or a non-designer participating in the design process, it can feel tremendously daunting. The jargon, the rules, and the “invisible design” requirements like empty states, error states, and responsiveness.

Over the years, I’ve collected and created many resources to help me do my job, but none of them were as comprehensive and “evergreen” as I would have hoped. Tools come and go, trends change, and responsibilities evolve.

However, the raw ingredients always stay the same. Buttons are buttons, text fields are text fields, and drop downs will always-and-forever…drop.

So here it is after years of designing, collecting, learning, and discovering:

The Design System Encyclopedia

The Design System Encyclopedia is a vast collection of meticulously documented design tokens, components, page layouts, interaction patterns, and visualizations.

I won’t argue about what design systems are and what they aren’t, but I do strongly advocate developing an understanding of the complete picture: visual language, UI tokens, UI components, page templates, interaction patterns, and visualizations.

Visual Language

The visual language is how your product, brand, and system look and feel visually.

Color Definitions

These are the colors used in your product, app, or website. Consider defining the following:

  • Brand colors: primary, secondary, tertiary
  • State colors: Error, warning, success, info
  • UI colors: black, white, grey
https://dribbble.com/shots/6810767-Firefox-family-identity-guide

Grids & Spacing

Grids and spacing are critical for organizing data and content in an understandable way.

  • Define: column widths, gutter widths, margins, padding, vertical rhythm
https://dribbble.com/shots/10976823-Workly-Grid-System

Iconography

Icons are pictographic symbols or graphics representing an object or action. Icons can be categorized the following way:

  • Feature icons: Home, Calendar, Profile, etc.
  • Action icons: add, delete, edit, etc.
  • UI icons: arrows, flags, checks, etc.
https://dribbble.com/shots/6095615-Customer-io-Iconography

Illustrations

Illustrations are digitally-drawn images used to represent something. They typically reflect the overarching brand.

  • Define: illustration style, subject, color usage
https://dribbble.com/shots/10076909-Evolution-Brand-Illustrations

Motion & Animation

Motion and animation bring a static brand to life.

  • Define: style, complexity, speed, easing, sound effects, music, format (gif/svg/mov)
https://material.io/design/motion/understanding-motion.html#principles

Photography

Not all brands use photography in their identity, but those that do maintain a consistent standard and style.

  • Define: photo style, subject, color treatment, size, crop, angle
https://brand.utk.edu/standards/photographic-style/

Typography Definitions

Typography is the style and appearance of text in your product, app, or website. Define the following attributes in your design system:

  • Define: size, weight, tracking, leading, line-height, color
https://dribbble.com/shots/7793700-Typography

UI Tokens

UI tokens are the most basic building blocks of a digital product. In the book Atomic Design by Brad Frost, UI tokens are the atoms–the foundational blocks–which comprise our interface designs.

Avatar

An avatar is a visual representation of a user.

https://dribbble.com/shots/11774045-YSC-Dashboard

Badges

Badges are small, visual status descriptors for various interface elements.

https://dribbble.com/shots/6988594-Invoice-request-details

Buttons

Buttons execute various actions in the system.

https://dribbble.com/shots/7007257-DailyUI-083-Button

Camera Upload

Camera upload enables the user to take and upload photos directly from their device camera. It is required by law to ask the user’s permission before accessing their camera.

https://dribbble.com/shots/6340384-Allow-Access

Checkboxes

Checkboxes let users make a binary choice between two distinct options. Groups of checkboxes may be used when the user can make more than one selection from a list of homogenous (similar) options.

https://dribbble.com/shots/8947291-Checkbox

Chips

Chips are small, visual, interactive descriptors for interface elements.

Color Picker

A color picker allows the user to select a color to be applied to a system object.

https://dribbble.com/shots/5709228-UI-Daily-060-Color-Picker

File Upload

A file uploader allows the user to upload external files into the product. Depending on the uploader, files may come from the user’s computer or an online cloud storage service like Dropbox.

https://dribbble.com/shots/7271626-Multiple-files-upload

Image

Images can be large or small, and cropped in different ways to fit the space.

https://dribbble.com/shots/2342857-Image-Placeholder

Ordered List

Ordered lists are used to represent items that must be viewed or completed in a specific sequence.

https://dribbble.com/shots/2547238-Profile-completeness-checklist

Radio Buttons

Radio buttons allow the user to choose a single option from a set of mutually exclusive options.

https://dribbble.com/shots/6544191-Radio-Buttons

Range Slider

A range slider is an interactive control that allows the user to slide a handle along a predetermined scale to set a numeric input.

https://dribbble.com/shots/3378497-Price-Range-Slider

Switches

A switch is a binary, skeuomorphic control used to activate or inactivate a setting.

https://dribbble.com/shots/3717188-What-type-of-person-are-you

Text Fields

Text fields receive, store, and present alphanumeric content.

https://dribbble.com/shots/6628016-Input-States

Thumbnail

A thumbnail is a smaller version of a large image.

https://dribbble.com/shots/5474318--Thumbnail

Unordered List

Unordered lists are used to organize items which do not need to be viewed or completed in a specific sequence.

https://dribbble.com/shots/7118882-Dashboard-Tasks

Interaction Patterns

App Onboarding

Onboarding is a technique for teaching the user about your product at the moment they begin using it.

https://dribbble.com/shots/7084581-onboarding-steps

Authentication

Authentication helps verify that the user is who they claim to be. Verification can be done via a third party tool or by asking personally-identifying information.

https://dribbble.com/shots/10960055-Two-factor-authentication-2FA

Autocomplete

Autocomplete is a text field enhancement which predicts the rest of a word the user is typing. Predictions generally appear in a dropdown menu below the text box, and can be navigated using keyboard arrows.

https://dribbble.com/shots/11478574-Quick-Search

Create an Object

The method by which objects are added to the system by the user. Object creation can be simple or advanced depending on the complexity of the object.

https://dribbble.com/shots/11121004-Add-New-Modal-UI-Design

Delete an Object

The method by which objects are permanently removed from the system by the user. Depending on the complexity of the object, deletion may be immediate, or protected by a confirmation step.

https://dribbble.com/shots/5385333-Daily-UI-54-Confirmation

Drag-and-Drop

Drag-and-drop allows the user to click (or tap) and drag an object from one place to another. It is typically used for file uploading, but can also be used in list builders and to reorder items in a list.

https://dribbble.com/shots/8297994-ikas-Dashboard-Image-Upload-Animation

Feature Onboarding

Feature onboarding is a technique for teaching the user about a specific feature at the moment they first encounter it. This in-the-moment teaching can be informational or interactive.

https://dribbble.com/shots/7018153-Onboarding-Screens-Time-Tracking-Application

Forgot Username/Password

The forgot username/password interaction enables users to recover credentials which they cannot remember. Recovery generally happens via email, security questions, or SMS.

https://dribbble.com/shots/5451490-Forgot-Password-UI-Design

Form

A form includes one or more components such as text fields, check boxes, or drop-downs, and is used to collect input from the user. Once completed and validated, this data is submitted and/or saved to the system.

https://dribbble.com/shots/11195555-Hiring-Platform-Job-Application-Page

Invite

The invite flow enables users to grant system access to others who lack the appropriate rights or permissions to do so on their own.

https://dribbble.com/shots/6884877-Email-List-Input-Exploration

Log In

The log in flow validates the identity of a user with at least two credentials — typically an email or username and a password.

https://dribbble.com/shots/9512973-Hire-Ground-Sign-In

Onboarding Spotlight

Spotlights are an onboarding technique for drawing focused attention to specific portions of the screen using a darkened scrim and a “spotlight”. Spotlight onboarding steps can be mandatory or optional.

https://dribbble.com/shots/1231716-Task-form-tutorial

Permissions

Permissions grant users certain abilities or access within an app.

https://dribbble.com/shots/4650837-User-Permissions

Reset Password

The reset password flow enables a user to update forgotten credentials after verifying their identity.

https://dribbble.com/shots/6416451-Reset-Password-UI-Design-Boardme

Settings

Settings enable users to configure specific details for how the system operates.

https://dribbble.com/shots/5663523-Birdseed-configuration-components

Setup Assistant

A setup assistant guides the user through specific steps, sequenced or not, in order to teach them how to do specific tasks.

https://dribbble.com/shots/10689474-Steps-exploration

Share

Sharing grants users without access the ability to see and/or interact with certain objects in the system. The act of sharing can occur via email, hyperlink, or SMS.

https://dribbble.com/shots/10744000-Scripta-Editing-Podcasts

Sign Up

Sign up is the method by which users present and verify their identity in order to register or enlist for a product. These credentials are used to validate the identity of a user each time they attempt to access the system.

https://dribbble.com/shots/7757250-Sign-up-revamp

Upgrade

Upgrading is the act of moving from one package of features to another, typically at a greater expense.

https://dribbble.com/shots/7085116-Modal-Windows-UI-Components

Walkthrough

A walkthrough is a specific sequence of guided steps whereby a user is ushered through successive tasks in order to complete an objective.

https://dribbble.com/shots/8726163-Modal-Wizard-Flow

Wizard

A wizard is a set of tasks to be completed by the user, but in no particular order.

https://dribbble.com/shots/6145385-Payment-flow

UI Components

Components are complex UI elements consisting of multiple UI tokens. They are the molecules of atomic design, as they are comprised of several atoms.

Action Bar

An action bar is a group of tools for manipulating objects or performing activities.

https://dribbble.com/shots/11116878-Hiring-Platform-Messages-Chat

Activity Feed

An activity feed is a chronological record of system events or user actions.

https://dribbble.com/shots/7090382-Concept-Design-Activity-History

Avatar Group

An avatar group is a visual representation of multiple users.

https://dribbble.com/shots/3227641-Manago-Task-board

Breadcrumbs

Breadcrumbs are a visual record of a user’s location in a hierarchy of objects.

https://dribbble.com/shots/10640072-Breadcrumbs-UI-Design

Calendar

A calendar is a visual arrangement of time, typically represented in days, weeks, months, or years.

https://dribbble.com/shots/5797513-Schedule-Web-App

Card

Cards are visually-contained groups of similar content and/or actions about a single object or subject.

https://dribbble.com/shots/2979653-Relay-Task-Cards

Carousel

A carousel is a series of content items, displayed one at a time.

https://dribbble.com/shots/11283681-Carousel-UI-Design

Chart Legend

A chart legend is a set of labels describing the content of a chart.

https://dribbble.com/shots/6182239-Report-Builder-for-NLP-Platform

Chat (live)

Chat enables synchronous or asynchronous communication between two users, or one user and a scripted chat engine.

https://dribbble.com/shots/4653749-Live-Chat

Comments

Comments are written remarks about a particular system object. Comments are often combined with a rating or score.

https://dribbble.com/shots/4644902-Community-Discussion

Cookie Notification

A cookie notification is a visual alert informing the user that a website has stored a small piece of data on their computer so that it can remember important information about them later for things such as advertising.

https://dribbble.com/shots/5559487-Circus-Cookies

Data Table

A data table is a tabular collection of like-objects which can be searched, filtered, sorted, and/or manipulated by the user.

https://dribbble.com/shots/11920004-Search-Results-Data-Table

Date Picker

A date picker is an interface control which enables the user to select a date visually using a small calendar.

https://dribbble.com/shots/9835658-Leverege-Design-System-Date-Range-Pickers

Dialog

A dialog is a small, floating window that communicates information to the user, and/or prompts them for a response.

https://dribbble.com/shots/5385333-Daily-UI-54-Confirmation

Drawer/Accordion

An accordion is a vertical or horizontal list of items which can be expanded or collapsed to show or hide additional information.

https://dribbble.com/shots/8957381-Accordion-UI

Filters

Filters are groups of attributes which can be toggled on or off to show or hide objects with those matching attributes.

https://dribbble.com/shots/7167814-Product-Concepts

Hint

A hint is a graphical icon, usually a question mark or a lower case “I”, which displays additional information when the user pauses the mouse cursor on top of it.

https://dribbble.com/shots/4441119-Tips

List Builder

A list builder is a two-sided control element which allows a user to move list items back and forth between two lists, with one list representing selected items, and the other representing unselected items.

https://dribbble.com/shots/4001857-Report-Design-Builder

Loading Spinner

A loading spinner is a graphical indicator used to signify when an operation is being performed, but isn’t yet finished. It is meant to signify that the system has received the user’s request, but has not yet finished processing it.

https://dribbble.com/shots/4543219-Loader

Map

A map is a graphical representation of geospatial information.

https://dribbble.com/shots/9163173-Truck-monitoring-system

Menu/Dropdown

A menu (or dropdown) is a list of options or actions from which the user can choose. When a menu is closed, the options are hidden from view.

https://dribbble.com/shots/4233782-Snooze-notifications-in-Twist

Modal

A dialog is a small, floating window that communicates information and collections input from the user.

https://dribbble.com/shots/3768074-Modal-windows

Notification Banner

A notification banner is a thin, horizontal bar or box containing important information, usually appearing at or near the top of an interface for visibility.

https://dribbble.com/shots/6988594-Invoice-request-details

Notification Snackbar

A snackbar is a thin, horizontal bar or box containing important information, usually appearing briefly at the bottom-center of an interface, before disappearing. A snackbar may additionally contain an action that can be triggered during the period in which it is visible.

https://dribbble.com/shots/4178087-Crucial-bits-big-system-pt-1

Notification Toast

A toast notification is a thin, horizontal bar or box containing important information and/or actions, usually appearing at the bottom- or top-right of the interface. A toast notification is named as such due to how it animates into and out of the viewport.

https://dribbble.com/shots/4580930-Toast-Messages

Notification Menu

A notification menu is an activity feed within a dropdown.

https://dribbble.com/shots/5308459--Notifications

Page Header

  • Considerations: Icon, page title, subtitle, metadata, breadcrumbs, team members
  • Tools & actions: primary, secondary, overflow
https://tailwindui.com/components/application-ui/headings/page-headings

Page Tabs

Tabs can help divide and organize detailed content on a page. Page tabs generally appear as plain text directly on the background with the active tab underlined.

https://dribbble.com/shots/7285861-Medical-Management-Platform-pt-2

Pagination

Pagination is a technique for dividing a list of objects into multiple pages. This eases the load on the database, and often returns results faster than infinite scroll.

https://dribbble.com/shots/9517419-Pagination-UI-Design

Paper Tabs

Tabs can help divide and organize detailed content on a page. Paper tabs mimic the appearance of tabs in a binder or atop a manilla folder.

https://dribbble.com/shots/3771146-Unamo-SEO-Search-Console-Integration

Popover

Popovers combine the contextual convenience of a tooltip with the content detail of a dialog box. Popovers are generally (but not always) triggered by a click, and appear over or near the triggering item. Popovers may be purely informational, or provide interactive controls.

https://dribbble.com/shots/5753689-Hosting-Dashboard-concept/attachments

Pre-formatted Text (Code)

Pre-formatted text tells the browser to display text exactly as it is written, instead of rendering it based on browser rules. Pre-formatted text is generally rendered in a monospaced typeface for increased readability.

https://dribbble.com/shots/5792865-Challenges-Brand-Everything-Is-Fine

Primary Navigation Menu

The primary navigation menu divides an app into unique functional areas.

https://dribbble.com/shots/11277875-Patient-Portal-Medical-Dashboard

Progress Bar

A progress bar is a visual status indicator of a determinate or indeterminate process. They are used to let the user know the system is successfully performing an action when a process may take a long time.

https://dribbble.com/shots/9802008-Progress-Bar-Designs-UI-Design

Ratings

A rating is a visual representation of rank or grade. Rating systems may vary in step quantity, which is a key factor in understanding how a user rates something, and what their rating means.

https://dribbble.com/shots/8098254-Booking-Hotel-card

Reviews

A review is a formalized, written assessment or examination of something with the possible intention of influencing others.

https://dribbble.com/shots/10464678-Daily-UI-039-Testimonials

Rich Text Editor

A rich text editor, sometimes called a WYSIWYG (“what you see is what you get”) editor, is an interface for visually altering the appearance of text.

https://dribbble.com/shots/11123877-Create-your-HR-document

Search

Search is a function or process whereby the user attempts to locate specific objects by inputting relevant, related words or phrases.

https://dribbble.com/shots/8250455-Integrations-Maise-Dashboard-UI-Kit

Sidebar

A sidebar is a vertical menu used for holding navigational elements, contextual information, or useful tools.

https://dribbble.com/shots/10907005-Sidebar-navigation

Sub-navigation Menu

A sub-navigation menu is a set of child pages or functional areas related to a shared parent.

https://dribbble.com/shots/7285861-Medical-Management-Platform-pt-2

Table

A table is list of homogenous items or objects. Tables are useful for presenting detailed information in an easy-to-consume layout.

https://dribbble.com/shots/9532767-Hire-Ground-Dashboard

Testimonial

A testimonial is written or spoken statement praising the virtue of something.

https://dribbble.com/shots/9333269-Testimonial-Design

Timestamp

A timestamp is a digital record of the date and/or time of an event.

https://dribbble.com/shots/3970053-Timeline-Redesign

Tips

Tips are contextual popovers used to guide the user through a specific task or introduce a new feature.

https://dribbble.com/shots/4965841-User-Onboarding-Checklists-by-Appcues

Toolbar

A toolbar is a collection of controls and actions used to manipulate data on a page.

https://dribbble.com/shots/12077842-Components-allocation-by-supplier-Retail-planning-SaaS-web-app

Tooltips

A tooltip is a snippet of relevant information that appears while hovering over a specific trigger point.

https://dribbble.com/shots/8064813-Search-results

Tree

A tree is a visual hierarchy of information, typically used for files and folders.

https://dribbble.com/shots/4070665-Add-Content

Video Player

A video player displays multimedia content with controls for manipulating playback.

https://dribbble.com/shots/3938240-Player-Stylesheet

Page Templates

Page templates are layouts for common pages. Despite the variety of digital products, all pages tend to boil down to a small set of general layouts. While this isn’t a comprehensive list, these cover most use cases.

Article

An article is a piece of writing and mixed media about a specific topic.

https://dribbble.com/shots/5651703-Hidden-Onions-Article-Page

Cart

A cart is where user-selected items are stored before checkout.

https://dribbble.com/shots/12587384-Daily-UI-058-Shopping-Cart

Checkout

Checkout is the process by which items are purchased. Checkout requires the user to specify shipping information (when relevant), payment information, and other related details.

https://dribbble.com/shots/9780856-Wedding-man-Payment

Dashboard

A dashboard is the first screen a user encounters when logging into a system. Dashboards present textual and graphical summaries of important information which a user can or should act upon.

https://dribbble.com/shots/9403394--Property-Management-Dashboard

Forgot Password

The forgot password page collects an identifying piece of information from the user in order to send them instructions for resetting their password.

https://dribbble.com/shots/5451490-Forgot-Password-UI-Design

Getting Started

A getting started page is a form of onboarding which tasks the user with completing a number of steps in order to prime the system with information, or learn how it works.

https://dribbble.com/shots/11185264-Getting-Started

Kanban

A kanban board is an interactive visualization of information grouped by a unique attribute (like status). Information snippets are presented on cards which can be moved from one column (or status) to the next.

https://dribbble.com/shots/10880905-Candidate-Pipeline-Hiring-Platform

List

A list is used for presenting simple, actionable data objects. Lists are simpler than tables, and typically don’t include tools like filtering and sorting.

https://dribbble.com/shots/6816310--Exploration-Dashboard-for-Task-Management

Log In

The log in page validates the identity of a user with at least two credentials — typically an email or username and a password.

https://dribbble.com/shots/9512973-Hire-Ground-Sign-In

Media Lightbox

A media lightbox draws focus to a single piece of media by enlarging it and obscuring the interface with a scrim.

https://dribbble.com/shots/4731604-Image-viewvmodal

Notification Center

A notification center is and audit trail of all system and user notifications.

https://dribbble.com/shots/6981104-Notification-Page

Object Details

An object detail modal or page visually organizes object attributes in a consumable layout.

https://dribbble.com/shots/6387254-LoftSmart-Property-Page

Order Summary

An order summary provides the user with confirmation that their purchase was processed successfully, and summarizes what they bought.

https://dribbble.com/shots/4228239-Daily-UI-Challenge-017-Email-Receipt

Payment

A payment page is a secure portal for collecting tender details from the user. This page may also include fields for discounts and/or coupon codes.

https://dribbble.com/shots/7079412-Car-insurance-checkout-experience

Product Details

A product detail modal or page visually organizes product attributes in a consumable layout to aid users in purchasing decisions.

https://dribbble.com/shots/9394176-Remorse-Product-Details-Page-Exploration-E-commerce

Reset Password

The reset password page enables a user to update forgotten credentials according to specific password requirements.

https://dribbble.com/shots/6416451-Reset-Password-UI-Design-Boardme

Search Results

A search results page includes the objects located which match the user-specified search criteria.

https://dribbble.com/shots/6323387-Job-Search

Settings

Settings are where the user can configure various details about how the system can be accessed, how it operates, and/or how it looks.

https://dribbble.com/shots/5663523-Birdseed-configuration-components/attachments

Sign Up

The sign up page is where users present and verify their identity in order to register or enlist for a product.

https://dribbble.com/shots/7757250-Sign-up-revamp/attachments/444308?mode=media

Split View

A split view is a vertically- or horizontally-divided interface for co-displaying related information.

https://dribbble.com/shots/4312843-Price-page-MeilleursAgents

User Profile

The user profile is where access credentials and personal information about a user are stored.

https://dribbble.com/shots/4653784-Edit-Profile

Documentation

Documentation is written guidelines and annotations of a process or requirement. They are critical in a design system for chronicling important decisions, conditions, and necessities.

Accessibility Guidelines

Accessibility guidelines specify how a product should be designed and written to accommodate users of diverse physical and cognitive abilities.

https://dribbble.com/shots/10481825/attachments/2316521?mode=media

Branding Guidelines

Branding guidelines specify the limitations of how a brand can and should be expressed in various contexts.

https://dribbble.com/shots/9882627-Collibra-Brand-Guidelines/attachments/1916209?mode=media

Coding Standards

Coding standards help developers maintain a consistent, organized, and coherent code base to ensure maximum team efficiency.

https://www.nws.noaa.gov/oh/hrl/developers_docs/General_Software_Standards.pdf

Downloadable Assets

Downloadable assets are centralized and universally-available resources enabling interdisciplinary collaboration and consistency.

https://brandfolder.com/home

Editorial Guidelines

Editorial guidelines are a set of writing rules to ensure brand consistency in voice, tone, and style so that content is consistent across all mediums and channels.

https://www.bbc.com/editorialguidelines/

Employee Onboarding

An employee onboarding process is the set of procedures necessary for welcoming, training, and enabling a new hire.

https://www.acorio.com/is-your-employee-onboarding-a-welcoming-event/

Governance Process

A governance process is a quality control exercise to ensure consistent usage, growth, and maintenance of a design system, brand identity, or style guide.

https://whimsical.com/MVWzbvHK1KYYPGUqrKkDh1

Personas

A persona is a set of characteristics and behaviors defining a particular type or profile of user, stakeholder, or buyer.

https://dribbble.com/shots/6341789-Talebook-Revamped-Personas

Research Guidelines

User research guidelines specify the methods and techniques for conducting, collecting, and analyzing research.

https://www.nngroup.com/articles/ux-research-cheat-sheet/

Team Structure

A team structure diagram illustrates the hierarchical organization of a team. This diagram can serve as a reference for decision-making, responsibilities, and project ownership.

https://medium.com/flexport-design/designing-a-design-team-a9a066bc48a5 by Andrew Coyle

Visualizations

Visualizations are visual techniques for displaying and representing data. While they should never be used as a crutch, visualizations are highly effective for giving meaning to large amounts of data.

It’s critical to understand the difference between visualizations and when to use them. Using the wrong visualization can lead to misunderstanding, misdirection, or erroneous action.

Activity Gauge

Used to show progress toward multiple, recurring goals.

https://dribbble.com/shots/7142120-Personal-Performance-App-Activity-Tracker

Area

Used when data points are highly variable over time. If data points have little variance, consider using a line chart instead.

https://dribbble.com/shots/8725943-Data-Table-Concept

Area Range

Used to show the delta or difference between two values.

https://www.highcharts.com/demo/arearange

Area Range + Trendline

Used to show how the delta or difference between two values changes over time.

https://www.highcharts.com/demo/arearange-line

Bar

Use to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent. Most commonly used when sorted by descending value.

https://dribbble.com/shots/11352990-Horizontal-bar-chart-with-gradient

Bell Curve

Used to illustrate the distribution of values across a population.

https://dribbble.com/shots/4010581-Bell-curves-concepts

Bubble

Used when data has three dimensions, each containing a set of values. The first dimension represents the y-axis value, the second value represents the x-axis value, and the third dimension represents the size of the bubble.

https://dribbble.com/shots/8819622-Efficiency-Report

Bullet Graph

Used for comparing the performance of a primary measure to one or more other measures. A bullet graph can be useful replacement for a gauge or meter.

https://dribbble.com/shots/4629736-Bullet-Graphs

Butterfly

Used to represent and compare two data series side-by-side.

https://www.highcharts.com/demo/bar-negative-stack

Candlestick Chart

Used by stock traders to determine possible price movement based on past patterns. A candlestick chart displays four price points — open, close, high, and low — across a specified period of time.

https://dribbble.com/shots/6011330-Currency-Exchange-Dashboard

Chord Dependency Wheel

Used to show relationships between items.

https://www.highcharts.com/demo/dependency-wheel

Choropleth Map

Used to represent an aggregate summary of a geographic characteristic within an area.

https://dribbble.com/shots/7201235-Choropleth-2Dto3D

Column

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

https://dribbble.com/shots/3757735-Graph-Visualizations

Column Range

Used to show the range of a particular value in a category.

https://www.highcharts.com/demo/columnrange

Comparative Bar

Used to compare two sets of data on the same axis.

https://dribbble.com/shots/2204512-Widget

Directed Graph

Used to represent asymmetrical, directional relationships between objects (called nodes).

https://dribbble.com/shots/2886698-Follow-the-Money

Donut

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents. The area in the center can be used to show additional information.

https://dribbble.com/shots/4532342-Invocable-Alexa-Skill-Analytics

Euler Diagram

Used to illustrate the relationships between sets or groups, like explaining complex hierarchies and overlapping definitions.

https://www.highcharts.com/demo/euler-diagram

Funnel Chart

Used to represent values at successive stages of a process.

https://dribbble.com/shots/9737429-Dashboard-Widgets

Gantt

Used for displaying overlapping tasks over time.

https://dribbble.com/shots/6363405-Project-management-tool-Project-roadmap-Gantt-chart

Gauge

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

https://dribbble.com/shots/4145964-RoboAdvisor-Mobile-Dashboard

Grouped Bar

Used for showing multi-category change over time.

https://dribbble.com/shots/7369386-Medical-Studies-Concept

Grouped Column

Used to compare multiple sets of data.

https://dribbble.com/shots/10762151-Chattermill-Dashboard-in-Motion

Heat Map

Used to show the magnitude of a phenomenon as color in two dimensions.

https://dribbble.com/shots/3976563-Heat-Map

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.

https://dribbble.com/shots/5286010-Sitemappin

Histogram

Used to represent an approximate representation of the distribution of numerical data.

https://www.highcharts.com/demo/histogram

Honeycomb / Hexbin

Used in place of a choropleth map to avoid area bias, since each region is represented by a hexagon of equal size.

https://dribbble.com/shots/11102654-Chart-Builder

Interactive Map

Used to enable the exploration of a geographic area.

https://dribbble.com/shots/7150621--Real-Estate

Line

Used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.

https://dribbble.com/shots/5603414--Phishing-Attacks

Multi-Area

Used to display multiple categories when their data points are highly variable over time.

https://dribbble.com/shots/3718217-Comparison-chart

Multi-Line

Used to track changes over time for two or more categories.

https://dribbble.com/shots/11020313-grinfer-authors-analytics-page

Packed Bubble

Used to compare values of multivariate data. The positioning of the bubbles carries no meaning; the chart is optimized for compactness.

https://www.highcharts.com/demo/packed-bubble

Percentage Area

Used to display the proportions of various categories over time, and how each contributes to the cumulative total.

https://www.highcharts.com/demo/area-stacked-percent

Percentage Bar

Used to represent percentages instead of values.

https://dribbble.com/shots/11014258-Horizontal-bar-chart

Percentage Column

Used to represent percentages instead of values.

https://dribbble.com/shots/7063070-Sales-Analytic-Design-Web-App

Pie

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents.

https://dribbble.com/shots/3406937-Datasoft-Dashboard-Charts

Radar Chart

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

https://dribbble.com/shots/3731653-Megadin-Polar-Chart

Radial Bar

Used to present a bar chart in a polar coordinate system.

https://dribbble.com/shots/3977100-Russian-Radial-Bar-Chart-Reference-Page

Sankey Diagram

Used to display flows and their quantities in proportion to one another, using the width of arrows or lines to show their magnitudes.

https://dribbble.com/shots/9095946-MarketsN-Product-B2B-Marketplace

Scatter Plot

Used to display values in a large set of data with two variables. Scatter plots are useful for visualizing clustering, trending, and movement over time.

https://dribbble.com/shots/3694722-Google-Analytics-Browser-Sizes

Semicircle Donut

Used to more concisely display donut chart data.

https://www.highcharts.com/demo/pie-semi-circle

Sparkline

Used to present the general shape of the variation in some measurement when space is limited.

https://dribbble.com/shots/5405447--KPI-Charts

Spiderweb

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

https://dribbble.com/shots/5674082--Player-Comparison

Split Packed Bubble

Used to compare values of multivariate data. Bubbles are packed and organized into their respective categories.

https://www.highcharts.com/demo/packed-bubble-split

Stacked Area

Used to display cumulative totals of multiple categories over time.

https://dribbble.com/shots/6250451--Juicy-Stacked-Area-Chart/attachments

Stacked Bar

Used to show the parts of multiple totals.

https://dribbble.com/shots/3406937-Datasoft-Dashboard-Charts

Stacked Column

Used to show the parts of multiple totals, and how they change over time.

https://dribbble.com/shots/5611983--Bar-Chart/attachments

Streamgraph

Used to display high-volume datasets and discover trends and patterns over time across a wide range of categories.

https://www.highcharts.com/demo/streamgraph

Synchronized

Used to compare multiple data points over time.

https://www.highcharts.com/demo/synchronized-charts

Timeline

Used to visualize time lapses between events, durations), and the simultaneity or overlap of spans and events.

https://dribbble.com/shots/6319003-Timeline-UI-Design

Tree Map

Used to display hierarchical data using nested rectangles.

https://dribbble.com/shots/5295354-Figma-Chart-UI-Library-Treemapping-templates

Upset Plot

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

https://www.r-graph-gallery.com/upset-plot.html

Venn Diagram

Used to see the relationships between two or three sets of items.

https://dribbble.com/shots/2189240-Venn-Diagram

Waterfall Chart

Used for displaying sequential activities over time.

https://dribbble.com/shots/6710427-Waterfall-NPS-Chart

Windrose

Used by meteorologists to give a succinct view of how wind speed and direction are distributed at a particular location.

https://www.highcharts.com/demo/polar-wind-rose

Word Cloud

Used to illustrate the importance, weight, or occurrence of various words.

https://dribbble.com/shots/1137497-word-cloud

Summary

This is a lot of information, and Medium isn’t really the best medium for it (heh, pun intended).

The complete encyclopedia is meticulously documented to include categorization, types, states, and visualization features. Since it’s built using Airtable, you’ll be able to sort, filter, group, organize, and plan.

Add you own details, link to your internal documentation, and maintain your own centralized source of truth.

It’s massively influenced the way that I work, get inspired, and plan.

I think you’ll like it, too.

👉 Check out the Design Encyclopedia 👈

This post has also been published on www.productschool.com communities.

When I’m not writing about design, I’m principal of product design at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.

Some other stuff:

--

--

--

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Fast and Furious User Personas| Review

Smart Email — Pile App Design

two screenshot of high-fi prototype

Tinder Poll — a UX case study

Sziget Festival | Case study

5 Steps to an Effective Research Approach for Your Design Process

illustration of a designer who conducts a research with two testers

The Macintosh Moment — Why IoT Needs ID, UX and Design Thinking.

Top 5 Mobile App Designs of November 2019

Ironhack Challenge: Design Thinking

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jon Moore

Jon Moore

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com

More from Medium

Design Thinking is Magic

Introducing Design Critique at Immediate Media

EnerServ-Energy Management