Mobile app development done right requires that you follow certain steps, but for some reason many developers skip one of the most crucial ones: designing a mockup. Whether you need something to show an investor as a sales pitch to get them interested, or you just want to make sure that you and your client are on the same page, creating a mockup—specifically, creating it quickly—is extremely important.
This has been important forever, of course, but has been largely ignored by traditional application developers because users have unfortunately been taught to just “get what they get and don’t get upset.” But when it comes to mobile devices, there is a much higher expectation that apps will “feel right”—and there are many, many excellent apps that your users will compare you to. So you do need to get it right.
Thankfully, there are a number of useful tools for mobile app development that will help with this step.
What is a mockup?
To put it simply, a mockup of a mobile application is essentially a “static screen” version of what the app will look like and how it will behave when it’s finished. These usually consist of a series of linked screens or pages that show the user (and investors, clients, the designers, and everyone else involved) how the app will function, and how it will look and feel. For example, a mockup for an app like Instagram would have a static photo with the necessary buttons. Press the “like” button, and the mockup will take you to the appropriate screen, and ditto for the “comment” button.
Think of it as a digital version of an old choose-your-own-adventure story, which is just a series of “go to” commands. Click this button, and the user is shown this screen, or this notification, or whatever it is your app is supposed to do next.
The key is that none of the commands actually do anything except change the screen; you’re not actually interacting with other users on Instagram, you’re just showing how that interaction is supposed to work. Some may have more functionality than that, but that’s not really their purpose.
Why bother building a mockup if it doesn’t work?
There are a few really good reasons to take this step in your development project.
First, it’s important for everyone to get a clear idea of how things are going to work together before a single line of code is written. Programmers will always benefit from understanding the whole picture before they get started on their assignments, because it often affects the way in which they approach it.
Even more critical, your UI/UX team can evaluate the design of the application—from the user’s perspective—before the bulk of the work starts. Users have a natural tendency to expect things to be in certain places when they use an Android application, for example. How will pressing the dedicated “back” button affect the app? If you’re developing an application for iPhone, how does the design incorporate the same feature without that physical button?
The ability to change things on the mockup without trawling through code streamlines this part of the process extremely well. Even better, this is the kind of thing you’re going to have to do anyway, so it just makes the most sense to do it first.
Finally, we find that having a mockup makes the final delivery much simpler, especially when we create it quickly. Our clients know exactly what to expect when we submit the final build.
At the start of the development process, sometimes there are strong opinions on how an app is supposed to look, but even with strong opinions it’s difficult to articulate what that really means during planning meetings. This discussion becomes much clearer when our client sees the first mockup, and can more clearly articulate preferences and the reasons for them.
The beauty of the this method is that we haven’t spent valuable time and money building a fully functional application before we show it to the client. Instead, we have built a lightweight, simple mockup, so we can change things on the fly. In short order, we can have something that our client will be happy with—and we don’t have to change a single line of code to do it.
Tools we use to design a mockup during mobile app development
Years ago, designing an application, even just a mockup, was a serious pain, involving countless hours tinkering in Adobe’s Creative Suite, tweaking things in Photoshop and Illustrator, and linking things together. It was a long, painstaking process.
Thankfully, technology marches on.
One of our recent projects involved a mockup process that went about as well as it possibly could. After we had the necessary design discussions and had decided on a direction, we started with Sketch. This application, with a dizzying number of presets, design choices, templates, and other useful tools, made designing each screen much simpler than it would have been otherwise. It focuses on efficiency, and lets you create each page of your app extremely quickly.
Once we had our individual assets designed the way we wanted them, we used Invision to cobble everything together. Invision was just as useful as Sketch, as we didn’t have to do anything to our assets before we began linking the pages; the two integrate pretty seamlessly.
What made these tools particularly helpful was that it made making changes even easier than it used to be. When our client wanted to change the color palette, it only took a quick adjustment in Sketch and an update to Invision to do it. What’s more, Invision lets you download the prototype directly to your phone—or anyone’s phone, if we chose—so we were able to get direct feedback from both our clients and our UI/UX team based on exactly how the end user would interact with the application.
For mobile app development companies, staying on the cutting edge of available assets like these is extremely important, because streamlining each stage of the development process is critical to the success or failure of both application and developer. In the case above, we were able to move from initial design meetings to an approved mockup within two weeks, an excellent turnaround time.
Because this stage went so well, the rest of the development process was far simpler. We already knew how everything was going to look and how it was all going to interact. As a result, the application we developed was well-received by the clients and users alike—and our final build was far ahead of schedule.
Cutting corners is never a good idea. In a changing environment, like the dynamic workflow in mobile app development companies, it’s important to do things the right way, with the right tools. Before we start coding an application, we build a mockup. It saves a lot of time and effort later on.
For more information on working with developers for your upcoming app project, please download a guide for CEOs about creating great software from Applied Visions today.
