What a visitor should see first on your home page
A visitor decides whether to stay on a page before they scroll. Home page design above the fold is about that first screen: it has room for very little, so what goes in it matters.
What does "above the fold" mean?
It is the part of the page visible without scrolling. The term comes from newspapers folded in half on a stand, where only the top half could be seen. On a site the fold is not a fixed line: it falls in a different place on every phone and every monitor. So the aim is not to cram things above an exact height, but to make the first screen do its job on any device.
What must the first screen say?
Three things: what this is, who it is for, and what to do next. A headline that a stranger understands without context. A line beneath it that adds what the headline could not. One clear button. If someone reads only that and leaves, they should still be able to tell a friend what you do. Clever slogans that need explaining fail this test.
What should the main image do?
Show the thing. The product, the place, the person, the result of the work. A photo that could appear on any site in any industry adds weight to the page and nothing to the message. If you have no strong image yet, a clean first screen with good text is better than a generic picture. And check that the headline stays readable on top of the image on a phone.
How many buttons?
One main action, and at most a quieter second one. "Request a quote" beside "See our work" gives a ready visitor and a curious visitor each a path. A row of buttons of equal weight gives nobody a path. The main button should say what happens when it is pressed, in the words your customer would use, not "Submit" or "Learn more".
What should stay out of the first screen?
Sliders that rotate several messages, since visitors often see only the first and the movement distracts from it. A welcome paragraph about how glad you are that they came. Pop-ups that appear before anything has been read. The company history. Long menus with every page in them. All of these have a place lower down or elsewhere, or no place at all.
What comes right after it?
The answer to the next question in the mind of the visitor, which is usually "can I trust this?" So proof comes second: work you have done, clients who agreed to be named, a clear description of how you work. Then the services or products in more detail, then a way to get in touch. The first screen earns the scroll; the rest of the page has to reward it.
How I handle it
I draw the first screen in Figma for both phone and desktop before any other part of the home page, because everything else follows from it. You see it with your real headline and your real image, and you approve the whole design before the build. Afterwards you can change the headline, the image and the button text yourself from the dashboard. Send me one sentence that says what you do and for whom, and we will start from there.
New articles every day on our Facebook page: Learn with MK
Have a project in mind?
Tell me what you are building and I reply within 24 hours.
