Relationship between flowchart and wireframe

A flowchart (task flow) is a graphical language that draws the user's method of using the product and the steps to achieve specific functionality. The process of using the product is usually done as a certain task, the language describes the desired purpose, each step is represented by a node, with lines and arrows indicating the direction of each step and the next step to be reached. The flowchart is intended to help the designer to understand the functional structure of the product and the operation of the user each step to achieve the use of the white self.

But flowcharts are divided into two main categories:

class is a logical flowchart used by product managers or technicians in the development process, as shown in Figure 1:

Figure 1

Another type is the page flowchart for product design or user experience output, as shown in Figure 2:

Figure 2

Page flowchart In addition to using Photoshop, illustrator and other drawing tools to achieve the flow chart, but also with the flash, catalyst implementation of the process with interactive effect, can also be used axure, Balsamiq and other prototype tools to achieve the page jump logic flow.

Wireframe (wireframe) is based on the logic flow chart, with the form of wireframe to refine the main function of the interface and basic layout positioning, including navigation, title, picture, icon, text content, button, a variety of controllers and forms, so as to determine the specific interaction between the interface.

Can be divided into the following categories according to the implementation form:

The simplest way is to use paper and pen to draw a simple paper line diagram, as shown in Fig. 3

Figure 3

Here are several printable internet product design wireframe templates:

1, Paper Browser prototype

Figure 4

2, the iphone paper prototype sketch

Figure 5

3, the iphone low-fidelity paper prototype

Figure 6

4, or the iphone high-fidelity paper prototype

Figure 7

5. Website prototype with grid

Figure 8

Complex can be used axure, Balsamiq and other prototype tools to implement HTML wireframe, you can refer to the use of wireframe to simplify your product design process, as shown in Figure 9:

Figure 9

Don't forget the user interface design layout-the user interface design layout is helpful for designing the user interface. Layout is often able to solve common problems, reasonable layout can facilitate the user familiar with the interface, read the application as soon as possible. Therefore, the layout should be considered at an early stage of the design process, preferably at the start of a sketch (UE) phase, as shown in Figure 10:

Figure 10

Some basic page layouts need to be familiar, or you can develop a scalable set of page layouts, as shown in Figure 11:

Figure 11

Finally, the flowchart is divided into logical flow chart and page flow chart, the wireframe is divided into the paper block diagram and the HTML wireframe, the line block diagram plus the operation steps, interactive logic can be called the flow diagram. These are important to clarify product architecture and to comb product logic. But the flow chart and wireframe are to assist product development, and not put the cart before the horse, in the process and prototype stage to spend too much time and effort, as long as it is easy to communicate, as far as possible to choose the simplest and most efficient way.

Source: http://elya.cc/product/600.html