- Scale
- is a concept that’s used to explain the size relationship between a given element and the other elements in the design.
- to make the most important elements in a design bigger than less important elements, which helps create emphasis and contrast.
- Proportion
- is about the balance or harmony between elements that are scaled.
- 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.

Use proportion in your designs
- 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.
