This article describes how to leverage existing sites in your Axure RP prototypes.  This can help to create a higher fidelity prototype or simply speed up the wireframing process.  A screen capture program like SnagIt or a free one like WinSnap can be helpful.  You can also use the PrintScreen feature in Windows by hitting the "print screen" button (normally above the number keypad on desktop keyboards, or in the top right corner set of keys on laptops), and pasting into a picture or graphics program (something basic like Microsoft Paint would work fine).  To isolate certain elements from the screen, simply select or crop the image down to that element.

When incorporating existing websites or applications into a prototype, we like to break up the pages into separate elements like the header, sidebar, and footer and create them as masters.  This allows for more flexibility when designing new pages and allows us to reuse and redesign each element individually.

In the following example, we are pulling elements from the Dell website * (www.dell.com) and annotating and adding interactions to the sidebar using the image map region widget.  We also made a modification to a heading in the sidebar.

Here is the resulting Axure RP file and prototype:

Step 1: In the Masters pane, create and open a new master for design.

Step 2: Capture the graphic from the existing application using a screen capture tool or PrintScreen and copy and paste the image into the master.

Step 3: Now, you can add interactivity or notes to areas of the image by placing image map region widgets over the image.

In this example, we have added a link to the sidebar graphic by placing an image map region over the "Desktop" text and clicking "Quick Link" in the Annotations & Interactions pane to select the Desktops product page.  An annotation was also added to an image map region placed over the "Browse Our Products" heading.

Step 4: To "edit" portions of the image, widgets can be added on top of it.  In this example, we changed the text in the sidebar by placing a rectangle widget over the text and entering the new heading.  The color and border of the rectangle were formatted to match the rest of the graphic.

Once each master has been created this way, they can each be added to another master to create a template for the new pages.  Click here for a demo on masters.

Here is a link to the sample RP file.  It includes a master for the header, a master for the sidebar, and a master set to "Place in Background" with both the header and the sidebar.

    RP File
    Prototype

*Axure Software Solutions, Inc. is not affiliated with Dell, Inc.  All Dell trademarks or service marks are property of Dell, Inc.