A founder sends a screenshot of their landing page and says "it looks unprofessional, can you fix it?" That sentence contains zero actionable information. Your job is to translate a feeling into a diagnosis, and a diagnosis into fixes a developer can ship this afternoon. This lesson covers the mechanism for doing that from a single screenshot, with no access to the live site or its CSS.
What "visual hierarchy" actually means
Visual hierarchy is not an opinion about what looks nice. It is the literal, physically-forced order in which a human eye moves across a page before conscious thought kicks in. Eyes do not scan democratically β they are dragged toward whatever has the most size, the most contrast, the most isolation (whitespace), or the most conventional position (top-left in LTR reading cultures, center-of-viewport for hero sections).
Business β why this matters more than the business's own priorities. A founder will name five things as "most important": brand name, tagline, CTA, trust badges, founder photo. A visitor's eye can't process five equally-weighted priorities β it picks one, within roughly 50 milliseconds, based purely on the layout's physical properties, not on the business's intent. If the founder's priority ("buy now") doesn't match what the layout physically drags the eye toward (a decorative background pattern), the page fights itself and conversion suffers regardless of how good the copy underneath is.
Technical β the four levers that create hierarchy.
| Lever | What it does | Failure mode when misused |
|---|---|---|
| Size | Bigger elements are scanned first | Headline and subheadline set at near-identical size β eye can't tell which one to read first |
| Contrast | High contrast (color, weight, saturation) pulls the eye; low contrast recedes | A pastel CTA button on a pastel background β technically visible, perceptually invisible |
| Whitespace (isolation) | An element surrounded by empty space reads as important; an element packed next to others reads as one of many | A CTA button crammed between three trust badges and a countdown timer β no isolation, no priority |
| Position | Top-left and dead-center-of-viewport get scanned first (LTR cultures); below-the-fold competes with nothing until the user scrolls | The one clear CTA placed in the page's third section, while the hero above it is visually loud but functionally empty |
Hierarchy is the composite of all four. A large, high-contrast, well-isolated, top-of-page element wins every time β that is the design goal for whatever the single most important action is (usually one CTA).
Diagnosing a weak hero section: the checklist
Run these four checks against the screenshot, in order. Note a failure the moment you find it β don't skip ahead.
- Count the focal points. Look at the hero only (the first viewport, no scrolling). List every element competing for attention: headline, subheadline, hero image, CTA button, badges, nav logo, background graphic. If more than 2-3 elements have comparable size/contrast/isolation, there is no hierarchy β there is a crowd. A hero should have exactly one dominant element (usually the CTA or the core value headline) and everything else visibly subordinate to it.
- Measure CTA-to-background contrast. Isolate the primary call-to-action button. Would it still be the first thing you'd tap if the page were rendered in grayscale? If the CTA's color only differentiates it via hue (e.g., a light blue button on a light gray background with near-identical luminance), contrast is failing on the one element that matters most for conversion.
- Check headline weight parity. If the H1, H2, and any hero subtext are set in similar font sizes and weights, the eye has no instruction on reading order. A real hierarchy needs a visible size/weight step-down: H1 clearly dominant, H2 clearly secondary, body text clearly tertiary.
- Audit whitespace around the CTA. Is the primary CTA touching or crowded by other elements (badges, secondary links, form fields, decorative icons) within roughly one button-height of padding? Isolation is what tells the eye "this is the one thing," so a crowded CTA reads as equal-priority clutter even if its color is technically correct.
Any single "yes" on checks 1, 2, or 4, or a "no" on check 3, is enough to explain a vague "looks unprofessional" complaint without needing more data.
The squint test
Run this before the full checklist β it either confirms the diagnosis or produces it outright.
Blur your vision β literally squint, or apply a heavy Gaussian blur (10-20px) to the screenshot, or shrink it to thumbnail size. Fine details (copy, icon shapes, exact colors) disappear; only large shapes, contrast blocks, and spacing survive. Ask one question: does the eye still land on one clear thing?
- Pass: one shape β usually a button-colored block β is unmistakably the brightest/largest/most isolated blob on the page. That is a working hero.
- Fail: two or three blobs of similar size/contrast compete, or nothing stands out at all because everything is medium-contrast and evenly distributed. That is the visual signature of "no hierarchy," and it is exactly what a founder is reacting to when they say a page "looks unprofessional" without being able to say why.
The test works because it approximates pre-attentive vision β the same window a real visitor uses before consciously reading anything. If the blurred version doesn't communicate "here's the one thing to do," the sharp version won't either; detail only adds information the eye already decided not to prioritize.
Whitespace signals confidence; clutter signals desperation
This is the mechanism underneath the checklist β worth stating explicitly, because it reframes "add more whitespace" from a taste preference into a trust argument.
Generous whitespace around a small number of elements implicitly says: we're confident enough in this one offer that we don't need five other things in case it doesn't land. A hero crammed with a headline, three trust badges, a countdown timer, a chat bubble, a discount popup, and a CTA implicitly says the opposite: we don't trust this one message, so here are six more, just in case. Visitors read that second signal as low-trust or low-budget β often unconsciously β and describe the result as "unprofessional," "template-y," or "spammy," even when every individual element is well-designed. Density itself is the tell, independent of any one element's quality.
Before/after: turning the diagnosis into fixes
Consider a hero (text-only description, no real image): a busy gradient background, a logo top-left, a bold serif headline roughly the same size as the subheadline below it in a different font, a product photo with a starburst "SALE" badge overlapping it, three payment-method icons in a row, a countdown timer, and a CTA button in a muted teal that closely matches the gradient's midtone β all crammed into one viewport with almost no padding between elements.
Running the checklist: check 1 fails (at least six competing elements), check 2 fails (teal CTA blends into the teal-toned gradient), check 3 fails (headline and subheadline are near-parity), check 4 fails (CTA touches the countdown timer with no isolation). The squint test confirms it β blurred, this hero is an undifferentiated smear of medium-contrast shapes with no single dominant blob.
The fixed version: solid neutral background (removes the competing gradient), headline set 2-3x the subheadline's size in a single consistent typeface, product photo kept but the starburst badge removed (badges are a competing focal point, not the value proposition), payment icons and countdown timer moved below the fold into a supporting section, and the CTA recolored to a single saturated brand color with no other element on the page sharing that hue β plus at least 40-60px of empty padding on all sides of the button. Squinting at this version, exactly one shape survives: the CTA button. That is a passing hero.
The three fixes to hand back
When a complaint arrives as "it looks unprofessional," respond with exactly three concrete, shippable changes, derived directly from whichever checklist items failed β not five, not a redesign brief. For the example above, that is: (1) recolor the CTA to a hue that appears nowhere else on the page, (2) remove or relocate the countdown timer and payment icons out of the hero into a section below the fold, (3) increase the headline-to-subheadline size ratio so there is an unambiguous first thing to read. Each fix maps to one failed checklist item, is independently shippable, and is defensible with the squint test as evidence β turning "it looks unprofessional" into a punch list rather than a debate about taste.