Mock-ups and prototypes for mobile apps: methodology

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!

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.

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:

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.

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.

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:

• The uplabs website
• Lapa Ninja: ideas for designers
• The UX Planet reference

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.