Home Programming Prototyping Recipes

Prototyping Recipes

By
Packt
-
0
737
15 min read

(For more resources related to this topic, see here.)

Sketching, scanning, and prototyping

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.

Getting ready

Learn Programming & Development with a Packt Subscription

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.

How to do it…

You will now create a carousel including thumbnails from digital scans of simple, freehanddrawn sketches.

  1. 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.
  2. Start Axure and under Create New select RP File.

    3. If you already have Axure open, select File in the main menu, and then click on New, in the drop-down menu to create a new RP document.

  3. 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.

  4. Double-click on any page title in Sitemap to select that page. You will see the wireframe for the associated page shown.
  5. While holding down the mouse button, drag the Image widget, and place it on the wireframe.
  6. Double-click on the Image widget on the wireframe, and select the appropriate scanned sketch.
  7. While holding down the mouse button, drag the Hot Spot widget, and place it over the item you would like to make clickable.
  8. While holding down the mouse button, drag the corners of the Hot Spot widget on the wireframe to the desired size.
  9. With Hot Spot selected, in the Widget Interactions and Note spane, click on Create Link….
  10. In the Sitemap pop up, click on the associated page in the user flow.
  11. Repeat steps 7 through 10 for each region on your wireframe that you would like to make clickable.
  12. Repeat steps 4 through 11 for each page in Sitemap that you would like to make a part of the prototype.
  13. 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….

How it works…

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.

Creating a dynamic Breadcrumb Master

Using Masters in Axure allows you to create reusable components. When you make a change to a Master, the change is applied to all wireframes that contain that Master. Leveraging Masters can ensure the consistency of elements across your prototypes.

Getting ready

In this recipe you will create a dynamic Breadcrumb Master.

In Axure, verify that the Widget Manager and Page Properties panes are shown. To verify, click on View in the main menu and mouse over Panes. In the pop-up menu, make sure that a check mark is next to all items, including the Widget Manager and Page Properties panes.

How to do it…

