How product prototyping templates are made

axure prototype template – how to use axure to draw app prototype

Task management mobile Axure prototyping

This is a task management app using Axure8 high fidelity prototype template, including to-do, schedule, statistics, my four main modules. As an efficiency tool prototype, the core functions have been reflected, the overall style is fresh and simple, can be used as a mobile prototyping template for expansion.

On top of that, this work also contains a variety of commonly used mobile components such as palace format navigation, calendar, repeater, forms, action panels, charts, cards, etc., which can be directly copied or dragged and dropped into the project, and is also a friendly template for beginners to start learning Axure interaction.

Click here to preview the full prototype

Part of the picture

Using Axure to draw prototypes

Axure is one of the most commonly used prototyping work. Without any basic knowledge of HTML/CSS/JavaScript, you can use Axure to create prototypes with good interaction effects. This series of notes to the Golden Crow’s “AxureRP7 website and APP prototyping from beginner to master” book as a reference material, a systematic study of the prototyping tool Axure software and the design ideas behind it.

Before we start, let’s ask some basic questions:

(1) What is user experience design? What is interaction design? What is visual design? What is the relationship between them?

(2) What is UE, what is UX, what is UserExperience, what is Usability, what are the metrics and elements to measure UX? How to understand “usability”?

(3)What is the difference between wireframes, prototypes and visualizations? What are the usage scenarios?


Low-fidelity diagrams, usually expressed in “black, white, and gray” lines, and quick to produce.


Medium to high fidelity diagrams that represent the final product and are used to communicate between stakeholders.


High fidelity drawings with good visualization.

In most companies, there is no clear line between a product manager and a user experience designer, and you can even think of them as the same role.

Product managers “mediate” between development engineers, system features, visual design, users, business logic, project managers, and investors to coordinate resources and drive product development. As a product manager, you must have a deep understanding of the stakeholders’ perspectives (what they really want) and communicate closely with them to create a collaborative environment that is free of barriers and allows the product to move forward in a controlled manner.

As product managers, we have to synthesize many different messages, which are often contradictory or conflicting. Not only do we have to be familiar with business processes, we have to understand technical constraints, resource constraints, etc., we have to understand the impact of the user experience on the performance of the software program, and we have to repeatedly do user research and data analysis. We have to find the critical balance between the chaotic multiconditional model and create the best possible user experience.

The truth is that any tool is just a means to an end, and Axure is just a tool. The most important element in your work is not the tool, but you and your mind.

1, Axure workbench commonly used functional areas

Menu bar, toolbars, site map, widgets panel, master panel, widgets interaction and comment panel, widgets properties and styles panel, widgets management panel, page attributes panel (including page comments, page interaction and page styles of the three tabs).

View>Reset View

,You can reset the Axure workbench.


Site Map

:Used to add, delete and organize pages in the prototype.


Widget Panel

:Used to manage Axure built-in widget libraries, third-party widget libraries, and custom widget libraries.

2. What are the built-in common widgets in Axure?

The wireframe is a series of components , which is the same as the front-end page , the page is composed of a series of UI components . Different components have different functional attributes, the process of drawing prototypes should be the appropriate choice of these components.

3, Axure components can perform what operations?

4, PageStyle PageStyle what are the common operations?

5, the basis of interaction in Axure

In Axure to create


Interactions need to include the following three building blocks, respectively:



Use cases



Actions. Interactions are triggered by events, and events are used to perform actions; the purpose of interaction design is to turn static elements into dynamic ones to enhance the user experience of a product.

Interactions are the building blocks in Axure that transform static wireframes into interactive HTML prototypes. Each


is composed of three basic units,



Where(use case)

, and





:When does the interaction occur? Interactions are driven by event Events. Events in Axure can be divided into two main categories, page events and widget events. An event can contain multiple use cases, and multiple use cases determine which use case path to execute based on a conditional judgment.


Use Cases (Where)

: Use cases are abstract expressions of the interaction flow between the user and the application or website, each use case can encapsulate a separate path. Typically, we have prototypes that execute actions according to a main path, but in order to respond to different user actions or other conditions, we also need to make optional paths to execute other actions. use cases in Axure are used to create different paths for the execution of an event Event.

