justinmind

15 awesome mobile app mockups to download

August 21, 2020
list of mockup templates to download

15 free mobile mockup templates to download plus Justinmind’s top tips for designing your own mobile app mockup

Designing a mobile app mockup is the best way to visualize how your app will look and feel when complete. It lets you test out both visual and information hierarchy and gives you the opportunity to test drive any gestures such as swiping and tapping. It’s also a great way of scoring stakeholder buy-in and gives you a real MVP that you can test out on your users.

Download Justinmind and start experimenting with our templates now!
Download Free

However, if you’re new to the game or simply don’t have time to start from scratch, fear not! We have plenty of templates available. Working with templates is a walk in the park because:

  • Visual / information hierarchy has already been defined
  • They let you focus more on brand-specific adjustments like color and font
  • They help you set design priorities and gauge feasibility of client requests
  • They bring you to an MVP faster
Mobile app mockup - Justinmind

If you want to design your own mobile app mockup from scratch, or you want the help of a template, this post is for you. Read on for the dos and don’ts of mobile app design and to discover seven brilliant mobile mockup templates to use in the Justinmind mockup tool.

3 top tips for your first mobile app mockup

Make your mobile app mockup usable

Your primary concern throughout the mobile design process should be your users. Users need to know exactly how to work your app, because if they get lost, they may close the app never to return.

That’s why designers build functional app mockups with built-in mobile gestures that target users can interact with. Upon completion of the first mobile app mockup iteration, users will be able to test out and give feedback on the app’s navigation flow and touch UI elements. This will allow you to make your app mockup as accessible and inclusive as possible.

It goes without saying that both sites and apps should be usable. But when designing a mobile app mockup, you’ll also need to think about accommodating smaller screens by appropriately adjusting your use of UI colors, whitespace and touch elements.

Give your users visual cues

Defining and testing out mobile gestures with your target audience is a good way to keep them in the loop. But what about when the user needs more guidance?

Whether they’re waiting for a page to load, refreshing their email inbox or filling out a form, your mobile app mockup needs to give the user feedback on their interaction. How? With microinteractions.

These miniature interactions take place upon a user’s interaction with an app, and offer visual and actionable cues on what’s coming. Though only engaging the user for an instant, microinteractions provide a more complete picture of the state of the user’s request.

Use the right mobile UI pattern

Every user touchpoint in your mobile app relies on your mobile UI pattern, or navigation pattern. The wrong pattern will make it more difficult for your users to get from Point A to B, cause them frustration and diminish the user experience.

Users don’t respond well to change – so keep things familiar or you’ll quickly lose them.

“People tend to be unaware of an app’s navigation until it doesn’t meet their expectations.”

									Human Interface Guidelines for iOS - 								

When mocking up a mobile app, it’s important to use a mobile pattern that users are comfortable with. This will help to ensure that their experience is as seamless as possible.

Additionally, make sure that your mobile pattern is in sync with your operating system (Android or iOS). For instance, both Android and iOS use tabbed bottom bars. But whilst Android uses the Overflow menu for additional settings, Apple and iOS use the More Options menu.

Check out our post on 5 mobile UI navigation patterns for more information.

Mistakes rookie designers make with mobile app mockups

No matter what kind of mobile app mockup you’re designing, a good designer won’t deviate from design standards or principles. Here are a couple of bad design habits to avoid when approaching the mockup phase:

Skimping on the onboarding process

Every mobile app needs to offer their new users an onboarding experience. Onboarding helps introduce new users to the app, walk them through features and set up their online account.

Keep onboarding short, focused and interactive to avoid cognitive load. Successful onboarding can help improve user retention and engagement.

Not setting defaults

Apps with great UX are those that save users time and effort. Mobile users are often on the go, and don’t have the time or patience to be asked for the same information twice. Default values and placeholders – such as suggestions in sign up form input fields and recent places in map apps – can be a big help (see out tutorial on how to add placeholders to mobile app mockups).

But what’s even more important than design pitfalls? Using the right tool to mock up your app! Justinmind allows you to mock up the visual and functional components of your mobile app and them test them with real users. That’s why it’s one of the best mockup and wireframing design tools out there.

15 mobile app mockup templates that will solve all your problems

Here are 15 free mobile app mockup templates to download and customize:

Product walkthrough mobile app mockup

mobile app mockup walk through

Product walkthroughs are used in onboarding, to make apps more intuitive and straightforward. Block colors, minimalist visuals and simple instructions are key to making your mobile onboarding experience run smoothly. Slide to the left or right to move between the pages in the walkthrough.

Download it free here or try it out here.

Watch this video to see how we made ours!

Screen flow validation mockup

Screen flow validation - mobile app mockup template

