Categories / Inspiration
How To Use Mobile Mockups to Showcase Your App's UI
James Evans March 31, 2021 · 5 min read
What Are Mockups?A mockup is a high-fidelity visual representation of your finished app used to visualize your concept before you build the back-end of the app. They are referred to as ‘high-fidelity’ because they closely resemble the finished product. Mockups are typically static images that display the UI but are not interactive. A high-fidelity representation with interactivity (e.g. the ability to click or swipe to see different menus) is called a prototype, rather than a mockup. A mockup normally consists of two elements that are combined to create the final image. A static image of your proposed user interface is added to a mockup template to show how the app would look when working on a device. For example, this template showcases the app as if it were working on an iPhone XS:
What Are The Benefits of Using Mockups?A mockup is useful any time you need a visual representation of your app. For example, you can use them to showcase your ideas in a pitch to a potential client or to add visual flair to your portfolio. Mockups are also great for marketing your app, both before and after you’ve built it. An early mockup enables you to start building an audience for your app and test user reactions to it before you’ve launched. Finally, mockups are essential during the development process. A high-quality image of your planned UI helps users and clients to deliver useful feedback on the design. This enables you to make design changes before you’ve built the back-end of the app; making these changes after the app has been built would be far more time-consuming and expensive.
How to Build a Mockup For Your AppWith the right tools, building a mockup for your app is quick and easy.
Step 1: Getting ReadyBefore you begin, you should first make sure you have planned out the basic structure and design of your site and, if necessary, got approval on that idea from the client (if you have one). Creating a mockup before you’ve done this is an inefficient use of your time – use sketches and wireframes to outline the basics first. Next, you’ll need to decide which screens you need to display. If you’re creating a mockup as a part of the design process, this may be every screen. However, a mockup for a pitch, portfolio or marketing piece may only need a couple of screens.
Step 2: Create a Visual Representation of Your UIRemember those sketches and wireframes we mentioned in Step 1? It’s now time to turn those into a digital image. If you’re building this using a tool like Photoshop, Sketch, or Adobe XD, you may want to invest in a UI Kit. These kits are collections of graphical resources that have been created to aid UI design and include components such as checkboxes, progress bars, buttons, and full design views. Editing items from an existing kit will save time and help you create prototypes quicker. The Atro Mobile Kit, for example, includes more than 100 mobile design views, each of which is fully-layered for easy editing: Remember: Always check that you have selected the correct license for your use and that the file is compatible with your chosen image-editing software before making a purchase.
Step 2: Find and Download a Mockup TemplateThe mockup template is the part that turns your flat representation of your UI into a realistic 3D view of your app in use on a device, taking your image from good to great. There are thousands of these to choose from on Creative Market, so take your time and find one that is perfect for your audience. One of our favorites is this Perfect Hands Mockup, which is great for marketing your app: Users looking for something a little simpler can’t go wrong with this option:
Step 3: Add Your Images To The MockupOnce you’ve downloaded your mockup template and opened it in your favorite image-editing program, you should find that it consists of several layers. Some templates will have just a few, while more complex ones may have many. You need to place your UI image in the correct layer so that it is displayed within the template. The specifics will depend upon which program you’re using, but the layer you need should be clearly labelled and easy to find. If you’re working with Photoshop, the correct layer is likely to be a Smart Object. Click the Smart Object icon and replace the default content with your image; the template will automatically apply the correct visual effects to create the mockup.
Step 4: Get SharingThat’s it! In just three steps you’ve created a professional mockup of your app’s UI. Put it to work marketing your app or get it in front of users so that you can start receiving feedback.