How to make app mockups

by Andrea Maioli on 11/24/2016

In recent articles about app design, we’ve seen how to write the preliminary documents: the User Profiles, User Stories and Business Model. With this material we’re ready to start working on the mockup, which will allow us to assess and test the actual look of the app.

Given that the mockup is a preliminary design of the views for the app, you can use any tool, even pen and paper. Nevertheless, these days there are a number of tools online, some of which are free, that allow you to quickly create animated prototypes of your screens. Just Google mockup tools or prototyping tools to get a nice list. These tools offer templates and icons of the most common user interface elements, so you can design views that will feel very similar to the final versions.

Once we’ve chosen a tool, we need to understand what we’re actually going to mock up. I don’t recommend mocking up all the app views, from logins to settings. The best strategy is to start from the User Stories, and make a mock up for each User Story described in the document. This way we’ll be able to see just the main processes of the app without getting distracted by everything else, and that will allow us to create a prototype that’s more focused on the most important features.

Finally, a little advice on style. In apps, less is more, so resist the temptation to add hamburger menus with all kinds of functions. Be clear and concise when using text, say nothing more than you have to, and capitalize on the power of images and the recognizability of icons, which are often worth a thousand words. Never open the onscreen keyboard unless absolutely necessary, avoiding input fields as much as you can, and minimize the number of taps to complete the process.

Before getting started, some good advice is to study both your competitors and other applications with a similar process. You’ll be able to appreciate some of their ideas and also see how you can stand out. That’s what I did before starting the mockup for ToBuy, which you can find here.

It’s interesting to compare the mockup with the final app, which you can test in preview here. In truth, the differences are minimal because the mockup and the app share the same graphical theme, meaning the device’s native theme.

This article wraps up our little overview on app design. At this point we can start to see how to move from the mockup to the app, which means tackling the actual phases of development. In the meantime, if you’ve created some mockups and you’d like some advice on how to optimize them, I’m at your disposal.

{ 1 trackback }

From mockup to development: it’s easy with tutorials | Pro Gamma's blog
03/01/2017 at 4:40 PM

{ 2 comments… read them below or add one }

1 Ted Giles 11/24/2016 at 5:09 PM

Examples not working on my Galaxy Tab, Andrea

2 Andrea Maioli 11/25/2016 at 11:20 AM

Hi Ted, these examples are meant to be used in a desktop browser. You should use the InstaLauncher app to test mobile apps in real devices.
However, I’ve tried the ToBuy app in mobile chrome and it works as expected. Which mobile browser did you use?

Leave a Comment

Previous post:

Next post: