• Topics
• FAQs
• API Documentation
• Professional Services
• User Experience Dictionary
• Important Notice

7. Creating and editing screenflows

An alternative way of quickly linking pages (and a great way to keep a good overview of a project) is to create a screenflow. Screenflows can be thought of as maps of pages that show the relationship between them. They are an easy way of visualizing individual use cases, task flows or processes within an application.

Let's see how screenflows can help us link pages very quickly. Go to the Assets tab. This is the section, where you can create screenflows. It's also the place to upload images, create layers or define custom stencils that you can reuse later.

Click on the "ADD NEW" button to add a new screenflow to the list. To edit it, select the project from the assets list and open it with a double-click. You will now see the Screenflow with the pages panel on the left, the toolbar at the top, and an empty canvas in the center.

Drag all three pages from the Pages panel onto the canvas. Now select the "Signup" page. All linkable elements will be highlighted.

Just grab the "image" stencil at the top of the "Signup" page with your mouse and pull it over to the "Home" page. Voilà - you've just created a link that takes the user back to the "Home" page! It can be seen as an arrow in the Screenflow view. Coincidentally, since the "image" stencil is part of a layer that's used on all three pages, so the link works on all of them.

.

There's another great thing you can do with screenflows: If you already have some screenshots (or scanned scribbles) and just want to link them up, you can simply drag the image files (PNG, BMP or GIF) onto the canvas. They will automatically be turned into pages with the right dimensions. Now you can double-click them to open each and add "Action Area" stencils on top, which serve as transparent "hotspots". The hotspots allow you to link up the pages - just like we did with the "image" stencil above.

<< previous

next >>