March 12, 2020

iPhone Mockup with Actual Screen Sizes

I create lots of mockups showing how UI designs would look on mobile devices. Unfortunately many of the device mockup templates use screen sizes that aren’t the same as the actual device. This means that you have to re-scale artwork to the device template you are using. I’m lazy and can’t be bothered with that approach so I have created a template which consists of two iPhones where the screen size is the actual screen size of the phone.

This means you can embed your Adobe XD or Sketch mockups directly into the template – provided your XD and Sketch art boards are 375×812 for the iPhone x/xs/11 pro or 375×677 for the iPhone 6/7/8.

As a bonus, you can also re-size your browser to 375 pixels wide and use a screen capture tools to grab the screen and embed that. This is something I’m also asked to do on a regular basis.

Note: I should point out I didn’t draw the devices, I merely resized them carefully on a pixel grid so the inner screen was the actual device screen size.

Download the template here