Landing Page Design Patterns

Four current landing-page references from Refframe, analyzed by narrative sequence, product proof, density, and conversion risk

Inspiration
Refframe Team9 min
Three landing page mockups showing different hero layouts, content sections, and visual styles
The opening combines a strong product promise with a visible interface and a direct signup action.

Current landing-page references in Refframe show four useful decisions: a typographic product opening, a modular story that moves from promise to proof, a feature-dense commerce page, and a technical narrative built from diagrams and field imagery. Choose by the information sequence your brief needs, then test mobile order, proof, content length, and conversion clarity before borrowing the visual treatment.

On 3 August 2026, the exact public Refframe filter Sites → Landing returned four references representing three source projects. We inspected the complete result rather than treating the first API page as the total. The small set is useful because each page makes a visibly different decision about product explanation, proof, and pace.

Four landing-page strategies

Long MindPalace landing page with orange hero, modular feature sections, testimonials, and signup blocks
MindPalace modular product story. A high-energy promise leads into modular explanations, social proof, numbered benefits, and repeated conversion opportunities. Source: MindPalace

MindPalace alternates dense product explanation with large visual pauses. The orange hero establishes memory quickly, while later modules explain data import, past and future use cases, privacy, and proof. This works when a new product needs narrative depth. The risk is cumulative length: every module must introduce new evidence, and the mobile order needs aggressive editing.

Dark NuPhy Field75 landing page with neon green accents, keyboard features, variants, reviews, and subscription form
NuPhy Field75 feature-dense commerce page. Product imagery, specifications, variants, reviews, and repeated calls to action support a considered hardware purchase. Source: NuPhy / Uprock Agency

The Field75 page treats the landing page as a sales argument. It moves from product identity to feature proof, configuration, comfort, lighting, reviews, and subscription. Strong contrast and large product renders keep a long specification story scannable. This pattern fits higher-consideration products, but decorative typography must not make compatibility, price, or purchase actions harder to find.

Long Airloom landing page combining turbine renders, engineering diagrams, field photography, metrics, team information, and updates
Airloom technical product narrative. Technical diagrams and field imagery turn an unfamiliar energy product into a sequence of claims and supporting evidence. Source: Airloom Energy

Airloom uses diagrams, partner marks, landscape photography, specifications, and mission content to make a technical proposition credible. The sequence moves from the category claim to engineering detail and deployment context. This is useful for climate, infrastructure, and B2B products. The main risk is hierarchy: evidence should answer the claim above it instead of becoming a gallery of unrelated credibility signals.

Airloom navigation overlay with a large wordmark, compact page index, contact details, and generous gray space
Airloom typographic navigation state. The navigation turns brand typography into an orientation device while keeping the section index and contact details visible. Source: Airloom Energy

This second Airloom reference is not another full page; it isolates the navigation state. The oversized wordmark makes the transition memorable, while the compact index supports direct movement through a long technical story. Treat it as an interaction pattern, not as proof that every landing page needs a theatrical menu. Keyboard focus, close behavior, and small-screen reachability decide whether it remains usable.

Choose the sequence before the style

Map the brief to a sequence of questions. A new software product may need promise → interface → use cases → proof → signup. Hardware may need promise → physical detail → configuration → review → purchase. A technical B2B product may need category claim → mechanism → deployment evidence → team → contact. The visual system should make that sequence easier to follow.

Landing-page review checklist

  • Can a first-time visitor explain the offer after the opening and first proof section?
  • Does every later section answer a new objection or repeat an earlier claim?
  • Are product evidence and calls to action still visible with real copy and on mobile?
  • Can navigation, forms, media, and disclosure patterns be used with keyboard and touch?
  • Would the page remain credible if decorative animation or imagery failed to load?

For a closer comparison of opening patterns, continue with Hero Section Design Patterns. Save only the references whose information order answers the current brief.

Sources

  1. Landing page references, Refframe