Unity principle of design

Principles of design are widely-accepted notions that all designs must consider to offer an overall optimal user experience. These design principles not only apply to screen design but graphic design and physical products. The Unity Principle of Design is commonly known as one of the more complex principles and incorporates other, more basic design principles such as repetition, proximity, and alignment.

What is the Unity Principle of Design?

The Unity Principle of Design states that design elements should be both visually and conceptually harmonious. Unity can be construed in two ways:

Conceptual unity

In a nutshell, conceptual unity can be described as singleness, or the act of combining things for the user’s convenience. It’s best achieved by thinking about content and function. For example, if the content or functionality on one screen can be unified with another webpage, screen, or step in the user flow, this reduces the number of interactions required by the user to meet their objective.

For example, one FAQ entry about saving a file and another about exporting a file could be combined into a single FAQ entry. Though the user may not initially understand the difference between the two, they’ll likely end up wanting to read both.

Or, let’s say an action requires the user to be logged in. It would be more convenient to display the login and signup forms side-by-side—as opposed to displaying the login form by default, and having a link to the signup form.

Conceptual unity requires related actions to be grouped together in a natural, forward-thinking way.

Visual unity

Visual unity is best described as harmony, which is a design principle in its own right. It can apply to colors, using styles that work well together, and in some cases, repeating styles to maintain visual consistency.

For example, visual unity could be considered when choosing two different colors that need to complement each other well (harmony), or choosing the same color for two different buttons because they’re equally important (repetition).

Why the Unity Principle of Design is important

Designing with the Unity Principle of Design in mind has several benefits and can improve usability, visual hierarchy, brand identity, and the overall user experience.

User experience

When content is distributed across a large website that hasn’t been maintained properly, it’s very common for the user to find conflicting (or missing) information. By consolidating content and functionality onto fewer screens—without inducing cognitive overload—users can find the information they were looking for and complete their objective faster.

Conceptual unity on a larger scale is best considered in the very early stages of design, when the designer starts to think about sitemaps and information architecture.

Visual hierarchy

Unifying related elements with consistent styles (i.e. repetition) is a powerful way to instill visual hierarchy, letting users know when design elements or entire components are similar (i.e. a group of article cards), or when they’re of equal importance (i.e. a choice between two buttons). Even a lack of unity can communicate visual hierarchy (i.e. when one button is more important than—or unrelated to—the other).

Brand identity

Unity guides users on a visual and conceptual journey, allowing them to gradually understand the product without even trying. In its absence, users struggle to complete actions and understand simple elements.

For instance, if every button on a website was a different color, users would always have to read the UX copy to understand their function, inadvertently increasing their cognitive load, and leading them to think negatively about their experience. When designs are visually inconsistent, the user fails to resonate with the brand’s personality, and is less likely to remember—and use— the brand later.

Unity Principle of Design best practices

• By using repetition with design elements such as components or symbolic colors, the user becomes better at identifying what they mean each time they see them, thus reducing cognitive load. Consider creating visually consistent design elements when said elements are related to one another; this applies regardless of whether or not the elements are in close proximity.
• Proximity, which often goes hand-in-hand with repetition, also helps to create unity. Users understand that objects that are close together are related or similar.
• Alignment refers to aligning design elements on a common axis. Elements that are “lined up” are said to “follow on” from one another. For example, alignment (or the lack of it) can be used to illustrate the relation between different blocks of text.
• Singleness doesn’t always mean equality; in fact, design principles such as repetition are often meant to suggest choice amongst a group of options, each of which may have wildly different outcomes. Contrast, whether implied using color, typography, alignment, or some other slight variation, is what differentiates a variety of options.

Collaborate on your own unity rules

InVision Boards allow teams to collaboratively document design guidelines and visual examples of appropriate use-cases for certain design elements. These can be used as a set of “rules” for designers to live by when designing, such as what colors to use (and when), and how to think about design principles such as unity and repetition.