To create a dynamic Breadcrumb Master, first you will create new pages in your sitemap and three empty Masters (for example, Template, Header, Menu, and BreadCrumb). Next, you will place widgets on the Header, Menu, and BreadCrumb Masters. You will then place the Header, Menu, and BreadCrumb Masters onto the Template Master. Finally, you will drag the Template Master to all of the pages in Sitemap.

  1. Start Axure and under Create New select RP File.
  2. In the Sitemap create pages as follows:

  3. In the Masters pane, create four individual Masters, titled: Template, Header, Menu, and BreadCrumb, respectively, as shown in the following screenshot:

  4. Right-click on each Master you created in step 3, mouse over Drop Behaviour, and click on Lock to Master Location. This will cause the widgets in each Master to maintain the xand ycoordinates no matter where the Master is placed in a wireframe.
  5. In the Masters pane, double-click on the Header Master to select it.
  6. While holding down the mouse button, drag the Placeholder widget, and place it on the wireframe.
  7. With the Placeholder widget selected, type Home, and change the x: 10, y: 12, w: 96, and h: 30(present at the top-left of the window).
  8. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type HomeLink.
  9. While holding down the mouse button, drag the Label widget, and place it at the coordinates (130,18) on the wireframe.
  10. With the Label widget selected, perform the following steps:
    1. Type BreadCrumb Prototype.
    2. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type HeaderLabel.
  11. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 18 by clicking on the font size dropdown, mouse over 18, and click to select:

  12. In the Masters pane, double-click on the Menu Master to select it.
  13. While holding down the mouse button, drag the Classic Menu – Horizontal widget, and place it at the coordinates (10,52) on the wireframe.
  14. In the Widget Interactions and Notes pane, click on the Menu Name text field, and type MainMenu.
  15. To name and link the primary menu item, perform the following steps:
    1. Click on the first menu item labeled File to select it, and type Primary.
    2. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuPrimary.
    3. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….
    4. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenPrimaryPage.
    5. In Click to add actions, click on Open Link.
    6. In Organize actions, you will see the interaction description update to Open Link in Current Window.
    7. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Primary Page.
    8. Click on OK.
    9. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and then click on it to select.
  16. To name and link the category menu item, perform the following steps:
    1. Click on the second menu item, labeled Edit, to select it, and type Category.
    2. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuCategory.
    3. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….
    4. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenCategoryPage.
    5. In Click to add actions, click on Open Link.
    6. In Organize actions, you will see the interaction description update to Open Link in Current Window.
    7. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Category page.
    8. Click on OK.
    9. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and then click on it to select.
  17. To name and link the content menu item, perform the following steps:
    1. Click on the third menu item labelled View to select it, and type Content.
    2. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuContent.
    3. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….
    4. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenContentPage.
    5. In Click to add actions, click on Open Link.
    6. In Organize actions, you will see the interaction description update to Open Link in Current Window.
    7. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Content Page.
    8. Click on OK.
    9. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and click on it to select it.
  18. To add a submenu item, right-click on the Primary menu item, and click on Add Submenu:

  19. Click on the first submenu item, and enter Secondary, and then perform the following steps:
    1. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuSecondary.
    2. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….
    3. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenSecondaryPage.
    4. In Click to add actions, click on Open Link.
    5. In Organize actions, you will see the interaction description update to Open Link in Current Window.
    6. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Secondary Page.
    7. Click on OK.
  20. Right-click on the second and third submenu items, and click on Delete Menu Item.
  21. In the Masters pane, double-click on the BreadCrumb Master to select it.
  22. While holding down the mouse button, drag the Dynamic Panel widget, and place it on the wireframe.
  23. Change the x: and y: coordinates and w: and h: to be:

  24. With the Dynamic Panel selected, perform the following steps:
    1. In the Widget Interactions and Notes pane, click on the Dynamic Panel Name text field, and then type BreadCrumb.
    2. In the Widget Manager, rename State1 Home.
    3. Add states to Dynamic Panel as follows: Primary, Secondary, Tertiary,Category, Product, and Content.
  25. With Dynamic Panel selected, perform the following steps:
    1. Double-click on the state labeled Primary in the Dynamic Panel Manager.
    2. While holding down the mouse button, drag a Label widget and place it on the wireframe at coordinates (0,6).
    3. Enter Homeas the text on the Label widget.
    4. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type HomeBreadCrumbLink.
    5. In the Widget Interactions and Notes, pane click on the Interactions tab, and then click on Add Case….
    6. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenHomePage.
    7. In Click to add actions, click on Open Link.
    8. In Organize actions, you will see the interaction description update to Open Link in Current Window.
    9. In Configure actions, click on the radio button next to Link to a page in this design, and click on Home page.
    10. Click on OK.
  26. You will now focus on building the Dynamic Panel states Primary, Secondary, Tertiary, Category, Product, and Content. The following screenshot shows what the Primary state will look like:

  27. To build the Dynamic Panel states Primary, Secondary, Tertiary, Category, Product, and Content, with the Dynamic Panel selected perform the following step:
    1. Repeat step 27, changing the step each time with the following information:

      Panel State

      Coordinates for Label Widget

      Label Text

      Shape Name

      Case description

      Configure Actions Link to

      Primary

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Primary

      (55,6)

      Primary

      PrimaryBreadCrumbLink

      OpenPrimaryPage

      Primary Page

      Secondary

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Secondary

      (55,6)

      Primary

      PrimaryBreadCrumbLink

      OpenPrimaryPage

      Primary Page

      Secondary

      (115,6)

      Secondary

      SecondaryBreadCrumbLink

      OpenSecondaryPage

      Secondary Page

      Tertiary

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Tertiary

      (55,6)

      Primary

      PrimaryBreadCrumbLink

      OpenPrimaryPage

      Primary Page

      Tertiary

      (115,6)

      Secondary

      SecondaryBreadCrumbLink

      OpenSecondaryPage

      Secondary Page

      Tertiary

      (200,6)

      Tertiary

      TertiaryBreadCrumbLink

      OpenTertiaryPage

      Tertiary Page

      Category

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Category

      (55,6)

      Category

      CategoryBreadCrumbLink

      OpenCategoryPage

      Category Page

      Product

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Product

      (55,6)

      Category

      CategoryBreadCrumbLink

      OpenCategoryPage

      Category Page

      Product

      (125,6)

      Product Detail

      DetailBreadCrumbLink

      OpenDetailPage

      Product Detail Page

      Content

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Content

      (55,6)

      Content

      ContnetBreadCrumbLink

      OpenContentPage

      Content Page
  28. To populate the Template Master with the component masters (for example, Header, Menu, and BreadCrumb Masters), perform the following steps:
    1. In the Masters pane, double-click on the Template Master to select it.
    2. While holding down the mouse button, drag the Header Master, and place it anywhere on the wireframe.

      In step 4, you specified Lock to Master Location for the Drop Behaviour of each Master. This causes the widgets in each Master to maintain their x and y coordinates no matter where the Master is placed in a wireframe.

    3. While holding down the mouse button, drag the Menu Master, and place on the wireframe.
    4. While holding down the mouse button, drag the BreadCrumb Master, and place it on the wireframe.
  29. While holding down the mouse button, drag the Template Master, and place it anywhere on the wireframe. The Template Master will align to the fixed X and Y coordinates.
  30. Below the wireframe, click on the Page Interactions tab, and double-click on the OnPageLoad interaction. In the Case Editor (OnPageLoad) pop up, perform the following steps:
    1. In Case description, rename the case description SetBreadCrumbState.
    2. In Click to add actions, click on Dynamic Panels to expand, and then click on Set Panel State.
    3. In Organize actions, you will see the interaction description update to Set Panel to State.
    4. In Configure actions under Select the panels to set the state, click on the checkbox next to the Label for the Breadcrumb (Dynamic Panel).
    5. Click on the Select the state dropdown, and mouse over Home. Click on Home to select it.
    6. You will see the interaction description under Organize actions update to read.
    7. Set Template/BreadCrumb/BreadCrumb Home.
    8. Click on OK.
  31. Repeat steps 30 to 32 for the remaining pages in Sitemap, modifying each OnPageLoad case to set the BreadCrumb state to the appropriate panel state corresponding to the selected page in Sitemap(for example, for the Primary page, the corresponding state would be Primary, and so on).
  32. 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….