This is a great example of an easy-to-use registration form, requiring the least possible user effort. When the user inputs their name, email or password and hits return, the next screen slides in automatically negating the need for the user to scroll.

Download it free here or try it out here.

Photo sharing app mockup

Photo sharing app - mobile app mockup template

Our very own photo sharing mobile app mockup. Get ready to rival Instagram ?

After a beautifully simple login screen (hint: the username and password are hidden in plain sight… talk about reveal!), the user is taken through into a familiar-feeling photostream. The interface is scrollable, and tapping on a photo triggers a micro-interaction, complete with a UI animation.

You can click through to see a user’s profile, change the layout type and zoom in on individual shots – note the cool transition animation here.

Download it free here or try it out here.

Flight booking app mockup

Flight booking app - mobile app mockup template

This native iOS flight booking app prototype features a date picker and multiple interactive dialogs which allow the user to easily book their travel plans. The easy-to-follow steps guide the user through the flight search and booking process, right up to displaying the boarding passes including flight information and passenger information the user entered.

Check out the neat transition animations as you move between the different screens: they’re subtle but still noticeable. Transitions like this help the user to understand that they’re moving forward in a process. Error messages appear as a floating layer when one or more necessary fields are left blank.

Download it here or try it here

Messaging app mockup

Messaging app - mobile app mockup template justinmind

Loading up our fab messaging app prototype for Android, you go straight into a login screen, nice and simple and with a modern-looking gradient, and a big bold login button. Once logged in, you see the recent chats screen, complete with a nice animation on the big ‘new chat’ button on the bottom right.

Tapping one of the chats will open it in a new screen, with a slight microinteraction animation to confirm the action. The hamburger menu on the left slides in a layer which gives you access to the Chats, Profile, Contacts and Files screens, as well as an option to sign out.

Download it here or try it here

Slide menu mockup

Slide menu - mobile app mockup - Justinmind

One feature you’ll see in a large number of mobile apps, particularly on Android, is the slide menu. While they’re not without their controversies, when done properly, a slide menu can add a useful series of navigation and configuration options while saving on precious real estate. Revealing as a new layer with a smooth transition, the slide menu usually gives you access to otherwise hidden elements, like profile controls, navigation or folder options (think: Gmail) and often an advanced settings button.

Download it here or try it here

iOS passcode screen mockup

iOS Passcode - mobile app mockup - Justinmind

Our sign in screen mockup uses elements from the iOS UI kit to simulate signing in to an app on an iOS device. You’ll need to use the correct credentials – if you don’t, you’ll see an error message explaining that you need to try again. Sign in successfully and you’ll find yourself in the familiar surroundings of the iPhone’s Mail app.

Download it here or try it here

Travel Experiences app mockup

Travel Experiences mobile app mockup

Next up on the list is our Travel Experiences app mockup, boasting some stunning high-definition image templates and intuitive navigation for a photo sharing or blogging app.

Our mockup app template is focused on sharing adventure stories and images. The main layout consists of an image carousel with slide left and right interactions already built in. Why not have a go at swiping through each image and selecting a story?

If the user presses the activity button, such as “surfing”, the image explands for each adventure sporting activity to full-screen. There is even a section below for likes built in, meaning it would be a great app mockup template to start with in order to design a social app.

As a social app mockup template, there’s actually not a whole lot left for you to do – most of the work is already done here!

Download it free here or try it out here.

Product Transitions app mockup

Product Transitions mobile app mockup

Are you looking for a minimalist template for product transitions? Our Product Transitions app mockup is clean and minimalist with the details in the smooth transitions between each product. In fact, like the mockup app template above, this one is also a great example of a mobile UI carousel.

Give it a try – swipe through the images and you’ll see that they already have transition interactions built in. When the user swipes left, the product image will move left, prompting another to materialize in its place.

Below each product, there’s also a paragraph of Lorem Ipsum text you can edit to fill in a description. The template even includes like, share and view icons at the bottom of each product. Furthermore, all the visual hierarchy has already been determined by Justinmind’s in-house designers, so you can just focus on editing the content and reinforcing your brand!

Download it free here or try it out here

Apple Watch app mockup

Apple Watch mobile app mockup

Finding a lack of mockup app templates for the apple watch? Not to worry – Justinmind is here to the rescue. Copying this Apple Watch template will help you design usable and compatible Apple Watch app mockups with great UX.

In this template you’ll find the familiar homescreen of the Apple Watch, along with extra screens for Siri interactions, emulates real life graphics for voice commands. Additionally, you find a workout screen with real timers, along with an activity screen that features a calorie counter.

Why not strap on our Apple Watch mockup to your Justinmind canvas and see what you can create with it!

Download it free here or try it out here

