Use unity and variety in mockups
In the course video, you learned about how 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.
By relying on a design principle like unity, UX designers can communicate a single idea using unity between the different elements in a design. This can often 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.
Let’s explore a couple of real-world examples of unity and variety in action.
Unity
Your design is much more than elements on a frame. 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.
As you start thinking about unity for use throughout your products, there are a few things that you can look for:
- How elements align with each other
- The shape of elements
- Continuity within text elements
You can see those highlighted in the elements of the YouTube Music app below:
How elements align with each other
The way elements take up space within an app is just as important as the designs themselves. If you look at the example highlighted on the left, you’ll see that YouTube Music app shows app videos and favorite artists. Videos are rectangles that take up the entire width of the screen, and the Favorites are circles that have a different width. These two red shapes overlaid on the app are the same size. These red boxes show that these elements align with one another not because of the shape, but because of the unity within how much space they occupy on the screen.
The shape of elements
You’ve already learned about how element shape can use proportion to improve the way that users interact with your designs. Now you get to see how the shape of elements can improve the unity of the designs on the YouTube music app. On the second screen, you can see how the playlists boxes have the same scale, proportion, and size. These red squares are all the same size. There are many different principles happening on this screen of the app, but there’s no doubt that the design of the boxes makes this design feel clean, organized, and easy to navigate.
Continuity within text elements
Previously in this course, we talked about the importance of choosing a font, font color, and font size. You can see how text within the YouTube Music fits together and improves the unity of the designs. On the third and final graphic above, you’ll see that there are two text element types highlighted: section headings and descriptions. The section headings have the same color, the same font, and the same alignment. The descriptions also share the same color, the same font, and the same alignment, even when the descriptions are longer than the allowed space for the descriptions. All these choices contribute to keeping the app flow unified. Each element, text included, has a place, and it never breaks out of the space.
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.
Variety
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.
The Google Photos app features one solution for implementing variety into its design.
You’ll notice the variety with the size of the images above. The designers at Google Photos could have chosen to maintain the typical square grid representing the images throughout this collection of photos. Instead, the designers chose to have some images keep their original dimensions as rectangles. These rectangles are interspersed among the square image in an aesthetically pleasing way. This variety within the images keeps users engaged with the app.
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. Are there any areas of your mocks that you feel are too repetitive? Think about what you’ve learned about variety and try something a little bit different.
Thinking of your overall product design
It’s a great idea to think about 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 understand how the principle behind unity works in graphic design and how you can apply it to your designs, check out a video from DesignMantic: What is Unity? Then, understand how one UX designer realized that variety could improve the design of their product by reading an article from UX Collective: Variety: the salt of design.
Sources: Google UX Design Professional Certificate
Coursera | Create High-Fidelity Designs and Prototypes in Figma
