Browser mockups for web apps and SaaS

A phone frame says “app”. A browser frame says “this runs on the web, open it now”.

For a SaaS product, that’s most of the pitch. Here’s how to make the frame help, not hog the picture.

What a browser frame is for

Three jobs, really.

• Context. People know instantly they’re looking at a website or web tool.
• Edges. A pale interface on a pale page needs a border. The window gives it one.
• Polish. A tidy frame makes a raw screenshot look finished.

If the frame isn’t doing at least one of these, leave it off. A flat screenshot with rounded corners and a soft shadow is a perfectly good choice.

Simplify the chrome

Real browsers are busy. Tabs, bookmarks, extensions, profile icons, a search bar full of history.

None of that belongs in a product shot.

A good browser mockup keeps only:

• three small window dots, or none
• a slim bar at the top
• maybe a short, clean address, like your product’s domain

That’s it. The window should read as “browser” in half a second, then disappear.

Pick light or dark chrome to match the page, not the product. A dark frame on a light landing page can look heavy.

Choose the window size before you capture

The shape of the window shapes everything else.

Window shape	Feels like	Good for
Wide and short	A desktop monitor	Dashboards, tables, timelines
Close to 16:10	A laptop screen	Most SaaS heroes
Narrower, taller	A focused tool	Editors, forms, settings

Resize the browser window itself before you take the screenshot. Don’t capture a huge monitor and squash it later. Interfaces reflow at different widths, and a layout that looks roomy at one size can look cramped at another.

Capture at a high pixel density if you can, then scale down. Text stays crisp.

Stage the screen

Web apps are often the messiest screens of all. Long sidebars. Empty states. Test projects called “aaa”.

Before you capture:

• Fill it believably. For example, a project tool might show six projects with real-sounding names, mixed statuses and a couple of team avatars.
• Collapse what you can. Hide the secondary sidebar if it’s not the point.
• Close the noise. Cookie bars, chat widgets, trial banners, “what’s new” pop-ups.
• Invent the data. Never a real customer, email or invoice.

Crop for where it’s going

A browser frame doesn’t have to show the whole window.

Full window

The whole product in context. Good for a hero, an overview slide or the first image in a gallery.

Top crop

Show the top two-thirds and let the bottom fall off the edge. It hints there’s more. Lovely below a centred headline.

Panel crop

Zoom right into one panel, keep a sliver of the frame at the corner. Says “this part, in this product”. Great for feature sections.

Keep the frame on at least one edge, so people still know they’re in a browser.

Browser, laptop or desktop?

All three say “web”. They feel different.

• Browser window is light and flexible. It sits well on landing pages and in docs.
• Laptop adds a sense of place: someone, somewhere, working. Good for heroes and launch posts.
• Desktop monitor feels like a workstation. It suits tools people use all day, like analytics or design software.

Pick one for the main set. Mixing all three on one page looks like three different products.

Presenting the product in a deck? The same choice applies on slides, and a set of desktop screen slides gives you monitor-style frames to drop screenshots into.

Add a phone, if it’s true

Many web apps work on a phone too. A browser window with a phone overlapping one corner says “works everywhere” without a word.

Two rules. Show the same moment on both screens, adapted to each layout. And only show a phone view that really exists.

Keep the background calm

The interface already has plenty going on.

• a soft gradient from your brand colours
• a plain tint, one step away from the page colour
• a gentle desk or surface, if you want warmth

Add a wide, soft shadow under the window. Low contrast. It lifts the frame off the page without shouting.

Make it a system

Once one browser shot works, lock the settings:

• window width and shape
• chrome colour and bar height
• corner radius
• shadow and background
• crop types you use

Save them. Every new feature screenshot then drops straight in and matches the rest.

A quick check

• Does the frame read as “browser” instantly?
• Is the chrome stripped to the basics?
• Was the window sized before capture?
• Is all data staged and none of it real?
• Does the crop suit the layout?
• Do all shots match?

For the wider basics of staging and cropping, see how to present product screenshots. If the browser shot is headed for the top of your homepage, how to make a landing page hero image from a screenshot picks up from here. And when you want to try a few frames side by side, Mockups can place your screen for you.