Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Mobile Prototyping With Proto.io

There are many options available for prototyping mobile user experiences, but if you need to prototype native apps for mobile devices you should take a look at Proto.io1 when evaluating potential choices. This solution has many features for designing and prototyping mobile apps, including built-in component libraries for specific devices, great support for gestures and transitions, and an app that allows for easy viewing on actual hardware.

But the first thing to know is that unlike most prototyping tools, Proto.io is a web application, so you’ll need an internet connection to do your work. This is a drawback compared to other options likes Axure RP2, Blueprint3, Justinmind4, or iRise5. It can have an impact if you plan to work somewhere where Wi-Fi connections don’t always live up to their promise, like on a flight, in an airport, or in a hotel.

But assuming you’ll have access when you need it, Proto.io offers a lot for mobile designers to love, built right into the app.

The Pros Link

  • Built-in widget libraries for iOS 7 and 8, Android 4 (KitKat), and Windows 8 devices. It’s nice to not have to load third-party libraries to get started, although you can add your own assets to your library if Proto.io doesn’t have the control you need. You can also create prototypes for 280×280px Android Wear devices or at custom screen sizes for web apps. Justinmind also has an excellent set of widget libraries available as separate downloads.
  • Player app for iOS and Android. This allows you to access a prototype you have published just by opening the app without having to access the URL as you have to with AxShare6, the free cloud-based hosting service from Axure. You can, however, open Axure prototypes in fullscreen mode from your desktop on iOS devices if you’ve already added them to your home screen.
  • Support for Windows 8 prototypes (although it lacks a Windows player app, so you have to access a URL). Windows 8 use is growing, but it is not supported by every prototyping tool. Justinmind also has built-in support for Windows 8 devices.
  • Support for many mobile gestures and transitions (more on that below). Justinmind also has great support for a variety of mobile gestures and transitions.
  • Variables that can be stored and used to alter the display of content based on conditions and user interactions. This is a characteristic shared by Axure, Justinmind, and iRise.
  • Starter projects for common interface models like sliding menus and tabbed apps. This can be a real time-saver if you know you’ll use these in your prototype. Axure also make sample projects available through the Axure forums7.

The Cons Link

  • No way to create functional specifications. Although there is support for comments and conversations in Proto.io, you cannot generate detailed requirements documents like you can with Justinmind, Axure, or iRise. If this is a necessary feature in your workflow, it’s a serious drawback.
  • Limited version control. If robust version management on a page or screen level is something you need for your team, Axure, Justinmind, or iRise are better suited for that. Proto.io does back up each saved version of the entire project, but not at a page or screen level like the Team Projects feature in Axure. The lack of page-level versioning can be a serious problem in settings where several designers are working on large prototypes with lots of pages.
  • It’s a web app. Being web-based means internal network conditions or internet latency can affect your work. In some highly controlled corporate or government workplaces, you may not be able to reach the Proto.io site, and may have to work with your security team to get access.

Creating A Simple Email Prototype Link

Now I’ll walk you through the steps to create a very simple email prototype targeted for the iPhone 6 using Proto.io’s library of iOS 7 and iOS 8 components. Creating a prototype in Proto.io is drop-dead simple. Once you create your account8 (free for the first 15 days before you have to choose a paid plan) you can set up your initial project with just a few clicks.

On the new project screen you just have to name your prototype and select the device you want to target, in this case an iPhone 6.9
On the new project screen you just have to name your prototype and select the device you want to target, in this case an iPhone 6. (View large version10)

Once you create a project, it’s time to start adding some screens. In the Screens panel, you’ll find a list of the screens in your prototype. To change the names of screens (which you definitely want to do), their orientation, or their background color, select Properties from the right side of the panel.

The Screens menu with our initial screen listed. The icon to the left of the screen name shows the current orientation of the screen.11
The Screens menu with our initial screen listed. The icon to the left of the screen name shows the current orientation of the screen. (View large version12)

In the Edit screen properties dialog you can rename the screen. For my prototype I’ll leave it with the default portrait orientation.

The Edit screen properties dialog.13
The Edit screen properties dialog. (View large version14)

