How to design a SaaS landing page hero with device mockups

The hero section of a SaaS landing page has roughly 3 seconds to communicate what the product does. A headline alone rarely cuts it — visitors need visual proof. A device mockup showing the actual product UI on a realistic phone or laptop is the fastest way to make an abstract tool feel tangible.

Why mockups outperform flat screenshots in heroes

A raw screenshot is two-dimensional and lacks context. Drop the same UI onto a tilted MacBook or a floating iPhone and the brain instantly registers "this is software I can use." The 3D depth cue triggers object recognition faster than a flat rectangle. Unbounce data from 2024 shows SaaS pages using 3D device renders convert 20% higher than those using flat screenshots.

The 4 hero layout patterns that work

1. 01Split hero — headline and CTA on the left, device mockup on the right. The most common pattern (used by Linear, Notion, Arc). Works because the eye reads left-to-right: value prop → visual proof → CTA.
2. 02Centered stack — headline centered above a large mockup that spans the full width. Used by Framer and Vercel. Best when the UI itself is the main selling point.
3. 03Floating devices — multiple devices (phone + laptop) floating at different angles with a gradient background. Creates depth and suggests cross-platform support. Used by Raycast and Craft.
4. 04Lifestyle context — a mockup placed in a real-world scene (desk, hand, coffee shop). Best for B2C apps where emotional context matters more than feature density.

Choosing the right device

Sizing and resolution

Export your hero mockup at 2x the display size. If the hero image renders at 1200 px wide on desktop, export at 2400 px. For retina screens, anything below 2x looks soft. MochiMockup Pro exports at up to 4K (3840 px wide), which covers every common hero width without upscaling artifacts.

Performance tips

• Export as WebP instead of PNG — 40-60% smaller file size at the same visual quality.
• Use Next.js Image or a CDN with automatic format negotiation so older browsers fall back to JPEG.
• Set explicit width and height attributes to prevent layout shift (CLS).
• Lazy-load mockups below the fold but eager-load the hero — it's the first thing visitors see.
• Consider a low-quality placeholder (LQIP) blur-up for slower connections.

Step-by-step: building a split hero with MochiMockup

1. 01Export your best app screen from Figma at 2x as PNG.
2. 02Open MochiMockup and select a laptop template with a slight tilt (15-30°) — this creates depth without obscuring the UI.
3. 03Upload your screenshot — it snaps to the screen automatically.
4. 04Export at 4K and download as WebP.
5. 05Place the image in a CSS grid or flexbox layout: left column for headline + CTA, right column for the mockup image.
6. 06Add a subtle shadow or gradient behind the device to lift it off the background.