Unity and Variety in Mockups

The concepts of unity and variety can be incorporated into the designs that you create to keep the attention of users and improve their engagement with your product.

Unity measures how well design elements work together to create a consolidated design idea.

Variety refers to diversifying the elements in your design to break up monotony and create visual interest.

A design principle like unity helps UX designers to communicate a single idea using unity between the different elements in a design. This can be the difference between okay UI design and amazing UI design! Using variety allows designers to use different, but similar, elements to keep the attention of their users. Repetition is a great tool for UX designers to use, but too much of it can exhaust the user and lead to them disengaging from the product.


Unity is how all of those elements come together to help users as they meet the goal you’ve established for your product design. You can think of it as all of the elements unifying together to paint the design that you’ve been imaging as you build this mockup.

What you can look for when incorporating unity for use throughout products:

  • How elements align with each other
  • The shape of elements
  • Continuity within text elements

Check out Mac App Store uses Unity in their design.

How elements align with each other

The way elements take up space within an app is just as important as the designs themselves. You can notice what is going on in the two red box in the image. The App Store’s interface uses three columns to organize the information, one with large image and another one with small logo and text. The content is different from each other, but the elements align with each other really well because of the unity within how much space they occupy on the screen.

The shape of elements

Element shape can use proportion to improve the way that users interact with your designs. You get to see how the shape of elements can improve the unity of the designs on the App Store. The proportion of the app logos are the same, which makes the design look clean, organized and easy to navigate.

Continuity within text elements

Pay attention to how text elements are repeated and conitnued through out the App Store. For instance, the header of each box has same fonts, font color and font size. It enhances the unity of the design and feel pleasant to read and follow. The headers also give users a sense of emphasis of the contents from the rest.

Applying unity to your mocks

As you think about unity in your product design, think about the goal statement you’ve created. Now think about all of the elements you are considering adding to your design. How is every single element that you’re creating working to meet that goal? If you can’t answer that question, it might be time to reconsider the purpose of the element in your design.


Your users’ interest in your designs often relies on how well you present the elements to them. As a UX designer, you will likely work on some truly exciting projects, but you’ll also work on run-of-the-mill (some might even say boring!) products. In situations like that, it’s important that you understand how variety can improve the way users interact with your product.

As you can see from the App Store design above, there is a variety in the design. There are big images and small logos along with different fonts and colors. It is no mistaken about the intention of the design in creating a sense variety. Notice that the variety is minimal and consistent through out the design. We don’t want too much variety in the design as it confuses the users rather than enchancing the user experience.

Applying variety to your mocks

Part of becoming a successful UX designer is finding ways to keep users excited about your product. Even if that product isn’t very exciting! Applying some variety to your elements can go a long way towards keeping your users interested in the design you’ve created.

Thinking of your overall product design

It’s a great idea to think principles like unity and variety early on in the design process. Incorporating these concepts as you work can help you create truly engaging products that ensure users continue to interact with your product design.

To learn more on these two concepts:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: