Phone & tablet mockups
Match device frames to source screenshots and keep the important interface visible.
Device frames, output dimensions and source screenshot dimensions are separate choices. A phone frame on a square canvas is useful for social sharing; it is not automatically an accepted app-store upload. Check orientation, fit and output pixels independently.
Match a phone screenshot to its device frame
A frame and source image should have compatible proportions.
Read the guide ↗Keep important content away from a device notch
Device decorations can overlap source content near the top edge.
Read the guide ↗Place a portrait phone on a square canvas
A square canvas leaves room beside a phone for a short message or visual breathing space.
Read the guide ↗Tell a two-step story with two phone screens
Two screens work well when they show a clear input and result.
Read the guide ↗Choose landscape framing for a tablet interface
Landscape tablet framing is useful when the interface relies on horizontal space.
Read the guide ↗Create a phone-and-tablet comparison
Use the same content to show how the interface adapts across devices.
Read the guide ↗Choose a device finish that supports the screenshot
A device finish should make the screen easy to see.
Read the guide ↗Keep device sizes believable in a multi-device layout
Relative scale helps viewers understand the scene.
Read the guide ↗Use portrait tablet mockups for reading interfaces
Portrait tablet framing suits content that naturally flows vertically.
Read the guide ↗Present a landscape phone interface clearly
Landscape phone screenshots need room for the wide screen and its frame.
Read the guide ↗Leave breathing room around device frames
Outer margins keep rounded corners, shadows and tilted edges from feeling cramped.
Read the guide ↗Understand device frame size versus export size
The device frame describes the object inside the image; export size describes the whole image.
Read the guide ↗Review a device mockup before sharing
Review the screenshot, screen opening and outer composition as separate layers.
Read the guide ↗