Unity Principle of Design [Infographics Included]

What is unity in design?

Unity in design means creating a sense of visual similarity between different elements in a composition. It unites all the elements used in a composition and balances them with each other to create a sense of visual similarity.

In this article, we’ll be talking about unity and its example with some infographics to better understand the topic. Let’s dive into it straight away.

Introduction

Essentially, unity refers to the merging of all things that come together while ignoring their distinctions.

In design and art, unity equals harmony and balance between the elements used in a composition. It provides a constant sense of visual familiarity to the users. A basic example of unity in design can be seen in Ugmonk’s site. Ugmonk’s homepage has an image of t-shirts on a wardrobe. The background and all other supporting elements create a sense of unison as if it really is a real-world wardrobe.

---

What is the importance of unity in design?

Unity is best applied to create consistency in design.

Let’s assume we’re working on a new project and we need to choose our brand colors. Instead of using random colors, we might want to use an analogous color scheme to give the final design a feeling of consistency and cohesion.

Lack of unity in design would make the composition disarranged and disorganized, further proving it to be an important aspect in design.

For me personally, designers who are just getting started should invest and focus on achieving unity in their designs first. Only then would it be easy for designers to get more into advanced implementations like variety. It is the one area that can visibly differentiate a good designer from the rest of the crowd.

Unity is an important aspect in design and its importance is needed to achieve the completeness of a product. Some of its importance are listed as:

• It emphasizes your concept and theme and helps communicate your message to your reader.
• It brings wholeness to the entire design to bring balance and visual comfort to your users.
• It leads to order and organization between the design elements and lets the designers offer creativity to their work.
• It guides the designer on how to use all the other principles to achieve visually pleasing compositions.

---

How to achieve unity in design?

To create unity in a design, each element is created to support the other. We use different design principles to achieve unity in design:

• Repetition: Repetition is the use of similar or connected elements. It works with patterns to make the artwork active and give a sense of familiarity to the users. It is because repeating similar components will make them look related to each other.
• Balance and alignment: Elements that follow a common axis and bring equilibrium to the composition creates unity. Design with balanced visual weight on either side of the imaginary axis will make it related to each other.
• Proximity: Elements that are closer to each other are most likely to be perceived as elements with common properties. It goes hand in hand with repetition. Explore more on this with the article “Gestalt’s design principles: Proximity”.
• Contrast: Contrast can be used in interesting ways to add more dynamics to a unified design. It can be applied using color, typography, alignment, or some other combination.

---

Examples of unity in design

Unity is easier to spot once you know what to look for. Here are three places where you meet it every day.

A pricing page. Three plan cards sit side by side. They share one corner shape, one gap between them, one size of plan name and one style of button. Only the middle plan has a colored button. Because everything else matches, that one difference tells you where to look.

Look closer

Show what repeats

Three plan cards side by side. Each has a name, a price, two feature lines and a button. The middle plan’s button is green and the other two are dark.

A series of book covers or posters. The grid, the type and the spot for the logo stay fixed, and only the picture changes. No two covers are the same, yet a shelf of them reads as one collection. This is repetition used on purpose.

Look closer

Show what repeats

Four book covers on a shelf, in coral, mustard, ink and green, each with a different shape as its picture. Every cover has two title lines at the top and a small round logo at the bottom.

A settings screen in an app. Every row is the same height. The icons are the same size and sit on the same left edge. The labels are all one size. You never think about any of it, and you only notice when one row is a few pixels off.

Look closer

Show what repeats

A phone settings screen with five rows. Each row has a colored icon on the left, a label in the middle and a switch on the right, and the switches are a mix of on and off.

All three do the same thing. They repeat a few properties, such as fill, corner shape, spacing and alignment, and then let one thing change. That is the order to work in: get unity first, then add variety on top of it.

To see what each property does by itself, use the buttons below. The same four cards are shown every time.

Let the cards agree on

Nothing Fill Corner shape Spacing All three

Four cards with four different fills (coral, mustard, ink and a plain outline), four different corner shapes, and gaps, tops and heights that all disagree. Nothing is shared, so they read as four unrelated things that happen to be near each other.

Try each setting, then “All three”. No single property makes the cards feel finished on its own. It takes the set.

---

Try it yourself

Here are six shapes with nothing in common. They have four colors, six forms and six sizes, and they sit at random angles. Your job is to make them one thing.

You cannot change the shapes. You can only glue them together, and every glue below is a principle from this article.

Color

Keep their own All ink All coral All green

Glue them with

One baseline, even gaps A line through all of them A shared ground

Six shapes with nothing in common: four colors, six different forms, six sizes, tilted every way and scattered. They read as six separate things.

Turn them on one at a time. One color is repetition. The baseline and the even gaps are alignment and proximity. The line is continuation, and the ground is common region. Two of them are often enough. When all four are on, the shapes are so tightly bound that there is nothing left to look at.

In order to establish unity in your design, the best way is to continuously take a step back along the process and analyze whether or not its core is unified. If you’re a designer, it’s a good idea to have your friends or coworkers review your work from a unity standpoint before making a striking change.

The next step to get further into unity and how it can be achieved with the other principles of design would be to understand ‘variety’. Visit my article on “Variety- Principles of Design” where I explain how unity can be achieved through variety here.

Also, check out my article on the 11 design principles which explains the guidelines on how to use visual elements to create a composition. I would also suggest you read up on the Variety principle of design to better understand how these two principles are interconnected.