OpenMock BlogGuides
3D device mockups vs flat mockups: which to use, and when
Flat frames and 3D renders solve different problems. How to choose for store screenshots, landing pages, social and video, trade-offs included.
"Device mockup" covers two quite different things. A flat mockup is a 2D image of a device — a photograph or a vector frame — with your screenshot placed onto the screen area. A 3D mockup is a rendered model you can turn, light and animate, with your screenshot mapped onto its display. Both are legitimate; both are overused in the wrong places. This guide is about picking.
What each one actually is
Flat mockups are fixed compositions. Someone photographed or drew a phone at one angle; your image goes on the screen with a perspective transform. Template libraries have thousands of them — hands holding phones, laptops on desks, devices on coloured backgrounds. They are fast, familiar and consistent.
3D mockups are geometry. The device exists as a model; you choose the camera, the lighting and the pose, and the renderer produces the image. Change the angle and everything — reflections, shadows, the screen's perspective — follows. In OpenMock the devices are procedural three.js models: iPhone 17 family, iPad Pro, MacBook Pro 14 and 16, MacBook Neo, Apple Watch Ultra 3 and Pro Display XDR, plus a frameless screen.
Where flat wins
- In-context lifestyle photography. A real hand, a real café table, real daylight. A 3D render of a hand is a bad idea; a photographed template is exactly right.
- Bulk store screenshot sets with a template system: ten screens, several languages, one layout. Template tools are built for that production line.
- Consistency across a large team. A fixed template cannot be "improved" by the intern.
- Speed for a single social still when the template already matches.
Where 3D wins
- Anything that moves. A camera move, a lid opening, a phone rotating to reveal the back — flat images cannot do it, and faking it with a zoom looks like a slideshow.
- The exact angle you want. Product shot from slightly above and left, lid at 105°, phone tilted 12° — a 3D camera gives you that; a library gives you the closest photograph.
- Matching your lighting to your brand. HDRI environments, screen glow that lights the hardware from the display, depth of field, motion blur — the renders look like your studio, not a stock photographer's.
- Current hardware. A procedural model of the iPhone 17 Pro Max or the MacBook Neo exists the week the device ships; template libraries lag.
- Transparent exports at any size. A 3D render outputs a clean transparent PNG at 4K for your own layouts, with correct edge lighting.
- Multi-device scenes. A MacBook and an iPhone in the same lit space, both showing your app, is a single render.
Where neither is right
Sometimes the device is noise. App Store previews are held close to the actual UI. Documentation screenshots want the interface, not a phone. Android listings look odd with Apple hardware. For these, use a frameless screen — the UI on a clean background, with the same lighting, effects and camera as the 3D scene but no hardware. OpenMock's frameless mode exists for exactly this.
Decision table
| You are making | Use |
|---|---|
| App Store or Play screenshots, framed, at exact sizes | 3D (straight-on) or flat — both fine; 3D if you want one scene for all sizes |
| App Store preview video | Frameless or minimal 3D; keep the UI the content |
| Landing-page hero video | 3D — slow camera move, screen glow, loop |
| Landing-page hero still | 3D transparent PNG over your own background |
| Product Hunt / launch video | 3D — device reveal, recording, text shots |
| Reels / TikTok / Shorts | 3D — a quick flap or rotate on the beat |
| Lifestyle social photo (hands, desks) | Flat template |
| Blog post illustration | Either; flat if you need it in ten seconds |
| Press kit | 3D transparent PNGs at 4K, several angles |
| Documentation | Frameless or raw screenshot |
Common objections to 3D, answered
"3D is slow." Rendering in a desktop 3D suite is slow. A browser-based studio renders a still in a second and a 30-second 1080p video in well under a minute on current hardware.
"3D looks fake." Bad 3D looks fake — flat lighting, no reflections, plastic materials. Good 3D uses real HDRI environments, physically based materials and effects like screen glow and depth of field that mirror how cameras and light actually behave. Judge the output, not the category.
"I just need one image." Then a flat template may be quicker — unless you need a specific angle or a transparent export, in which case the 3D still is the same two minutes.
"I don't know 3D." You do not need to. Pan, zoom, tilt and roll are the whole camera vocabulary, and presets cover the rest.
FAQ
Are 3D device mockups better than flat ones?
For motion, exact angles, controlled lighting and transparent exports, yes. For lifestyle photography and bulk template production, flat mockups are the right tool. They solve different problems.
Can I use 3D mockups for App Store screenshots?
Yes — framed marketing screenshots are allowed. Keep the device straight-on or nearly so and export at Apple's exact sizes (1320 × 2868 for the required iPhone set).
What is a frameless mockup?
The UI rendered on a background with lighting and effects but no device hardware. Use it for App Store previews, Android listings and documentation.
Do I need a powerful computer for 3D mockups in the browser?
Any recent laptop with WebGL works for stills. Video export uses the browser's hardware encoder; a 30-second 1080p clip takes under a minute on a current MacBook.