Our illustration has a clear purpose: to support and simplify learning content and to guide a learner's understanding of complex concepts. Ask yourself, “Is this illustration 100% necessary to help with student comprehension?". Clear and simple illustrations and layouts help us provide meaningful engagement and understanding to our students.
Main Page | Text | Layout | Iconography | Characters | Elements | Infographics | Illustrative Scenes
Data Visualization | Resources
At eCornell successful illustration is:
Informative
Be informative and intentional with the way that information is illustrated. The value is in presenting what text alone can't communicate. We aim to bring clarity and understanding where there is complexity. Less is more.
Clear
Our graphics are intended to visually depict concepts and ideas as clearly and accurately as possible. Only essential, non-decorative elements should be emphasized to communicate the main learning points. Illustrations that attempt to relay too much information will become too busy, abstract, and ambiguous. Reducing the amount of unnecessary information is key to maintaining clarity. Ask yourself if the student would easily be able to interpret the visualization. Keeping an illustration simple and straightforward adds clarity. This simplicity helps guide viewers through complex concepts, stories or scenarios.
Engaging
Illustrations are created to provide a visually stimulating and engaging experience that will capture the viewers attention but not distract from the key learning points.
Purposeful
Our illustration is intentional and purposeful. We never use animation for the sake of animation (which can often become more distracting than helpful). Instead, think about the concept you’re trying to get across and how an animation could help accomplish that. If an animation feels unnecessary, it likely is.
Accessibility
Designing for accessibility means being inclusive to the needs of our students.
Color should never be solely relied on to convey meaning/information, indicating an action, prompting a response, or distinguishing a visual element. There should be other clues beyond color to convey meaning or relationship; this is a key reason that also directly labeling data and using patterns is important. Please use the WebAIM Contrast Checker or reference our Fonts page to check and confirm the accessibility of colors at different type sizes.
Illustrators should ensure there is sufficient contrast between text and important visual elements and their background.
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.
Visual hierarchy is also an important aspect to accessibility. Arrange visual information in a way that implies importance, such as making the headline of a body of text larger than the text below it.
*Text or images of text that are purely for decorative purposes or are part of a logo or image that contains significant other visual content do not have a color contrast requirement.