Imaging Design Principles
[Author: Bill Fischer]
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.
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.
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.
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.
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.
Can be used to isolate the focal point like KCAD student Karl Brandt did in these images.
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.
This example mark-up of this screen from Pixar's 'The Incredibles' by KCAD Alum., James Suhr, demonstrate how sight lines effect 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
- Photo manipulation and compositing
- Painterly Illustration
- Graphic user interface
- Image compression (for web delivery)
- Gif animation
- Flat graphic style illustration
- graphic user interfaces
Digital 3D Tools
- 3D graphic assets
- Organic form modeling
3ds, Modo, & Blender
- 3D Game assets