Category
Visual Design

Published
Feb 1, 2015

Updated
May 9, 2017

Read
5 min

Tweet
Share
Comment

The Anatomy of Visual Design - Elements, Principles, and Constructs

Article Purpose

This article has three core purposes. The first is to communicate what Design is at its core, to clear the ambiguity of its meaning. The second is to communicate what good design is in general, but specifically what good visual design is. The third purpose is to describe The Anatomy of Visual Design to reveal how good visual designers leverage its components to visually communicate.

What Design Is

Design is a loaded word. On the surface, it is both a process and a result. At its core however, design is a single thing.

Design is an accumulation of decisions.

That’s it. Both the process of designing something and the end result of that process are an accumulation of decisions. These decisions are intentional or unintentional. They are informed or uninformed. A good designer is an individual whose decisions are intentional and informed. A bad designer is an individual whose decisions are unintentional and uninformed. Just as we all breathe, we are all designers. Not all of us are good designers however.

What Good Design Is

A good design provides what is needed and nothing more. A good design always requires a good designer. However, a good designer is not synonymous with a good visual designer. This may seem counterintuitive, but it is a reality that makes sense once you understand the Five Design Decision Styles. Jared Spool describes each style in Anatomy of a Design Decision:

  • Unintentional
  • Self
  • Genius
  • Activity Focused
  • Experience Focused
anatomy of a design decision chart

The style used by a designer is dependent on his/her design experience, the desired outcome, and the target audience. Unintentional, Self, and Activity Focused styles are susceptible to good design by bad visual designers. A good example of this is when a developer (with poor visual design skills) creates a utility/dashboard for visualizing information and providing quick access to common functions. It is a good design because it provides him/her (and potentially team members) what is needed and nothing more. Genius and Experience Focused styles are used by good designers and good visual designers. Self and Activity Focused styles are also used by each, but never the Unintentional style. The style a designer uses always depends on his/her design experience, the desired outcome, and the target audience.

What Good Visual Design Is

A good visual design provides what is needed and nothing more, it simply inherits from good design. In addition however, good visual design is informed through The Anatomy of Visual Design:

  1. Elements
  2. Principles
  3. Constructs

Through the application of these three components, a visual designer can influence the meaning a viewer extracts from a visual design. A good visual designer is cognizant of their application of these components, a bad designer is not. Either way, the use of these components has the power to evoke meaning for a viewer. A good visual designer knows this and applies them with intention. Each component builds upon the previous.

Elements

There are eight elements that comprise The Elements of Visual Design:

  • Point
  • Line
  • Shape
  • Space
  • Color
  • Value
  • Form
  • Texture

Below is a helpful animation building through each element. It can be used as a memory aid.

Elements of Design Animation Helper

Each element itself is meaningless. Only when a viewer is added to the equation can meaning be extracted. The potential meaning is very limited however. To break this limitation, the elements are combined in interesting ways. These combinations are known as The Principles of Visual Design. When a visual designer begins to use these principles (intentionally or unintentionally), a design has the potential to better communicate meaning to a viewer.

Principles

The Principles of Visual Design results from the combined use of the elements. There are generally eight principles (though names and principle count are debatable):

  • Balance
  • Scale
  • Rhythm
  • Contrast
  • Pattern
  • Unity
  • Emphasis
  • Variety

Leveraging the principles enables a visual designer to suggest meaning through organization. This organization helps to direct a viewer’s eyes, suggest an order of importance, and to provide an overall aesthetic. When communicating specificity however, a visual designer will use The Constructs of Visual Design.

Constructs

The Constructs of Visual Design embodies the elements and principles in an effort to communicate specific structure, ideas, and messages. With the elements as primitives and the principles as an organization of those primitives, the constructs are the compound results. The constructs give visual designer’s the greatest chance for successfully communicating through a design. There are three core constructs:

  • Grid
  • Imagery
    • Photography
    • Iconography
    • Illustration
  • Typography
    • Text Style
    • Text Content

The lack of a grid can be useful, but more often than not a grid will exist in a visual design. A grid instantly provides the scaffolding, scaling, and patterns of space in which imagery and typography will live. Imagery in its various forms and typography are the core communicative components of a visual design. Imagery typically communicates faster than typography, but the content of text itself has the least likelihood of misinterpretation.

Conclusion

It is important to remember that the viewer is the one who extracts meaning from a visual design. As visual designers, we only influence what a viewer may extract. Design with intention and design with an informed perspective.