How to Create Interactive Prototypes with Marvel POP: A Detailed Guide

David
Laura Angelica updated on 2020-09-25 16:26:16

Do you wish to create paper prototypes in less time, but can't seem to find any option? Well, in this case, you can consider using the POP app, which is developed by Marvel. Using the Marvel POP app on your Android or iOS device, you can come up with low-fidelity prototypes by taking pictures of your drawings. Without much ado, let's learn how to create POP Marvel prototypes in detail.

What is POP by Marvel all About?

In nutshell, POP is a prototyping-on-paper solution that you can use on your smartphones to create low-fidelity prototypes. For instance, if you have already worked on the mockup of your app's design on paper, then you use the POP app. It will scan the paper POP designs and will provide different solutions to improve them.

  • POP by Marvel can help you turn your paper designs into digital mockups that you can export into different formats.
  • The app features hundreds of icons, styles, fonts, and other options to create a digital POP Marvel prototype.
  • If you have multiple sketches, then you can even link different screens to create a dynamic POP prototype.
  • Once the POP Marvel prototype is created, you can share it with others via emails, messages, or social apps.
pop prototype

Source: Marvel


How to Create Interactive Prototypes with POP by Marvel

Before we start our POP by Marvel tutorial, it is important to know that the app is only used to create minimalist paper-based prototypes. If you have advanced requirements, then you can consider using an alternative to Marvel POP that I have included in the next section.

Though, if you want to create simple paper prototypes and share them with others, then you can use the POP app in the following way.

Step 1: Import Paper Prototypes to the POP App

To begin with, you need to make the basic sketch of your prototypes on paper. Once that is done, you can just take their pictures and save them on your phone.

paper pop

Source: SpyreSolutions

Now, you can install and launch the Marvel POP app on your device. From its home, you can choose to sketch something from scratch, import the saved photos, or take new pictures by accessing the camera of your phone.

Step 2: Edit and Link your Images

Once you have imported the paper prototype pictures on POP, you can use the inbuilt features to edit them. On the bottom panel, you can find options to add texts, stickers, icons, etc. to the sketch. You can even draw anything you want on the image from here.

pop marvel

Source: Marvel

If you want to create an interactive POP Marvel prototype, then just tap on the "Add Link" option from the top. This will let you make any element on the screen dynamic by linking it to another screen.

marvel pop

Source: Marvel

Step 3: Preview and Share your Designs

After making all the edits and linking your pages, you can simply preview them to get the user experience. There is also a provision to add different kinds of transitions from one screen to another.

marvel pops

Source: Marvel

In the end, you can go to the Share option to share your POP prototype with others via email, SMS, or social platforms.

pop app

Source: Marvel


How to Use POP Alternative to Make Interactive Prototypes

Since POP by Marvel might not help you create high-fidelity prototypes, you can consider using Wondershare Mockitt. A user-friendly and professional designing application, it can be used to create all kinds of wireframes, mockups, and prototypes.

pop marvel prototype
  • Mockitt provides a fast and friendly prototyping experience with its intuitive and easy-to-learn interface.
  • The application has an extensive library of 500+ icons, templates, fonts, and other components that can be used multiple times.
  • You can easily work on interactive prototypes with your team by assigning roles or sharing the projects on the cloud.
  • Apart from its desktop application, you can also use the online tool of Mockitt on any platform, which is backed by128-bit SSL protocol security.
  • Users can select different perspectives to create prototypes, link screens, get an instant preview, and can maintain up to 10 different versions of their project.

If you want, you can also come up with visually stunning prototypes using Mockitt in the following way.

Step 1: Enter Details for your new Project

To begin with, you can simply sign into Mockitt account and visit your "Personal Space" or "Enterprise Space". Now, click on the "Create" button and choose to work on a new "Project". You can now enter the name of the project and its target perspective to work on.

paper pop

Step 2: Use the Inbuilt Widgets

Once the canvas is loaded, you can find all kinds of widgets on the floating toolbar. From here, you can drag and drop any widget to work on the design of the prototype.

paper pop

Step 3: Add Interactive Links

After you have designed various screens, you can improve the fidelity of your prototype by creating links. Just use the link widget for this and drag it to the target screen from the side panel.

pop marvel

You can later go to the properties of the link from the sidebar to adjust its event, interaction, and other parameters.

marvel pop

Step 4: Preview and Export your Designs

Once you have worked on all the elements, you can click on the "Preview" button from the top to check how the prototype would be rendered from a user's perspective.

marvel pops

In the end, you can go to the Handoff section from the top to export your project into the format of your choice so that you can hand it over to the developers.

pop app

Now when you know about the features of the POP app, you can easily work on your paper prototypes. While POP by Marvel is pretty useful, you can consider trying a more resourceful tool like Wondershare Mockitt. Compared to Marvel POP, Mockitt offers a wide range of features that would let you create interactive and dynamic prototypes in less time.