You can also change the background color from the Edit screen properties dialog by selecting a color or adding your own HTML hex code.

The screen background color selector.15
The screen background color selector. (View large version16)

If you want to add a background image instead of using a color, you can use the image component to upload one to your project library. You should make sure the image is sized correctly for the device you’ll be displaying it on.

Now that I’ve set up the first screen, it’s time to start adding some components to it.

The UI Components Library Link

Use the components library on the right-hand side of the workspace to add UI elements to a prototype. You can choose from a list of mobile UI and other libraries to get the components that match your needs. The available libraries also include icons and common ad banner sizes if those are part of your design. You can also upload your own images to a project gallery.

Once you add components to your prototype, they will appear in the Item browser on the left side of the workspace.

The Proto.io editor with iOS 7 and iOS 8 components selected.17
The Proto.io editor with iOS 7 and iOS 8 components selected. (View large version18)

The first component I’ll add to the prototype is the iOS status bar, one of the many components in the iOS 7 library. The status bar has a default appearance of a black background with white text, but that can be changed in the editor’s Properties pane. The Properties pane is the floating panel that appears whenever you select an component, and is where you manage settings for size and position, interactions, and other properties of a component.

The status bar has been added from the widget library. Using the Properties tab for the component you can change the status bar to have a white background with black text.19
The status bar has been added from the widget library. Using the Properties tab for the component you can change the status bar to have a white background with black text. (View large version20)

The next component I’ll add is a navigation bar with buttons that appear right under the status bar. This control is located in the toolbars section of the iOS 7 library.

The Nav Bar With Buttons component is added to the prototype. You can change the default labels at the left, center, and right positions as needed for your project.21
The Nav Bar With Buttons component is added to the prototype. You can change the default labels at the left, center, and right positions as needed for your project. (View large version22)

Now I’ll add a toolbar to the bottom of the screen for the update messages for the inbox. To do this I’ll add a toolbar component, a text label, and set the correct icon to compose new messages.

After dragging the toolbar to the canvas, position it at the bottom of the screen. I’ll have to change the default icons and add a text label next.

The toolbar component’s default appearance.23
The toolbar component’s default appearance. (View large version24)

Now I’ll have to remove the first four buttons and change the fifth to the iOS compose message icon. To remove an icon, you click on it and then click the X icon in the Properties tab. When you remove a button icon from a toolbar, a reference to the button remains in the component. But because it has no icon or interactions associated it, it is effectively empty space.

The toolbar with the first button selected. The Properties tab is used to remove or change icons.25
The toolbar with the first button selected. The Properties tab is used to remove or change icons. (View large version26)

To change an icon, you select the button to expose the Properties tab. To change the pencil icon to the compose messages icon I’ll have to either filter the icon gallery to UI components and scroll through the icons, or search the entire gallery using the word “edit”.

Changing a toolbar icon in the editor.27
Changing a toolbar icon in the editor. (View large version28)

Now I just need to add a text label to complete the default state of the inbox toolbar. Later I’ll add two states for when the inbox is being updated.

The inbox toolbar's default state.29
The inbox toolbar’s default state. (View large version30)

Before I add any other components, let’s take a look at the Item browser. The Item browser is the area of the editor that lists all the widgets on a screen. You can drag items up and down in the list to organize them, but be aware that items closer to the top of the list are stacked on top of the items beneath them. In the toolbar I created I want the label component to be placed above the toolbar. As you drop components on top of others on the canvas, Proto.io organizes them in the correct order in the Item browser.

The Item browser with a set of components.31
The Item browser with a set of components. (View large version32)

Now I just need to create an email list and the default view of the inbox will be complete. To create the email list I’ll use a container so I can make it scrollable within my prototype when it’s viewed on a device. Containers in Proto.io can be used to create scrollable areas of the screen or carousels.

The New Container dialog is where you name the container and set its size. In this example it is the full width of the iPhone 6 but is longer so it can hold scrollable content that is initially off the screen.33
The New Container dialog is where you name the container and set its size. In this example it is the full width of the iPhone 6 but is longer so it can hold scrollable content that is initially off the screen. (View large version34)