How it works…

For this recipe, you used Masters, a dynamic panel, a menu widget, and text widgets to create a dynamic BreadCrumb Master. You created four Masters: Template, Header, Menu, and BreadCrumb and set the behavior of each to Lock to Master Location. This retained the coordinates of the widgets placed on each Master when used on a page. The Template Master contained the Header, Menu, and BreadCrumb Masters. The Menu was labeled and linked to the corresponding pages in Sitemap. The BreadCrumb Master contained a dynamic panel that had a corresponding panel state for each of the pages in Sitemap. For each individual panel state, label widgets were used and linked to the corresponding page in the sitemap. When a page is loaded, the Page Interaction OnPageLoad event sets the state of the BreadCrumb dynamic panel to show the correct BreadCrumb state.

Generating a dynamic welcome message

Using variables, you can set widget values and text dynamically. For example, when a page loads, you could show the user a welcome message based on the day of the week.

Getting ready

In this recipe, you are going to explore using built-in variables in expressions. You will show the user a welcome message using the DayOfWeek variable.

How to do it…

Perform the following steps:

  1. Start Axure and under Create New select RP File.

    If you already have Axure open, select File in the main menu, and then click on New in the drop-down menu to create a new RP document.

  2. While holding down the mouse button, drag the Label widget, and place it on the wireframe at (53,13).
  3. With the Label widget selected, in the Widget Interactions and Notes pane, click on the field below Shape Name, and then type WelcomeText.
  4. In the Page Properties pane, click on the Page Interactions tab and double-click on the OnPageLoad interaction. The page will appear as shown in the following screenshot:

  5. In the Case Editor (OnPageLoad) pop up, in Case description, type DisplayMessage.
  6. In Click to add actions, click on Set Text.
  7. In Organize actions, you will see the interaction description update to Set Text
  8. In Configure actions, under Select the widgets to set text, click in the checkbox next to Label for the Welcome Text (Shape).
  9. In Configure actions under Set text to, set the dropdown to value, and click on the fx button to bring up the Edit Text pop up.
  10. In the Edit Text popup, enter in the text field Welcome. Today is.
  11. Click on the Insert Variable or Function… link to open the drop-down menu; scroll to Date; click on Date to expand the selection; and click on getDayOfWeek(), as shown in the following screenshot:

  12. Click on OK.
  13. 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 then clicking on Generate HTML Files….

How it works…

For this recipe, you used the Label widget, and using the Widget Interactions and Notes pane, you applied a label to the widget. Next in the Page Properties pane, you set a case on the OnPageLoad interaction to Set Variable/Widget value(s). Finally, in the Edit Text popup, you used a built-in variable.

There’s more…

At times you may find that your Label widget is not displaying the built-in variable. One possible cause is that the length of the Label widget is not long enough to display all of the characters.

For a list of variables available in Axure 7, visit http://www.axure.com/forum/tips-tricks-examples/8030-v7-variables-list.html

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

© Packt Publishing Ltd