TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

7 awesome mobile app

mockups to download
MOBILE PROTOTYPING | January 16, 2018

7 free mobile mockup templates to

download plus Justinmind’s top tips for
designing your own mobile app mockup
TOUR EXAMPLES FREE TOOLS HELP

PRICING

Designing a mobile app mockup is the best Dway

O W N Lto visualize
OAD FREE

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!

D OW N LO A D N OW

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
T O U R priorities
E X A M P L E and
S Fgauge feasibility
REE TOOL S H E L P of

PRICING
client requests
DOWNLOAD FREE

They bring you to an MVP faster

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
 TOUR EXAMPLES FREE TOOLS HELP

Make your mobile app mockup usable PRICING

DOWNLOAD FREE

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
T O Ufor
R a page
E X A M P Lto
E S load,
F R E Erefreshing
TOOLS Htheir
ELP

PRICING
email inbox or filling out a form, your mobile app mockup
DOWNLOAD FREE
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 Tusers
OUR toE Xget
A M P from
LES Point
F R E E T OA
O Lto
S B, Hcause
ELP

PRICING
them frustration and diminish the user experience.
DOWNLOAD FREE

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.

 TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

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
T O Uto
R offer
E X Atheir
M P L E S new
F R Eusers
E T O O L an
S onboarding
HELP

PRICING
experience. Onboarding helps introduce new users to the app,
DOWNLOAD FREE
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.

 TOUR EXAMPLES FREE TOOLS HELP

PRICING

7 mobile app mockup templates that DOWNLOAD FREE

will solve all your problems

Here are 7 free mobile app mockup templates to download and

customize ?

Product walkthrough mobile app mockup

Product walkthroughsTare
O U R used
E X in
AMPonboarding,
LES to
FREE TOO L S make
H E apps
LP

PRICING
more intuitive and straightforward. Block colors, minimalist
DOWNLOAD FREE
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

 TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

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

 TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

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. TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

Download it free here or try it out here.

Flight booking app mockup

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
TOUR passes
E X A M P L E Sincluding
F R E E T O Oflight
LS HELP

PRICING
information and passenger information the user entered.
DOWNLOAD FREE

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

 TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

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,
TOUR Contacts
E X A M P L E S and
F RFiles
E E T O Oscreens,
LS H E Las
P well

PRICING
as an option to sign out.
DOWNLOAD FREE

Download it here or try it here

Slide menu mockup

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,
T O U Rthe slide
E X A M Pmenu
LES Fusually
R E E T O O Lgives
S Hyou
ELP

PRICING
access to otherwise hidden elements, like profile controls,
DOWNLOAD FREE
navigation or folder options (think: Gmail) and often an

advanced settings button.

Download it here or try it here

iOS passcode screen mockup

Our sign in screen mockup
T O U R uses
E X Aelements
MPLES F Rfrom
E E T O Othe
LS iOS
H E UI
L P kit to

PRICING
simulate signing in to an app on an iOS device. You’ll need to
DOWNLOAD FREE
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

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.
 TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

F O U N D T H I S U S E F U L? S H A R E W I T H

Emily Grace Adiseshiah

Emily is Marketing Content Editor at Justinmind

Related Content
 TOUR EXAMPLES FREE TOOLS HELP

PRICING

DOWNLOAD FREE

Where to Top App form

get free mobile design
app app best
icons: top development practices
24 sites courses: With the rise of

Finding the
free and mobile devices,

right icons to paid we can fill out

use in your app forms on the

The demand is
prototypes can go and enjoy
high for mobile
be difficult the practicality
app developers
MOBILE
given the vast MOBILE of it all
MOBILE - until a
in the tech
array of
PROTOTYPING | PROTOTYPING | particularly |
PROTOTYPING
industry. It's a
choices out
10 min Read 10 min Read poor
16 min app
Readform
profession that
there. That's design gets on
generally offers
why we've our nerves.
great job
narrowed down
security and
24 of the best
remuneration.
places to find
If you're
free app icons -
looking to learn
to make your
mobile app
life that bit
development,
easier.
read on!
TOUR LEARN RESOURCES HELP COMPANY FOLLOW
TOUR EXAMPLES FREE TOOLS US H E L P
Web prototyping Manage your Sign in to Learning center Contact us
account account Twitter
PRICING
Mobile Q&A forums About us
prototyping Start prototyping Examples DOWNLOAD Facebook
FREE
Customer Brand
UI kits Web and mobile Blog support assets LinkedIn
interactions
Collaboration Customers Experts Google+
Forms and data
Requirements lists All features
management
Prototyping tool Webinars, guides
Sketch, JIRA and guide & articles
TFS Integrations
Collaboration Free wireframing
API & SDK guide tool

Pricing Integrations guide

© 2019 justinmind Privacy policy Terms of use

DOWNLOAD FREE