Imaging Design Principles

Attainability

Images that will be delivered via the internet should be optimized for fast delivery over slow networks (such as 3g) and inexpensive devices that may render images more slowly . Optimizing can include:

• Pre-sizing the image to no larger than its maximum pixel dimensions as delivered on either a tablet or desktop display.

• Compressing images to their maximum while maintaining acceptable quality. This typically will mean using the JPEG format, but some flat color images will compress as well or better with the PNG format (which does not produce compression artifacts)

Image compression Examples

Note: the compression settings are varied to achieve the same visual quality across all of the compression schemes.

Cognitive Load

Employ a visual hierarchy that guides the viewer through the image or layout in order of informational relevance. This reduces the amount of cognitive load required to process it. This is especially important for works where image view-times are fleeting, such as games and video. Images can be broken down into levels of attention. The information that is most important would be level 1, 2nd most important level 2, and so forth. Attention can be created through the use of compositional devices such as: scale, position, contrast, color, and site lines. The examples below synchronize these to create focus on the most important part of the image.

Signal and Noise

Avoid placing text over complex backgrounds or placing text in orientations other than horizontal. Be clear about the work that the image will do and clear away distractions from the parts that aren't critical to that end. For The "Shawn" image, by KCAD student Fredy Santiago, the information is clear thanks to the high contrast coloring of both the image and text. Optimized by bordering between the text and background, readability is maximized for the 'Understanding Detroit' app created by students and faculty as part of The EPIC Project.

Framing

Setting a theatrical-style stage for the presentation of the story-telling assets and characters can reduce cognitive load because viewers have a clear focal zone. These illustration were created by Bill Fischer.

Atmospheric Perspective

Can be used to isolate the focal point like KCAD student Karl Brandt did in these images.

Color

When using color for managing visual hierarchy, Test it with colorblind filters to make sure it works for sight-impaired persons. Tools for testing color can be found on the Universal Color page in this website. Below, the image on the left is color-typical and on the right, filtered to simulate red-green colorblindness.

Illustration by KCAD students Tina Uhazie, Britanny Zerkle and Aaron Leathers.