In this article by John Henry Krahenbuhl, author of the book, Learning Axure RP Interactive Prototypes, we will cover the following topics:

• Logo and links
• Global navigation
• Shopping cart
• Search

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

Logo and links

To create our logo element, we will drag the Placeholder widget onto the Home page in the design area. We will then enable an OnClick interaction that will cause the Home page to open in the current window when the Placeholder widget is clicked.

To create the logo element, perform the following steps:

1. With the Home page opened in the design area, in the Widgets pane, click on the Placeholder widget. While holding down the mouse button, drag the Placeholder widget and place it at coordinates (10,20).
2. With the Placeholder widget selected, type Logo. We will see Logo in the center of the Placeholder widget, like so:
   
3. Next, we will name the Placeholder widget and add the OnClick interaction. With the Placeholder widget selected, perform the following steps:
   • In the Widget Interactions and Notes pane, click in the Shape Name field and type CompanyLogo.
   • In the Widget Interactions and Notes pane, click on the Interactions tab and then on Create Link…. In the Sitemap modal window, click on the Home page. You will see Case 1 added to the OnClick interaction, as follows:
     
     

     Axure has numerous point updates, and as a result, in the Widgets Interactions and Notes pane, your version may show Shape Name (or a similar label for the name field) instead of Shape Footnote and Name.

4. We will now create three new links in our header using a Dynamic Panel and the Label widget. In the Widgets pane, click on the Dynamic Panel widget. While holding down the mouse button, drag the Dynamic Panel widget and place it at coordinates (570,10). With the Dynamic Panel widget selected, perform the following steps:
   • In the Widget Interactions and Notes pane, click in the Dynamic Panel Name field and type HeaderLinksDP.
   • In the toolbar, change the width w: to 300 and the height h: to 25.
5. In the Widget Manager pane, we will see the following:
   
6. In the Widget Manager pane, double-click on State1 to open it in the design area.
7. With State1 selected, in the Widgets pane, click on the Label widget. While holding down the mouse button, drag the Label widget and place it at coordinates (80,4). With the Label widget selected, perform the following steps:
   1. Type Help. We will see Help displayed as text on the Label widget.
   2. In the Widget Interactions and Notes pane, click in the Shape Name field and type HelpLink.
   3. In the Widget Interactions and Notes pane, click on the Interactions tab and then click on Create Link…. In the Sitemap modal window, click on the Help page.
8. Repeat step 7 twice to create two additional links using the following table for coordinates, text displayed, shape name of the label widgets, and create link:
   

   Coordinates	Text displayed	Shape name	Create link...
   (140,4)	Support	SupportLink	Support
   (220,4)	Sign In	SignInLink	Sign In

9. Slow double-click on State1 and rename it to Links.

   When renaming a dynamic panel state, if the state is currently selected (that is, highlighted in blue), you only need to slow click on the state name to rename the state. If the state is not currently selected, you will need to slow double-click on the state name to rename the state.

We have now created the logo with three additional links. Our header should look like this:

Next, we will add global navigation using the Classic Menu - Horizontal widget.

Global navigation

We will now add global navigation using the Classic Menu – Horizontal widget. Once we have added the Classic Menu – Horizontal widget, our header should look like this:

Open the Home page in the design area. To create the global navigation element, perform the following steps:

1. In the Widgets pane, click on the Classic Menu - Horizontal widget. While holding down the left mouse button, drag the Classic Menu - Horizontal widget and place it at coordinates (240,80).
2. Right-click the first menu item labeled File, and in the flyout menu, click on Add Menu Item After. Your menu should look like this:
   
3. Repeat step 2, adding one more menu item. You should now have a total of five menu items.
4. Click on the first menu item to select it and type Women.
5. With the menu item selected, perform the following steps:
   • In the Widget Interactions and Notes pane, click in the Menu Item Name field and type HzMenuWomen.
   • In the Widget Interactions and Notes pane, click on the Interactions tab and then click on Create Link…. In the Sitemap modal window, click on the Women page.
