▢ FOR WEBFLOW DESIGNERS
You control every pixel. But which pixels get looked at?
Webflow gives you the whole CSS surface — and no way to know where a first-time eye will land. The heatmap is the missing panel: scan any Webflow site, see the predicted attention, fix it in class-and-style vocabulary, re-scan.
Free · works on .webflow.io staging domains too
The 3 tells of a designer-built site
Award-site syndrome
Thin 200-weight display type at opacity 0.35 over a video: gorgeous on Dribbble, near-invisible to a saliency model — and to a first-time eye. Beautiful and looked-at are different properties; only one of them converts.
The interaction eats the message
Scroll-triggered reveals mean your value proposition doesn't EXIST until the visitor scrolls. The eye's first 3 seconds land on whatever is on screen at load — often a nav, a scroll hint and empty elegance.
Six sections, equal weight
Webflow makes consistency effortless: same paddings, same H2 scale, same card grids. The result reads as a rhythm with no crescendo — the heatmap shows six lukewarm pools and no peak. Something must win.
FIXES IN CLASS-AND-STYLE VOCABULARY
- • hero-heading: weight up (500+ for the key phrase), opacity to 1 — keep the elegance in the spacing, not in the transparency.
- • Load state: the value prop and CTA must be visible at 0% scroll. Keep reveals for section 2 onward.
- • One crescendo: pick the section that must win, give it the size/contrast budget you took from the other five.
- • Client work? The heatmap ends the 'make the logo bigger' debate — the data arbitrates, and the white-label report (99 €/mo) goes in your deliverable.
Beautiful is settled. Now measure looked-at.
Free scan, 30 seconds — staging or production.