<?xml version="1.0" encoding="utf-8"?>

Change scale to convey importance and create hierarchy

Change scale to convey importance and create hierarchy Bad Practice
Change scale to convey importance and create hierarchy Best Practice

In UI design, size doesn't matter as much as scale. Scale is an understanding of how an object's size relates to the size of other objects and the size of the space they are in.[1]

Imagine you want to send a picture of watermelon to your alien friend. How can you convey how big the fruit is? Place some other common fruits like oranges and apples next to it. Seeing them side by side, your alien buddy can easily understand that watermelons are quite large.

Scale creates a visual hierarchy among elements and guides users' focus. Bigger element size conveys higher importance. You must have noticed that popular images are sometimes larger compared to the others in galleries. In the example, the bigger size of the central photo not only emphasizes its value but also creates rhythm.

Pro Tip: Play around with the scale to see how it can change the mood, shift perspective, or ease the tension.

Improve your UX & Product skills with interactive courses that actually work