I create things. I blog about it. Sometimes.

2 July 2016

Nexus 5X SVG Mockup

tl;dr Below, you can grab a vectorized SVG stencil of the Nexus 5X smartphone (in black) to create your own shiny app mockup.

This will be a short blog post. It’s basically here to let you know that I couldn’t resist creating an up-to-date SVG mockup of the current official Android 5” flagship phone, the Nexus 5X. It is the sequel to the first ever SVG mockup I made (of the Nexus 5). Lo and behold:

The Nexus 5X is a simplistic phone, so there wasn’t much to model. The most interesting details on the front side are the front-facing camera and the rounded rectangle loudspeakers at the top and bottom.

I tried to model these with sufficient accuracy after the original high-res image from Google. The whole process took me about 1.5 hours. I used gradients across the phone body and on rims and edges. When you map a real photograph to a vector representation, the resulting appearance is always somewhat cartoonish and flatter than the original. This is something I like, especially for app store artwork, since the attention should go to the contents of your screenshot and not the shiny phone around it.

Please feel free to use the mockup for your own screenshots. You can find the download link at the bottom. The file is released under a Creative Commons share-alike license, so go ahead and modify it in any way, as long as you share any modifications. To insert your own screen art, follow the instructions from my Nexus 5 post - the new SVG file has the exact same structure.


Download the Nexus 5X SVG Mockup