How to create mockups for your SaaS landing page.

Before opening Protato, map out which sections of your landing page need mockups. Most SaaS pages need 3-4 mockup assets:

• Hero section — the primary device shot with your app's main screen, often with text overlay
• Feature section — 2-3 smaller mockups showing specific features or workflows
• Ecosystem shot — a multi-device scene for the "works everywhere" section
• CTA section — a device mockup with the final call-to-action overlaid

The hero image is the most important visual on your page. It sits right below the headline and needs to communicate your product's value at a glance.

Set your aspect ratio to 16:9 or 4:3 — these ratios fit most page layouts without awkward cropping. Choose a device model that matches your primary platform (iPhone for mobile-first SaaS, MacBook for desktop-first).

Import your best app screen — the one that shows the core value proposition. Use the Studio lighting preset for a clean, professional look. Add a subtle gradient background that complements your brand colors.

Position the device slightly off-center if you plan to add text beside it, or centered if the device is the hero element itself.

Feature sections typically show 2-3 different screens or workflows. Each mockup should highlight a different capability.

Create a new project (or duplicate your hero project) for each feature shot. Use the same aspect ratio and background style across all features for visual consistency.

Import the relevant screen for each feature. Adjust the camera angle slightly for each one — a 15-degree variation between shots creates visual interest while maintaining consistency.

Add text labels or callouts using the text overlay tool. Keep labels short — 2-3 words that describe the feature benefit.

A multi-device scene communicates that your product works across platforms. This is especially effective for SaaS products with iPhone, iPad, and web apps.

Follow the multi-device scene workflow: add an iPhone as the primary device, then add an iPad and MacBook as secondary devices. Import relevant screenshots onto each.

Arrange the devices in a diagonal or staggered layout — all three in a straight line looks flat. Use the Transform controls to vary the scale and yaw of each device.

Apply a consistent background across all devices. A solid brand color or subtle gradient works best for landing pages — busy backgrounds distract from the content.

For landing pages, transparent PNGs give your development team the most flexibility. The device and shadow render cleanly, and your page background shows through.

Set the background to None in the Background tab. The checkerboard pattern indicates transparency. Adjust the shadow Opacity and Radius so it blends naturally onto your page's actual background.

Export at 2x or 3x quality scale for retina displays. Name each file clearly: hero-device.png, feature-1.png, ecosystem.png. Your developer will thank you.

If your page background is a solid color, you can also export with that matching color as the background — this produces a smaller file size since there's no alpha channel. Just make sure the color is an exact match.

Landing page performance matters for SEO and conversion. Large mockup images can slow down your page if not optimized.

Export at the actual display size — don't export a 3x image and scale it down in CSS. If your hero section shows the mockup at 600px wide, export at 1200px (2x) or 1800px (3x) for retina support.

Convert PNGs to WebP or AVIF for production if your page builder supports it. These formats are 25-35% smaller than PNG with the same quality. Keep JPEG quality at 80-90% for a good quality-to-size ratio.

Use responsive image attributes (srcset) or your framework's image component to serve different resolutions for different screen sizes. A phone doesn't need a 3x desktop-size image.