Design score: what a visitor sees before reading a single word

Google reads code, a person looks at the screen. One pass captures your homepage on phone and desktop, then measures what decides whether a visitor stays: is the heading and the button visible before scrolling, is the text readable, do buttons look like buttons, does the design still work blurred and without colour.

Start free See all tools

Prikaz ekrana: Design — A screenshot from the tool — hovering stops the scroll

2: captures per pass — phone and desktop
0–100: design score, with history over time
8: first-screen checks

The problem: the site looks fine to you, the visitor leaves in three seconds

You know where the button is because you put it there. The visitor doesn’t. They open the site on a phone, see a big image and half a heading, cannot tell what to click, and leave. No code audit will catch that, because the code is correct. The problem is in what is seen.

How it works

One pass opens your homepage on a phone and on a desktop, exactly like a real visitor, and captures it: what is visible before scrolling and the full page. Over that capture and the page itself the tool measures:

First impression — the capture normal, blurred and without colour. Is the hierarchy visible even when the text cannot be read?
First screen — whether the heading, button, image and form sit above the fold; whether there is search, sticky navigation, dark-theme support and reduced-motion support.
Failing contrast — exactly which text, which colours, which ratio and what is required.
Buttons and CTAs — how many, how many different styles, how many above the fold, how many too small for a finger.
Palette and typography — every text and background colour, the number of different font sizes, a palette you copy as CSS.
Design score 0–100 with history, so you see whether changes helped.

Screenshot: Design — your site and competitors on phone and desktop, with the score and the remarks

What you get

A list of concrete remarks, not general advice. “No button above the fold on phone”, “footer text has contrast 2.8 where 4.5 is required”, “six different button styles”. That is a conversation you can have with a designer, or fix yourself in the theme.

Frequently asked questions

What do “squint” and “no colour” mean?

They are two filters over the capture. The blurred view shows what a visitor notices in the first second — if nothing stands out blurred, nothing stands out live either. The grey view shows whether the design works for someone who cannot tell colours apart, about eight percent of men.

Does this replace a designer?

No. It gives you measurable facts a designer usually has to defend by feel: how many button styles there are, which text fails contrast, how many different font sizes the page has, whether a button sits above the fold. With that list the conversation with a designer is shorter and cheaper.

What is the palette and “copy as CSS”?

The tool extracts every text and background colour from the page. When you see twenty instead of five you know why the site feels messy. One click copies the palette as CSS variables, ready to hand to whoever is tidying the site.

Is the capture made from scratch every time?

No. Captures and measurements are kept, so the score history shows whether you got better or worse after changes. You start a new pass whenever you want.

How much does it cost?

Design is part of the Pro and Business plans. One pass is two page loads, with no extra charge.

Works together with

The tools in Nokofy build on each other — here is what naturally goes with this one.

See your site through a visitor's eyes

One click captures the homepage on phone and desktop and returns a score with concrete remarks. Part of the Pro plan.

Start free See how it works

No card · No contract · Cancel anytime