How to design a landing page: first screen, sections and the button

Step 1

The visitor, their question and one action

How to build the grid and the responsive layout and hand the design to a developer is covered in Web design for beginners. This guide is about something else: making people understand the page and press the button. Start with three lines of text, before Figma:

• •who arrives: for example, someone who googled “pottery classes for adults in Lviv”;
• •with what question: is it for me, how much, when, where, is it hard for a beginner;
• •one action: book a trial class. Not “subscribe, call and download the catalog” all at once.

💡 For practice, take an imaginary but realistic brief: a pottery studio, English classes, a seasonal event in your city. Clearly mark it as a practice project in your case study.

Step 2

The headline and the first screen

People decide very quickly whether to stay. NN/g shows that people do scroll, but they still look more at the part of the page visible without scrolling than at what's below. So the first screen has to answer “am I in the right place?”. If the page receives ad traffic, this matters to Google too: in Google Ads one component of Quality Score is landing page experience, meaning how relevant and useful the page is to people who click the ad.

• •the headline repeats the gist of the person's query in their own words: “Pottery for adults in Lviv: your first class, no experience needed”;
• •the subheading is one or two sentences: who it's for and why it's useful;
• •the main button uses a verb that describes the result: “Book a trial class”, not “Learn more”;
• •the visual shows the product or the process itself, not an abstract stock image.

💡 Check button and text contrast against WCAG: at least 4.5:1 for regular text. Save the accent color for the main action.

Step 3

Sections as answers to doubts

Write down every question and doubt that could stop someone before the button, and order them from most to least important. Each doubt becomes a section. NN/g research shows that people scan text, so section headings should carry the gist: put the most important words first, so that even the first two words tell people what the section is about. Typical doubts and sections:

• •“what exactly do I get?”: what happens in the class, the course or the service, step by step;
• •“can I do it?”: who it's for, what to bring, what happens if it doesn't work out;
• •“how much and when?”: price, schedule, address or format. If you can't show an exact price, explain what it depends on and how to find it out;
• •“can I trust you?”: reviews, photos from classes, examples of work. Only real ones: invented reviews and numbers destroy trust in the page and in you as a designer;
• •small remaining questions go in an FAQ section, and at the bottom, the button again.

Step 4

The button and the sign-up form

The weakest spot of many landing pages is the form. NN/g has collected well-tested recommendations for web forms, and they work the same way on a landing page:

• •short: only the fields you can't process the request without. Every extra field is another reason to change their mind;
• •one column, with the label directly above the field;
• •don't replace labels with placeholder text inside the field: NN/g explains that it gets in the way of checking and fixing what was entered;
• •explain formats up front, for example for a phone number;
• •errors are specific, next to the field, marked not only in red, and the entered data isn't wiped;
• •after submitting, a screen or message: what happens next and when they'll be contacted.

💡 A button repeated at the bottom and after key sections should lead to the same action with the same text. Different wording makes people wonder whether it's the same thing.

Step 5

Speed and testing with people

The best first screen won't help if the page loads slowly. Google's web.dev recommends that the largest element of the first screen (Largest Contentful Paint) appears in 2.5 seconds or less. For a designer this means heavy photos and video on the first screen are questionable, and images need to be compressed. Then test for clarity:

• •show someone the first screen for 5 seconds and take it away: “What is this page about? What can you do here?”;
• •give a task for the whole page, “Find the price and book”, and watch silently where they hesitate;
• •check the page on a real phone, not only in a browser window on your monitor;
• •change one thing at a time and test again.

💡 For inspiration, see the AI landing page challenge in our community. And show your first screen there for feedback: “what did you get in 5 seconds?” is the most useful question for a landing page.