ICONOGRAPHY

Icons are a simplified visual representation of a single idea or concept and their primary goal is to communicate a concept or idea quickly and easily. They can be combined into any layout style to illustrate different components of a whole. They are also used for main focus points and top-tier labels, and can be combined into more complicated layout styles. When used wisely, icons become an elegant yet efficient way to communicate with and help guide a learner. It’s important to reduce cognitive load on learners by using icons sparingly and strategically throughout your designs.

Basics
An icon’s design should be in service to a learner’s ability to understand the information it supports/represents. As a rule of thumb, keep it simple inside the circle. If the concept is too complex to reduce into an icon form, remove the circle and create a fuller illustration

Be strategic about the kinds of detail you choose to include. Go easy on the little details, items that are not spaced out carefully can be tough to read and will begin to lose meaning and definition.
Make sure your icons read clearly conceptually and visually, including at small sizes.
Allow for adequate white space between icon and circle stroke.

Scale
Our icons are designed to achieve clarity at a variety of scale. The stroke weight should scale proportionally with size. Icons should never be smaller than 180px or larger than 300px.

Primarily use the default size. Small is used when establishing hierarchy and when more space is needed. Large is used when it’s the singular dominant focus.

Labeling
Labels are intended to make a visual connection from the icon to the word it is representing. They are color-filled rectangles that house a particular term. They are most often paired with an icon and used to concretely define what the icon is representing.

In most cases, labeling should be centered below the icon. However, the use of labeling is not always necessary. Standard semibold text can be used instead of labels wherever appropriate.

Descriptive Text
Text descriptions should be centered below the icon or left justified to the right of an icon. Labels are intended to make a visual connection from the icon to the word it is representing. However, the use of labeling is not always necessary. Standard semibold text can be used instead of labels wherever appropriate.

Color Usage
The eCornell color palette has a number of color combinations available to create high contrast and instantly recognizable graphic elements. Graphic elements should be simple, sophisticated, and powerful in their color choices.

Best Practices

Stick with just two or three colors and create color consistency across icons. Any more colors can cause the learner to feel overwhelmed or distracted by the abundance of colors.
Icon circle should always be #DBDBDB unless it is being highlighted.

Icon Highlights
When highlighting an icon, the color changes from light grey to eC red (#B31B1B). This change in color will be done in motion.

Icon Layouts
Many variations of our 3 circle sizes, quantities, and layouts are acceptable and depend on emphasize focal hierarchy.

Large is the dominant focus for the student.

Connector lines should be the same stroke width as the connecting circle

Satellite Icons and Connectors
These are added as modifiers to Icons, enabling more complicated builds. Satellites are white simplified images on a solid color.

Dimensions & Usage

Satellite Icon as Modifier

Satellite Icons can be added as modifiers, enabling more complicated builds and adding additional context.

Pointers
Similar to satellite icons, pointers are used to add context or additional information to an icon or more complex illustration. Pointers are always attached to an illustration (whether it be a character or object) and are rarely used as stand-alone items.

Icons within Larger Graphical layouts
An Icon is like a bullet point, the dot next to an item in a list to signify importance. But the real information is in the graphical buildout around it.

In this example, expanding icons of a calendar, tech and design documents into full graphics to show more detail of each specific icon. The satellite icons serve as a callout within the animation.
(Graphics not to scale)

Contrast
Creating a buffer between colors is important in order for our illustrations to have enough contrast to be accessible.