Design Every Element to Maximize Conversions

Design on a landing page is not decoration. Every visual decision either moves someone toward the CTA or moves them away from it.

This lesson covers the design principles specific to landing pages, which are different from a general website because the goal is different.

The narrow page rule

Landing pages use a narrower content width than websites.

Websites use a maximum content width of 1200px. Landing pages use 680 to 760px maximum content width.

Why? Because reading comprehension drops when line length is too wide. A narrow column keeps the reader's eye moving smoothly downward from the headline to the body to the CTA without having to track across a wide screen.

Tell Claude:

• Set the maximum content width to 720px for all text sections.
• Centre it on the page. The form and CTA button can be up to 520px wide.
• Visual hierarchy: where the eye goes
• Every section should have one visual focus. The thing the eye lands on first must be the most important element in that section.

In the hero section the headline is the visual focus and everything else is secondary. In the benefits section the benefit text is the focus and any icons or numbers are accents only. In the CTA section the button is the focus and it should be the most visually prominent element on the entire page.

If everything is big, nothing is important. Visual hierarchy means making decisions about what matters most and making that one thing the biggest, boldest, or most prominent element in its section.

The button must be unmissable

Your CTA button is the most important element on the page. It should never blend in with anything around it.

Rules for landing page buttons: use your accent colour which is the one colour that stands out against your background, use generous padding of at least 16px top and bottom and 32px left and right, use large text of 16 to 18px minimum at font-weight 600 or higher, ensure high contrast so the button colour clearly stands out from the section background, and make every instance of the button look identical throughout the page.

Tell Claude:

The CTA button is the most important element on the page.

Make it visually unmissable: accent colour [YOUR ACCENT HEX], high contrast,

generous padding of 18px top and bottom and 40px left and right, bold font weight,

large text size. Every instance of the button throughout the page should look identical.

Whitespace is a conversion tool

An overcrowded page feels untrustworthy. A spacious page feels confident.

Give every section room to breathe. If you feel the urge to fill space, resist it. Landing pages convert better with more whitespace, not less.

Use 120px top and bottom padding on desktop sections and 70px on mobile.

If Claude built sections that feel packed or cluttered:

The [SECTION NAME] section feels overcrowded. Add more vertical padding above and below

all text elements. The content should feel like it has space to breathe with no text

or elements within 40px of each other. Increase section top and bottom padding to 120px.

Trust signals

Trust signals reduce the psychological risk of signing up. They answer the unspoken question: can I trust this person?

Place these near your form and CTA button: a short trust line below the button such as "No spam. Unsubscribe any time," a number if you have one such as "Joined by 847 people" or "5-star rated," a logo if you have been featured somewhere relevant, or a simple privacy note such as "We will never sell your information."

These do not need to be large. A small line under the button in lighter text is enough to do the job.

Tell Claude:

Below every CTA button, add a small trust line in light grey text:

• "No spam. Unsubscribe any time. Completely free."
• Font size 13px, centred, no bold formatting.

The colour focus rule

On a landing page use your accent colour only on the CTA button and the most critical highlights.

If your accent colour appears everywhere, on headings, background blocks, borders, and icons, the button stops standing out. The button is the call to action. It should be the only thing that colour. Everything else should be neutral.

Mobile first on landing pages

More than 60% of landing page traffic comes from mobile devices. Design for mobile first.

Three mobile-specific rules to follow.

The hero CTA must be visible without scrolling on mobile. On a phone, above the fold means very little vertical space. Make sure the hero section is compact enough that the button is visible without scrolling on a 375px screen.

The form must be easy to fill in on a touchscreen. Form fields should be at least 48px tall. Input text must be at least 16px because anything smaller triggers automatic zoom on iOS. Labels should be clear and positioned above each field.

The button must be easy to tap. Use a minimum height of 48px and make it full width on mobile.

Tell Claude:

Mobile-specific requirements for the landing page:

1. Hero CTA button must be visible without scrolling on a 375px screen
2. Form fields: minimum 48px height, 16px input font size, label above each field
3. CTA button: full width on mobile with a minimum height of 48px
4. All font sizes readable without requiring the user to zoom

The one-colour section test

Look at your landing page and find any section where a strong background colour was used.

Ask yourself: is this section more important than the CTA section?

If the answer is no, remove the coloured background. Give it the same neutral background as the rest of the page. The CTA section should be the most visually distinctive section on the entire page, the one that visually stands apart from everything else.

Your action right now

Open your landing page and do a quick visual audit using these four checks.

Is the CTA button unmissable on every screen size? Is the content column narrow enough to read comfortably? Is there a trust line under every button? Does the form look easy to fill in on mobile?

Fix anything that fails these checks before moving to the next lesson.