Use scale and proportion in mockups

Scale and proportion are design concepts you can strategically incorporate in your mockups to help make a design visually pleasing and capture a user’s attention.

Scale is a concept that’s used to explain the size relationship between a given element and the other elements in the design. Proportion is about the balance or harmony between elements that are scaled.

UX designers often use scale to make the most important elements in a design bigger than less important elements, which helps create emphasis and contrast. Proportion helps UX designers make sure the size relationship between elements makes sense and that the elements on the screen are balanced against each other.

Implement scale in your designs

Scale is used to draw attention to elements and help users find those elements more quickly. They also help users understand relative size. Imagine you’re ordering a new pair of earrings from a local artist, but you can’t tell from the picture how big the earrings are. If the artist posts a picture of the earrings next to a common object, like a quarter, you’d get an idea of the scale. Check out the image below, and notice how the comparison of one thing to another helps clarify scale.

Or, check out the principle of scale in action in the Google TV app, in the image below. The top image, for “Love and Monsters,” is wider and larger than the row of movies below it, in the “Top picks for you” section. The use of scale in this design draws users’ attention to the featured movie (on top) first.

Use proportion in your designs

Proportion is all about how objects relate to each other. For example, one thing that people find funny about clowns is the size of their shoes. Their shoes are disproportionately large for the size of the clown’s body. Or have you ever seen a T-rex joke? They’re usually about how tiny the dinosaurs’ arms are for their giant bodies, making it hard for them to accomplish basic (human) tasks. T-rex arms are disproportionate compared to the size of their body.

But how do UX designers use proportion in the real world, aside from making jokes? Check out the image below for an example of proportion on a different screen of the Google TV app. Under the categories called “Romance TV shows” and “Mystery TV shows,” the images are rounded squares that are all the same size. However, under the category called “Popular family films,” the images are vertical rectangles, instead of squares! This subtle change in proportion highlights the difference between the categories: those that are in the “family friendly” category versus those that are not. In your own designs, you may find that subtle proportion differences, like this, are easy for users to pick up on while still keeping your design looking clean.

Creating a balance for your users

Now you know the basics of applying scale and proportion to enhance your designs. As you continue to create your designs and build your mockups, remember that these subtle changes, when done well, can easily inform the user of your app’s design. These principles will come in handy as you create your well-balanced, user-friendly mockups.

Check out this article by UX Planet to learn about golden ratio and how you can use ratio to your advantage in your designs: Golden ratio: Bring Balance in UI Design

Sources: Google UX Design Professional Certificate

Coursera | Create High-Fidelity Designs and Prototypes in Figma