Visual design dictates how interactive elements look in an interface. It influences the user experience in many ways; for example, it:

Given its importance, all UX designers (and everyone on crossfunctional development teams) should have at least a baseline understanding of visual design and share a common language. But even proficient UX designers are not always versed in visual design, and few teams are able to create a solid common vocabulary. That difficulty can lead to hours of back-and-forth communication, countless unnecessary revisions, and costly misunderstandings. Conversely, good communication about visual design can make a site or application truly delightful and streamline design iterations.

This cheat sheet can plant the seed for a common visual-design vocabulary for your cross-functional team. We have chosen this collection of terms because they are either most important or most misunderstood. The topic areas include:

  • Graphics
  • Color
  • Visual weight
  • Types of images

To help illustrate some of these definitions, I am going to employ the assistance of my officemate, Finley:

Photograph of Finley, my dog
A photograph I took of my dog, Finley, this past Christmas. What a good boy.

Note: We use the phrase visual element or element to refer to an image, a page, or a fragment of a page or of an image.

Brightness: the balance of light or dark colors that an element has (not to be confused with contrast, see below) or the density of light or dark colors within an image

When overall brightness is increased, all colors, foreground and background, are made lighter — that is, closer to white (complete lightness). When brightness decreases, all colors are darker and closer to black (complete darkness). Manipulating brightness in any visual can influence how easy it is to distinguish details. If something is too bright or too dark, the visual might be washed out or hard to see.

Four dog photographs, increasing in brightness from left to right
The original picture of Finley was taken at night, and the photo is dark. When we decrease brightness, details become more difficult to see. Slightly increasing brightness makes the image’s colors brighter, but also eliminates some details, like the edges of Finley’s ears (identified by the pink arrow in each frame) which blend into the background in the brightest frame.

Brightness of an interface can also influence the overall tone and brand identity. Take these two websites of two different investment banking companies, which have similar layouts above the fold, but with different hero image choices. Betterment opts for a darker (low brightness) hero image (with the exception of the woman’s face, whose complexion results in more contrast, see below) and slightly brighter buttons, while Wealthfront uses a brighter hero image (albeit with lower contrast due to the presence of pastels, see below) and layout with dark buttons. The brightness of the image and the darkness of the buttons ultimately influences the contrast (see below).

Screenshots of Betterment.com and Wealthfront.com
The Betterment site (top) features a dark hero image with dark buttons, while the Wealthfront site (bottom) features a brighter hero image with dark buttons.

Contrast (also known as gamma): the difference between the light and dark components of a given element

The differences in light and dark tones add visual interest that make the image strong (or as some say, “bold” or “pop.”). Contrast is important for readability and can help draw the viewer’s eye toward important details.

Four dog photographs increasing in contrast from left to right
Slightly increasing contrast makes the shadows more noticeable. Decreasing contrast makes the picture less defined and thus, makes it harder to distinguish the details. Increasing contrast too much makes parts of the image too bright, which is uncomfortable to look at, especially for long periods time.

Density: quantity of visual elements in a given area or space

High-density pages are sometimes referred to as “busy” or “crowded.” Low-density pages have few components (e.g. text, colors, or textures) and use negative space or white space (i.e.,areas with no content  —see below). The definition of density applies to images, pages, and displays. Pages or displays with very few components are often referred to as simple or minimalist (see below).

If there are too few components on a page (which may not even warrant a dedicated page), users may not have enough information scent to confidently navigate that page. Conversely, too many components on a page can cause sensory overload and increase the task time or the chance that people will ignore relevant information. There will always be a tradeoff between how dense a page or display is and how much interaction cost or cognitive load that page will cause or require.

Left: More dense wireframe; Right: Less dense wireframe
The wireframe on the left has higher density than the one on the right, with many elements filling the space on the page and less negative space.

Duotone (meaning “two tones”):  a color profile comprised only of different shades of two contrasting colors, with no other colors present

In order to qualify as duotone, there must be enough contrast between the tones for them to be considered two different colors. For example, light pink and dark pink would qualify as monotone, but not duotone, while purple and yellow are two different colors, and would qualify as duotone.

Grayscale (also known as black & white): a color profile composed of only black-and-white tones or shades of gray, with no other colors present

Grayscale is an example of monochrome (see below), but not all monochrome images are grayscale.

Minimalism: a low-density aesthetic style in which a design provides the bare minimum components needed to fulfill some purpose

Minimalism can apply to a page, an image, or a design. While minimalism may have aesthetic value for some audiences, it does not necessarily make a design easy to use (see density above).

Monochrome (meaning, “single color”): a color profile composed only of different shades of a single color, with no other colors present

Contrary to popular belief, monochrome is not only black and white, and monochrome images do not have to be grayscale. They can be any color, as long as every color in that image is a lighter or darker shade of that one color.

Monochrome, grayscale, and duotone versions of the dog photograph
The first image is monochrome and in grayscale — the only colors used are varying shades of black. The second image is monochrome, but this time in pink. The last image is duotone — incorporating shades of purple and black.

Negative space (also known as white space or isolation): space which lacks text, graphics, or foreground colors

A visual element (such as a page or an image) with enough negative space can seem less busy or crowded. Some people refer to negative space as “breathing room” between elements — be it within a photograph or between interface elements on a screen (see density).

