Check my website design: first impressions

Design problems a visitor feels are mostly about contrast and order. A primary button in a pale color sits on a pale background, and a secondary link set in the same weight as body text competes with it. A large hero image can push the button below the first screen on a phone, so the visitor reads a headline and a picture and leaves before finding the next step. The owner sees the page they designed and reads the button first, because they know where it is. A visitor has no such reason, so the eye goes to whatever is biggest or brightest.

• Look at the first screen on a phone and find the main button without scrolling.
• Compare the button color with the background, and the link text with the body text.
• Count the things on the first screen that look clickable, and note which one a visitor tries first.
• Check that the headline says what the product is, not how it feels.

A stranger decides in a few seconds whether a page is for them, and that decision mostly happens before they scroll. A stranger looks at the largest element, then at the words near it, then at anything that looks like a control. The design is working when the first thing they read is the sentence that says what you sell, and the first thing they can press is the step you want. If the largest element is a decorative image, the sentence and the button come second, and many visitors never reach them. Check the first screen as a list of what gets read, in order, not as a picture.

A wrong version looks like this: the call to action is a pale blue label on a white card, with a thin outline and the same size as the paragraph beside it. The right version is a filled button in the one accent color, with text that contrasts strongly against the fill and room around it so it does not blend into the copy. Contrast checks are a fair start, but the visitor test is the real check, because a button can pass a contrast check and still read as a label to someone scanning a phone screen. Compare the button with the text next to it, on both sizes of screen.

A cookie banner, a newsletter popup or an animated hero can take over the first screen before a visitor reads a word. Owners rarely see these, because they have already accepted the banner, or the popup remembers they closed it. A visitor who has made none of those choices sees a panel covering the button, and may read nothing else. Open the site in a private window and look at the first screen before anything else has loaded, then note what covers it and whether the page can still be used.

Hero images, banners and font changes arrive in small updates, and each one can push the main button off the first screen on a phone. Rerun the same visitors after each design change, starting from the same page, and compare what each one noticed first. The second run answers the question you asked: whether the button is visible again, and whether the next step got reached.