An event can contain one or more use cases (multiple use cases need to be based on conditional logic to determine the execution), a use case contains one or more actions. In fact, you can think of use cases as containers for Actions



Action Actions (What)

: Actions are responses to events that are defined by the use case.Actions in Axure are divided into six categories, namely, links, metaboards, variables, repeaters, and miscellaneous.

How to use axure to draw app prototype

More learning, more practice

Draw a good prototype Axure

2.if it is for itouch or iPhone with, more good to do, directly with a resolution of 320 x 480 to draw a good auxiliary line, and then draw the prototype F5 generate a prototype of the time, in the “Mobile/Device” option can be set to adapt to the special prototype of mobile devices

4. Setting instructions see the following chart: (page size shows that my settings are based on the size of 320 × 480, the default does not zoom)

5. with your mobile device to access your generated prototype link (such as local servers, or Dropbox hosting)

6. to create a desktop shortcut to the page 7. complete (with icon, splash screen)

Another: you want to do the mouse action or complex page interaction is more cumbersome, do not recommend, try to be concise.

Web page prototype template how to do – how to design outstanding website background prototype

How to design outstanding website background prototype

I think, you can start from three aspects:

1. Unique and innovative design ideas

If you really do not have the idea, you can look at the same type of website background design, looking for design inspiration.

2. Efficient and practical prototyping tools

Good design ideas, but also need to be able to use the prototyping tools for production, testing and iteration. In this regard, MOckplus is a good tool, simple and fast operation, link sharing, feedback collection, real machine demonstration, etc., can realize the team’s rapid design and iteration.

3. Search for creative prototyping templates

Good backend design templates are also good entry points. But be aware of copyright issues and find out if they are paid or free before you use them.

How to design a good website background prototype

Clear goals

Since it is the perspective of the prototype, we will talk about the specific work, the first thing to be clear is certainly the product objectives, such as the following questions:

Is it a brand new product, or update the version?

Is there a matching front-end system? Or other offline resources that need to be matched?

What are the business goals? New features? Experience optimization? and so on

Demand analysis

Clear product goals, in doing demand analysis will focus on, in general, it is worth paying attention to the following elements:

1, role permissions

This is very important to be familiar with the management of the backend of all types of users before the specific design. Including a total of several types of users, their respective needs, operating privileges, and the design of user rights.

2, information architecture

Be sure to draw the information structure diagram (i.e., product-level data model), mainly used to clarify the product structure. Draw a brain map, make an excel sheet, the level of detail based on their own habits can be, need to work with the user to design.

This is and ordinary prototype design is relatively different, if it is a revision also need to be marked and the difference between the old version, as well as the old data cleanup or migration program. In addition, you also need to consider and other resources (front, corresponding page, etc.) with the data flow and state transfer.

4, functional processes

Regular need to consider the user process and business rules process. According to different business objectives, the user process can be divided by scene or function, giving some users appropriate optimization. The business rules process needs to ensure that the logic is clear, closed loop, do not miss the exception flow (closed loop is very important).

Prototype design

Finally, you can start the prototype design, now a variety of management background of the theme of the template have a lot of cases without special needs, and the development of good communication to choose a set of “copy” can be.

The design process pay attention to the navigation, list (add, delete, change, sort, filter), etc., do not miss the details of the preview, error/success alerts, new content reminders, shortcuts, etc.

How to design a good website background prototype

To make a good background prototype, I think it is mainly divided into three parts:

The structure of the backend function module and page logic Have a clear understanding of

2. Be able to skillfully use the prototype tool

3. Excellent design style and design specifications

1 is the foundation, 2 is advanced, 3 is to make the prototype become excellent embellishment.

How to ensure that the functional structure of the backend and the logic of the page is clear and reasonable.

