Prototyping is a very important step in the mobile design process. It allows for existing ideas to come to life and for actual screen functionality to work. It also allows for a great deal of user testing, in order to know how the flow of the app actually functions and what features need improvement.
Tools such a Figma, Adobe XD, and InVision can help in both creating well-designed screens and prototyping them as well. These resources allow you to link different screens together to form a working online prototype.
However, the prototyping process isn’t just about linking screens together, it is about so much more. In Prototyping: Learn Eight Common Methods and Best Practices, they explain the four key components that prototyping involves. Those include:
- People: those you are testing and observing
- Objects: static and interactive, the actual prototype and other people/objects the prototype interacts with
- Location: places and environment
- Interactions: digital or physical, between people, objects, and location
These components all allow for a prototype to be made and tested accordingly. Without paying attention to all of them, your prototype could be lacking something important.
Prototypes are made in a variety of ways. The digital era has blessed us with prototyping tools that make our app prototypes look just like the final product would, but there are so many more ways to do it. From prototyping on paper, to using materials such as legos, to roleplaying a user scenario of the product, the possibilities are endless. The goal we want to focus on in any of these mediums is to bring ideas to life and to find the right flow for the prototype to have.
Some tips for creating prototypes are to ask yourself what your idea is about and what questions you want to ask. Other tips from Creating a High-Fidelity User Interface & Interactive Prototype in an hour, involve:
- Using familiar tools that can be used across all platforms
- Finding a flow for big ideas rather than jumping into specifics
- Looking at design inspiration for brand identity and cohesive prototype layouts
- Using visual hierarchy
- Using as close to actual content as you can (not lorem ipsum)
These tips will come in handy when moving through the prototyping process. It is about seamless design on both the screens and the working prototype.
Designer Ricky Lyman initially struggled with app design and the prototyping process. As he attended conferences and improved his work he discovered that less is more. This notion involved the best prototype designs having functionality that was absolutely essential to the product, with nothing clunky added (How one designer prototyped prototyping).
Lyman curated a set of prototypes, to be available for other designers, that feature these minimalist wireframes. They only offer exactly what the product needs and nothing more. He calls his work ProtoMVP (How one designer prototyped prototyping).
Hearing about Lyman’s projects and all these tips while prototyping has been really crucial to my own work. I initially went into the prototyping process by just linking screens and mindlessly hoping it would make sense. I didn’t take a step back to look at the actual flow of the product and how each functionality was actually necessary. I can now see how important it is to focus on what makes a good prototype design in order to actually create a worthwhile prototype.
SHANNON'S DESIGN BLOG 