Note: While the term white space includes the word “white,” negative space is not necessarily white. For example, a white square would not be considered negative space if placed on a green background, but the green area would be. However, if the square was green, and the background was white, then the white area around the square would be considered negative space.

Pixel:  tiny unit of light emitted from a screen (an abbreviation for the words “picture element”)

Each pixel can appear as only one color at a time. To confuse things further, the word pixel (abbreviated “px”) is also used as a measurement unit for sizes on web pages. So a 1-px element can actually can encompass multiple physical pixels (actual light-emitting dots on the screen) on high-DPI screens.

Saturation: how intensely colors appear in any given element
This term is also used in print; the word literally means “filling to excess” or “soaking.” You may have heard saturated images referred to as “bold” or “vibrant in color.”

Highly saturated elements have bright, bold colors such as neon green, bright red, or electric blue, while less saturated elements have neutral tones (closer to black, white, or grey) or muted (or pastel) colors like mint, blush, or periwinkle.

More Saturated vs. Less Saturated Colors (lighter and darker)
As saturation is decreased, colors appear more neutral and less intense.

Color intensity affects readability; if text is too highly saturated it can strain the eyes. Color intensity can also influence brand perception — intense colors are often perceived as “lively,” “bold,” or “young,” while neutral colors tend to be perceived as “calm,” “mature,” or “grounded.”

More saturated and less saturated versions of the dog photograph
As saturation increases, the intensity of colors increases. As saturation decreases, color hues become less vibrant until the image is devoid of all color except gray tones.

Texture: the varied layers in a given area of a visual element

Akin to fabric texture, which includes woven fibers and objects laid in the foreground and background, a highly textured digital element also has multiple layers. In an image, texture might be a sense of 3-dimensional space created with shadows and angles, while an interface might use overlapping elements such as text on top of a background image, or a 3D button with text on it to provide a sense of texture. Texture and depth can help draw the eye toward important details and set a tone for the design.

Three rectangles ranging from little texture to high texture
In the first image on the left the rectangle has little texture and one layer (arguably two if you count the text shadow effect). In the second frame, texture is increased with two layers: the yellow rectangle added behind the shadowed text. In the third frame, texture is higher with the addition of Finley’s photograph, which has layers in itself.

Visual balance: when all components of an element have similar visual weight (see below) and each element appears as strong (or weak) as the other elements on the page

Symmetrical balance: Similar objects evenly distributed across a page, screen, or element

Asymmetrical balance: Dissimilar objects but of equal visual weight distributed across a page, screen, or element

Left: a symmetrically balanced wireframe; right: an asymmetrically balanced wireframe
The wireframe on the left is symmetrically balanced because the elements are similar and are evenly distributed across both vertical halves of the page. The wireframe on the right is asymmetrically balanced because some elements are not the similar to their counterparts on the other side of the page, yet have similar visual weight. For example, the button in the top right (identified by the red arrow) is smaller than the button in the top left, but it is a darker color and has high contrast with the page background, which increases its visual heaviness and makes up for its smaller size. The top right button draws attention while still maintaining visual balance overall. The images and text blocks are different, but are also balanced in visual weight because the text is highly dense that balances with the low-density images. Both types of blocks are also equal in size.

Visual weight: how prominent an element appears compared to everything surrounding it

The more visual weight an element has, the more it draws the viewer’s eye. Weight is typically influenced by one or more of the following visual attributes: contrast, size, density, texture, color, and negative space. The more distinctive the visual attributes are, the greater the visual weight will be.

Increasing or decreasing visual weight of certain elements can help guide the eye toward high-priority details within a design.

Types of Images

Raster image (also known as bitmap image, including .JPG, .PNG or .GIF files): an image whose size is static and is composed of pixels (as opposed to vectors  — see below)

In essence, a raster image is a collection of individually colored dots which, from a normal viewing distance, appear as a single graphic. When a raster image is zoomed in on or stretched, the pixels are more defined and visible.

A raster image can be one of many different file types, however certain file types perform better than others in specific contexts. In UI design, for example:

  • .png files enable transparency while .jpeg/.jpg does not
  • .jpg files can often be smaller and quicker to load; however, image quality may also degrade when scaled

Vector image (including .SVG files): an image which can be scaled easily without losing accuracy or modified because the file contains mathematical calculations for every shape in the image

These are typically used for images that are not photographs, such as logos, icons, diagrams, or other graphics.

Raster Image vs. Vector Image
(Top) Zooming in on the top half of the letter “g” on a raster version makes the image fuzzy or pixelated. (Bottom) Zooming in on a vector version of the image preserves the image quality because the image infinitely scales according to the equations in the file.

 

Conclusion

Use this cheat sheet of terms to help your team help demystify visual design and the language communicating it. Cut the time and revisions spent on misunderstandings, and bridge gaps during the design process. 

 

References

Merriam-Webster Dictionary, "Saturation (definition)" (link)

University of Texas, "Multimedia Systems (Module 1 Lesson 2)" (link)

Phototraces.com, "Grayscale vs. Black and White vs. Monochrome: the difference explained" (link)

Tech Terms, "Pixel (definition)" (link)