Many people have a habit of drawing prototypes, that is, no matter what they want to think about, directly start to open the prototype tool to pull a few boxes, or according to a self-proclaimed very good website backend began to draw according to the gourd, which in my opinion is extremely dangerous. Web page background is different from the general web interface, he is for the division of functional modules and page logic is very high. On the one hand, the hierarchical structure of the background of the site compared to the more complex, on the other hand, the function of the background of the web page is more biased towards the management of the front-end page, which leads to the correlation between the function and the guide may be much weaker, so that if there is no good understanding of the structure of the background began to draw the prototype, then the final background management system is likely to be made out of the accumulation of functions, functional ease of use and operational flow are very difficult. and the operation of the process are difficult to guarantee.

Drawing the background prototype always keep in mind:

Drawing the prototype before, first clear the functional modules of the background management, through the tree structure diagram to help themselves divided into pages and modules.


data-rawwidth=”1423 “data-rawheight=”676 “class=”origin_imagezh-lightbox-thumb “width=”1423 “data-original=”


After sorting out the modules, you can start designing the skeleton of the backend management system, I personally divided into three kinds: the main module (mainly divided into which independent functional modules), sub-categories (each functional module and what are the sub-functional classifications), the function of the event (specific to each feature) page which exists within the main operation), the approximate layout is probably the following three

1) the top tab division of the main module, the left sidebar division of sub-categories


data-rawwidth=”1116 “data- rawheight=”468” class=”origin_imagezh-lightbox-thumb “width=”1116″ data-original=”


2) Hierarchical categorization of hamburger styles for the left sidebar (lazy ~ probably the worktile’s sidebar style)

3)Left sidebar secondary category list floated out


data-rawwidth=”249 “data-rawheight=”155 “class=” content_image “width=”249″>

Thinking about the route should be from top to bottom, in the modular division do not stick to the specific form of an interface display.

Structure and logical clarity (skeleton) > functional page design (specific to a page how to design) > optimization of the nature of the functional design (whether you need to preview, real-time storage and other functions) > user experience

Necessary, you can sacrifice the user’s initial use of the cost of learning, the initial use of the cost of learning can be for the user to grasp the use of proficient efficiency, try to follow the four principles of intimacy/contrast/repeat/alignment.

For important features that you don’t know how to place, consider placing them on the right side of the top bar instead of on the main module

Frequent pop-ups are not a good choice (they should be popped up when necessary), and if you can, expanding them and floating half a page on the right side is a good way to solve the problem.

prototype drawing software – how to draw product prototypes on ipad

Provide a few interface prototyping software (interface prototyping tools)

Do interface design if there is no good tool to assist, it will only lead to twice as much and half as much. Recommended below a few good interface prototyping software:

Interface prototyping tool Pencil

Pencil is an open source prototyping tool , hand-drawn style , as if they draw on paper that way . Pencil can also be used to draw a variety of architectural diagrams and flowcharts , while also providing Firefox plug-ins.

Open source prototyping tool Framer

Framer is an open source prototyping tool , using the written . Support for animation effects and interactive operations.

HTML-based interface prototyping library Shireframe

Shireframe can be realized through the HTML interface prototype drawing . Driven by AngularJS and jQuery, using RequireJS for module loading, using Bootstrap for display

Prototyping software AxureRP

AxureRP is a rapid prototyping software, developed by AxureSoftwareSolutions, Inc. AxureRP enables the person operating it to quickly and accurately create Web-based site flowcharts, prototype pages, interactive experience designs, mark up detailed development instructions, and export Html prototypes or specification Word development documents.

Software interface prototyping tool UIDesigner

UIDesigner, short for “UID”, is a software interface prototyping tool. It has powerful templates and prefabricated features to quickly build high-fidelity prototypes of software interfaces. It allows designers, product managers, and program development engineers to quickly communicate with each other and reduce unnecessary workload.

Product prototyping tool Mockup

Mockup is a hand-drawn style product prototyping tool , in just a few minutes , users can create a model . Developed in the Vala language. The application uses drag-and-drop objects from the toolbar to the dashed white area.

Product prototyping tool BalsamiqMockups

