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 (6kb)
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.
Flat Art: jpg (35kb)
The same image, with limited color palette and lack of textures or gradients, will load 6 times more slowly than the png file if exported as an 80% quality jpg.
Gradient & Texture Art: png (110kb)
The same image, with gradients and texture added, will now load 18 times slower when exported as an 8 bit, 128 color png.
Gradient & Texture Art: jpg (34kb)
The same image, with gradients and texture added, will load 3 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 Color-blind simulators, Photoshop, and other software are critical tools to employ during the design process.
Images and image-text should be decipherable at all sizes, including mobile.
Testing at various scales during development can be accomplished by reducing the magnification in your image editor.
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.
Composition
This example mark-up of this screen from Pixar's 'The Incredibles' by KCAD Alum., James Suhr, demonstrates how sightlines affect visual hierarchy.
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
Simulation
Skilltide is A color-blind simulation Chrome Extension that includes other vision simulations such as dyslexia, cataracts, etc.