How to Use Visual Variables to Emphasize Elements in a Diagram

In graphic design, there’s the concept of visual variables. For each element of a design, you can set its: Position, Size, Orientation, Hue, Value / Brightness, Texture / Pattern, and Shape.

By varying these variables between elements, you impart information. For example:

  1. Elements of the same color should be related in some way.
  2. Elements of different colors, but the same hue, might have a more broad relation.
  3. Elements that are close together should have a relationship related to location. Ones that are further apart should be further in that location.

You can learn more about this in these two books:

These variables also apply to diagramming. Maybe even more so because the entire point of a diagram is to impart information, where in a graphic design piece, like a poster, you have other considerations.

For example, in this C4 Context Diagram

  • Blue hues are for things that are internal to the system
  • Gray hues are for external elements
  • Dark values are users, lighter values are for software
  • Figure shapes are used to indicate users

In this UML Class diagram:

  • Hue is being used to indicate library elements (yellow) vs. classes in our system (cyan)
  • Lighter colored boxes are tests and the darker one is a class in the product

So, if you want to make an element more prominent, you could use a subset of the variables to do that:

  1. Use position to set it in the center with other elements around it
  2. Use size to make it bigger and other elements smaller
  3. Use rotation (sparingly) to make an element stand out as compared to others
  4. Use a different hue for the most important element
  5. Set its brightness at the extreme (darkest or lightest)
  6. Give it a distinctive pattern
  7. Give it a distinctive shape

In standardized diagrams or in editors that impose a layout algorithm, you might have limited control of all of the variables, but since there are so many options, there is usually something you can do.