What You're Paying a Designer For

"You need a designer for your brand website" — true, but you'll hire better (and brief better) if you know what design actually does. Great web design isn't decoration; it's four measurable decisions about attention. Turn the dials on this 3D webpage and watch the design score react — every rule below is the reason a professional's work "just looks right."

Layout lab — drag to orbit the pageDesign score: 62/100
Padding between blocks. Cramped layouts read as cheap; extremes read as empty.
How much the action button separates from the page. WCAG minimum is 4.5:1 for text.
Heading-to-body size ratio. Classic scales: 1.25 (major third) to 1.618 (golden).
Balanced, but the call-to-action could pop more. Push contrast toward 70–85%.

The four principles behind the score

Visual hierarchy

Eyes enter a page in a predictable cascade: biggest, brightest, highest-contrast first. A designer decides the reading order before a single pixel is drawn — headline → proof → action. Eye-tracking studies (Nielsen Norman Group) show users form a layout judgment in about 50 milliseconds; hierarchy is what that judgment measures.

Contrast with restraint

One accent color, used rarely, is a weapon; used everywhere, it's noise. The classic 60-30-10 rule — 60% base, 30% secondary, 10% accent — is why the CTA dial above rewards strong-but-not-maximal settings. Accessibility isn't optional either: 4.5:1 text contrast is the WCAG AA legal floor in many jurisdictions.

Whitespace is content

Whitespace groups related items (Gestalt proximity) and signals confidence — luxury brands famously use more of it. Research on comprehension found generous margins and spacing can improve reading comprehension by up to ~20% (Lin, 2004). Cramming more above the fold usually communicates less.

Systematic type scale

Professionals don't pick font sizes one by one; they pick a ratio. Body 16px with a 1.25 scale yields 20 / 25 / 31 / 39px — every level visibly distinct, none arbitrary. When a site "feels off," mismatched scale is the most common invisible culprit. It's also why a good brief specifies hierarchy, not hex codes.

Enjoy this tool? Build your own with Super