Landing Pages

A landing page exists to drive a single specific action from the visitor.

Related

• Product Management
• Positioning
• Storytelling
• Drivers
• Investing
• Incentives
• UX Performance
• SEO Analysis
• Marketing Prompts
• Product Engineering

Purpose

A landing page exists to drive a single specific action from the visitor. This action could be anything from:

• Signing up for (future) information
• Making a purchase
• Registering for a webinar
• Downloading an eBook

Remember, the best type of landing page depends on your specific goals and the nature of your product or service.

Categories

Lead Capture Landing Pages: These pages are used to collect user information, like names and email addresses, to build an email marketing list. They often offer something of value, like an eBook or a webinar registration, in exchange for the user's information.

Sales Landing Pages: The goal of these pages is to sell a product or service directly. They often include detailed product descriptions, testimonials, and strong calls to action.

Click-Through Landing Pages: These are used to warm up potential customers before sending them further into the marketing funnel, such as an e-commerce shopping cart or registration page.

Splash Pages: These are introductory pages that users see before they get to the actual website. They might be used to promote a specific product or offer, or to ask users to choose a language or region.

Content Landing Pages: These are used to offer high-quality content, like blog posts, articles, or videos, in exchange for user information. The content is usually related to the product or service being promoted.

Viral Landing Pages: These pages are designed to be shared on social media. They might contain a game, a funny video, or a controversial piece of content.

Microsites: These are small websites, separate from a company's main website, dedicated to a specific product, service, or campaign.

Positioning

Who are your target audience? What makes them tick? What would drive them to take decisive action?

• What are their needs and pain points?
• How specifically will you help them?
• What triggers the demand for your service?
• Where will you reach them?

Collect user stories to identify triggers and prove demand for desired outcomes.

Conversion Flow

Conversion funnel/flow, the steps a user takes until they are "converted" to take the primary desired action. Each element of a landing page should be designed with the goal of triggering a specific action.

The headline, copy, images, form, and call-to-action should all work together to persuade the visitor to take the desired action. Any elements that don't contribute to this goal can be distractions that reduce the effectiveness of the page.

Landing pages need to be tested and optimized over time. This can involve changing the copy, adjusting the design, or experimenting with different calls-to-action. By tracking the performance of your landing pages and making continual improvements, you can increase their effectiveness and achieve better results from your marketing efforts.

Lastly, landing pages are not one-size-fits-all. Different campaigns and objectives might require different types of landing pages. It's important to match the type of landing page to your specific marketing goal and audience needs.

Question

What does progress look and feel like?

Intent Review

How well does the landing page design align with intended objectives?

• Value Proposition: Explain value of the product/service upfront
• Clear and Compelling Headline: The headline is often the first thing visitors see, so it should be clear, compelling, and communicate your unique selling proposition.
• Single Strong Call to Action (CTA): The CTA should be clear and direct, telling visitors exactly what action you want them to take.
• High-Quality Images: Use high-quality, relevant images to engage visitors and illustrate what you're offering.
• Customer Testimonials: These can build trust and credibility.
• Minimal Distractions: Remove anything that isn't essential to the goal of the page. This includes navigation menus, links to other parts of your website, and excessive information.
• Mobile Optimization: Ensure your page looks good and functions well on mobile devices.
• Fast Load Times: Slow load times can lead to high bounce rates.
• Easy-to-Complete Forms: If you're collecting user information, make the form as easy to complete as possible.

See UX Design for more details on best practice design principles.

Design Failures

Common mistakes to avoid when designing landing pages.

• Too many competing calls-to-action which can reduce conversions
• Unclear what the main action is for users to take

Functional Requirements

Common features of a landing page tech stack.

• Mobile First Design
• Light and dark theme
• SEO friendly with RSS feed, sitemaps
• Easy styling customization
• Table of Contents Component
• Multi-choice Newsletter Subscription
• Blog Templates
• Support for nested routing of blog posts
• Support for multiple authors

Performance:

• Automatic image optimization
• Near perfect lighthouse score
• Lightweight, fast first load of JS
• Self-hosted fonts (Fontsource)
• Supports a range of (Google) analytics tools

Prompt Flow

Open v0.dev paste in the Initial Prompt then edit the content of the XML tags to collaborate with AI on your intentions.