6. Repeat step 5 to change the menu item displayed and menu item name for menu items 2–5 using the following table:
   

   Menu item displayed	Menu item name	Create link...
   Men	HzMenuMen	Men
   Kids	HzMenuKids	Kids
   Shoes	HzMenuShoes	Shoes
   Accessories	HzMenuAccessories	Accessories Unlock access to the largest independent learning library in Tech for FREE! Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of. Renews at $19.99/month. Cancel anytime START FREE TRIAL

We have now created the global navigation with five menu items. Our header should now look like this:

• Next, we will add a shopping cart element using a Rectangle widget with a Text Field widget.

Shopping cart

We will now add a shopping cart element using a Rectangle widget and a special character for a shopping bag icon. Our shopping cart element will look like this:

To create the Shopping Cart element, perform the following steps:

1. From the Widgets pane, drag the Rectangle widget and place at coordinates (870,80). With the Rectangle widget selected, perform the following steps:
   1. Right-click on the Rectangle widget and click Edit Text. Type Shopping.
   2. In the toolbar, change the width w to 90 and the height h to 30.
   3. In the Widget Interactions and Notes pane, click in the Shape Name field and type ShoppingButton.
   4. In the Widget Properties and Style pane, with the Style tab selected, scroll to Alignment + Padding and change padding by changing the value of R to 15.
2. From the Widgets pane, drag the Image widget and place at coordinates (937,85). With the Image widget selected, perform the following steps:
   1. In the toolbar, change the width w to 20 and the height h to 20.
   2. In the Widget Interactions and Notes pane, click in the Image Name field and type ShoppingBagIcon.
   3. Double-click the image and select the image you would like to use (that is, a shopping bag or shopping cart image).

   For our shopping bag icon, an image of a handbag emoji sized to 20 x 20 pixels was used. The handbag emoji as well as other useful emojis can be found at http://emojipedia.org.

Next, we will add an expandable search text field element using a dynamic panel widget with two states.

Search

One popular design pattern is to use an expandable search text field. To accomplish this, we will use a Dynamic Panel widget labeled SearchDP with two states: Collapsed and Expanded. The Collapsed state is the default state and will contain a Text Field widget. The Text Field widget will respond to the OnMouseEnter interaction and will perform the following actions:

• Move the HeaderLinksDP (Dynamic Panel) in x: -80 pixels.
• Transitioning the Dynamic Panel to the Expanded state, using the slide left animation.
• Set focus on the Text Field widget labeled SearchTextFieldExpanded.

To create the Search text field, Dynamic Panel, and States, perform the following steps:

In the Widgets pane, click on the Dynamic Panel widget. While holding down the mouse button, drag the Dynamic Panel widget and place it at coordinates (790,10). With the Dynamic Panel widget selected, perform the following steps:

• Right-click on the Dynamic Panel widget and click on Order, then click on Send to Back.
• In the Widget Interactions and Notes pane, click in the Dynamic Panel Name field and type ExpandingSearchDP.
• In the toolbar, change the width w: to 170 and the height h: to 25.

In the Widget Manager pane, double-click on State1 to open it in the design area. With State1 selected, perform the following steps:

1. In the Widgets pane, click on the Rectangle widget. While holding down the mouse button, drag the Rectangle widget and place at coordinates (80,0). With the Rectangle widget selected, In the toolbar change the values of w to 90 and h to 24. In the Widget Interactions and Notes pane, click in the Text Field Name field and type SearchRectangleCollapsed.
2. From the Widgets pane, drag the Image widget and place at coordinates (149,2). In the toolbar, change the width w to 20 and the height h to 20. In the Widget Interactions and Notes pane, click in the Image Name field and type SearchIcon. Double-click the image and select the image you would like to use (that is, a left-pointing, magnifying glass image).

   For our search icon, an image of a left-pointing, magnifying glass emoji sized to 20 x 20 pixels was used. This emoji as well as other useful emojis can be found at http://emojipedia.org.

