Most folks start the design process by developing quick sketches of the concepts. These sketches can be elaborate or rudimentary. Oftentimes, these sketches evolve into paper prototypes that illustrate the flow or steps a user would take to complete a task. By scanning your drawings, making adjustments with your favorite image editing software (Gimp, Adobe Photoshop, and so on), and Axure, you can quickly create a clickable prototype.
To go through this recipe, you will need to have digital scans of your sketches and access to the image editing software of your choice.
You will now create a carousel including thumbnails from digital scans of simple, freehand-drawn sketches.
Using your image-editing tool, first organize your images and crop them appropriately. You will have to organize the images and visualize the user flow just as you would do for paper prototypes.
Start Axure and under Create New select RP File.
In the Sitemap, add additional child or sibling pages as necessary to complete your flow by clicking on the Add Page button icon or by right-clicking on any page in the sitemap. In the menu that appears, mouse over Add, and then click on the Child or the Sibling page.
Double-click on any page title in Sitemap to select that page. You will see the wireframe for the associated page shown.
While holding down the mouse button, drag the Image widget, and place it on the wireframe.
Double-click on the Image widget on the wireframe, and select the appropriate scanned sketch.
While holding down the mouse button, drag the Hot Spot widget, and place it over the item you would like to make clickable.
While holding down the mouse button, drag the corners of the Hot Spot widget on the wireframe to the desired size.
With Hot Spot selected, in the Widget Interactions and Notes pane, click on Create Link….
In the Sitemap pop up, click on the associated page in the user flow.
Repeat steps 7 through 10 for each region on your wireframe that you would like to make clickable.
Repeat steps 4 through 11 for each page in Sitemap that you would like to make a part of the prototype.
You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the Preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….
Using this recipe, you are able to convert your paper sketches into clickable digital prototypes. Each paper sketch becomes a page in the Sitemap through the use of the Image widget. To accomplish this, you opened the scanned image with the Image widget to display your paper sketch on the page.
To create clickable regions, you used Hot Spot and associated the next page in the flow using Create Link…. You used as many image map regions as clickable elements needed for the interactions on a page.