web design

Mock-ups and prototypes for mobile apps: methodology

If a project to create a mobile app obviously always starts with an idea... After the idea, the wireframe, the mockup and the prototype are the web designers' tools to help you build your app.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphic designer at Snoweb
Published on 14 March 2021 (Updated on 25 February 2022)

But why go through these steps? And what is the difference between a mockup, a wireframe and a prototype?

In this article, we will review these important concepts for designing mobile mockups. We will also give you some tips on how to do it.

To finally turn your idea into a mobile app that listens to its users!
mock-ups prototypes mobile app

1. What is the purpose of mobile mock-ups?

To be very concise, we could tell you that the model allows you to shape an idea! And it is the case! Thanks to the mock-ups, the designer, in charge of conceiving them, makes his creativity speak... And at this stage, we are still far from being able to test the app on our own mobile!

In fact, with the mock-up, we start by putting ourselves in the shoes of the end user. We will think like the user to create an intuitive and easy to use app with an optimal user experience. With the help of a diagram that is not completely detailed (it's normal, it's a mockup!), we already notice a number of things!

  • Is the button correctly placed here?
  • Is this block of text really necessary?
  • Where can the user easily find help?

Mockups also allow us to work on the user experience of the app and then make the UI, the pretty one!

user experience app mobile
A bad user experience on an app makes the user leave

Working on the ergonomics and user experience is essential to put the information forward. A redesign can correct the problems that bother the user.

Snoweb masters the needs of users to allow you to improve your sales.

See more

2. The steps to create a mobile app model

Step 1: The wireframe

The "wireframe" or functional model in French, is a draft. More precisely, it is a sketch that represents the structure of your app. At this stage, no color, no details. We simply put the elements :

  • text areas
  • location of links
  • call-to-action buttons
  • ...

And we indicate the connections between them.

mock-ups prototypes mobile application

Step 2: The mock-up

With the model, the immersion is easier! Indeed, here we begin to enter more into the visual detail of the app. The model presents the structure, the content and the various functionalities present.

We then find all the views of the app. Default images are added and substitute text is added in order to visualize all the elements.

The mockup can therefore include the following elements:

the elements of the mobile application model


Call to action button




the elements of the mobile application model




Shopping tunnel


the elements of the mobile application model
User space


Product page




the elements of the mobile application model
Log in / Sign in






In order to have the most real rendering possible, the UX designer will work on a small screen format. If you're wondering why, it's to make sure that all the information is visible on the screen! Indeed, phone screens are getting bigger and bigger, but not all users have the latest phones, so we have to think about older models and/or with smaller screens.

For example, if on an iPhone 12 you can display 6 products on the screen, on an iPhone SE, you can only display 4, so you have to think about a scroll in the view.
prototypes mobile application

Step 3: The app prototype

Finally, the prototype of the app, also called interactive model, is the most accomplished version before moving on to development. This time, it moves! The prototype shows both the visual content and the interactions between the elements (buttons, pop-ups, menus...). It is in a way the first test of the app.

mock-ups prototypes mobile application

3. Tips for designing the perfect mobile mockup

To be successful with your mobile mock-ups, it is best to follow a specific order:

  1. Follow the specifications. Snoweb explains in his article how to design it and what to put in it. To be brief, the specifications detail all the functional and technical features of a project.
  2. Start by defining the menus and then move on to the screen-by-screen organization
  3. Second, think about and delineate the interaction areas of the app. What are the links between the elements in the layout? What action should the user do to interact with the element (click, drag...)?
  4. Know what features are important to provide? For example: a user space. Forgetting such a feature could cost you dearly!
  5. Think UX before UI! The user experience is as important or more important than the design. The user should not be stuck in front of a screen without understanding what he has to do...
  6. Define the colors to be used because they have an important place in the user experience. Find the right colors that convey the right brand message. Here are some ideas to choose the perfect color for your project.

Things to remember about model design


A complete specification for an optimal design. Be a force of proposal during its reading.


Start by thinking about the architecture of the application, the menus and the links between the screens.


Define the interaction zones on each screen, the main buttons (clicks, drags...).


List all the features to be developed and modeled. Does it require specific screens?


Start with simple wireframes with only shapes, no text or images. Get to the point.

User experience

Test and retest your models. You should never get stuck in one place. The navigation must be fluid.


Create color palettes based on the brand but not only! They will help the user in his navigation.


Let's move on to the prototype. Add your colors, temporary texts and intention images to your wireframe.

4. Pitfalls to avoid when building a mobile model

  • Don't waste time detailing your design. Start with a simple model that you will refine later, once the first screens have been validated. With the mock-up, keep in mind: "Done is better than perfect"!
  • Don't forget a feature! An oversight can quickly waste the developer's time because one feature can change the whole app tree! A simple example is payment. There is no doubt that if you forget it at the beginning, the developer will not be able to foresee in time the security standards and constraints to be implemented.

5. Mock-up for app': how to find inspiration?

There are many sites that list resources and inspiration for designing mobile app mockups. Here are our three favorite resource sites:

6. Which software to use to create a mobile app model?

You know almost everything about mock-ups, wireframes and prototypes... Now it's time to roll up your sleeves and get to work with the best design software!

First, in the Adobe suite, which is very popular among designers, the Adobe XD software is the perfect tool to create your mockups! This is actually our favorite 💙 and our tool of choice!

Sketch is a vector graphics editor makes mockup work very fast. Once the tool is mastered, it's a guaranteed time saver! For example, once you have created the "connect" or "save" action button, it becomes a component that you can use over and over again.

To present your interactive models, Invision is a very practical platform.

7. Conclusion

Building a mobile application mockup is a tedious job that requires a lot of UX and UI knowledge. You need to know your users, their needs and their frustrations in order to create an application they will want to browse.

I need help in web design for theredesign of my website