In the Widgets pane, click on the Text Field widget. While holding down the left mouse button, drag the Text Field widget and place at coordinates (80,0). With the text field widget selected, perform the following steps:

1. In the Widget Interactions and Notes pane, click in the Text Field Name field and type SearchTextFieldCollapsed.
2. In the toolbar, change the value of w to 65 and h to 24.
3. Right-click on the Text Field widget and click on Hide Border.
4. In the Widget Properties and Style pane, with the Style tab selected, scroll to Borders, Lines, + Fills. Click on the down arrow next to the paint bucket icon. In the drop-down menu, click on the box with the red diagonal line to indicate no fill. The fill drop-down menu with no fill selected looks like this:

   

   1. Right-click on State1 and click Duplicate State.
   2. Slow click on State1 and rename it to Collapsed.
   3. Slow double-click on State2 and rename it to Expanded.

In the Widget Manager pane, double-click on Expanded to open it in the design area. With Expanded selected, perform the following steps:

• Click on the rectangle widget labeled SearchRectangleCollapsed to select it and perform the following steps:

  The SearchRectangleCollapsed widget is at coordinates (80,0) and is directly beneath the SearchTextFieldCollapsed widget at coordinates (80,0). Slow-double-click on the design area near coordinates (90,10) to select the SearchRectangleCollapsed widget. Once selected in the Widget Interactions and Notes pane, in the Shape Name field, you will see the name SearchRectangleCollapsed.

  1. In the Widget Interactions and Notes pane, click in the Shape Name field and rename the widget SearchRectangleExpanded.
  2. In the toolbar, change x to 0 and w to 170.
• Click on the text field widget labeled SearchTextFieldCollapsed at coordinates (80,0) to select it and perform the following steps:
  1. In the Widget Interactions and Notes pane, click in the Text Field Name field and rename the widget SearchTextFieldExpanded.
  2. In the toolbar, change x to 0 and w to 145.

With the search text field dynamic panel created, we are now ready to define the interactions that will cause the search text field element to expand and collapse. To create this effect, perform the steps given in the following sections:

1. In the Widget Manager pane, double-click on the Collapsed state to open it in the design area. In the design area, click on the text field widget named SearchTextFieldCollapsed at coordinates (80,0). With the text field widget selected in the Widget Interactions and Notes pane, click on the Interactions tab, then on More Events, and, finally, click on OnMouseEnter. A Case Editor dialog box will open. In the Case Editor dialog box, perform the steps given in the following section.

   Create the first action:

   1. Under Click to add actions, scroll to the Dynamic Panels drop-down menu and click on Set Panel State.
   2. Under Configure actions, click on the checkbox next to Set ExpandingSearchDP state.
   3. Change Select the State to Expanded.
   4. Change Animate In to slide left t: 250 ms.

   Create the second action:

   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Move.
   2. Under Configure actions, click on the checkbox next to HeaderLinksDP.
   3. Change Move by x to -80.

   Create the third action:

   1. Under Click to add actions, scroll to the Miscellaneous drop-down menu and click on Wait.
   2. Under Configure actions, change Wait time: to 350 ms.

   Create the fourth action:

   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Bring to Front/Back.
   2. Under Configure actions, click on the checkbox next to SearchTextFieldExpanded.
   3. Next to Order, click on the radio button next to Bring to Front.

   Create the fifth action:

   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Focus.
   2. Under Configure actions, click on the checkbox next to SearchTextFieldExpanded.
   3. Click on OK.

   In the Widget Interactions and Notes pane, click on the Interactions tab and then click on Case 1. In the main menu, click on Edit and then click on Copy.

   In the design area, click on the rectangle widget named SearchRectangleCollapsed at coordinates (80,0) to select it. Recall that we must slow-double-click near coordinates (90,10) to select the SearchRectangleCollapsed since it is beneath the SearchTextFieldCollapsed widget. With the rectangle widget selected in the Widget Interactions and Notes pane, click on the Interactions tab, then click on More Events, and next to OnMouseEnter, click on the Paste button. The OnMouseEnter event with Case 1 will be shown as follows:

   