BalsamiqMockups is a great tool for product designers to draw wireframes or prototype interfaces for products. In the demand phase of product design, low-fidelity wireframe or sketch design between product flow design and high-fidelity DEMO design, before the emergence of BalsamiqMockups, flowchart can be used Visio, high-fidelity DEMO can be used Axure, but we do not have a good use of the sketch design tool; in the product design and management, we usually in the product’s business processes and data flow has been quite clear before we start to further consider the product structure and framework layer, although at this time, paper, pen, whiteboard are very simple and convenient communication tools, but their biggest disadvantage is – it is difficult to save the valuable prototype. The BalsamiqMockups are the perfect solution to this problem.

The last thing I need to say is that, no matter whether you respect hand-drawing, or like prototyping software, the most important thing is to do interface design is still the idea, the tool is only used to help realize the idea. Do not have to be too much pursuit of technology, do not have to be too much pursuit of visual performance, sometimes only need to focus on product logic, page interaction, layout and structure of these, the rest will be handed over to the artisan.

What are the software prototyping tools

Software design prototyping tools have a variety of recommended use of Pixso co-design. Pixso not only realized and Sketch, AdobeXD seamless, more based on the excellent component variants, automatic layout, real-time collaboration and other characteristics of the team members face a complex design project, no longer need to wait for the main visual completed and then The UI designers can also create their own web pages, which is a great way to get the most out of a complex design project.

Pixso comes with component variants, automatic layout and other professional design tools, support for UI / UX design and prototype playback, integrated to complete the high-fidelity product design, direct drag and drop to use their own design library, but also commonly used in the project of the icon, homemade components of the one-click to save, eliminating a lot of duplication of effort, the formation of a unified visual norms. Using Pixso design resources, you can quickly start prototyping, simulate the final product form and interactive effects, realize the characteristics of the analog brush, provide refined vector design, free cutting line segments, and connect the dots into surfaces. Based on cloud-based collaborative editing, Pixso connects the daily work of product managers, designers, and developers to achieve more efficient collaboration and smoother design.

How to draw product prototypes on ipad

1. Use InspirationMaps: InspirationMaps is a powerful mind mapping tool that can help users simplify the product prototyping process. It can help designers see through a thought at a glance, thus speeding up the product prototyping process.

2. Use MockplusIpad: MockplusIpad is a prototyping tool developed specifically for the iPad, it can help users quickly create any type of product prototype. In addition, it also supports real-time preview and instant interaction to help you easily see the effect of the design.

3. Use OrigamiStudio: OrigamiStudio is an extremely powerful prototyping tool for the iPad. It can help you create complex animations between scattered interface elements, so that users can see the design effect and operation flow of the product at a glance.

ui prototype diagram with what software to do

A, rapid prototype

Rapid prototyping focuses on the rapid output of wireframe prototypes, the lack of interactive features, can also be said to be a low-fidelity prototype. One of the commonly used tools are:

1, Pencil. it is an open source hand-drawn style prototype drawing tool, parts are more abundant. In addition to the use of hyperlinks no other interaction, can only be used to quickly draw the interface. Can be exported to PNG, pdf, web format.

2, lumzy. no registration, no need to download, directly in the browser to open the prototyping tool (English site). Mainly for design sketches. The function is relatively simple, less interaction, not many parts. Although lumzy is relatively simple, but get started quickly, suitable for rapid prototyping, there are also many UI designers in use. It can be exported as pdf, jpg documents.

3, MockupCreater. can do interface prototypes can not do interaction, that is, the output is only a conceptual sketch. Currently only supports PNG, RTF and PDF three static file format export.

4, MockupBuilde. It is also a sketch prototype, parts relative to lumzy, MockupCreater to some, can only use hyperlinks to achieve interactive effects. Currently can only export PNG, PDF format

Two, interactive prototypes

Interactive prototypes relative to rapid prototyping, in addition to making wireframe prototypes, but also to achieve a rich interactive features, in the case of the project scheduling time, it is recommended to use interactive prototyping. In addition, these interactive prototypes can also be comfortable function of high-fidelity prototypes. Representative tools include:

