Prototyping is an important part of an iterative design process where each screen is refined until it achieves the desired level of performance and usability. Your future application goes through a series of interesting transformations, from a simple sketch to detailed prototype and then to the final design. Incorporating some form of prototyping into the design process is a critical step in creating great apps.
When you have defined your app concept, understood the main use cases, and came up with the list of features, it is time to think about application user interface and user experience (UI/UX).
Brainstorm UI/UX session
We start with a group brainstorming session. The project team gets together with the client, gathered in one room or via hangout, and they do a series of quick sketches of the 2-3 main app screens. Our aim is to produce a simple black and white sketch that shows the basic layout of the app. They are quick to produce and allows us to quickly test broad concepts of the app interface.
The best way to conduct such brainstorming is to allow everybody to sketch his own ideas for 2 minutes, then present it to the group and discuss. Such an approach allows each participant to express his ideas freely, without pressure and influence from others.
We found that this approach is the best way to get really cool and fresh ideas for UI/UX of the future application.
Quick iterations with paper for a UI/UX prototype
As soon as you have your first paper sketches, iteratively revise and refine them. Such simple prototypes can reveal flaws in your design concepts and allows you to resolve these issues before more significant production commitments are made (such as creating a high-fidelity mockup or coding).
Don’t forget to conduct a quick user test somewhere in the middle of your discussion. Invite some of your colleagues who are not familiar with the project and ask them to perform some simple tasks.
Whiteboard, markers, stickers and paper with the printed smartphone contours – this is all you need at this stage.
UI/UX application wireframes, user flow map
These wireframes show layout and functionality but have no visual design. Such an interface prototype is close to the final application with many details and functionality and allows you to examine usability in details.
At this stage, you need to produce all the key screens of your app and carefully think of the user flow. As usual, iterate quickly and do quick user tests. Revise the prototype based on the test results.
Design prototype, visual concept
This is the final stage of the design process when you add all the details into the designs and define the visual style of the app. This design prototype looks like a final product, and it could also work like a realistic app on your smartphone.
Using such tools like Axure RP or Proto.io, you can make screens actually interact with each other like a digital app. Interactive design prototype works the best for validating UX design direction with the stakeholders.
[custom_form form=”form-inline-subscribe” topic=”Design”]
Read more about prototyping and design: