Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

Understanding flow diagrams

  • Duration: 03:11
  • Level: beginner
  • Axure Version: 7.0+
  • Date: Jun 26, 2015

Transcript

With flow diagrams, you can represent a variety of processes including use cases, page flows, and business processes. Things like this, or that.

However you can also use it for another interesting concept: sitemaps. A sitemap is a visual representation of the structure of a website, like this for instance.

Axure makes it very easy to create a sitemap for you. In your project, right click on the root element of your pages and select Generate flow diagram. Note that this will insert the sitemap in the current page. It's a good practice anyway to have the first page being the entry point of your project. So let's take a look at the generated sitemap. Axure just created a tree representing the structure of your project. By default, when you generate the project, you can see that each box is clickable and links to the corresponding page. Moreover, when you modify the title of a page, the sitemap instantly reflects this change. You can change the layout of the sitemap at will, and it will try to keep the visual structure as consistent as possible. It's acting a bit like Microsoft Visio on that regards.

Now what happens if you want to add an extra block to the sitemap? Well, Axure allows you to do it. Select the Flow library here, and select the Rectangle shape. Drag and drop it onto the canvas. Then use the Connector tool, located over here, to link one rectangle to another. You have to click on a shape, then keep your button pressed and link to another shape, and the link is created. Now that the rectangle is added, you can also choose to link it to an existing page. Axure calls it Reference page. You have two ways of accessing this feature: either you right click on the shape and select the Reference entry. Or you can use the Widget properties panel and choose Add Reference page.

When you click on one of these two options, a modal window appears and lists all the existing pages of the project. Click on one of them to link the shape to the page and you are done.

Ok, so we've just covered the sitemap feature. But there are a lot of other things you can do with the flow library. Just take a look at the content of the flow library. You have a lot of shapes to choose from, allowing you to represent basically whatever you want. The good thing with Axure is that even though conventions exist for the meaning of each shape, Axure does not restrict their use. Basically, do what you want with them.

Continue your learning