A few months ago we discovered an excellent online mobile prototyping tool called Marvel which, ever since, has been invaluable to us in mocking up design and behaviour of mobile apps without having to develop them in their entirety…

What is Marvel?

Marvel is an online prototyping tool for mobile apps. It is a mostly free service currently which includes as many projects as you like, with a ‘Pro’ plan which allows teams to collaborate on projects.

Device sizes currently catered for are iPhone 4, iPhone 5c and 5s, Lumia 920, HTC One, Galaxy S5, Nexus 5 and the iPad Air. Marvel have been very quick to respond to the new iPhone 6 and iPhone 6 Plus models, and these sized screens are now also included.

Prototype frame selection

How does it work?

Marvel syncs with Dropbox, where you can add image files or PSD files of your app screens and link them together via hotspots. They don’t have to be fully-fleshed out designs either; you can use sketches if you wish.

Hotspots are added by dragging rectangular areas around UI elements in your designs within Marvel.

Adding a hotspot and linking to another screen

They can then be set to activate with various actions (tap, swipe, pinch), and screens can use various transitions between them (slide, push, fade, etc).

Adding transitions between screens

Headers and footers can be made fixed to stay in place on the screen whilst the rest of the screen can scroll.

Adding a fixed footer

The prototype can be viewed on your mobile device by accessing the provided URL with your browser. In the case of an iPhone, an app icon can be included in the project and added to your home screen, making it behave more like a native app.

Prototype icon on the iPhone homescreen

If you want to change a screen and write over an image file already included in the project, Marvel will automatically update the screen in the background when the existing file in Dropbox is changed. This is extremely useful if you are updating screens constantly!

Conclusion

Marvel has greatly helped in visualising the user flow of apps, and clients have appreciated the ability to be able to access the prototype from wherever they are and sample how it would look and act when fully developed. It has become one of the essential tools in our arsenal here at Createful, and we shall continue using it for future projects.

From a designer’s perspective It is also good to see the visuals on the device you are designing for to gauge that the size of elements look and feel correct for the user.

Do you use Marvel for mobile prototyping; if so, what do you think of it? Or do you use another service or program which you think is better? Let us know!

Demo

Here is a sample iPhone 5 prototype I made earlier with Marvel, which can also be viewed on a mobile device by navigating to this link: http://marvl.in/1hjgba.