Imaging Design Principles

[Author: Bill Fischer]

Overview

If you are creating an image for any purpose, this guide should drive your design and illustration decisions, Including all of these use-cases: Interactive, Animation, Video, Game, XR and Print media.

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.

Flat Art: png (11kb)

  • This limited color image, with its lack of textures or gradients, can lead to fast rendering over slow networks when exported as an 8 bit, 128 color png.
A variety of digital devices displays as icons: compressed as a PNG.

Flat Art: jpg (35kb)

The same image, with limited color palette and lack of textures or gradients, will load three times more slowly than the png file if exported as an 80% quality jpg.

A variety of digital devices displays as icons: compressed as a JPG.

Gradient & Texture Art: png (121kb)

  • The same image, with gradients and texture added, will now load 11 times slower when exported as an 8 bit, 256 color png.
A variety of digital devices displays as icons with gradient fills: compressed as a PNG.

Gradient & Texture Art: jpg (29kb)

  • The same image, with gradients and texture added, will load 4 times faster than a png if exported as a 30% quality jpg.

Responsiveness

Images should respond to the viewer including those with disabilities or situational limitations

  • Images should be high contrast for the sight impaired.
  • Reds and greens with similar values should not be used next to each other (many color blind persons will have problems differentiating them). Using highly saturated saturated reds and greens as accent colors should be avoided (they will appear as far less saturated browns for many color blind persons). Learn more about Universal color in that section of this guide.
  • Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complimentary colors or stripes that may scintillate. You can dive deeper into this requirement by reading the siezure guidelines from Webaim (external link).
  • Images with integrated text should also include one of these:
    • Text in adjacent media that a screen reader can read.
    • An alt tag image description.

Color schemes should provide a quality experience for all color deficiencies.

The NoCoffee Chrome plugin, Photoshop, and other software can simulate many of these during the design process.

Three views of The Epic Project website on phones in three different color mode simulations: typical, red-green colorblind, and grayscale.

Images and text should be decipherable at all sizes.

Testing at various scales during development can be accomplished by reducing the magnification in your image editor.

The Epic Project website shown on a tablet and phone.

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.

High contrast image of a character and a text box

Atmospheric Perspective

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

An Illustration from a children's book demonstrating atmospheric perspective in an interior environment.
An Illustration from a children's book demonstrating atmospheric perspective in an exterior environment.

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.

A game shown on a tablet with an orange lion in a green-blue forest.
A game shown on a tablet with a yellow lion in a blue-gray forest, as a red-green colorblind person would see it.

Composition

This example mark-up of this screen from Pixar's 'The Incredibles' by KCAD Alum., James Suhr, demonstrate how sight lines effect visual hierarchy.


A screen capture form a cartoon with characters in a city-scape. The angles of the building all point to the characters.

Imaging Tools Overview

For my own practice, as well as The Epic Project at KCAD, the Adobe Creative Cloud subscription provides all the software needed for 2D work. Adobe does not make digital 3D software, and that part of the graphics software industry is fractured into specialized tools.

Digital 2D Tools

Adobe Photoshop

  • Photo manipulation and compositing
  • Painterly Illustration
  • Graphic user interface
  • Image compression (for web delivery)
  • Gif animation

Adobe Illustrator

  • Flat graphic style illustration
  • graphic user interfaces

Digital 3D Tools

Cinema 4D

  • 3D graphic assets

zBrush

  • Organic form modeling

3ds, Modo, & Blender

  • 3D Game assets