Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
App mock-ups are primarily used to show a concept in its final form. The user interface of the app and all of the elements in it are displayed in high-definition. There are several reasons why mock-ups are used, but most of the time they are created as a proof of concept and a way to “sell” the app design to the client.
For mock-ups to be effective in serving their purposes, they need to be attractive. Creating a high-definition version of the designed app is only the beginning. Here are simple ways you can spice up app mock-ups and make them more interesting to the client.
Solve a Real Problem
Demoing an app mock-up can be stressful, because it often feels like you have to justify every second you’ve spent talking and presenting. With that in mind, make sure that you have the client’s attention right from the start.
The best way of doing this is by addressing a real problem relevant to the app’s functionality. As soon as the demo starts, the client should be shown how they will be able to use the final product to perform some real task that’s part of their requirements. This can have multiple benefits. On one hand, it will leave a positive impression on the client and give them some assurance that you understand their situation and aren’t just out to score some quick money.
On the other, it will also allow you to fill up the presentation with viable discussion points, rather than awkwardly scrolling through unfinished menus that are not that relevant to the app’s main functionality in the first place.
Add Interaction
Interaction is a big part of the user experience. With the help of animation software and integration with UI design tools such as Sketch app, adding interactive elements to the app mock-up is easier than ever.
You can, for instance, add transitions to different views of the app. The client can then test how the app transitions from one page or view to another, fluidly. The same level of interaction can also be integrated with buttons and tap-able app elements.
Some rapid prototyping software even pushes things a step further and allow broader interactions, including user inputs and responses. Adding this level of interactions requires more time and expertise, but it is something worth considering if you want to make a successful UI pitch.
Inject Content
The content of an app is as important as the design of the app. Content is half the battle, which is why adding great content to the app design is a must. Forget about using placeholder images or text; the usual lorem ipsum text no longer cuts it.
You want to add real-looking content to the mock-ups to boost their appeal. You can use commercially free images and better placeholder text to help make the app feel real and relatable. Give it a try and you will see the big impact injecting good content has on the mock-up.
It is even better if you can add content that the client can interact with. The latest version of Sketch supports adding videos and GIF to your UI designs. Take advantage of features like these to bring your app design to life.
In Action
When you do add interactive elements and better contents to the mock-ups you create, the way you present the mock-ups becomes very important. Interactive elements require the mock-ups to be run from a suitable device. Using Principle, you can run mobile app mock-ups directly on your iPhone.
For static mockups, don’t forget to show the app in real-looking situations. Templates for mock-ups and app designs usually involve a hand holding the mobile device or different angles of view for this very reason.
Combined, these tips can really help bring your next app design to life with great mock-ups. The next time you need to present the UI design to your client, you have a series of touchable, real-looking mock-ups to support the thinking behind your UI design, as well as to display the flow of the app effectively.
Focus on What Matters, and Conceal the Rest Well Enough
The important point of an app mock-up is to sell an idea and a design for its execution. There will be tons of details that are important in the final project, but more or less irrelevant for a mock-up, so filter your work accordingly and focus on what really matters.
It’s much better to spend several hours perfecting the layout and functionality of the main screens that the user will constantly interact with, rather than investing that time into tweaking some tab of the settings menu.
On that note, it’s okay to replace functionality with placeholders – it’s a mock-up, after all. Showing an animation instead of an actual interactive page can work well when the user doesn’t actually need to interact with that page for the demo’s purposes. As long as you don’t go overboard with the animation and don’t promise features that you can’t realistically deliver on, it’s all fair.
Varying Fidelity
This brings us to another important point – not every part of the demo has to be consistent in its level of fidelity compared to the others. In other words, you can focus on a high-definition mock-up for the main page that the user sees upon launching the app, as well as other points of importance, but use simple wireframe sketches for other menu elements.
This can work especially well for elements that are not finalized yet, or are merely suggestions to the client. If you have several different ideas for how a certain screen can look, the client would probably appreciate seeing a general sketch of their layouts and functionality, rather than knowing that you’ve spent several hours working on fine-tuning all of them. After all, this will give them some idea of how you’ll be utilizing your time when you’re working on the actual product later on, and displaying efficiency and responsibility can go a long way.
