1. Prototypes Demo
Please turn on speakers for audio
To view on Vimeo, please click here.
2. HTML Prototypes
After designing the annotated wireframes and interactions in Axure RP, you can generate an interactive, browser-based prototype.
Axure RP prototypes are HTML and javascript files that can be viewed in Internet Explorer 6+, Mozilla, or Firefox.
3. Configuring and Generating a Prototype
To configure and generate the prototype, select Generate->Prototype (F5) in the main menu or click the Prototype button in the main toolbar.
This will open the Configure HTML Prototype dialog with the default prototype configuration. In this dialog, you can configure the prototype.
The options are divided into the following sections:
General: Enter the Destination Folder where the prototype will be generated. The prototype will be made up of many files so it is best to specify a folder just for the prototype.
Notes: Select and order the page level notes that will be displayed in the prototype.
Annotations: Select and order the annotation fields to display in the prototype.
Interactions: Specify how the interactions will behave. i.e. Specify whether descriptions of the Cases should always be shown or only when multiple Cases exist.
Distribution: Choose to generate a CHM file containing the prototype.
Advanced: Choose to render text panels as images. This is a legacy feature and used only in rare cases.
Once the prototype is configured, click the Generate button to produce the prototype.
4. Using the Prototype
The prototype is divided into three frames.
Sitemap Frame (left)
Navigate to a page in the prototype by clicking on a page in the sitemap.
Page Notes Frame (bottom)
This frame contains the page notes.
Main Frame (center)
The main frame contains the wireframes and diagrams. The interactions in your wireframe will function as designed.
Any interaction defined in the Interactions pane in Axure RP will behave as defined in the prototype.
You can also view annotations on the widgets by clicking on the note icons next to annotated widgets.
5. Distributing Prototypes
Axure RP prototypes are HTML, Javascript and image files that can be viewed in popular browsers like Internet Explorer 6+ and Firefox. Colleagues and clients will not need to install Axure RP or even a reader to view the prototypes.
There are several ways to distribute the prototypes.
Publish to a Shared Server or Web Server
The first option is to publish the generated prototype to a shared server or a web server. This will allow anyone (with permissions to access that server) to browse to the prototype location in their browser (or click on a link you send them).
With the appropriate access, you can generate the prototypes directly to the shared server or web server. Alternatively, you can generate the prototype locally first and move the prototype folder to the server afterwards. If you are uploading to a web server, you may need to use an FTP program like Flash FXP to transfer your files. If you do not know if your organization has a server set up, your IT folks may be able to help.
Compressed Zip File
The second option is to zip up the folder that contains the prototype files and send the zip file to be unzipped and viewed locally.
To create a Zip file in Windows Explorer, go to the folder where your prototype was generated. Right click on the folder and select Send To >> Compressed (zipped) Folder.
After the folder is zipped, you can distribute the zip file. The recipient can then unzip the file and put the unzipped prototype folder on their computer. They can do this by double clicking on the zip file and selecting "Extract All Files" or dragging and dropping the prototype folder in the zip file onto the desktop or into another folder on the computer. Now, they can browse into the unzipped folder to view the prototype locally (typically starting with the [filename]_Start.html file.)
CHM File
The third option is to generate a CHM file containing the prototype. Like zip files, this option also gives you the ability to distribute a single file and typically does not require the recipient to install any software to view it. It's a little easier on the recipient since they don't need to unzip any folders. CHM is the format for Microsoft's HTML Help file so most Windows computers will already have the viewer installed and users can just double-click the file to view it.
To set this up, click on the "Distribute section" in the Configure HTML Prototype dialog (F5) and check the option to generate the CHM file.
If you do not have the HTML Help Workshop from Microsoft installed already, you will need to install it to generate CHM files. It is available as a free download
here. Once installed, there will be a hhc.exe file in the folder where it was installed. Click "Locate hhc.exe" to tell Axure RP the location of the program on your computer.
Once the prototype and .chm file are generated, you will find the .chm file in the same folder as the prototype. You can now distribute the .chm file to be viewed in the HTML Help viewer
Once the prototype and .chm file are generated, you will find the .chm file in the same folder as the prototype. You can now distribute the .chm file to be viewed in the HTML Help viewer.