Bookshelf App mockup

Bookshelf mobile app mockup

This Bookshelf mockup app example is aimed at housing a library of digital media, featuring a sliding carousel of literature to read, along with a feature image for the main story, along with a view all button.

Below, at the bottom of the screen you’ll notice there’s a taskbar with the typical built-in navigation, similar to the Bookshelf app found on the App Store and Google play. Furthermore, each book you tap expands with a synopsis that you drag up from the bottom of the screen. Stowing the synopsis will reveal star rating and comment buttons. Why not give it a try?

This is a great mockup app template to take advantage of if you want to create a reading app or any kind where digital content can be consumed by your users.

Download it free here or try it out here

Before and After app mockup

Before and after mobile app mockup

Looking to create a photo editing app or similar feature? Or do you simply want to test out what you can do with slider elements in Justinmind? If so, you should definitely take our Before and After app mockup template for a spin.

The level of interaction already built into this mobile app mockup template is remarkable, yet the premise is quite simple: you‘ll see this app contains a greyscale photograph that you can adjust to saturate with color, merely by moving the slider from left to right and vice versa.

However, that’s not the only slider interaction you can add into your mockups in Justinmind – you can also use it to add other effects like sepia and to adjust aspects like contrast, brightness and blur.

This template demonstrates the greyscale effect for the purpose of demonstrating the power of the transition interaction that you can add into your mockup apps in Justinmind.

Download it free here or try it out here

Store App mockup

Store mobile app mockup

Our Store App mobile mockup template is great for use in an ecommerce mockup. The screens in this mockup are already very complete, featuring a large image of each product (in this case headphones) that the user can change by browsing through a carousel of product images. Forward and Backward buttons with the relevant built-in interactions adorn each side of the carousel.

If you try adding some of the products to the shopping cart at the top right, you’ll notice that a number appears overlaid on top of the icon indicating the quantity of products that you added.

Clicking on “more info” beside each product will let you view the product from various angles, in similar fashion to Amazon. There are also some color selector radio buttons that let the user view images of the product in various colors. In addition to that, you’ll notice an inbuilt modal window that pops up when you click on the cart that lets you adjust the quantity of products you selected using drop down lists.

The checkout button then brings you to the checkout page where the user can fill in their details with editable text fields, select the expiration date of their credit cards with a date picker and their country from a drop down list.

If you’re designing an ecommerce mobile app mockup, you’ll find that most of the work is already done for you in terms of visual hierarchy, navigation design and content hierarchy, not to mention interaction. Once again, justinmind’s in-house design team worked wonders with this template!

Download it free here or try it out here

Confirmation Pop-Up app mockup

Confirmation pop-up mobile app mockup

Deleting a file accidentally can sometimes have precarious consequences. That’s why something as simple as a confirmation message can really help improve UX. And that’s exactly what this Confirmation Pop-Up mobile app mockup aims to do.

This template features a list of messages from a messaging app that have been highlighted so the user can delete them by pressing the classic “X” symbol. That then prompts a modal window to pop up where they have to confirm they want to “delete” the message or “cancel” the procedure.

The great thing about this mockup app template is that the color scheme and symbolization is already thought out. For example, the X is in red, the vector image on the modal window of the person and the trash can is in red and the delete button is in bold red as well. Only the “cancel” button and warning text is in red. The color scheme also provides great contrast for someone with color vision deficiency.

Even though these might seem like minor details, this mockup app template provides a functional – if not necessary – feature for any messaging, media or data heavy app. For best results, why not combine this mockup screen with our other messaging app mockup template?

Download it free here or try it out here

Zoom and Pan app mockup

Zoom and pan app mockup

Need to mockup a mobile app that has a map screen? Then our Zoom and Pan mockup could save you quite a bit of time. It features a world map with iconic landmarks – a handy, built-in pan feature that lets the user drag the map to any continent. It also has a button with built in zoom-in and zoom-out interactions.

As we like to say here at Justinmind, it’s all in the details – our zoom button is made intuitive with a +/- symbol that changes once maximum zoom-in and zoom-out are reached.

The Pan and Zoom mobile app mockup can be a huge timesaver when you have to design map screens for your mockup – just replace it with your own map and icons. Most of the work is already done for you!

Download it free here or try it out here

You can find more awesome mockup examples on Justinmind’s Examples page.

Conclusion

Designing a mobile app mockup is, or should be, a critical part of your product development roadmap. The combination of advantages that a mockup offers in terms of completing the final product to meet client requirements and user expectations, while providing your colleagues with a complete picture of how it should look and feel is unbeatable. Download any of the mobile app mockup examples we’ve included here, take a look at how it works in Justinmind, and we’re sure you’ll be convinced.

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast