Step by Step Guide on Creating Working Design Prototype for iOS or Android Application

November 6, 2013

In this article, I will show you how to create a working design prototype of an iPhone application using Axure RP 6.5. At the end of the lesson, you will create a beautiful design prototype of the shopping list for iPhone, you will be able to open it on your smartphone and navigate between the screens as if it were the real application.

On the video below you can see how the prototype works.

Feel free to check how it works in the browser – ShoppingBag App.

The production of such a complex prototype does not always make sense, but there are some situations when you want to test the way your interactions work on a real device, or want to demonstrate the app to your colleagues or clients. In addition, techniques used in this lesson may be used separately to create more simple prototypes.

In this shopping list for iPhone, the left sidebar menu slides from the left edge of the screen when you press the menu button or swipe on the screen. The content of the screen below the menu bar is blurred. In the sidebar menu there are two active items: fruits and vegetables. By pressing them you proceed to the fruits or vegetables screen.

Create a new project in Axure

You will need Axure RP 6.5 to create a prototype, if you do not have this software, you can download a trial version (works in 30 days). If Axure is already installed on your computer, you can begin.

Open Axure and create a new project.

Principles of working with dynamic panels

A significant problem of interactive HTML prototypes for mobile applications is that if we use separate pages for each screen of application, the user will see the process of each new page loading. It will interrupt the experience and irritate the user. To avoid this in our prototype, we will use only one page that will load the entire prototype at the very beginning.

For our application we will create a dynamic panel, and all of the content for our prototype will be inside of that panel. If you are not familiar with dynamic panels and want to learn more, check out this article:

The dynamic panel is a container that can be filled with any content, including other dynamic panels. To draw an analogy with Photoshop, the dynamic panel is a folder with layers with a rectangular mask applied to it. We can put anything into it and move it all together. The content of the folder will be visible only within the boundaries of the mask.

A dynamic panel in the prototype can move, hide and become visible. It is possible to drag it and it can respond to the swipes. Also, dynamic panels can have many states that, for example, makes it possible to insert a multi-screen interfaces in various states of the panel and change them depending on your actions.

The conclusion: everything in our prototype that has to move (animate), hide or swipe has to be placed into the dynamic panel.

Create the basis of the prototype – dynamic panel

The first object in our project is a dynamic panel (hereinafter – DP), in which we put all the content of the prototype. In order to add it to the prototype:

  1. Drag widgets of dynamic panel to the working space
  2. Set the widget screen size w: 640 h: 1136 (iPhone)
  3. Place it at coordinates x: 0 y: 0
  4. Name it “Screen”

In order to make the prototype fully visible on the screen, reduce the Zoom (Command (Ctrl for Windows) and -).

Graphic files for this design prototype

All graphical files you will need in this tutorial:

  • Fruits Screen.png – screen image of fruits;
  • Vegetables Screen.png – screen image of vegetables;
  • Fruits Screen Blurred.png – blurred picture of screen fruit;
  • Vegetables Screen Blurred.png – blurred picture screen of vegetables;
  • Menu.png – the sidebar menu.

Add Fruits and Vegetables screens to the dynamic panel

Lets place inside our DP another dynamic panel and name it Content. The state of this panel we will change when switching the between fruits and vegetables.

  1. Click twice on the DP Screen to get inside of it
  2. Drag the widget of dynamic panel to the prototype
  3. Set the iPhone screen size w: 640 h: 1136
  4. Put it in the coordinates x: 0 y: 0
  5. Name it Content

Next we need to create two states of dynamic panel: Fruits and Vegs.

  1. Make sure that the Content DP is selected
  2. Add one more state in the Content DP
  3. Rename the first state in Fruits (to do this, you must click to select it, and then click again and wait a second till it become available for editing)
  4. Rename the second state in Vegs

