Skip to main content
PlayMockUp
Guide9 min read

Device Frames for App Mockups: Pick the Right One

RVBy Rohit V.
Phone, tablet, and laptop devices arranged together on a desk
Photo by Unsplash on Unsplash
Quick answer

A device frame is the realistic phone, tablet, or laptop shell you drop your screenshot into for a store listing. It signals that your app is real and shipping, and a current-generation frame can raise perceived quality noticeably — outdated frames make an app look abandoned. Pick a recent device frame, keep the frame from dominating (let your UI fill most of the canvas), and use the same frame across every screenshot so the listing reads as one designed set.

What is a device frame and why does it matter?

A device frame is the realistic shell — a phone, tablet, or laptop with the correct bezel, corners, and proportions — that you drop your raw screenshot into before you upload it to the store. Instead of a bare floating UI screen, your screenshot sits inside what looks like an actual device.

It sounds cosmetic. It isn't. The frame does real signaling work.


A bare screenshot reads as "here's a picture of a screen." The same screenshot inside a believable device frame reads as "here's a real, shipping product on a real phone." That tiny shift in perception matters at the exact moment someone is deciding whether your app is legit enough to install. The frame is a trust cue.


The frame *choice* matters even more than whether you use one. From what the ASO data shows, premium current-generation device frames lift perceived value — one analysis pegged it around 23% higher perceived quality versus a dated frame. And the reverse is brutal: an old frame, like an iPhone with the original notch from years ago, tells a viewer "this app hasn't been touched in ages," even if you shipped an update this morning.


I felt this myself. I'd reused an old phone mockup PNG for a relaunch — same one I'd grabbed for my first app two years earlier. A friend glanced at the listing and asked if the app was still maintained. The *frame* made it look stale. Swapped it for a current device and the whole listing felt alive again. You can see the current-device options in the
PlayMockUp frame library, which is exactly why it's kept up to date with recent phones rather than two-year-old shells.

How do you choose the right device frame?

Picking a frame isn't just "grab a phone." A few decisions actually move the needle.

Match the form factor to what you're showing. A phone-first app gets phone frames. If you're showing a tablet layout or a Wear OS face or a companion web app, frame it in the right device — a tablet screenshot stretched into a phone frame looks obviously wrong, and a web dashboard belongs in a laptop or desktop frame, not a phone. Showing the true form factor also tells the store (and the user) which devices you actually support.

Use a current device. This is the single biggest lever. A recent phone frame signals an actively maintained app; a years-old frame signals neglect. When the latest devices ship, the frame library should follow, and yours should too.

Pick a frame color that fits your brand. Many frames come in multiple finishes. A dark frame makes colorful UI pop and feels premium; a light frame feels friendly and clean. Choose the one that matches your icon and screenshot palette rather than defaulting to whatever's first.

Don't let the frame dominate. The frame is a stage, not the star. Your actual app UI should occupy the majority of the visual — a good rule of thumb from the ASO playbooks is content filling 70%+ of the canvas, with the frame and background as supporting context. A giant frame with a tiny screen inside wastes your most persuasive real estate.

Stay consistent across all screenshots. This is the one people skip. Pick one frame and one orientation and use it for every screenshot in the set. A carousel where frame one is a dark phone, frame two is a light phone, and frame three is a tablet reads as chaos. One frame, one background, one type style — across all eight. You can browse and lock a single frame for the whole set in the device frame library.

Which device frames work for which app types?

Multiple mobile devices displaying app interfaces side by side
Photo by Unsplash on Unsplash
Different apps call for different framing. Here's the rough mapping I use.

Pure mobile app (most apps): Phone frames, portrait, full stop. Pick a current Pixel or Galaxy frame for Play, a current iPhone frame for the App Store. Keep the same model across the set.

App with a strong tablet experience: Add tablet frames in a separate screenshot set. Google treats large-screen quality as a featuring and ranking signal for tablet and Chromebook users, so if your app shines on tablet, show it in a real tablet frame at the true tablet resolution — don't upscale a phone shot.

Companion web app or desktop dashboard: Laptop or desktop frames. If your mobile app pairs with a web dashboard or a Mac client, a laptop mockup on the landing page or in a large-screen listing communicates "this works everywhere" far better than another phone shot.

Games: Often landscape phone frames, since most games are played horizontally. Frame your best moment-to-moment gameplay, not a menu.

Productivity or B2B apps: A mix can work — a phone frame for the on-the-go view plus a laptop frame for the deep-work view tells the "use it anywhere" story in two frames.

The trap across all of these is hand-calculating dimensions per device. A phone is one resolution, a 7-inch tablet another, a 10-inch tablet a 16:10 ratio, a laptop something else entirely. Get the canvas wrong and your screenshot looks stretched. The whole reason I use a frame-based studio is that the frame *defines* the export size — pick the device, drop the screenshot in, and the
export comes out at the right dimensions for that form factor automatically, no manual math. PlayMockUp ships phone, 7-inch and 10-inch tablet, plus laptop and desktop frames for exactly this reason.

