Create High-Converting Landing Pages Without Figma or a Designer

Pick a type scale and stick to it

The single decision that most separates amateur pages from professional ones, and the easiest to get right.

Choose a small set of sizes with clear steps between them — roughly 16 pixels for body text, something around 20 for lead paragraphs, and headings that step up distinctly. Use those and nothing else. The failure mode is picking a size per element by eye, which produces a page with eleven slightly different text sizes and no hierarchy.

Line height matters as much as size: around 1.5 for body copy, tighter for large headings. Cramped line height is the most common reason a page feels dated even when everything else is current.

Use one accent colour, and use it sparingly

You need a background, a surface, a text colour, a muted text colour and one accent. That is enough for almost any marketing page.

The accent should be reserved for the thing you want clicked. Applying it to headings, icons, links, borders and buttons alike means the button no longer stands out from anything, which defeats the point of having an accent at all.

Check contrast rather than trusting your eye. Light grey on white looks sophisticated on a designer's monitor and is unreadable on a phone in daylight, which is where a large share of your visitors are.

Space is how you group things

The rule that makes layouts read correctly: elements that belong together sit closer than elements that do not.

Concretely, the gap between a heading and its paragraph should be smaller than the gap between that paragraph and the next heading. When those are equal — which is what happens when everything gets the same margin — the reader cannot tell what belongs with what, and the page feels like a list of disconnected things.

Pick a spacing scale, a small set of values, and use only those. Ad-hoc pixel values are how a page accumulates the inconsistency that reads as unprofessional.

Give things room

The most reliable difference between a page that was designed and one that was assembled is that the designed one has more empty space.

The instinct when building your own page is to fill it — more sections, tighter margins, more above the fold. That instinct is wrong, and resisting it is most of what taste amounts to here.

A practical version: whatever margin looks right, add half again. Constrain text to a comfortable reading width rather than letting it run the full width of a monitor. Let the primary action sit alone rather than crowded by other elements.

Steal structure, not appearance

Look at pages you think work and take their section order, not their visual style.

Structure transfers — which section comes first, how proof is positioned relative to claims, where the objection is handled. Visual style does not, because it belongs to a brand that is not yours and will look borrowed.

This is also how to use a template or a generated page well: adopt the arrangement, then apply your own type scale and single accent colour on top. The result reads as yours rather than as a recognisable theme with your logo dropped in.

Check it the way a designer would

Four checks that catch most of what goes wrong, none of which require design training.

Look at it on an actual phone. Squint at it — the thing that stays visible should be the thing you most want seen. Read the headline alone and ask whether a stranger would know what this is. And leave it overnight before publishing, because obvious problems become visible after a break in a way they are not after three hours of staring.

• Real phone, real thumb — not a narrowed desktop window.
• The squint test — blur your eyes; what remains prominent should be the priority.
• Headline in isolation — would a stranger know what this is and who it is for?
• Sleep on it — the cheapest quality check available.