Design a clear first screen

Start with the visitor’s decision

Write one sentence describing what a visitor should understand before scrolling. For a planning app, that might be: this product helps a small team see what needs doing today. Remove claims that do not support that decision. A hero is easier to design when its purpose is smaller than its company’s entire story.

Arrange four levels

Use a short category label, a specific headline, one supporting paragraph and one primary action. Add proof close to the claim it supports. Make the headline visually dominant using size and spacing before adding weight, gradients or motion. Keep secondary actions quieter and label them by the next step: View a demo is clearer than Explore.

Build with real content

Replace placeholder copy before tuning widths. Try a headline that is 30% longer, a two-line button label and a missing portrait. Use a content width rather than absolute coordinates so the layout follows the text.

.hero-copy { max-width: 42rem; }
h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.05; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; }

Check the result

Show the first screen to someone for five seconds, hide it, then ask what the product does and what they would click. If their answer differs from your intended decision, revise the copy or hierarchy before adding decoration. Check the same task with keyboard navigation and at phone width.