Presenting a design in a device mockup
A device frame makes a flat design feel real in a portfolio or pitch. This guide explains which frame fits which audience.
What is the Device Mockup Generator?
Choose a device and colours, and this tool reports that device's screen size and lays out a mockup frame in the browser. It is a presentation frame, not a real device screenshot, so it suits slides and portfolios.
How to use it
- Choose a device.
- Set the screen colour and title.
- In a browser, view and download the framed mockup.
Worked example
A phone mockup frame at 390 by 844 pixels, titled My App, ready to draw in a browser.
Why use a device mockup?
It shows scale and context, so viewers instantly understand where the design will live.
Frequently asked questions
Are these real device pixel sizes?
They are common logical screen sizes for presentation, not every model's exact hardware pixels.
Can I put my own screenshot inside?
This simple version frames a coloured screen with a title; a screenshot needs an editor.