A first screen is done when it reads like the final page: real headline, real intro, spacing that makes the reading order feel inevitable. The fastest route there is not more exploration — it is three steps in a fixed order. Write the screen in sentences, block it with real content, and stop before adding anything the structure has not earned.
Write the screen before drawing it.
Every first screen starts as a few sentences: what the page promises, who it speaks to, and what the reader should do next. If the sentences are unclear, no amount of layout will fix them.
A first screen is a promise. The rest of the page is how you keep it.
In practice this is three lines in a plain text file, written before any tool opens:
promise: what does this page claim, in one sentence?
audience: who has to believe it on first read?
next step: what should they do before scrolling?The homepage of this site came out of exactly this exercise. The promise — calm interfaces, designed and built by the same person — was one sentence long before it was a hero section. When a client brief is vague, this file is also the cheapest possible way to find out, because disagreement about three sentences costs an hour, not a design round.
Block the layout with real content.
Placeholder text hides rhythm problems. I block the hierarchy with the actual headline and the actual intro, then adjust spacing until the reading order feels inevitable.
Real content pushes back in ways lorem ipsum never does. The actual headline is nine words and wraps onto a third line at mobile widths. The actual intro is two sentences longer than the elegant two-line paragraph in the concept. Better to negotiate with those facts at the blocking stage — shorten the headline, cut the intro, or change the scale — than to discover them after the visual language is set.
Blocking also means resisting components. At this stage the screen is a headline, a paragraph, and maybe one action — rectangles with real words in them. If the reading order works with rectangles, the design has somewhere solid to go. The same discipline applies later, when the spacing and hierarchy decisions carry the page instead of decoration.
Stop early, on purpose.
The first screen is done when nothing on it competes with the message. Everything else — texture, motion, detail — waits until the structure has already earned it.
Stopping early is a decision, not a failure of ambition. Every element added at this stage becomes a constraint on every element after it. A decorative shape behind the headline today is a layout problem at tablet widths tomorrow — one more thing to defend in the responsive pass before shipping. The discipline is to end the session with a screen that looks almost too plain, and let the next pass prove what actually needs to be added.
What to reuse.
- Write the promise, the audience, and the next step as three sentences before opening any design tool.
- Block the layout with the real headline and real intro; placeholder text hides the problems you most need to see.
- Keep the first pass to rectangles and words. Components come after the reading order works.
- Stop when nothing competes with the message — texture and motion have to earn their place later.