Landing Page Wireframe Pack
12 wireframes Xpand uses as starting points for landing-page builds. Hero structure, social proof flow, CTA cadence. all baked in.
Why this exists
Most operators waste 2 to 3 weeks of design time relitigating layout decisions that have already been solved. The 12 wireframes here cover the patterns that work for SaaS demos, free trials, webinars, lead-gen, booking pages, e-commerce PDPs, pricing comparisons, agency sites, and case studies. Start with the structure that already converts. Spend your time on copy and proof, not on whether the testimonial goes above or below the form.
12 wireframes covering the most common conversion-page patterns. Each is built on the message-match principle: the page leads with the same outcome the visitor was searching for, then proves it can deliver, then asks for the next step. Use them as starting points, not finished designs. the design layer should match your brand.
What's included
| # | Pattern | Best for |
|---|---|---|
| 1 | SaaS demo page | Demo request flow, scheduled call |
| 2 | Free trial signup | Self-serve PLG |
| 3 | Webinar / event signup | Marketing events, product launches |
| 4 | Lead-gen long form | Higher-friction lead capture (audit, ROI calculator) |
| 5 | Booking page | Strategy call, consultation, fractional engagement |
| 6 | Ecommerce PDP | Single-product DTC funnel |
| 7 | Pricing page | Mid-funnel comparison and selection |
| 8 | Service / agency page | Service-business hero + portfolio + pricing-floor |
| 9 | Comparison / vs page | Bottom-funnel competitive content |
| 10 | Case study page | Mid-funnel social proof |
| 11 | About / brand page | Top-funnel discovery + brand positioning |
| 12 | Sticky offer / promo page | Limited-time offers, flash launches |
Universal section structure
-
1
Hero (above fold). outcome headline, subhead, primary CTA, optional video / product shot
-
2
Logo bar. 5-7 recognizable customers or media logos
-
3
Problem / outcome. name the specific pain or outcome the visitor came for
-
4
How it works. 3 steps max, each illustrated
-
5
Social proof. 1-2 customer quotes with photo + outcome metric
-
6
Feature blocks. 3-6 features tied back to the outcome
-
7
Pricing or value summary. single clear next step (no decision overload)
-
8
FAQ. 4-6 questions, schema-ready
-
9
Final CTA. same language as the hero, repeated for the user who scrolled
What changes per pattern
Each wireframe variant adjusts the section weights and order. SaaS demo pages weight social proof heavily before the form. Ecommerce PDPs lead with image gallery + price + add-to-cart and push social proof below. Webinar signups put the form above the fold and use scarcity copy. The structure is universal; the emphasis is contextual.
Wireframes are gray-box layouts only. Color, typography, and brand are layered after wireframe approval. Locking the structure first prevents the 'pretty but doesn't convert' trap.
How to use the pack
-
1
Open the Figma community file (link below) and duplicate to your workspace
-
2
Pick the wireframe matching your page intent
-
3
Replace placeholder copy with your actual headlines, subheads, and CTAs
-
4
Apply your brand layer. color, typography, imagery
Use brand colors from your design system, not from the wireframe defaults.
-
5
Run the CRO Audit Template against the result before shipping
-
6
Test the live page against your control with at least 2 weeks of traffic
How to use it well
Pick the wireframe that matches your offer's awareness stage. Cold = pain-led, warm = outcome-led, hot = proof + reverse-risk. Do not mix patterns. A webinar-signup wireframe with free-trial copy underneath is the most common reason landing pages underperform. Customize the proof block first (logos, named outcomes, real metrics), then the hero, then the CTA copy.
What good looks like
Section breakdown of the SaaS demo wireframe (the most-used of the 12).
Above the fold:
- Logo + nav (5 items max)
- H1: Outcome-led headline (6 to 12 words, no jargon)
- Subhead: Specific timeframe + metric promise
- Primary CTA: Verb + outcome ('Book a 30-min call')
- Hero visual: Product screenshot or 3-second loop, NOT stock photo
- Logo bar: 5 to 8 customer logos, monochrome
Fold 2:
- Pain → outcome bridge (3 cards)
- Quote from named customer with metric
Fold 3:
- 'How it works' (3 steps max, with screenshots)
- Inline video < 90 sec
Fold 4:
- Comparison table (you vs alternative)
- Reverse-risk block (guarantee, exit clause, trial length)
Fold 5:
- FAQ (5 to 7 questions, schema-tagged)
- Final CTA. same wording as hero
- Privacy + security badges if regulated industryFAQ
Are these production-ready or just sketches?
Wireframes. gray-box layouts with placeholder copy and image slots. The structure is production-ready (proven section order, conversion-tested cadence). The visual design is yours to layer on top using your brand system.
How is this different from buying a template on ThemeForest?
Themes are visual designs without conversion structure. These wireframes encode the section order, hierarchy, and message-match logic Xpand uses across paying clients. The visual layer is intentionally absent so the structure stays the focus during planning.
What if my page has a different goal than the 12 patterns?
Pick the closest match and modify. Most page goals reduce to one of the 12. If you genuinely have a new pattern (multi-step conversion, calculator-led signup), start from #4 (lead-gen long form) and adjust the form flow.
Do these work for mobile?
Yes. Every wireframe has a mobile variant in the same Figma file with breakpoint-specific layout (single column, sticky CTA, collapsed sections). Always design mobile first if your traffic is 60%+ mobile.