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 design 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 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 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.

Scale can be used to draw attention to the important element in your design. Take a look at the Atlassian website below.

The hero image is above the Recommended reading is way bigger thant the images below. It shows the emphasis on its product offering that help power more than 200,000+ companies.

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 the giant dinosaurt’s arms are tiny compare to its body. In UX design, designer use proportion to create a subtle changes in its design so that the design won’t look boring to the users. It also highlights hierarchy and difference in elements.

In Jira website footnote, there is different proportion of the texts as you can tell. The bold, bigger, and uppercase letters are header, while the texts below it are elements. There is consistency elements in the four categories in its proportion for grouping purpose.

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.

Good luck!