Categories:
mockup
app store
process
video

portfolio

products(β)

ru

2018 
Helsingborg 🇸🇪

3.05.2018

App Store mockup to test icons and screenshots


There are many online platforms to check the look of an app showcase. I don’t use them as they aren’t integrated with the main graphic design tools (Photoshop, Sketch, Figma). It’s important to see the final result right away and not to upload draft versions multiple times. Currently I’m using mockups for Photoshop that I’ve promptly created for myself. They are not beautiful but serve me well.

In this post I’m going to share about my first try to make this mockup neat without losing its main function.


The mockup was created in Figma. It’s a conditionally free tool that fully functions in any browser. It’s useful to create interface and prototypes similar to Sketch. In contrast to Photoshop, it’s much faster. Figma works on Windows and iOS, while Sketch only works on iOS.

I decided to start with Figma so that the mockup could be used not only by designers but marketers.

Components


The mockup is build with components, which are equivalent to smart objects in Photoshop. This allows to instantly update an icon regardless of its location. It works with screenshots, too.



Preview of the main pages graphics on App Store for iPad and iPhone


The mockup can show a preview of an app page, search page and an icon on the desktop for iPad (Pro, Air) and iPhone (7, X). You can use an old-fashioned way and send the preview pic to a chat for approval of add a user and discuss certain aspects of design directly in the layout.


Comments inside the layout


Preview

Export of graphics in accordance with technical requirements


The mockup enables you to export the graphics so that you can upload it to App Store. It’s handy if you create graphics using Figma.



Perks


You can modify the mockup, change the color of the device, the composition of the preview. The distance between screenshots is proportional to those on the app page. It’s handy when you need to draw pictures split on several screenshots.

How to use


Open this link, sign in/sign up, copy the mockup.



How to use Figma: export,  components, layers panel




What would you like me
to help you with?


︎

Hire me!