How To Use Marvel App For Design

📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes

Prototyping enables teams to mockup ideas and validate user experiences before moving onto development. Teams of all sizes around the world prototype ideas for websites, apps, marketing assets and or anything that's viewed on a screen with Marvel.

By creating a prototype that interacts like the real thing, users will be able to provide feedback and insights to help iterate and create a better product.

To help you create your own prototype, we launched a bunch of examples with key prototyping functionality to showcase what you can do. They can be cloned straight into your workspace so you can play around with the example screens and easily get started.

Check out our example prototypes:

Now let's go into some of the features demostrated in the examples and how you can recreate the prototypes in your own account.

Transitions

Transitions are the actions between hotspots that give the illusion of movement throughout a prototype. It's this movement that creates a realistic look and feel of a finished product.

You can create the experience of a users swiping between screens, interacting with a popup or completing a form without needing to code.

Adding a transition

Copy the travel app example prototype to your workspace
Hover over the image and clickPrototype to enter the editor
Once in the editor, click and drag over any area of the design to draw a hotspot
Select the target image for the hotspot
Select additional screen transitions and actions
Click Play to interact with your prototype

Here's an example of how a transition was used in our travel app example prototype.

Timers

Timers enables you to automatically move between screens after a set amount of time without any user interaction. Perfect for creating loading screens, interstitials, walkthroughs and more.

Copy the healthcare app example prototype to your workspace
Hover over the design
Click Prototype
On the top left, click the Timer button
Enter the number of seconds you would like to stay on that screen before moving to the next one
Click Pick destination and select the screen you would like to move to
Click Play to interact with your prototype

Here's an example of how a timer looks in our healthcare example prototype.

Containers

Make an element of your prototype interact by scrolling horizontally, vertically or bidirectionally with containers. Containers can also be made fixed, so that they stay in position while scrolling.

Copy the travel app example prototype to your workspace.
Click Prototype on the image
Click and drag over the area where you want to add the container
Select the element you want to appear in that container from your images and click Container as the action
Choose the behaviour and direction you want, and click Play

Here's an example of how a container looks in our travel app example prototype.

Fixed header & footer

Maintain a header or footer in a fixed position while the rest of the design scrolls. Useful for action or header bars, or a row of tabs along the top or bottom of a screen.

Copy the finance app example prototype to your workspace.
Add your layer element to your project
Click edit on a screen which will trigger the layer
Select your layer as the destination
Then click Layer an image on the left
Position where you would like your layer to appear
Click Play to interact with your prototype

Here's an example of how a fixed header and footer looks in our finance app example prototype.

Layers

Add elements on top of your screens as hotspot destinations to create realistic sidebars, modals, and popovers. You can also make your layers scrollable to create an effect of a long menu.

Copy the healthcare app example prototype to your workspace.
Click edit on any image
Slide the 'fixed header' and 'fixed footer' bars, located on the left hand side of the image
You can choose any length of header or footer for either one - the px indicator on the right hand side of the image, level with the bar, shows how many pixels are fixed
Click Play to interact with your prototype

Here's an example of how a layer looks in our healthcare example prototype.

Embeds

Add rich dynamic content into your designs to create a realisitc user experience. Add YouTube, Vimeo, Spotify, Soundcloud, Google maps and more in just a few clicks

Copy the recruitment website example prototype to your workspace.
Click edit on any image
Draw a hotspot container for your video
Select 'Link to URL or embed media' from the left hand options
Cut and paste your embed code into the field and use the dropdown to select embed
That's it! Close the editor and hit play to take your prototype for a spin

Here's an example of how an embed looks in our recruitment website example prototype.

Now you've seen what you can do with Marvel, check out all of our examples, copy them to your workspace and get started!

Contribute to the blog

Got a great post you've written that would benefit our awesome community of 500,000 readers? Or maybe you've just got an idea in the works? Let us know!

Thank you!

Someone from our team will be in touch shortly.