The key idea

A landing page helps a specific person make a specific decision. Its structure starts there.

A blank screen invites us to choose colors, move boxes and test headlines. At Umbral, we start with a conversation: what does the person arriving here need to understand before taking the next step?

Someone discovering a brand needs guidance. Someone comparing alternatives needs details. A visitor from a specific campaign expects to find the promise they just read. One opening cannot answer all three situations equally well.

Before the layout, the decision

Write the page goal as a verb and an object: request a proposal, book a demo, download a guide. Describe who benefits from that action and what they expect to find.

“Get more leads” is a business wish. “Help marketing teams assess whether this service fits their launch” describes a task the page can solve. Also list what you cannot yet claim: unmeasured results, unapproved testimonials and unconfirmed deadlines should not become arguments just to fill a design.

A message that makes sense on arrival

The first section should introduce the offer, its audience and the next step. It can be brief and distinctive while remaining clear. Read only the headline, description and button. If they seem to belong to different conversations, revise the message before adding another section.

For example, a campaign introduces a design service for launches. The landing explains what it includes. Its button says “Tell us about your launch”. These moments form one recognizable sequence.

Design starts working when each section answers the visitor’s next question.

A structure with a thread

Not every page needs the same sections. For a service that starts with a conversation, try this order:

  1. The proposition. What you do, for whom and why it deserves attention.
  2. The fit. Which situation you address and when it makes sense.
  3. The evidence. Work, samples or explanations you can substantiate.
  4. The process. What happens after contact and what you need to start.
  5. The questions. Concrete answers about scope and collaboration.
  6. The next step. A clear action with an honest expectation of what follows.

Remove sections that only repeat the previous one. Do not expect an image to answer an essential question on its own.

Design the mobile arrival too

Narrower columns are only part of the work. Review reading order, headline length and the distance between an explanation and its action. Images should retain their proportions. Forms need visible labels, room to type and useful error messages. Motion should let people read and move at their own pace.

Use the page with one hand, then with a keyboard. This reveals decisions a static canvas cannot show.

A review before publishing

  • Does the campaign promise continue in the opening?
  • Is the offer clear without the images?
  • Is the evidence real and presented with context?
  • Does each button describe what happens?
  • Does the form explain how information is used?
  • Are content and actions available without animation?

These questions prepare you to observe people using the page. The layout may change many times; the decision you want to make easier should guide every version.

UMBRAL
STUDIO

From the studio

We connect strategy, design and technology. Here we share how we think and shape ideas.

Let’s bring this idea to your project