Assignment 1 Wireframing
Installation, Set-up and wireframing with Axure RP
AS.430.619 Advanced Web Development
This assignment will guide you through the installation and set-up of Axure RP, which
we will be using to wireframe applicatons, and accessing ArcGIS Online. We will then
create a simple application wireframe.
Step 1: Download and Install Axure RP
⦁ Download Free Trial of Axure RP from the Axure Website:
[Link]
There is the option to apply for a free student license from Axure on the website’s
purchase tab. It can take a few days for the application to process, but we will not be
using the software past the first two weeks, so the free trial should be enough.
⦁ Install Axure RP in the Setup Wizard, following the prompts until the wizard has
completed the install.
Step 2: Set-up New File in Axure RP
⦁ Open Axure RP, which will immediately launch after install or navigate to the
Axure RP icon in the windows start menu
⦁ In the welcome screen, select New File
Q1. Create a screenshot showing that you have Axure RP installed and opened to a
blank, new file and paste image into word document for submittal.
Watch the ‘Getting Started with Axure RP’ video on the support page
[Link]
Step 3: Access the ArcGIS Online for Organizations
We will be hosting any layer accessed by web applications on the ArcGIS Online
account, so it is important every student confirms they have access to the account.
1
Access ArcGIS Online by following the link on the GIS and Maps home page
[Link]
Navigate to [Link]
Q2. Create a screenshot showing that you are a member and have publishing rights. If
you do not have publishing rights, please contact the staff at GIS & Data Service. Paste
screenshot into word document for submittal.
Step 4: Designing a very simple wireframe
In this step, we will create a simple, one page wireframe for a search engine.
⦁ Open Axure RP and create a new file
⦁ In the Libraries window, drag a new Text Field element to the center of the page
⦁ In the Inspector window, under properties, replace (Text Field Name) with
‘searchText’. This is giving our text box element a name
⦁ Now drag a Button element to the bottom right of the Text Field element.
⦁ In the Inspector Window, name the element ‘submitButton’
⦁ Double click on the element and change the text value to ‘Search’
⦁ Drag a Heading 1 element to the center top of the Text Field element and name
the element ‘searchHeading’
⦁ Double click on the Heading 1 element and give it a title of your choosing.
⦁ Re-center the Heading 1 element above the Text Field element if necessary
Your home page should now look something like this:
2
To view the document in a web browser, select ‘preview’ from the menu located on the
top right
Alternatively, you can press F5 to preview your application wireframe
Q3. Create a screenshot of your application wireframe previewed in the browser of your
choosing.
Tip: You can change the default browser for previewing by changing the preview
settings, located in the Publish Menu
Save the file and close Axure RP
Step 5: Designing a wireframe for the course mapping
application
In this step, we will design a basic wireframe for a city web application
⦁ If closed, open Axure RP and create a new file called
‘CityApplication_Wireframe’.
3
⦁ In the Pages window, rename the Home page and page 1 to the following:
Our final applications will contain a splash screen, which provides the user with general
information and/or disclaimers, and the mapping application. We are going to create a
wireframe that would provide examples of what the splash screen and mapping
applications will look like. It’s important to note that wireframes are a general idea and
our applications can and probably will deviate somewhat.
⦁ Select the Box 3 element and drag it onto the SplashScreen page. Center the box in
the middle of the page (you can preview the page in a browser to help find the center of
your screen). It does not need to be perfectly centered, just get it as close as you can.
⦁ Name the box element ‘splashScreen’
⦁ Drag an image to the top of the box element and center it. It should look
something like this:
4
⦁ Rename the image element to ‘cityLogo’
⦁ Double click on the Image element and change to an image that represents your
city.
⦁ Drag a Heading 1 element below the image and center it. Rename the element
‘welcomeHeading’
⦁ Change the text to a welcome message
⦁ Drag a Paragraph element below the welcome message and size it to the width
of the welcome message and height of 150. Rename the element
‘disclaimerText’
Tip: You can change the size and location properties in the Style tap in the element
inspector window.
⦁ Finally, drag a Button element below the Paragraph element and center it.
Rename the element ‘acceptButton’ and change the text to something similar to
“Accept” or “Go to Map”.
Your final splash screen should look similar to this at this point:
5
Experiment with the styling tools and placement of the elements to make the splash
screen unique to your application. Remember, the point of the exercise is to get you
thinking about what you want your final application to look like and visualize it with the
software.
Q4. Create a screenshot of your splash screen previewed in your broswer
We’re going to now wire the Button element to direct the user to the mapping
application when it is clicked.
⦁ In Axure, select the accept button and navigate to the properties in the Inspector
window
⦁ Highlight OnClick, right click and select ‘Add Case’
⦁ In the Case Name text box, give the case a sensible name. I chose ‘goToMap’
6
⦁ In the Links menu in the add actions window, select ‘Open Link’
⦁ Select MapAppHome and hit ‘OK’
Now, if you preview the splash screen, the accept button will open the mapAppHome
page. Of course, there is nothing in this screen yet, so you will just see a white page.
There should be a blue ‘1’ around the outline of the button and the case should be
visible in the inspector window. If they are not present in your page, redo the steps to
ensure the case was set.
7
We are now ready to wireframe our mapping application!
⦁ Open the MapAppHome page and add a box to the right side of the screen, a
small box to the top of the screen and an image to the center. Also, add a
heading element representing the title in a text box to the top of the screen.
Alternatively, you could add an image as the title of your map application. Get
Creative!
⦁ Rename all of these elements to appropriate names and change the styling to
suit your personal tastes.
⦁ Find a map image of your chosen city and replace the image element with the
city image.
The application should look something like this:
8
Let’s add a toggle button to allow the user to change the basemap.
⦁ Grab an aerial image of your city (Google/Bing Maps/ArcGIS Online/ArcGIS Desktop are
some examples).
⦁ Copy and paste the image Element to create a duplicate. Double click and change this to
your aerial image.
⦁ In the inspector panel, rename the element name and check the ‘hidden’ box in the
style tab.
⦁ Add a button element to a corner on your map, name the element ‘toggleBasemap’ and
change the text to ‘Aerial Imagery’
⦁ In the Properties tab, click ‘add a case’ to access the Case Editor
⦁ Select ‘Case 1’ and under Widgets, select ‘Show/Hide’ and check the box next to your
street basemap image. In the Visibility option, choose ‘Hide’
9
⦁ Repeat this for the Aerial Basemap, but choose ‘Show’
The Case Editor should look like this:
⦁ Hit ‘Ok’ and preview the page. When you click the Aerial Imagery button, the street
map should be hidden and the aerial map should show.
⦁ Repeat the steps to create a second case that does the opposite
10
Now when you preview the page, you can choose between the two options, which will
represent the ability to toggle the basemaps. It will work a bit different in the code, but the
point is to represent the action and get you thinking about how onClick events work.
Let’s also add an action to each case that changes the text in the button when toggled.
⦁ Double click on Case 1 and select ‘Set Text’.
⦁ Select the widget that represents the button and set the text to “Street Basemap”
⦁ Repeat this for Case 2, but replace the text with “Aerial Basemap” (It should be by
default).
Q5. Create a snapshot of each case, one with the street basemap image and the button with
“Aerial Basemap” text and one with the aerial basemap image and “Street Basemap” in text.
Q6. Add an element that represents a print widget in the right panel. Provide a screenshot
Q7. Add an element that represents an address search bar. Provide a screenshot
Add 1 more action element or your choosing to your application
Q8. Provide screenshots of your application with the added action.
Submit the word document on Blackboard with a naming convention similar to
LASTNAME_Assignment1
11
12