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

Proportion design principle

Proportion design principle Bad Practice
Proportion design principle Best Practice

Proportion indicates the relationship between various elements' sizes. The larger the element, the more important it must be. Good proportion adds harmony, symmetry, or balance to design.

Consider the following best practices for effectively applying proportion in the design of interfaces:

  • Use a grid system: By using a grid, you can ensure that your elements are proportionally spaced and aligned, which creates a more cohesive layout.
  • Use a consistent scale: This means that related elements should be sized relative to each other, creating a sense of visual unity. For example, when establishing a typography hierarchy, you can make the headings 1.5 to 2 times larger than the body text.

When the difference between elements is too large, like in the wrong example, the composition lacks harmony. In turn, when elements look almost equal, the design feels boring and monotonous.

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