2. In the Widget Manager pane, double-click on the Expanded state to open it in the design area. Click on the text field widget named SearchTextFieldExpanded near coordinates (0,0) to select it. With the text field widget selected in the Widget Interactions and Notes pane, click on the Interactions tab, then on More Events, and, finally, click on OnLostFocus. A Case Editor dialog box will open. In the Case Editor dialog box, perform the following steps:

   Create the condition. Click the Add Condition button. In the Condition Builder dialog box, in the outlined condition box perform the following steps:

   1. In the first dropdown, select cursor.
   2. In the second dropdown, select is not over.
   3. In the third dropdown, select area of widget.
   4. In the fourth text box dropdown, select SearchRectangle.
   5. Click OK.

   Create the first action:

   1. Under Click to add actions, scroll to the Dynamic Panels drop-down menu and click on Set Panel State.
   2. Under Configure actions, click on the checkbox next to Set ExpandingSearchDP state.
   3. Change Select the State to Collapsed.
   4. Change Animate In to slide right t: 200 ms.

   Create the second action:

   1. Under Click to add actions, scroll to the Miscellaneous drop-down menu and click on Wait.
   2. Under Configure actions, change Wait time: to 150 ms.

   Create the third action:

   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Move.
   2. Under Configure actions, click on the checkbox next to HeaderLinksDP.
   3. Change Move by x: to 80.

   Create the fourth action:

   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Set Text.
   2. Under Configure actions, click on the checkbox next to SearchTextFieldExpanded.
   3. Under Set text to, click on the first dropdown and select text on widget. Click on the second dropdown and select SearchTextFieldExpanded. Your case editor will look like this:

      

   Create the fifth action:

   1. Under Click to add actions, scroll to the Widgets drop-down menu and click on Bring to Front/Back.
   2. Under Configure actions, click on the checkbox next to HeaderLinksDP.
   3. Next to Order, click on the radio button next to Bring to Front.
   4. Click on OK.

   In the design area, click on the text field widget named SearchTextFieldExpanded to select it. Perform the following steps:

   1. Right-click on the SearchTextFieldExpanded widget and click on Assign Submit Button.
   2. In the Assign Submit Button dialog box, click on the checkbox next to SearchRectangleExpanded.
   3. Click on OK.
   4. In the design area, select the rectangle widget named SearchRectangleExpanded by slow-double-clicking near coordinates (10,10). With the Rectangle widget selected, go to the Widget Interactions and Notes pane, click on the Interactions tab, and click on Create Link…. In the Sitemap modal window, click on the Search page.

   We have now created an expandable search text field widget that retains the text typed into the widget when the dynamic panel changes states. With the design completed for our header, we need to convert these widgets into a header master that can be leveraged on each page of our design.

   To create a header master, open the Home page in the design area then navigate to Edit | Select All in the main menu. Right-click on any widget in the design area and click on Convert to Master. In the Convert to Master dialog box, type Header. For Drop Behavior, click on the radio button next to Lock to Master Location. Click on the Continue button. You will now see the header master appear in the Masters pane. With our header Master completed, next we will design an interactive carousel.

Summary

In this article, we focused on creating the home page. A home page should be intuitive; it should capture one's attention and encourage further engagement with the site. For the home page, we used the easily recognizable elements found on popular e-commerce sites. We created logo, links to navigate to different pages, and shopping cart. we also learned how to create an expanding search bar.

Resources for Article:

Further resources on this subject:

• Common design patterns and how to prototype them [Article]
• Axure RP 6 Prototyping Essentials: Advanced Interactions [Article]
• Viewing on Mobile Devices [Article]