Creation is a process.
Nothing is truly built in a day — no matter what it might seem like. Even if you only spend thirty minutes coding and designing an app, learning the skills that got you there (not to mention all of the little tricks that are part of your design lexicon) took a lot longer than that.
And that’s to say nothing for the process of evolution that happens after that first draft is completed. It’s a process — and everyone’s learned their own tricks to help them along the way. Here are our favorite mobile app design tips and how you can implement them.
Use the Right App Prototyping Model For Each Phase
Prototyping is an iterative process and the right tool for one phase isn’t always the right one for the next. A simple, user-friendly wireframing tool may be every bit as important to your process as sophisticated prototyping software depending on your stakeholders, process, and project organization.
Similarly, pen and paper is often the easiest way to develop your ideas, even when you have cutting edge visual design tools at your fingertips.
According to Google Staff UX Researcher Todd Hausman, working on paper is a key tool in the rapid prototyping process, enabling Google workers to easily share their work among their colleagues — meaning that buy-in happens earlier in the process. Hausman says, “The fidelity of your prototype should match the fidelity of your thinking, so don’t be afraid to share your prototype early and often to get feedback to guide your next product design decision.”
At the beginning, that often means using paper (ideally with printable templates). Sketching on paper can help you visualize the design style, experiment with different colors and even flow. Your paper prototypes can get as sophisticated as you want them to, with movable paper cutouts to show transitions and interactions.
How far you take it will depend on personal (or organizational) preferences. Some designers really enjoy wireframing with paper, while others prefer an all-digital approach. At a certain point, however, you’ll need a more sophisticated tool to demonstrate user flow and earn stakeholder buy-in. That’s when a tool like Overflow can be extremely useful.
Overflow enables users to build an interactive wireframe, showing how screens and buttons are connected in the app. Stakeholders can preview an overall user flow map, then demo the rapid prototype, clicking and scrolling to see how the screens are linked.
These features aren’t unique; you can wireframe in any prototyping app. What makes Overflow really useful is its quick, intuitive workflow. In under 20 minutes, we’ve created a complete user flow, linking 60 artboards into a polished presentation. That can make it much easier to pitch an app on short notice, or get approval for the next stage of development.
With that said, sometimes you need more than just an interactive wireframe — you need something that’s a little more fleshed out.
Experiment with New Mobile Prototyping Use Cases
High-fidelity prototyping can reshape the design and development process. With the right tool, you can focus your efforts on perfecting your design, where it’s easy to make changes. This way, you won’t get stuck in development hell, spending weeks tweaking code to get your design just right.
However, a digital prototype doesn’t have to be a high-fidelity model of your whole app. It can be:
- A low-fidelity mockup to illustrate a particular user flow concept.
- A sketch of one sequence of actions, such as user onboarding.
- A model of one particular screen, showcasing animations and interactions.
- An idea for integrating a new feature into an existing app.
Similarly, a prototype doesn’t have to be something designers build. The best prototyping tools support multiple stakeholders, not just designers and developers with technical backgrounds, but others who aren’t as savvy.
Entrepreneurs and CEOs can evaluate new ideas, product managers can set goals and structure projects, and developers can accelerate the development process. You could even use prototyping to help marketers design a more effective conversion strategy, or plan the rollout of new features.
That means there’s a lot of room to experiment with use cases. Could moving from sketches to single-screen prototypes help you evaluate design concepts more effectively? Could your programmers use prototypes to illustrate challenges with integration, or inconsistencies the rest of the team may have missed? If you’re having issues with miscommunication or pushback from certain stakeholders, are there ways prototyping could help you stay on the same page throughout the project?
There’s no single set of answers to these questions. Each company has its own culture, goals, use cases, strengths, and weaknesses. But mobile app prototyping provides a flexible set of tools that go far beyond its traditional role. With some experimentation, you’ll discover novel solutions to make your company more flexible, efficient, and effective than you thought possible.
Optimize Your Prototype for Performance
“Optimization” is usually a term associated with mobile apps, not prototypes. Even with the tremendous power of modern devices, coders need to make sure apps don’t hog resources, resulting in laggy performance and instability.
But optimization can also be an issue in mobile app prototyping. Wireframing apps have a habit of making developers forget about performance. A wireframing app won’t tap you on the shoulder every time you add another resource-hindering animation or yet another unnecessary layer.
If you’re going to have fluid animations and complex interactions, you need to think about optimizing images, minimizing the number of layers and taking other steps to keep your prototype quick and lean.
For example, let’s say you’re building a logo in Sketch, consisting of stylized lettering against a landscape. You plan a simple animation, where the sun moves across the scene to become part of one of the letters, but the rest of the image will remain static. However, by the time you tweak the vectors, fills, shadows, and other elements of your image, you end up with dozens of layers.
If you just load all those layers into your mobile prototyping tool, they’ll use up a lot of resources, possibly resulting in slower loading time or less fluid animation. However, if you take a moment to flatten the layers you aren’t animating, you’ll keep the element lean, ensuring your animation works just how you designed it.
That’s why Proto.io makes it easy to flatten layers as you build your prototype — just add an “@” symbol to the layers you’re not animating.
Another easy way to ensure flawless mobile prototype performance is optimizing your image assets before you import them. If you bring a 4.8-megabyte photo into your prototype, it’s going to demand more resources from your prototyping app.
Not only will the app have to load a big file — it will also have to scale it down to fit your screen. And once the app scales it down to 200 x 200 pixels, that extra resolution won’t help anyway. It will look exactly the same as it would if you had resized it, to begin with, except now your larger image will eat up resources.
The same thing goes with cropping. Masking is a very useful tool when you wish to animate a transition or allow the user access to data that doesn’t fit in a single screen. However, if the user is only ever going to see the top left corner of an image, that’s really all you need to import.
You might be able to get away with not optimizing most of the time — the best prototyping tools can mask, resize, and animate images very efficiently. However, it’s good to get into the habit of optimizing your prototype as you go. That way, when you add flashy micro-interactions and complex animations (or have a user testing your app on an older phone) you won’t have to worry about unexpected performance issues. Check out our webinar on improving mobile prototype performance for more tips and tricks.
Take Advantage of Design Patterns and Libraries
Great design requires attention to detail that can border on obsessive. Sometimes, it takes very subtle tweaks to transform a simple button press into a really satisfying “click.” Minuscule adjustments to a layout can mean the difference between a useful, feature-packed screen and a cluttered one.
But while obsessing over detail late in the project can be really helpful, early in the mobile app prototyping stage it can derail you. You need to be able to test your prototype quickly, revamp it to address user concerns or other stakeholder feedback and, if necessary, throw it out and start over. If you delve too deep into design early on, you can get too invested in a design to think about it critically, leaving insufficient time for user testing before production, or both.
Design patterns and libraries help you work smarter, yielding better results with less work and frustration. Proto.io has extensive libraries of design patterns and components, supporting realistic prototyping across platforms. Our basic components are complemented by platform-specific libraries.
Whether you’re prototyping for iOS, Android, Apple Watch, or all of the above, you’ll have the tools you need to quickly prototype the right platform-specific user experience.
Err on the Side of Realism
As prototyping tools have become higher quality, the range of use cases for high-fidelity prototyping has expanded dramatically. From basic planning, to pitching investors to UX testing, a playable, realistic prototype often yields much better results. In many cases, it actually decreases workload overall by helping prevent costly revisions down the road.
However, even when you’re just building a wireframe or other low-fidelity prototype, there are a number of easy ways you can make it more realistic. One of the simplest things you can do is use realistic assets.
If a photo or a logo goes in a certain spot, stick something in there with the right look. Don’t overthink it — you could use your own design sketch in place of a logo, a picture of your cat to stand in for a user photo, or an image you grabbed off Wikipedia. What’s important is that it works as a stand in, with the right subject matter, look and (if relevant) color scheme for whatever the final asset will be.
The same goes for text. If you’re showing your work to designers, they might not mind a bit of “Lorem Ipsum,” but to investors and other stakeholders, it can look sloppy. Plug in some realistic copy in English (or whatever language your audience speaks).
Another way to make your designs more realistic is to build a library of images, styles, and symbols as you go along. Ideally, you could design internal style guidelines and reuse characteristic design elements to give your apps a coherent feel and save everybody time. But even when there are reasons to vary design, you’ll start to spot patterns — things that work for your users and your company culture. That will save you time, and allow you to highlight changes and innovations in the prototype, while using “safe” elements to fill in the more conventional aspects of your design.
Finally, when you’re testing your app, make sure it’s being used in an environment that’s as close to “real life” as possible. Use mobile app prototyping tools that support all the platforms you’re developing for, then test on all those devices. A browser-based prototyping platform is ideal, because you’ll be able to send links to testers, allowing them to try out the prototype from anywhere.
Early in the development process, there are times when it might make sense to test under controlled conditions — for example, if you’re using a design sprint to evaluate one particular solution or feature. But when you’re testing a complete prototype, you’ll get more usable data in circumstances that mimic where your users will actually be.
When your users are sitting in a quiet room, focused solely on your app, your interface might be easy to navigate, but what happens when they’re idly clicking away while chatting with friends, or walking down the street? If your app isn’t user-friendly under those conditions, you need to know before you hand it off to the developers.
Mobile App Prototyping is More Than a Precursor to Production
The power of modern prototyping and development tools is changing the game for the mobile app industry. Traditional divisions between design and development are starting to break down, driving a change in organizational structure.
The winners will be those who can most effectively harness the new tools to drive collaboration and accelerate the development process. Experiment with prototyping, push the limits, and learn what works for your organization.
Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.
Have any great tricks for mobile app prototyping? Let us know by tweeting us @Protoio!