1, Tencent UIDesigner, which has a powerful template and prefabricated features, can quickly build a high-fidelity prototype of the software interface. Designers, product managers, program development engineers can be realized between the three rapid communication, reduce unnecessary work within the consumption. 2.0 version of the function of the interaction is comprehensive, the response speed is also faster, but for the PC platform application design. UIDesigner preview is very convenient, can be exported to exe file.

2, Flash. from once the most popular FlashMX, Flash8.0 has been to the current CSN, iterated various versions, like PS has a long history. It is powerful, skillful situation can make almost all kinds of effects you want and even UI, you can even do the development directly, but the technical requirements are high, to make a good effect need to know some AS scripts. Export convenient, in addition to its own swf format, exe, image format and even web form can be exported.

3, Axure. is a professional rapid prototyping tools, so that experts responsible for defining the requirements and specifications, design features and interfaces to quickly create applications or Web site wireframes, flowcharts, prototypes and specifications document. As a professional prototyping tool, it creates prototypes quickly and efficiently while supporting multi-person collaborative design and version control management.

Three, high-fidelity prototypes

Simple high-fidelity prototypes pay more attention to the visual effect, but the interaction function of the first on the scarcity of UI designers must master the basic visual design prototyping software. The main tools used are PS and illustrator. the existing version can even cut the map directly and save it in web format. If you are skillful, you can replace a large part of the work of visual designers and refactoring engineers.

Just started the product manager to draw product prototyping, what are the good tools to use, seek Amway

Preferred advice do not directly use Axure, recommended 80% of domestic product managers are using the ink knife, is an online prototyping tool, a lot of the templates can be directly reuse, share the convenient and easy to get started with the operation is very simple.

One is Axure for new entrants to the product manager, Axure does have a lot of features, but for the primary is mainly to sort out the logical structure of the product function, with a fast prototyping tool to land into a product prototype map can be, mainly with the leadership, colleagues, when communicating with the preview device limitations, extremely inconvenient.

The second is the ink knife to provide many industry product prototype templates, in addition to direct reuse, will be designed to do their own product prototype diagrams and its comparison, reflective optimization learning, at the same time, the ink knife can also be shared directly into the project prototype diagram project link or QR code, especially convenient for leaders and colleagues to preview, and more convenient for communication.

Introduction to prototyping

We begin by clarifying two definitions:

Definition of prototype:

The framework of a product depicted in lines and graphics, also known as a wireframe diagram.

The resultant output of interaction design may be a few diagrams on a piece of paper; the prototype represents the result of interaction design, and when finally realized, the interaction flow will be consistent with the prototype; it can be interpreted as a draft or called a reference

The prototype is a way to let the user experience the product in advance, to communicate the design concept, and to show the complex system. In essence, a prototype is a communication tool.

Definition of prototyping:

The wireframe diagram depicts the functional structure of the page, it is not a design draft, nor does it represent the final layout, the layout shown in the wireframe diagram, the most important role is to describe the logical relationship between the function and the content.

The prototype diagram is a representative model or simulation of the final system, which is more realistic and detailed than the wireframe diagram.

Secondly, to understand the role of prototyping, there are two main points:

Communication: because the prototype is a figurative expression of the needs and functions, so the prototype can assist the product manager and the leadership, interaction, UI and technical communication product ideas. Although the requirements document is also able to meet the communication needs, through the use case will interact with the design description document, but the prototype can be more detailed explanation of interaction.

Testing: Because prototypes are easier to modify than UI drafts, prototypes can improve the efficiency of product managers who have to rework functional designs that don’t pass review. No Internet company can go straight to products and services without testing. Prototypes have irreplaceable value in identifying problems, reducing risks, and saving costs.

(The place of prototyping in product design)

Design process: first of all, clarify the purpose of the output prototype as well as the user group, how efficient is this prototype to help me communicate the design or test the design? How much time do I have to prototype? Next, what level of fidelity is required?

The best online prototyping tools are Marvel, Invision, Inkblade, and so on.

Hope to help you~

You can ask any questions, please accept, thank you~