The Visual Principle of Scale in User Interface Design

When looking at a visual design, you can usually immediately say whether it looks great or it feels a bit off. A few of us can actually verbalize why that is. 

Visual Design principles inform us how design elements like line, shape, color, grid, etc., go together to create well-rounded and thoughtful visuals. Designs that take advantage of these principles can drive engagement and increase usability. 

So, let’s talk about a commonly used principle: Scale

The principle of the scale we’re first using is relative size. And when we say relative, we mean how the size of one item relates to the size of another item, to signal importance and rank in a composition. 

Simply, more important elements in the design are bigger than ones that are less important. When something is big, it’s more likely to be noticed by your user. A good rule to follow when using this principle is to have three different sizes in your design, small, medium, and large.

Having this range of differently sized elements will not only create variety within your layout, which makes it interesting to look at, but also helps establish visual hierarchy. So let’s talk about a real-life example to help solidify this concept. 

On the iPhone, the platform Medium makes popular articles visually larger than other articles. The scale of these popular articles takes up almost half the screen, making these articles larger. So the scale directs users to potentially more interesting or current reads. 

When you tap into an article to read it, you can see how scale is used again. There are three different sizes we talked about. There’s the title that is large, the subtitle is medium size, and the body text is small size.

When scale is used properly and the right elements are emphasized, users will easily analyze the visuals and know how to use them. Using the visual principle of scale will help create well-rounded and thoughtful visuals.


1 Comment