How do you frame screenshots without design software?

Here's the honest version of how most indie devs *think* they have to do this, versus how it actually goes.

The painful way: take a screenshot, open Figma or Photoshop, hunt down a device mockup PNG, line your screenshot up inside the bezel by hand, fight the corner radius so it matches the frame, add a background, position a headline, then export and pray the final pixel dimensions match what the store wants. I did this for my first app's five screens and it ate an entire evening. Then the store rejected two of them for being the wrong size and I did it again.


The fast way: use a tool built for this exact job. Open the
PlayMockUp studio in your browser, pick a current device frame, drop your raw screenshot in — it snaps inside the bezel with the right corners automatically — add a background and a headline, and export at store-ready dimensions. No signup, the screenshots never leave your browser, and you can apply the same frame and background to all eight screens in a few minutes.

A few things to get right regardless of which tool you use:


-
One frame, one background, one type style across the whole set so the carousel looks designed. - Let the UI be the hero — keep the frame supporting, not dominating, with your app screen filling most of the canvas. - Pick a current device so the listing doesn't look abandoned. - Export at the store's exact size — let the frame define the canvas instead of resizing a finished image, which is what produces stretched-looking screenshots.

For the underlying Android numbers each frame should export to, I broke down every dimension in
the Play Store screenshot sizes guide. And if you want Google's own word on why large-screen and tablet framing matters for featuring, their large-screen app quality guidelines are the source of truth. Get your frame chosen and your canvas locked once, and every future update is a quick re-export instead of another lost evening.

Should every screenshot use the same frame?

Short answer: yes, with one narrow exception.

The default rule is hard consistency. Pick one device frame, one orientation, one background style, one caption position, and apply them to every screenshot in the listing. The human eye reads a consistent set as trustworthy and designed; it reads a mixed set as careless. I've audited my own old listings and the ones that felt cheap almost always had inconsistent frames — a stray light phone among dark ones, or one screenshot suddenly in landscape.


The consistency isn't just aesthetic. When every frame is identical, your screenshots line up at the same height in the carousel, so swiping through feels smooth instead of jumpy. Mixed frame sizes create that subtle visual stutter where each card sits at a different height.


The one exception:
deliberately showing a different form factor to make a point. If your app genuinely has a great tablet or desktop experience and you want to communicate "this works on your big screen too," a clearly intentional tablet or laptop frame — placed where it reads as a deliberate choice, not an accident — can strengthen the story. The keyword is *intentional*. One purposeful laptop frame in an otherwise-phone set says "cross-device." A random tablet shot in the middle just says "oops."

The other place changing the frame helps is testing. Your screenshot set is a hypothesis, not a monument. Try the same screenshot in a phone versus a tablet versus a laptop frame and see which reads strongest for your app — sometimes the form factor itself is the variable worth testing. Because re-exporting a variant in the
PlayMockUp studio takes minutes, you can test cheaply and keep whichever frame converts. Browse everything available first in the frame library, pick your default, and only break consistency on purpose.

Frequently asked questions

Do app screenshots need a device frame?

Stores accept bare screenshots, but framed ones consistently look more professional and signal a real, shipping product. A device frame is a trust cue at the moment someone decides whether to install. You can drop any screenshot into a realistic frame for free in the [PlayMockUp studio](/create) and the export lands at the correct store size.

Does the device frame I choose affect conversion?

Yes. A current-generation frame raises perceived quality — one analysis found roughly 23% higher perceived value versus a dated frame — while an old frame, like an original-notch iPhone, makes the app look abandoned. Use a recent device and keep the frame from dominating so your app UI stays the focus.

Should all my screenshots use the same device frame?

In almost all cases, yes. One frame, one orientation, and one background across the whole set makes the carousel read as designed and keeps every screenshot at a consistent height. The only exception is deliberately showing a tablet or laptop frame to communicate a cross-device experience. You can lock a single frame for the whole set in the [device frame library](/frames).

What's the best device frame for a store listing?

A current-generation frame that matches your app's form factor — a recent phone for mobile apps, a real tablet frame for tablet experiences, a laptop frame for companion web apps. Match the frame finish to your brand palette and keep your app UI filling most of the canvas. The frame is a stage, not the star.

How do I add a device frame to my screenshot for free?

Use a browser-based mockup studio instead of fighting with Photoshop. Open the [PlayMockUp studio](/create), pick a current device frame, drop your raw screenshot in so it snaps inside the bezel automatically, add a background and headline, and export at store-ready dimensions. No signup, and the screenshots stay in your browser.

Can I frame tablet and laptop screenshots too?

Yes, and you should if your app has a real large-screen experience. Google treats large-screen quality as a featuring and ranking signal, so frame tablet screens in a true tablet frame at the right resolution rather than upscaling a phone shot. The [PlayMockUp frame library](/frames) includes 7-inch and 10-inch tablet, laptop, and desktop frames alongside phones.

Build the mockup in your browser.

Drop a screenshot into a real device frame and export at the exact store size — free, no signup.