Proportion

The relative size relationship between elements that creates balance in a design.

stellae.design

Design Principles

Proportion refers to the size relationship between elements in a design. It determines how parts relate to each other and to the whole. Good proportion creates a sense of harmony — things 'feel right' even if users can't articulate why. In UI design, proportion affects everything from button sizes relative to text, to image aspect ratios, to the relationship between sidebar and content areas. Mathematical systems like the golden ratio (1:1.618), the rule of thirds, and modular scales provide frameworks for proportional relationships that humans find inherently pleasing.

Why It Matters

Proportion governs the relative size and scale relationships between elements in a design, directly influencing hierarchy, readability, and the overall sense of harmony. When proportions are intentional, users intuitively understand which elements are most important and how content is organized without needing explicit labels or instructions. Poor proportion creates visual tension, undermines hierarchy, and makes interfaces feel amateurish or untrustworthy, even when users cannot articulate exactly why something feels off.

Real-World Examples

Modular type scale in a design system

A design system defines a type scale with a 1.25 ratio, producing sizes of 16px, 20px, 25px, 31px, and 39px. Every heading, body, and caption size is derived from this single ratio, creating a proportional rhythm that feels cohesive across hundreds of components and pages. Designers and developers share the same scale tokens, ensuring that the proportional intent survives implementation.

Card grid with proportional image-to-text ratios

A recipe website uses a consistent 3:2 aspect ratio for card images and allocates two-thirds of the card height to the image and one-third to the text summary. The fixed proportion ensures visual consistency across a grid of varied content, creating a scannable and pleasing layout. Users can quickly compare recipes because the proportional structure is predictable.

Counter-example

Disproportionate hero section on mobile

A landing page hero section that occupies 80% of the desktop viewport is not adjusted for mobile, causing the hero image to push all meaningful content below the fold on smaller screens. Users on phones see only a massive image and a headline with no indication that there is more content below. The desktop proportions were treated as absolute rather than responsive, breaking the experience on the most common device class.

Role-Specific Guidance

Common Mistakes

• Designers often establish beautiful proportions for a single breakpoint and assume they will translate automatically to other screen sizes, resulting in elements that feel oversized on mobile or lost on large monitors. Another frequent error is mixing proportional systems — using an 8-point grid for spacing but arbitrary sizes for typography — which creates subtle disharmony that users feel but cannot name. Teams also sometimes ignore the proportional relationship between interactive targets and their labels, creating tap targets that are too small relative to the text they contain.