What is a prototype?
A product prototype is a rough outline of the final product design before it takes shape. For the website, it is to make extensive typesetting and layout of page modules and elements, and if you go deeper, some interactive elements will be added to make it more specific and vivid. At present, the most used and most efficient product prototyping tool for the product manager and UI / UX / Interaction designer is Axure RP. Axure seems to be simple and easy to learn, but if you want to really use it well, you must learn more deeply. Let’s briefly introduce some of the experience of using Axure.
Prototyping main pages
Before prototyping main pages, a designer needs:
- A main task flow chart (this refers not to the “business logic flow chart”, but to the “task flow” generated according to the “business logic”. The task flow can be produced by the product manager or designer, depending on the specific conditions of each company or project.)
- A list of key features (usually provided by the product manager)
- Website Information Architecture (Information Architecture is done by UX designers in some companies)
- Understanding of previous research results
How to make “prototypes of main pages”
1. Begin to define the Master at the beginning of the establishment of the project.
As soon as the project starts, if you know which blocks will be shared in the future, you can start to establish masters, such as the website’s header / footer / navigation, or the advertising sections. The earlier you make them, the more you can save the repetitive designing work of other pages.
Definition of Master
2. Some Axure RP library can be applied
AxureBoutique has a large number of libraries, you can go to download. You can also make your own library suitable for the product.
3. According to the “task flow chart” and “feature list”, make prototypes of main pages.
At this time, some necessary interactions can be included. Some detailed interactions, such as error notice, can be ignored.
The main prototypes of main page can be used for initial product discussions, testing, and product presentations.
Points to note:
1. Whether to add visual design elements. It depends on your product needs. If your project has UI designers and has enough UI design time, don’t tangle with details, and design low fidelity prototypes; If you don’t have a visual designer and need to complete the design quickly, you can design high fidelity prototypes to be directly used for later coding.
In the early stage of prototyping, please focus all your energy on process optimization and layout design. Don’t waste time on visual design, which is definitely not worth.
2. Before using the Axure tool, it is best to draw some paper prototypes with paper and pen to sort out your ideas.
3. The process should be fast and iterative.
Above is my summary of prototyping, if you have any questions and suggestions, please leave a message.