Now lets add our designs to the prototype.

  1. Double click on the Fruits in the Content dynamic panel
  2. Drag Image widget from the Widgets panel to the working space
  3. Double click on image
  4. Specify the path to Fruits Screen.png and click Open. When it asks you about optimization – say “No”.  If you apply optimization to the pictures, the size of the prototype will be less, but the quality of the photos will be much worse. When it asks you about autosizing – say “Yes”, it will automatically resize the widget according to the size of the chosen file.
  5. Place the image into the coordinates x: 0 y: 0

Now let’s do the same for the Vegs. Repeat the same procedure: double click on Vegs, drag Image widget to the prototype space and select the file Vegetables Screen.png.

When working on a prototype it is important to give the appropriate names to your widgets, dynamic panels and their states.

Important! When working with dynamic panels in Axure RP remember that you can customize the behavior of the dynamic panel only from the above level. For example, if we want to customize the behavior of the panel Content, we have to be in the panel Screen.

Switch between Fruits and Vegetables on swipe

Now lets bring some life into the prototype. We are going to switch between two Fruits and Vegs screens on swipe.

Although we have not yet started to create the menu, let’s revive our prototype by adding a simple way to switch between the screens. For example, swipe across the screen to switch to Vegetables, and swipe to the right to switch to Fruit.

  1. You have to be up on the level above (i.e. from DP Content to DP Screen). To do this, you can either click on the tab State1 (Home) or on the single state of DP Screen.
  2. Highlight the DP Content by clicking on it in the work area of the prototype, or in the Dynamic Panel Manager.
  3. In the Widget Properties window, you will see all the events that dynamic panel is capable to respond. For now we are interested in OnSwipeLeft and OnSwipeRight.

Let’s start with the left swipe. Double click on the event.

You will see the Case Editor window. In this window we create a list of actions that are executed at the selected event. In our case, we want at left swipe to open the screen with vegetables. In other words, we want the dynamic panel Content changes its state to state Fruits on the OnSwipeLeft event.

  1. Add the action Set Panel state (s) to state (s)
  2. Put a check box next to the dynamic panel, which state needs to be changed (Content)
  3. Enter a state, in which the panel will go on swipe (Fruits)
  4. Select the type of transition animations (for the left swipe Slide Left looks naturally)
  5. The duration of animation leave as it is – 500 milliseconds

Do almost the same for the right swipe.

  1. Double-click the OnSwipeRight
  2. Add the action Set Panel state (s) to state (s)
  3. Put a check box next to the dynamic panel, which state needs to be changed (Content)
  4. Enter a state, in which the panel will go on swipe (Vegs)
  5. Select the type of transition animations (for right swipe Slide Right looks naturally)
  6. The duration of animation leave as it is – 500 milliseconds
  7. Press the OK button

Now we finally can see the prototype in action!

  1. Click the icon prototype (top panel of Axure) or Command+Shift+P for Mac (for Windows: Ctrl + Shift + P)
  2. Select the browser in which you want to open a prototype
  3. Click Generate

The prototype may not fit in the browser window, in this case, just make Zoom Out in the browser.

Swipe and you will see that the screens replace each other with the left or right slide animation.

Add left side Menu

It’s time to add the menu. To do this we need to add a new dynamic panel with the name Menu. We will put the image of the sidebar in it.

You can add a new panel in the same way we added it earlier or try new approach that is faster.

  1. Make sure that you are in the Screen DP (inside tab State1 (Home)). If not, then double click on a Screen DP or click on the tab of the State 1 (Home).
  2. Add the widget Image to the prototype
  3. Double click on the widget Image
  4. Specify the path to the file Menu.png (do not forget to skip the optimisation of images and agree to autosize)

Now we have a picture of the menu and we can easily make the dynamic panel out of it.

  1. Make a right click on Image, then Convert to Dynamic panel and name it Menu
  2. Rename the single state in the Menu (in order not to have two tabs State1 (Home) and not to be confused)

As a result of this transformation, we have a dynamic panel, inside of which the image Menu is. The size of the panel match the dimensions of the image.

Now we need to place Menu from the right of the Content panel so when you press the Menu it slide out from the edge of the screen (from outside the DP Screen).

