What’s inside the Device Mockups.
4 designs with real content in place. Rewrite them, reorder them, or add your own.
- 1Design 1Isometric phone trio on a sage sweep: three app screens lying at an angle with edge thickness, glass glare and contact and ambient shadows; three screen images (1179 × 2556 px each) and a recolourable backdrop
- 2Design 2Laptop and phone, clean studio: a three-quarter view of an open laptop showing the website and a standing phone showing the app, on a wall-and-floor sweep with soft floor shadows; two screen images (2880 × 1800 and 1179 × 2556 px)
- 3Design 3Lifestyle, café counter: a photo of a laptop beside an espresso with the website laid over its screen under a warm tint and a glass reflection; one screen image (2880 × 1800 px)
- 4Design 4Lifestyle, stone plinth: a phone standing on a sunlit plinth among driftwood, with a contact shadow, cast shadow and warm shade across the glass; one screen image (1179 × 2556 px)
When to use it.
Device Mockups is a set of four 1600×1200 scenes for showing an app or a website the way a client or a customer will see it. There are three phones lying at an isometric angle on a colour sweep, a laptop and a phone together in a clean studio, a laptop on a café counter and a phone standing on a sunlit stone plinth. Each screen is a single picture: replace it with your screenshot and it takes the device’s angle, glass glare and shading. The devices are drawn with soft shadows from one light, so all four scenes match.
Made for
- Brand and packaging designers
- App makers showing a launch
- Merch and print shops
- Agencies presenting to clients
Make it yours in four steps.
Open it in Designs and work through it, or let Docsiv AI do the first pass with your details.
- Step 1
Take your screenshots: 1179 × 2556 px for the phones and a 2880 × 1800 px capture for the laptops.
- Step 2
Click a device’s screen, press Replace and choose your screenshot; the sample app under it disappears.
- Step 3
Change the sweep and studio colours on the first two artboards to suit your brand.
- Step 4
Export each artboard as a PNG or JPG for your case study, portfolio or launch post.
Start from the Device Mockups now.
Questions about this template.
Something else on your mind? Ask us in the chat, bottom right of the page.
Is the Device Mockups template free?
Yes. Create a free account and it opens in Docsiv's Designs app, ready to edit and share. The Free plan includes every Docsiv app and 500 AI credits a month.
Can I change the colours, fonts and text?
Yes, all of it. The template uses Young Serif and Figtree with #b7c2a6, #e9e7e2, #fbf7f0, #cf4b2a, #1f3d2f, #f1b440, and you can change any of them, rewrite every word and add or remove designs.
What can I export it as?
Designs in Docsiv offers: PNG, PDF and HTML exports. Once it's saved, you can also share it with a link.
Can Docsiv AI write the device mockup for me?
Yes. Tell Docsiv AI about the client or project and it can draft the content in this template's style, which you then review and edit. AI uses credits; the Free plan includes 500 a month.
Start your mockup with Docsiv AI
Describe the client or the project and Docsiv AI writes a first draft of your device mockup for you to edit, share and send.