Design & Think
Ashley Karr | UX Principal

Axure

Prototyping with Axure (Actually with Axure)

WORKSHOP FILES

  1. Outline
  2. Brief
  3. Part_1_Start.rp
  4. Part_2_Start.rp 
  5. Part_3_Start.rp 
  6. Part_3_End.rp

OUTLINE

PART 0 - GETTING STARTED

  1. Download the workshop files.

  2. View final prototype.

  3. Introductions

    1. Axure Learn

    2. GA Courses

    3. Ashley’s GA Instructor Page

    4. DesignThinking.Boutique

  4. Walk through of brief.

PART 1 - Sign In Flow

  1. Open Part_1_Start.rp

  2. Interface walk through, including:

    1. all panes

    2. Widget Style Editor

    3. Preview vs. Axshare

    4. Arrange > Grids and Guides

  3. Create Sign In flow

    1. Bring in H1, H2, Text Fields, Button and Name fields and button

    2. Use Format Painter on Button

    3. Use Properties Panel to Edit and Set Up Text Fields

    4. Add Case 1 on Sign In Button for username and password

    5. Create Error message dynamic panel and hide it

    6. Add Case 2 on Sign In Button to show error message

PART 2 - MASTER

  1. Open Part_2_Start.rp

  2. Create a master for the signed in state header

    1. Copy the pre sign in header

    2. Paste it onto the dashboard page

    3. Add H2s for the global navigation with interaction styles

    4. Create links for the Settings page and Sign Out page

  3. Add the master to the dashboard and settings pages

PART 3 - ADDRESS CHANGE FLOW

  1. Open Part_3_Start.rp

  2. On the Settings page, add a text area for the “Address” field and name it “ReadOnlyAddressArea”

  3. Style it by hiding the border

  4. Make it “Read Only”

  5. Enter Aileen’s old Address into this field

  6. Turn this field into a dynamic panel and name it “AddressArea”

  7. Create a second state for this dynamic panel and name it “EditableAddressArea”

  8. Make the EditableAddressArea editable and leave Aileen’s old address in it

  9. From the Settings page, create a Save button with a cancel text link below it to the right of the text area.

  10. Name it “SaveAndCancelButtons” and turn it into a hidden dynamic panel called “SaveAddress”

  11. Create a second state in the SaveAddress dynamic panel that says SAVED!

  12. Create the following event: when ReadOnlyAddressArea is clicked, EditableAddressArea and SaveAndCancelButtons are displayed

  13. Inside of the SaveAndCancelButton state, if the SaveButton is clicked, the SAVED! button appears momentarily and text from the EditableAddressArea is passed to the ReadOnlyAddressArea.

  14. If the CancelButton is clicked, then no text from the EditableAddressArea is passed to the ReadOnlyAdressArea, and the ReadOnlyAddressArea is displayed.

  15. For the final .rp file, download Part_3_End.rp.

  16. You can also view the final prototype on AxShare.