To create my email list I will use a set of text components. I also want to add some interactivity to the prototype by linking the email item in the list to an email message screen. To do that I’ll add a new screen called Email Message.

Using the New screen dialog I’ll name the page, leave its orientation as portrait, and set the background color to white.35
Using the New screen dialog I’ll name the page, leave its orientation as portrait, and set the background color to white. (View large version36)

Now that I have a page to link to, I’ll build my email list item and will link the name of the sender to the Email Message screen.

The Properties pane’s Interactions tab is where you build interactivity into a prototype.37
The Properties pane’s Interactions tab is where you build interactivity into a prototype. (View large version38)

I will title my interaction “Link to Email Message” so it’s easier to remember what it does. I’ll also set the trigger to be a simple tap.

Setting a trigger for the interaction using one of the many mobile triggers built into Proto.io.39
Setting a trigger for the interaction using one of the many mobile triggers built into Proto.io. (View large version40)

Once I set the title and trigger for an interaction, I just need to finish the interaction by selecting the screen I want to display, the transition to use, and its duration. Once this is complete my screens are connected.

The details of the interaction are now complete.41
The details of the interaction are now complete. (View large version42)

After I have created one email entry I will select them all and group them by right-clicking and choosing the Group option from the contextual menu. When items are grouped you’ll see the link icon to the right of them in the Item browser. To make my components easier to work with I will rename them, which you can do by double-clicking on the name in the Item browser or clicking on the name in the Properties pane.

Several text components, a horizontal line, and a chevron icon have been grouped.43
Several text components, a horizontal line, and a chevron icon have been grouped.(View large version44)

I’ll select the grouped email list and just copy and paste until the same components fill the entire container. Now I just need to add the container to my canvas. Containers are added to screens by opening the screen in the canvas and selecting the Add to canvas option from the Containers menu.

The Containers panel is used to add the new container to the inbox screen.45
The Containers panel is used to add the new container to the inbox screen. (View large version46)

Using the Properties pane for the Email List Container I will set options to allow vertical scrolling, enable inertia to have a more realistic behavior when the list is flicked, and to show the vertical scrollbar. I’ve also resized the container to fit between the nav bar and the toolbar, but this has no impact on the content inside the container itself.

The Properties pane for the Email List Container once the container is placed within the inbox screen.47
The Properties pane for the Email List Container once the container is placed within the inbox screen. (View large version48)

Now I need to link the email message screen back to the inbox. To do that, I’ll build a screen with status bar and nav bar with buttons components. For the nav bar component, each section can have its own interactions. For my simple prototype I just want to have the message screen link back to the inbox when the nav bar’s left button is tapped.

Use the Properties pane for the nav bar to add an interaction for the left button.49
Use the Properties pane for the nav bar to add an interaction for the left button. (View large version50)
Complete the trigger, action, transition, and duration for the link back to the inbox.51
Complete the trigger, action, transition, and duration for the link back to the inbox. (View large version52)

Gestures and Transitions Link

Although my prototype uses simple tap gestures, Proto.io supports many gestures and transitions for various mobile platforms. Below are the available gestures, called Triggers in Proto.io.

Gestures supported in Proto.io.
Gestures supported in Proto.io.
Transitions supported in Proto.io.
Transitions supported in Proto.io.

Handling Device Orientation Changes Link

To handle changes in device orientation you have to create a second screen designed for the new width and height of the device. I will do this for the inbox screen by duplicating it and setting its orientation to landscape. I include “Landscape” in the name, even though it is indicated by the icon in the Screens panel, because it’s easier for me to find the correct screen when scanning a long list of names.

Duplicating an existing portrait orientation screen to create a landscape version.53
Duplicating an existing portrait orientation screen to create a landscape version. (View large version54)

Once you have created the landscape version of your screen you need to add an interaction to the portrait version of it that will be triggered when the prototype detects a change in device orientation and causes the landscape version to display.

Creating an action to show a new page when a change in device orientation is detected.55
Creating an action to show a new page when a change in device orientation is detected. (View large version56)

You’ll also have to create a duplicate interaction for the landscape version of the screen for when the user flips their device back to portrait orientation.

