1. Home
  2. Docs
  3. Chapter 21. User Experience Design
  4. 3. Wireflow
  5. How to create a wireflow

How to create a wireflow

In Visual Paradigm, a wireflow is created in a Wireflow Diagram. You can create as many Wireflow Diagrams as you need to support your UX design needs.

A Wireflow Diagram is composed of scenes, which are the screens involved in a flow. Each scene is a visualization of either screen components selected from the wireframe symbol library or a particular wireframe (diagram). We will talk about it later on in this article.

Wireflow Diagram example (Mobile Banking)

Creating a Wireflow Diagram

To create a wireflow diagram:

  1. Select Diagram > New (Ctrl-N) from the application toolbar.
  2. In the New Diagram window, select Wireflow Diagram and click Next.
    Creating a Wireflow Diagram
  3. Name the diagram and click OK. This creates an empty Wireflow Diagram where you can start constructing the flow.

Creating a wireflow

A wireflow describes the composition of screens and how they flow under a particular scenario. It contains two main elements – scenes and flow connectors. Scenes are simply the screens that appear in the wireflow, while flow connectors connect the scenes in forming a wireflow. In this section you will learn how to create scenes and flow connectors.

  1. To create the first scene of a wireflow, select Scene from the diagram toolbar.
    To create a wireflow scene
  2. Click on the diagram to create a blank scene.
    Wireflow scene created
  3. Edit the screen ID and scene title. The screen ID uniquely defines a scene. People also use it as a key to link the scene with the implementation activities / artifacts associated with that scene. The scene title is a short description of what’s happening under the moment the scene appear.
    Entering screen ID and scene title
    You will learn how to change the content of a scene in the next section. For now, let’s focus on the creation of wireflow first.
  4. To create the next scene, move your mouse pointer over the created scene.
    Mouse over a wireflow scene
  5. Press on the resource icon Connector -> Scene and drag it out.
    To create the next wireflow scene
  6. Release the mouse button. This creates a new scene connected with the previous one. Name the screen ID and scene title.
    Next wireflow scene created

Representing alternative flows with decision

There are always alternatives and exceptional behaviors in a user interaction. Take a login process as example, while the basic flow is to log in with success using correct user ID and password, there are many alternative paths such as invalid ID, invalid password, non existing account, ‘forgot password’, and even in a successful attempt, there are multiple ways to log in such as to log in with a normal account, with Facebook account, with Google, Twitter, etc. Instead of creating separate wireflow diagrams for these behaviors, you can present all the possible paths in a single wireflow diagram with the help of the decision shape. The figure below gives an example.

Using decision in wireflow diagram

The wireflow begins with the Login screen. If user log in (with success), it goes to the Dashboard screen. If user triggers the sign-up function, it shows the Sign-up screen.

To create a decision shape from a scene, use the resource Connector -> Decision.

Creating a decision shape in a wireflow

Selecting scene content – Screen components / Wireframes

Depending on the level of detail required, you can compose a scene by selecting simple components from a pre-defined wireframe symbol library, or to embed a detailed wireframe in it. This section shows you how to make a selection.

To select the content, move your mouse pointer of a scene. Click on either Components or Select Wireframes.

Select wireflow scene content (components or wireframe)

Screen components

Compose a scene with pre-defined screen components. There are over 400 ready-to-use screen symbols for the development of web and mobile flowcharts.
Selecting wireflow components

To add a new components part:

  1. Click on the + button at the bottom left of the Components window.
  2. Select the right category.
  3. Select the components part.
  4. Repeat these steps until all parts are added.
  5. Click OK.

Wireframes

Use our wireframe tool to create your own wireframe. The wireframe tool supports various platforms like Android apps (phone/tablet), iPhone/iPad apps, desktop applications and web pages.

Selecting wireframe

To create a new wireframe:

  1. Right click on the scene and select Convert to Wireframe… from popup menu.
  2. Select the way to form the new wireframe.
    Select Wireframe
  3. Enter the name of the wireframe and click OK.
  4. Draw/modify the wireframe created.

You can re-use an existing wireframe by selecting it from the wireframe tree on the left.