Drawing prototypes is the highlight of the product design process. An excellent prototype can present the design concept in a visual form, let the team feel the interaction and experience of the product, and clarify what to do next. So, how can we draw high-quality prototypes? Here are a few practical tips.
1. Clarify goals and needs
First, you need to clarify your needs. Understanding the problem to be solved by the product and who the target users are is critical to drawing a prototype. Discuss the requirements clearly with the team, clarify the main functions and purposes, and only then can the design intent be conveyed correctly.
2. Build user stories and user flows
Then, outline the user's usage scenarios and paths through user stories and flow charts. User stories describe typical use cases, and flowcharts show user interaction steps. These are great materials to translate into prototyping. The design resource below is from [ AntUX Page Wireframe Template ] shared by Ant Design in the instant design resource square. , this work resource can be reused when designing user flows, product architectures, and logic diagrams.
3. Draw low-fidelity sketches
With a general framework, you can first output ideas through simple hand-painting, and make some low-fidelity prototype sketches. In this step, the focus is on quickly verifying the design idea without too many details. The sketch can be regarded as the stepping stone of the prototype, after finding the main pain points, we can go deeper. The design resources below are from the [ Low-Fidelity App Wireframe Design Template ] shared by Kishore in the instant design resource square. Core pages such as "Product List", "Waterfall Stream" and "Personal Homepage" have been added. When designing wireframes or pages of the same type of APP, you can refer to the layout layout that reuses the resources of this work.
4. Use prototyping tools
The next step is to get real and start the prototyping tool. Axure, Sketch, Figma, etc. are all easy to use. Choose a tool you are familiar with and start prototyping. At this time, we should focus on the core functions and user experience of the product, and draw the key interaction process and interface.
For example, the plug-in below is a wireframe plug-in from the instant design plug-in square , which provides the function of quickly drawing low-fidelity interface diagrams. It has two built-in low-fidelity style templates: wireframe and grayscale. Designers can Convert the high-fidelity interface to either of these low-fidelity styles with one click. Designers can quickly switch between different fidelity wireframes, grayscale, and high-fidelity images to try out different interface schemes without having to individually adjust the style of each layer.
5. Conduct user testing and iteration
After the prototype is completed, it must be tested by users to collect real usage experience. Questions and suggestions for improvement are valuable and can be used as a basis for further iterations.
6. Communicate and share with the team
Finally, share the prototype with the team and discuss the review. As an important part of product design, prototyping can facilitate communication and understanding between teams, and can also be a powerful tool for persuading decision makers.
In short, prototyping is the transformation of designs into interactive blueprints and experience prototypes. Clarifying requirements, drawing flowcharts, using design tools, and conducting user testing can all help to produce high-quality prototypes. Remember to be flexible and make appropriate adjustments based on feedback, making prototypes a powerful tool in the design process.