One thing to consider is the default orientation of your prototype. In my example, the inbox in portrait mode was the default screen. If your prototype is meant to be viewed in landscape orientation, you can set one of your landscape screens as the start screen for when the application first loads in the Proto.io player app (more on that below).

One disadvantage Proto.io has over a tool like Axure is that changes on a screen for one orientation are not reflected on another screen for a different orientation. This is a feature Axure calls “inheritance” that is part of its Adaptive Views. In Proto.io, both screens have to be changed if the content needs to be updated.

This is an example of where the combination of HTML and CSS is better than both tools because you can code displays that can handle a variety of screen sizes using media queries. However, you have to be a proficient coder to go that route, so it may not be an option.

Managing States Link

The last feature I want to explore in this prototype is using and managing different states for screens and containers. States allow a screen or container to have different views that can be triggered by interactions. This allows for more realistic and robust prototypes.

For my sample project, I want to make two areas of the inbox screen a little more dynamic by using states. Specifically, I want to update the text message at the bottom of the inbox screen twice when checking for mail. I also want to display a spinner graphic in the Email List container when the prototype is checking email and then display another state for the container that includes two new messages. Both of these state transitions will be triggered when a user swipes down on the scrollable email list.

Below are the second and third states created for the Email List container. You can create as many states as you need by click the “+” button to the right of the existing states at the top of the canvas area.

The second state of the Email List container displays a loading graphic that is shown until the container changes to the final state.57
The second state of the Email List container displays a loading graphic that is shown until the container changes to the final state. (View large version58)
The third state shows the Email List container with two new messages displayed.59
The third state shows the Email List container with two new messages displayed. (View large version60)

By using Proto.io’s callback feature I can chain these state changes together. Callback allows you to trigger another action at the end of the current one. In the example below I use a swipe down gesture on the Email List container to trigger five connected state changes. For the inbox label, the prototype will cycle through two states with different messages before returning to the default state. The Email List container will change state to the second one with the spinner before changing to the third state, in which the email box is now refreshed with two new messages. For each of the actions, you set a delay to give your prototype a more realistic pause.

Using callback, five different actions are triggered on two different components with one gesture serving as the trigger. The actions are ordered from top-left to bottom-right in this sequence of dialogs.61
Using callback, five different actions are triggered on two different components with one gesture serving as the trigger. The actions are ordered from top-left to bottom-right in this sequence of dialogs. (View large version62)

With these actions completed, the prototype is ready to test and publish.

Previewing And Publishing Link

Your can preview your prototype in a new web browser tab by clicking the Preview button at the top-right of the editor. When the new tab opens, your prototype will be shown in a container that represents the mobile device you are targeting. This is a quick way to test interactions and check the correct elements of your prototype are visible on the screen without scrolling.

When you publish your prototype it is available for display on real devices that have the free Proto.io player app for iOS or Android. You can also decide when publishing if you want anyone who knows the URL to be able to see the prototype or if you want to restrict viewing to other Proto.io users who are invited by email and must sign in to view your work.

The Publish project dialog with sharing options.63
The Publish project dialog with sharing options. (View large version64)

Online Training Link

Because this article looked at a simple prototype using some basic features, you should explore Proto.io’s wide selection of videos, documentation, forums, and webinars to learn more. See the section with further resources below for links to training materials and demonstrations of popular apps like Instagram and Swarm that have been prototyped in Proto.io.

Conclusion Link

Proto.io is powerful solution for prototyping native and web apps for use on a variety of devices. The learning curve is a bit steeper than with Axure, the tool with which I’m most familiar, but it can be mastered with a little time and practice. Proto.io’s real strength is its built-in support for many device types and native app libraries, and its support for gestures and transitions. If you are prototyping Android, Windows, or iOS native apps, Proto.io is a good option. But it may not be right for you if you need a tool that supports robust versioning or have to generate detailed functional specifications for your prototype.

Further Resources Link

(da, il, og)

