Proportion is the size relationship between parts of a design and the whole they belong to — how a button's size relates to the card it sits inside, how a headline's size relates to the body text beneath it, how a logo's size relates to the header that contains it. Good proportion doesn't require any exotic ratio; it requires that every part's size make sense relative to its neighbors and to the container around it.
A Sense for "Right-Sized" Built from Constant Comparison
The visual system evaluates size almost entirely through comparison rather than in absolute terms — a shape looks large or small only relative to what surrounds it, which is why the exact same button can look appropriately sized in one layout and comically oversized in another. This relativity is also why proportion problems are so easy to miss in isolation: an element reviewed on its own, outside its actual context, gives no useful information about whether its size is right.
In Product Design
Proportion governs how large a hero image should be relative to the text block beside it, how much of a modal's width an input field should occupy, and how a logo should scale relative to the navigation bar that contains it as a screen resizes across devices. Historically, ratios like the golden ratio have been proposed as universally pleasing proportions, but in practice, consistent internal logic across a layout matters far more than hitting any specific mathematical ratio.
- A modal dialog where the input field is barely half the width of the modal itself, leaving an oddly empty gap beside it
- A logo that shrinks so aggressively on mobile it becomes nearly illegible, while surrounding navigation icons stay full size
- A hero image so large relative to its supporting headline that the text reads as an afterthought rather than the section's actual message
- An icon inside a button that's disproportionately large relative to the button's label, unbalancing an otherwise simple component
In each case, no single element is wrong on its own — the button, the icon, the image are all reasonably designed individually — but their sizes relative to each other are what create the sense that something doesn't quite fit.
How to Apply It
Evaluate every element's size in context, never in isolation, and check proportion at the scale of the whole composition rather than component by component. When something feels "off" but every individual choice seems defensible, check the size relationships between neighboring elements before changing any single one of them in isolation.
Why It Matters
Poor proportion creates a diffuse, hard-to-name sense that a layout is unbalanced or amateurish, even when no individual element would be flagged as wrong on review. Because the problem lives entirely in the relationships between elements, it's one of the easiest issues to miss when reviewing components individually rather than assembled together. A fast test: view the full composition zoomed out until detail disappears. Proportion problems, unlike most typography or color issues, often remain fully visible even at a tiny scale.
