A desktop or browser mockup wraps your web app's screenshot in a laptop, monitor, or browser-window frame so it reads as a real product on your landing page instead of a flat image. The rule most people get wrong: framed mockups belong on your website, Product Hunt, and social posts — not inside your app store screenshots, where the stores want bare, unframed captures. Pick a frame that matches your audience's real device, keep the browser chrome clean, and export at 2x so it stays sharp on retina screens.
Why does a web app need mockups at all?
I learned this the boring way. My first SaaS landing page had a raw browser screenshot slapped onto a white section — just a flat PNG of the dashboard. It looked like a bug report, honestly. On a whim I wrapped that exact same screenshot in a MacBook frame with a soft shadow and dropped it into the hero. Same product, same pixels inside. The page suddenly looked like a real thing people used, and my demo signups ticked up over the next couple of weeks. Nothing about the app changed. The screenshot just started looking like a product instead of a file.
That's what a device mockup buys you on the web: context and credibility. A screen sitting inside a frame reads as "software running on a real machine." A bare screenshot reads as "image I exported." For a product nobody's touched yet, that gap is most of your first impression.
Which desktop frame should you actually pick?
- MacBook or iMac for design, dev, and creative tools. That crowd works on Apple hardware, so a MacBook frame feels native to them. - A generic Windows laptop or a plain monitor for enterprise and B2B, where half your buyers are on company-issued PCs and a shiny MacBook can read as off-key. - A clean browser window — just the chrome, no laptop for consumer web apps. It puts all the attention on your UI, loads lighter, and doesn't commit to a device brand at all.
That last one is underrated. For a lot of web products, a bare browser-window mockup beats the full laptop shot because there's less furniture around your actual interface. The frame should support the screenshot, not upstage it.
The pick-the-right-frame logic here is the same one that governs phone frames for app stores, which I walked through in choosing device frames for app mockups — audience first, realism second, decoration last. The difference on the web is you've got laptop, desktop, and browser-only shells in play, not just phones, so the device frame library is where I start once I know who I'm designing for.
How do you keep a browser mockup from looking fake?
Use a real URL in the browser bar — your actual domain, not "yourwebsite.com" or a placeholder. Nothing kills the illusion faster than a fake address. Keep the tab strip clean: one tab, your favicon, no row of 30 bookmarks from your personal browser. Match the aspect ratio of the screenshot to the frame's screen so nothing gets stretched — a squished dashboard is instantly obvious. Keep shadows subtle; a heavy drop shadow looks like a 2010 slide deck. And export at 2x for retina, because a mockup that's crisp on your monitor can turn fuzzy on a modern phone or laptop if you exported at 1x.
If you'd rather start from official artwork, Google maintains a free Device Art Generator for wrapping shots in real device frames, and Apple publishes device bezels in its Design Resources. Both are handy — but read the next section before you use either on a store listing, because there's a trap.
When I've got the raw screen and I know the frame I want, I compose and export the whole thing in the PlayMockUp studio so the URL bar, the shadow, and the export size are all set in one place instead of stitched together across three tools. When choosing a browser frame for your mockup, stick with a minimal Chrome or Safari window. The default toolbar with a URL bar is enough context to tell the viewer this is a web app without overwhelming the actual product screenshot underneath. Avoid outdated browser frames with thick toolbars — they instantly date your landing page.
Where should framed mockups go — and where should they never go?
Framed device mockups are for your marketing, not for your app store screenshots. Put them anywhere you're selling the product in your own space: the landing-page hero, feature sections, the Product Hunt gallery, your launch tweet, the email announcement, the pitch deck, the press kit. In all those spots a framed shot looks polished and professional.
But do not put device-framed images inside your Google Play or App Store screenshots. The stores want bare, unframed captures of your actual app — Google's own Device Art Generator explicitly warns that graphics made with it shouldn't be used as your Play Store screenshots or feature image. A frame-inside-a-frame (your screenshot in a phone, sitting inside the store's own phone preview) looks amateur and wastes the space the store hands you.
So keep two exports of every screen. One bare, correctly sized version for the stores. One framed, pretty version for the web and social. Same source screenshot, two destinations, two treatments. Once that split becomes a habit, you stop making the frame-in-a-frame mistake — and the same conversion instincts that make a store screenshot work carry straight over to your landing page, which is why the design principles in how to make app screenshots that get downloads apply to both.
Web app mockups are a different animal from mobile ones. Your users are sitting at a desk with a wide monitor, so the framing needs to match that context — a browser window, not a phone bezel. The best landing page mockups I've seen use a clean, modern browser frame with just enough chrome to feel real without drawing attention away from the product itself. If you're building a SaaS landing page, show the actual dashboard inside the frame. If it's a marketing site, show the hero section. The context sells the product before anyone reads a word of copy.
One more thing worth mentioning: perspective mockups work beautifully for mobile apps but can feel forced for desktop products. A flat, straight-on browser screenshot usually looks more professional for web apps. Save the angled perspective shots for social media posts where you need to grab attention in a feed. For your actual landing page, clean and direct wins almost every time.
Another consideration: aspect ratio matters more than you'd think. Desktop screenshots in a 16:9 browser frame look natural on a landing page. But if you're showing a vertical web app — say a dashboard with a tall sidebar — a taller crop inside a smaller browser window can work better than forcing everything into widescreen. Let the product's actual layout dictate the frame, not the other way around.
And don't forget about dark mode. If your web app supports it, show both variants. A lot of developers only mockup their light theme because it photographs better, but dark mode users — and there are a lot of them — want to see what they're actually going to use. Two quick mockups, light and dark, side by side, tell a more complete story than any amount of copy.
Frequently asked questions
Should I use device-framed mockups in my app store screenshots?
No. Google Play and the App Store want bare, unframed captures of your app at the exact required sizes, and Google's own Device Art Generator warns against using framed graphics as your store screenshots. Save the framed mockups for your website and social, and keep a separate bare export for the stores.
What's the best desktop frame for a SaaS landing page?
Match your audience's real hardware: a MacBook for design and developer tools, a plain monitor or Windows laptop for enterprise buyers, and a clean browser-window frame for consumer web apps. The browser-only frame often wins because it puts all the focus on your interface. You can pull any of those shells from [the device frame library](/frames).
What size should I export a desktop or browser mockup?
Export at 2x (retina) so it stays sharp on high-density screens, and match the screenshot's aspect ratio to the frame so nothing gets stretched. Start from the highest-resolution capture you have and scale down — never upscale a small screenshot to fill a bigger frame, because it'll look soft.
Browser-window mockup or full laptop mockup — which converts better?
It depends on your product, so test both. A browser-window frame strips away the furniture and points every eye at your UI, and it loads lighter; a full laptop adds a sense of a real machine and a physical product. For most consumer web apps I lean browser-only, but B2B pages sometimes do better with the laptop.
Can I make desktop mockups without design software?
Yes. You can compose the frame, background, URL bar, and shadow in the browser and export a finished mockup in a couple of minutes, no Photoshop required. That's exactly what [the online studio](/create) is built for.
Do I need a Mac to create a MacBook mockup?
No. The MacBook frame is just artwork wrapped around your screenshot, so any tool that has the shell can produce one from any operating system. What matters is that the screenshot inside matches your audience's device, not what machine you designed it on.
Build the mockup in your browser.
Drop a screenshot into a real device frame and export at the exact store size — free, no signup.