Footnotes Link

  1. 1 https://proto.io/
  2. 2 http://www.axure.com/
  3. 3 http://www.groosoft.com/blueprint/
  4. 4 http://www.justinmind.com/
  5. 5 http://www.irise.com/
  6. 6 http://share.axure.com/
  7. 7 http://www.axure.com/c/forum.php
  8. 8 https://proto.io/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/01/01-createnewproject-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/01/01-createnewproject-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/01/02-screensmenu-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/01/02-screensmenu-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/01/03-editscreenproperties-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/01/03-editscreenproperties-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/01/04-editscreencolorpicker-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/01/04-editscreencolorpicker-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/01/05-workspace-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/01/05-workspace-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/01/06-statusbar-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/01/06-statusbar-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/01/07-navbar-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/01/07-navbar-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/01/08-toolbardefault-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/01/08-toolbardefault-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/02/09-tollbar-button-selected-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/02/09-tollbar-button-selected-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/01/10-toolbarchangebuttonicon-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/01/10-toolbarchangebuttonicon-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/01/11-toolbarinbox-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/01/11-toolbarinbox-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/01/12-itembrowser-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/01/12-itembrowser-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/01/13-newcontainer-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/01/13-newcontainer-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/01/14-newscreen-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/01/14-newscreen-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2015/01/15-addinteraction-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2015/01/15-addinteraction-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/01/16-interactiontriggers-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/01/16-interactiontriggers-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/01/17-interactiondetails-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2015/01/17-interactiondetails-opt.jpg
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2015/01/18-emailgroup-opt.jpg
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2015/01/18-emailgroup-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2015/01/19-addcontainertocanvas-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2015/01/19-addcontainertocanvas-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2015/01/20-containerpropertiespane-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2015/01/20-containerpropertiespane-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2015/01/21-navbarinteractions1-opt.jpg
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2015/01/21-navbarinteractions1-opt.jpg
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2015/01/22-navbarinteractions2-opt.jpg
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/01/22-navbarinteractions2-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2015/01/25-duplicatescreen-opt.jpg
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2015/01/25-duplicatescreen-opt.jpg
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2015/01/26-orientationchange-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2015/01/26-orientationchange-opt.jpg
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2015/01/27-emailliststate2-opt.jpg
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2015/01/27-emailliststate2-opt.jpg
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2015/01/28-emailliststate3-opt.jpg
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2015/01/28-emailliststate3-opt.jpg
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2015/01/29-changestatesequence-opt.jpg
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2015/01/29-changestatesequence-opt.jpg
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2015/01/30-publishingoptions-opt.jpg
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2015/01/30-publishingoptions-opt.jpg
  65. 65 http://docs.proto.io/videos/the-editor-interface/
  66. 66 http://proto.io/en/examples/
  67. 67 http://proto.io/en/learn/
  68. 68 http://proto.io/en/webinars/
  69. 69 https://itunes.apple.com/app/proto.io-player/id854504039
  70. 70 https://play.google.com/store/apps/details?id=io.proto.player
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Will Hacker is the author of Mobile Prototyping With Axure 7. He’s used Axure for several years as part of his iterative design and prototyping process. Will spent two and a half years working exclusively on mobile design, prototyping, and usability testing, and Axure was one of the main tools in his arsenal. He also has written about prototyping and user experience design for Smashing Magazine and UX Booth, and is a frequent speaker at design events in Chicago. Will is a Lead Interaction Designer at GE Capital, where he works on multi-device designs for commercial lending software. You can follow his tweets at @willhacker or visit his website at willhacker.net.

  1. 1

    Aimilia Tzanavari

    February 19, 2015 3:48 pm

    I believe that the fact that it’s a web application is actually an advantage compared to other tools. You can share and collaborate. I rarely create prototypes somewhere where there’s no internet connection.
    It seems to me that this article is not that objective. The author is perhaps a little biased, as he states he is an Axure user for years and has even authored a book on the particular tool.

    5
    • 2

      Aimilia,

      I’m truly sorry you felt my article was biased against Proto.io. There are actually many things I like about the tool, which I thought I pointed out. My intention was to provide a balanced look at the software and draw comparisons to other tools where appropriate as a way of informing readers of the pros and cons to help them make a decision about using it.

      2
      • 3

        Aimilia Tzanavari

        February 25, 2015 12:28 pm

        I appreciate your reply Will. Thank you. I was just expressing my first reaction there. Your article was very informative. Thanks again.

        1
  2. 4

    Richard Korebrits

    February 19, 2015 4:47 pm

    This looks at bit like advertisement to me..

    4
    • 5

      Vitaly Friedman

      February 20, 2015 10:08 am

      Dear Richard,

      This article is by no means intended to sound like advertisement — it’s an unbiased review, one of a series of other prototyping tools. We never accepted and we never will tolerate any kind of promotional content, and Will has no affiliation with the tool that he reviewed. I sincerely apologize if the article comes across this way though. It wasn’t meant to be like this at all.

      5
    • 6

      Hi Richard. I can assure you this is not an advertisement in any way. As an editor here at Smashing Magazine I am trying to present new tools that are available for our ever changing mobile landscape in a hands on way. The author is in no way affiliated with Protio.io and the intention was to give readers a useful overview of an increasingly popular tool in the prototyping space. I am sorry that it comes across in any way as advertising. We at Smashing Magazine take great care to remain objective and I can tell you I reject many many articles every year that are blatant self-promotions.

      0
    • 7

      Hi Richard,
      As the author of the article I can assure you it was not intended to be advertising, and I’m sorry if it left you with that impression. I am not in any way connected to Proto.io and received no compensation from them as part of writing this article. The editors and I worked hard to ensure comparisons were made with other tools, pros and cons were listed, and links to competing tools were included in the article. Again, my apologies if you felt this was anything other than an objective review of the software as that was certainly not my intent.

      0
  3. 9

    I tried testing with Proto.io and had problems with device sizing while testing.

    1. It was difficult/time consuming to build a prototype for each device. Proto.io doesnt let you select multiple elements at once to auto resize. So resizing for alternative devices is not an easy process.

    2. I adjusted prototypes to the resolution specified on the phone specifications I was testing on. However, they still didnt match the sizes of my users phones. This was most apparent with android devices.

    Although it was easy to build an initial prototype in Proto.io, I didnt have much luck testing with it.

    0
    • 10

      Alex,

      Getting prototypes to work on different devices is a challenge with many prototyping tools. This is in part because they use fixed pixel widths in the design and in part because of the diversity of screen sizes, especially for Android, but also with newer versions of the iPhone. I’ve had my best luck when I know the exact device I am targeting, such as in the case of in-house testing with your own phones, but have experienced the same differences you mentioned when testing in the field with phone I don’t control. I also have seen cases where I’ve targeted the exact specs of the phone in question and things still don’t always look right. It’s one of the inherent challenges with testing on mobile devices that hopefully will be lessened over time as tools mature.

      0
    • 11

      Hi Alex,

      Thanks for sharing your experience using Proto.io and adjusting prototypes for multiple devices.

      I actually have a couple of suggestions:

      The first is to preview your prototype using Proto.io native app:
      iOS: https://itunes.apple.com/us/app/proto.io/id854504039?mt=8
      Android: https://play.google.com/store/apps/details?id=io.proto.player&hl=en

      When previewing using the native app, your prototype will automatically fit the screen size of the device it is running on irrespective of which device it was designed for.

      The second suggestion is to use a new feature we are releasing early next week (scheduled for Tuesday 24th). I can’t share more details right now because the feature hasn’t been publicly announced yet. All I can say is that it’s related to getting prototypes to work on different device sizes and it aims at removing the pain related to the process!

      3
  4. 12

    Christopher Bender

    February 22, 2015 3:28 am

    Very thorough. I always enjoy reading about various software options for people in our field. It’s difficult staying on top of everything out there so we can make the best decisions. Thanks for the deep dive.

    2
  5. 13

    This is exactly what I am looking for. I have a lot of experience with Axure but I have never developed a fully functional prototype app in Axure and I am looking for my weapon of choice for this kind of task. The idea of a tool like Proto.io built just for this seems like a good choice. Are there other app prototyping tools you can recommend besided Proto.io?

    0

↑ Back to top