1. Open v0.dev
2. Copy and Paste the Initial Prompt into the chat
3. Enter instructions between the XML meta tags Enter your instructions
4. Unless you have technical requirements, you can leave this section as is
5. Use follow-up prompts to iterate on the design
6. See a list of notable designers to consider for inspiration

See prompt engineering for more detailed instructions on best practices.

Initial Prompt

<prompt>
  <role>You are a world class comparable to { notable_designer }</role>
  <task>Create a landing page for {product or service name} with the following specifications.</task>
  <audience>Target Audience: {describe your target audience}</audience>
  <goal>Primary Goal: {e.g., lead generation, sales, sign-ups}</goal>
   <content>
    <business_name>YOUR_BUSINESS_NAME</business_name>
    <type_of_solution>Service | Product</type_of_solution>
    <value_proposition>
      Unique Value Proposition: {main benefit or solution you offer}
    </value_proposition>

    <features_benefits>
      Key Features/Benefits:
      <item>Replace with Feature/Benefit 1</item>
      <item>Replace with Feature/Benefit 2</item>
      <item>Replace with Feature/Benefit 3</item>
    </features_benefits>

    <cta>Call-to-Action: {primary action you want visitors to take}</cta>
  </content>

  <design>
    <designer>tiffanyhychen</designer>
    <colors>
      Color Scheme: {preferred colors or brand colors} must have sufficient contrast
    </colors>
    <style>
      Design Style: {e.g., modern, minimalist, bold, playful}
    </style>
  </designer>

  <sections>
    Required Sections:
    <hero>Hero section with headline and sub-headline</hero>
    <features>Features/Benefits section</features>
    <social_proof>
      Social proof
      <testimonials include="false">testimonials</testimonials>
      <trust_indicators include="true"/>
    </social_proof>
    <faq include="false">FAQ section</faq>
    <contact_information include="true">matt@dreamineering.com</contact_information>
  </sections>

  <technical>
    Technical Requirements:
    <stack include="false">Please use best practices of latest T3 stack for Nextjs</stack>
    <layout include="false">Please do not use the layout feature of Nextjs for this design</layout>
    <animations include="true">Use Framer Motion for animations</animations>
    <responsive>Ensure mobile first responsive design</responsive>
    <accessibility>Ensure high readability of all text</accessibility>
    <seo>Optimize for SEO</seo>
    <performance>
      <loading>Optimize for fast loading</loading>
      <accessibility>Include accessibility features</accessibility>
      <lighthouse>Aim for 100% Lighthouse Score</lighthouse>
    </performance>
  </technical>

  <instructions>
    Please generate a clean, visually appealing landing page design that effectively
    communicates our value proposition and guides visitors towards the primary call-to-action.
  </instructions>
  <design_guide include="false">Please use the attached images as the style guide</design_guide>
</prompt>

UX Follow-up Prompt

See design review above for tips.

<prompt>
  <task>Please review and ensure best practices for accessible / inclusive web design</task>
  <requirements>
    - Ensure mobile first design with good readability of text on all screen sizes
    - Use a color palette that provides sufficient contrast between text and background colors. Aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, as per WCAG 2.1 guidelines.
    - Ensure color is not the only means of conveying information. Use additional visual cues like patterns, icons, or labels.
    - Include ARIA attributes in HTML elements to enhance accessibility for users of assistive technologies.
    - Structure the page using semantic HTML elements like `<header>`, `<nav>`, `<main>`, and `<footer>`.
    - Provide text alternatives for images using `alt` attributes.
    - Ensure interactive elements like buttons and links have clear :focus and :hover states.
  </requirements>

  <deliverables>
    - Color palette with hex codes and contrast ratios
  </deliverables>
</prompt>

Iteration

1. Learn (Research new tools & techniques)
2. Play (Mess around)
3. Map Flow (Inputs, Actions, Outputs)
4. Plan (Estimate Time, Costs)
5. Act (MAKE SHIP HAPPEN)

Tech Stack

How do you decide on the best toolkit and tech stack to invest in for building landing pages?

Element / Tool	Stack Decision
UX Design	v0.dev, galileo.ai
AI Coding	Cursor AI, Fragments
Image Hosting	ImageKit
Content Management (optional)	Payload CMS
AB Testing	Posthog
Hosting	Vercel

See product engineering for more details on stack component choices.

Links

• Github Prompts
• Backlinko Guide
• Convert Kit Guide
• Alisha Conlin-Hurd
• Steph France
• From Screenshot to Landing Page
• buildingweb3.xyz