Dashboards and Data Viz | Design

What are the 9 Principles of Design?

The 9 principles of design weren’t created for data gurus to build applications or dashboards; they’re the essential building blocks artists use to paint and sculpt. Still, the concepts behind these design fundamentals can apply to any medium, including the data visualization in your dashboard.

1) Balance

Balance Design Principles in Data Visualization

A design is balanced when the key visual elements (color, shape, texture, and negative space) are equally distributed across the frame (or in our case, the dashboard). This doesn’t mean each side of the design is an exact replica of the other, necessarily; you can achieve asymmetrical balance by offsetting larger charts and graphs with small elements.

Three types of balance in design:

  • Symmetrical – Each side of the dashboard mimics the other. This type of balance feels elegant, formal, and conservative.
  • Asymmetrical – Both sides are unique but carry a similar visual weight. “Heavier” elements jump out, while the “lighter” ones recede. This type of balance feels casual, free, and energetic.
  • Radial – A central object anchors the dashboard, with additional objects placed around it. This type of balance draws your eyes inwards to the center focal point.
data visualization concepts for design

Left to Right: Symmetrical, Asymmetrical, and Radial Dashboards

When thinking about balance, don’t ignore design elements that aren’t related to your data. This includes your dashboard’s logo, if you have one. Traditionally, the best places to put the logo are the top-left or bottom-right corners.

2) Emphasis

emphasis design

Emphasize important data by drawing the user’s attention to it using colors, size, negative space, or contrast. The goal of the principle of design emphasis is to ensure that users see the most important data first. In Western culture, people read from left to right, starting at the top of the page, which means you can emphasize certain data points by placing them where you know users will naturally look first: the top-left corner.

3) Movement

Movement principle of art

Photo by hannah cauhepe on Unsplash

Much like emphasis, the movement principle draws the viewer’s attention in a certain direction. Ideally, your design should mimic the way people read, in an “F” pattern, starting at the top of the page, moving across it, and then down.  You can also create movement across your dashboard by using complimentary colors to pull the user’s gaze across the page. Though this concept of movement is, ironically, typically applied to static images, a dashboard software that employs animation and interactive intelligence serves this principle nicely.

4) Pattern

Pattern Design Principles in Data Visualization

Photo by Dmitri Popov on Unsplash

It’s a pretty simple concept: repeated objects create a pattern. When it comes to designing a dashboard, patterns are ideal for displaying similar sets of information, or multiple sets of data that equal in value. If you have several sets of similar data and want to avoid emphasizing one over the others, establish a “pattern” by using similar objects, colors, and chart types to display the information. Disrupting the pattern can also be effective; an anomaly in an established pattern naturally draws curiosity.

5) Repetition

Repetition Design Principles in Data Visualization

Photo by Marvin Ronsdorf on Unsplash

Artists use repetition to make their work look “active.” While you don’t want to overwhelm users by making your dashboard appear too busy, you can communicate relationships between sets of data by repeating chart types, shapes, or colors. Simply put, repetition tells your audience “Hey, these two things have something in common.”

Read next: The Art of Data Storytelling

6) Proportion

Proportion Design Principles in Data Visualization

In a piece of art, proportion involves the size of each object. If you’re drawing a person next to a house, the house is going to be bigger because, well, that’s the way houses are. In data visualization, proportion is twofold: it can indicate the importance of data sets, along with the actual relationship between numbers. If you want to emphasize the importance of a specific data set, make it bigger. Additionally, make sure each chart accurately reflects the relationship between the numbers in it. (If a slice of a pie chart is labeled 45%, it should actually take up 45% of the graph.)

7) Rhythm

Rhythm, which is closely related to movement, is one of the vaguer principles of design. Generally speaking, a design has proper rhythm when the design elements create movement that is pleasing to the eye. If the colors, shapes, or other characteristics of the dashboard create a sense of visual “choppiness,” consider rearranging them so the user’s eye moves across the data smoothly.

8) Variety

Variety in color, shape, and chart-type is what keeps users interested and engaged with your data. If your dashboard is boring, chances are you need to add a little variety. At first, variety and balance may seem mutually exclusive; in reality, the key is finding ways to visually balance your data without using the same design elements too many times. The end result is a dashboard that is not only interesting, but harmonious. Including more variety in your design can actually increase the amount of information that can be recalled by the viewer, but beware; there is a point of diminishing returns. When everything is different, the whole seems to blur and important details can be overlooked.

9) Unity

Unity Design Principles in Data Visualization

Much like balance, unity ensures that every part of your design is congruent. This gives your dashboard the impression of having an overarching “theme” and it will happen naturally if you’ve already implemented the other core principles of data visualization. If your dashboard doesn’t feel unified, revisit the other eight design principles and make sure you’re employing them.

Final Note: User Experience and User Interface – What’s the Difference?

If you’ve spent much time in software or web design, you’re probably familiar with user experience and user interface, commonly referred to as “UX” and “UI,” respectively. These concepts are what make a program, website (or in your case, dashboard) useful and beautiful. While UX and UI are closely related, they are not synonymous, so it’s important to understand the difference between them. In short, user experience delineates function, while UI determines the aesthetic of your dashboard.

Think of it like this: If your dashboard is a car, user experience is the engine and user interface is the paint job. In other words, a dashboard that works but isn’t easy on the eyes might have great UX qualities but lack the right visual elements to make it appealing. Conversely, a dashboard that looks great but makes it difficult for users to find what they need probably has stellar UI, but lacks a fully thought out UX component.

How do you use the 9 design principles in your data reporting? Tell us about your favorite dashboard design elements by commenting below or drop us a line on Twitter @iDashboards!

Post Series: Design
Alternative Text

Melissa Anderson Senior Graphic Designer

Melissa Anderson is a Graphic Designer with over a decade of experience in the field. She loves drawing sophisticated doodles, hanging out with her deaf pup Betty White, and riding her bike through the city she calls home, Detroit.

Get the Guide - Psychology of Data Vizualization

Get the Guide Fundamental Design Principles for Dashboards

Even if you’re not the artistic type, this guide will have you thinking like a graphic designer and making informed choices that support your data narrative.

Comments

  1. Regarding UX and UI: I’ve seen it explained this way before (UX is the functionality and UI is the look and feel), but this isn’t really accurate. UX is really anything that involves a user’s experience with a product or brand. UI is part of UX and is not just the paint color of a car, but the door handle, the nobs, the dash, etc. User Interface is how the user interfaces with something.

    1. This is an interesting perspective – Experience as the larger category and interface as a component of that. Thank you for sharing!

Your email address will not be published. Required fields are marked *