This article is part of the series Information Architecture for wireframes using Justinmind Prototyper
Before building any design spec or site wireframe, it’s necessary to plan what’s going to be done, where the navigation paths are, and which decisions the users will make while using the program, and what should be necessary to develop the project.
As a Project Management tool, Justinmind Prototyper has a very powerful Scenarios Feature, which allows Project Managers, Information Architects and User Interface Designers to work collaboratively on the same project, each one of them doing their specific roles.
The Navigation Flowchart
Also called Navigation Tree, sitemap or Flow Diagram, it represents the possible navigation pathways where the user can go through, sometimes in both ways. It can be called the wireframe of the navigation.
One way to organize your site or program is dividing the content in manageable categories. A site can have the Home, About us, Contact, Products, etc, as categories, and they’ll be listed in all pages.
Inside the Scenario Tab, you can star the feature, which works just like any other mind mapping tool.
The main characteristic of Justinmind Prototyper is that it’s built to be intuitive, so you’ll just drag and drop elements on your canvas and rename them to have the tree. Clicking and dragging on the small boxes creates connections between them, which mean the user will go from someplace to another one.
The pages can be linked to the mockup screens via drag and drop, so when someone add a comment on a page, it’ll be shown in the final documentation file.
Besides, the most common elements on trees are already there: actions, screens and decisions. The pages icons can be linked to the specific pages via drag and drop, so you can double-click and go to any pages.
For example, if our home page is linked to the first page of the site, you just have to click twice on it and edit it.
Tip: Workflow administration
Using the coloured tagging system, it’s easy to control which pages are already done, and which ones still need work.
On User Interface tab, you can classify pages according to their current status, and even create personalized ones by editing the legend. In this example, we marked the page as completed.
Back on Scenarios tab, we see the linked page as completed. This is the best way to control work on any collaborative work.