Create a High-Converting Landing Page Above-the-Fold Section Design

Design a conversion-optimized landing page above-the-fold section with compelling headlines, CTAs, and visual hierarchy.

๐Ÿ“ The Prompt

Design the above-the-fold section of a landing page for [PRODUCT/SERVICE NAME], a [PRODUCT CATEGORY] that helps [TARGET AUDIENCE] achieve [KEY BENEFIT]. The design should maximize conversions for the primary goal of [CONVERSION GOAL, e.g., free trial signup, demo booking, newsletter subscription]. Design the following elements with specific guidance: 1. **Headline (H1)**: Write 3 headline variations following the formula: [Desired Outcome] + [Timeframe or Ease] โ€” without [Pain Point]. Max 12 words each. The headline should occupy visual hierarchy level 1. 2. **Subheadline**: A supporting sentence (15-25 words) that explains HOW the product delivers the headline's promise. Address [SPECIFIC OBJECTION, e.g., no credit card required, setup in 5 minutes]. 3. **Primary CTA**: Button text (2-5 words, action-oriented), button color [CTA COLOR] with [SIZE] dimensions. Include a micro-copy line beneath addressing friction (e.g., "Free for 14 days. No credit card needed."). 4. **Hero Visual**: Recommend whether to use a [PRODUCT SCREENSHOT / ILLUSTRATION / VIDEO THUMBNAIL / LIFESTYLE PHOTO]. Describe the composition, focal point, and how it supports the headline's message. 5. **Social Proof Strip**: Include [TRUST ELEMENT TYPE, e.g., client logos, user count, rating badge, press mentions] positioned [ABOVE / BELOW] the CTA. 6. **Layout & Spacing**: Define a grid system, whitespace strategy, and visual flow using an F-pattern or Z-pattern. Specify viewport target of [RESOLUTION, e.g., 1440x900]. 7. **Mobile Adaptation**: Describe how content stacks, CTA placement shifts, and image cropping changes on 375px width.

๐Ÿ’ก Tips for Better Results

Place your primary CTA within the first 600px of vertical space so it's visible without scrolling on most screens. Use one single, clear CTA โ€” adding a secondary action above the fold typically reduces primary conversion rates by 10-20%. Test hero image vs. product screenshot; B2B SaaS products often convert better with actual UI screenshots showing value.

๐ŸŽฏ Use Cases

Marketing designers, growth teams, and startup founders use this when launching new products or optimizing existing landing pages to improve signup and lead generation rates.

๐Ÿ”— Related Prompts

๐ŸŽจ Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

๐ŸŽจ Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

๐ŸŽจ Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

๐ŸŽจ Design advanced

Create a Detailed Wireframe Description for UI/UX Design

Generate a detailed, section-by-section wireframe description with layout specs, interaction flows, and responsive behavior for any page.

๐ŸŽจ Design intermediate

Generate a Custom Color Palette for Your Brand or Project

Generate a complete, accessible color palette with hex codes, usage guidelines, dark mode variants, and brand-aligned reasoning.

๐ŸŽจ Design advanced

Create a Detailed User Flow Diagram for Your Digital Product

Design a comprehensive text-based user flow diagram with decision points, error states, and UX annotations for any digital product.