Phone Screen Mockups: A Complete Guide
How to make a realistic phone screen — Photos, Notes, Lock Screen, iMessage, Android Messages — around your own content, at the resolution the real device writes, without a design tool.
·6 min read
A phone screen mockup is a picture of a phone's screen — an app, a message, a lock screen — built around your own content and exported at the resolution the real device writes. You use them for social posts, tutorials, app store pages, decks, and design comps, and you can make convincing ones in a browser without a design tool.
Two kinds of "mockup"
The word covers two different things. One is a device frame — wrapping a screenshot inside a photo of a phone. The other, and the more useful one here, is generating the contents of a screen: the status bar, the app chrome, the bubbles or the photo grid, laid out exactly as the real interface renders them. Getting those contents right is what makes a mockup read as genuine rather than approximate.
Why real resolution matters
Each phone writes a screenshot at a specific pixel size, and exporting at that size is what keeps a mockup crisp when it's shown full-screen or printed. Build small and scale up and it goes soft immediately. iPhone screenshot sizes and Android screenshot sizes cover the exact numbers, and why iOS and Android differ.
The details that give a mockup away
- The status bar. Wrong time, wrong signal icon, wrong battery — the fastest tell there is.
- Platform accuracy. A green iMessage bubble on the wrong side, or an iPhone status bar on an "Android" screen, reads as off to anyone who uses the app.
- Fidelity of small elements. A legible battery number, the right accent color, correct spacing — the little things do the convincing.
The set of screens
Different jobs need different screens, and the Phone & App Mockups collection covers the common ones:
- iPhone Photos and Android Photos — show a photo inside the real gallery app.
- iPhone Notes — turn a block of text into a clean Notes screen.
- iPhone Lock Screen — a wallpaper with an editable notification stack.
- iMessage and Android Messages — a conversation you write, rendered as the Messages screen.
Without Figma or Photoshop
None of this needs a design tool or a license. Each screen is generated in the browser around your own content and exported at true resolution — the practical walkthrough is in how to make phone mockups without Figma.
Something out of date or wrong here? Device specs and interface details shift with every release. Tell me and I'll fix it.
Related reading
- How to Make Phone Mockups Without Figma or PhotoshopA practical walkthrough for putting a photo or design inside a realistic phone screen when you don't have a design tool, a license, or twenty minutes to spare.
- iPhone Screenshot Sizes for Every ModelThe exact pixel dimensions iOS writes when you take a screenshot, model by model, plus how points and pixels relate and why the numbers are what they are.