The first thing we need to do is to move Menu beyond the screen – just define the coordinates x: -517 y: 0.

Now you need to add the pressing area to the Menu button so when you click the Menu it will slide out from the edge of the screen.

  1. Make sure that at this moment we are inside the Screen DP (tab State1 (Home)). If not, then double-click on a single DP Screen or click on the tab State1 (Home).
  2. Add a widget Image Map Region. This widget allows you to add interactive area to the prototype, while it remains completely invisible.
  3. Fix its size w: 88 h: 88
  4. Place the menu icons on top
  5. Name it “MenuBtn”

Now lets add the action on MenuBtn.

  1. Select the MenuBtn
  2. Open the Case Editor for the event OnCLick
  3. Add the action Move Panel (s)
  4. Check panel Menu
  5. Put offset distance via X axe to 517 pixels
  6. Choose the type of animation for movement (I choose ease out cubic).
  7. The duration of animation leave as it is – 500 milliseconds
  8. Press the OK button

Let’s run the prototype and then click on the Menu icon.

If everything was done correctly, then at pressing Menu button screen with menu would slide from the left edge of the screen.

You may noticed that after the appearance of the sidebar, you still can click on the menu button. It happened because MenuBtn was added later than DP Menu, and therefore it is above it. To place MenuBtn under Menu DP, select MenuBtn and press Command+[ for Mac (Ctrl+[ for Windows). Visually nothing change, but the layer with the menu button will be on a level below the DP menu .

Now we need to make menu disappear when we swipe on it to the left.

  1. Select the Menu DP
  2. Open Case Editor for swipe left onSwipeLeft
  3. Add the action Move Panels (s)
  4. Check Menu
  5. Specify the offset of -517 pixels (we move the menu on the same number of pixels as during the opening, but in the opposite direction. That is why we point  517 pixels with a minus) .
  6. Choose the type of animation (I choose ease out cubic)
  7. Keep the animation time 500 milliseconds.
  8. Click OK

Run the prototype. If everything is done correctly, then at pressing the menu button, we will see how Menu slides from left, and when swipe left on it – goes back.

Blur background under the Menu screen

Now let’s “blur” the background under the menu when it appears. We will do it by placing blurred images of Fruit and Vegetable over un-blurred screens.

To do this, we need to create the DP, which will appear and disappear at the same time as the menu. The states of Fruits and Vegs should be in there. We will change them depending on the selected menu item.

We already have a very similar DP – Content. It also has two states and it has appropriate size. Let’s just copy it and change a little bit.

  1. Select the Content DP
  2. Press Command + C (for Windows: Ctrl + C)
  3. Press Command + V ( for Windows: Ctrl + V)
  4. Move the panel to the coordinates x:0 y:0
  5. Rename it to Blur
  6. Change the order of the DP moving Blur DP under the Menu. This must be done because all the objects that are inserted from the clipboard automatically are placed above all others. In our case, this would cause that Blur DP would appear over the Menu, thereby closing it. Also keep in mind that Dynamic Panel Manager shows the order of dynamic panels in the reverse order – the lowest DP will actually be above all others
  7. As we want a Blur DP to be initially invisible, we need to hide it via the context menu

Now we need to replace un-blurred images to the blurred ones.

To do this, simply go into the state of Fruits or Vegs of the DP Blur and in the widget Image select a files FruitsScreenBlurred.png or VegetablesScreenBlurred.png respectively.

Now you need to make DP Blur appears when you click on MenuBtn:

  1. Select MenuBtn
  2. Open the Case Editor for the OnClick event
  3. Add the action Show Panel (s)
  4. Check Blur
  5. Specify the type of animation – Fade
  6. Leave the animation time as it is – 500 milliseconds
  7. Click the OK button

Now, let’s make the DP Blur disappear when Menu is hided.

  1. Make sure that you are inside the DP Screen (tab State1 (Home)). If not, then double click on a single state Screen DP or click on the tab of the State 1 (Home).
  2. Highlight Menu DP
  3. Open the Case Editor for OnSwipeLeft
  4. Add the action Hide Panel(s)
  5. Check DP Blur
  6. Specify the type of animation – Fade
  7. The animation time leave as it is – 500 milliseconds
  8. Click the OK button

Let’s see now how your prototype works – generate and check it in your browser.

Add navigation to Menu

Now our menu able to appear and disappear. Let’s make menu items Fruits and Vegetables interactive too.

In fact we need, so that when you click on the menu item in Fruits and Vegetables happens the same as when you close the menu by swipe at DP Menu, but Content and Blur DP should change their states depending on the selected menu item (yes, now we need both states, Fruites and Vegs, of these dynamic panels).

First of all we need to create a touch area on the place of each menu items:

  1. Go inside a single state DP Menu
  2. Add Image Map Region, align and stretch it in such way that it is over the menu item Fruites and completely covers it. Name it FruitsBtn
  3. Copy and paste the FruitsBtn, place copy over the menu item Vegetables and name it VegsBtn

Actions to be carried out by pressing the button FruitsBtn are very similar to those that are executed during the left swipe on the menu. So we will just copy them.

In order to copy, we need to be inside the Screen DP (double click on its single state).

Now FruitsBtn will close the menu. Additionally we need it to change the app active section. To do that you need to change the state of Content and Blur DP.

  1. Select the FruitBtn
  2. Open the Case Editor for OnClick. Add the action Set Panel state (s) to State (s)
  3. Check Content DP
  4. Specify the condition to which we want to change: Fruits
  5. Check Blur DP
  6. The condition on which we want to change: Fruits
  7. Press the OK button

Now copy all of that actions to the button VegsBtn. This time but choose a state for the Content and Blur not Fruits, but Vegs.

Run you prototype.

Show menu by swipe

Now let’s show menu when user swipes from the left edge of the screen.

  1. Go inside the DP Screen and add another Image Map Region
  2. Place it on the left side of the screen
  3. Stretch it so that its lower part touches the bottom of the screen and its upper part touches the Navigation bar. Width should be 60 pixels.
  4. Convert it into a dynamic panel (we want to swipe it, and only dynamic panels are able to respond to this gesture) and name SideArea

Now copy the set of actions that we have created for OnClick MenuBtn button and paste it to OnSwipeRight of DP SideArea.

We are almost there! There are only a couple of small things left.

Close menu on outside tap

Let’s close the menu when user tap on the blurred image from the right of the sidebar.

To do this, copy a set of actions from the event OnSwipeLeft dynamic panel Menu and paste to the blurred images in both states of the dynamic panel Blur.

Finally, remove the set of actions for OnSwipeLeft and OnSwipeRight dynamic panels Blur and Content (in fact it was a temporary way to navigate between screens).

Run the final prototype! Now it can do everything that we planned!

Configure prototype to run it on iPhone

Finally we need to tweak a few settings so your prototype looks gorgeous on  iPhone.

  1. Go to menu Generate – Prototype
  2. Specify the place where we want to save the HTML files of the prototype
  3. Go to section Mobile / Devices
  4. Check Include Viewport Tag
  5. Change the Initial Scale 0.5
  6. Check Hide address bar
  7. Check Prevent vertical page Scrolling
  8. And change the value of iOS Status Bar at the black-tranclucent
  9. Push Generate button

Now please take that HTML files and upload them on the server to be able to open prototype as a web-site.

If you do not have your own server, but you use Dropbox, you can use the service Site44. It allows you to create a web-site from a folder in your Dropbox.

Run your design prototype!

If everything is ready, open your prototype on iPhone in Safari, save it on your Home screen and run. The design prototype of this small ShoppingList app will work similar to the real application on your iPhone.

Feel free to check how my prototype works in the browser – My ShoppingBag App.

I am happy that you read this article to the very end and I hope that now you enjoy your own interactive design prototype! 🙂

P.S. If you suddenly notice that your prototype is a bit fuzzy on the iPhone, reduce the width of the DP Screen per one pixel (i.e. 639) and the fuzziness disappears.