Using Marvel’s example 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:

• Heathcare app
• Chat app
• Hotel website
• Travel app
• Recruitment website
• Finance app

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

1. Copy the travel app example prototype to your workspace
2. Hover over the image and click Prototype to enter the editor
3. Once in the editor, click and drag over any area of the design to draw a hotspot
4. Select the target image for the hotspot
5. Select additional screen transitions and actions
6. 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.

1. Copy the healthcare app example prototype to your workspace
2. Hover over the design
3. Click Prototype
4. On the top left, click the Timer button
5. Enter the number of seconds you would like to stay on that screen before moving to the next one
6. Click Pick destination and select the screen you would like to move to
7. 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.

1. Copy the travel app example prototype to your workspace.
   Click Prototype on the image
2. Click and drag over the area where you want to add the container
3. Select the element you want to appear in that container from your images and click Container as the action
4. 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.

1. Copy the finance app example prototype to your workspace.
2. Add your layer element to your project
3. Click edit on a screen which will trigger the layer
4. Select your layer as the destination
5. Then click Layer an image on the left
6. Position where you would like your layer to appear
7. 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.

1. Copy the healthcare app example prototype to your workspace.
2. Click edit on any image
3. Slide the 'fixed header' and 'fixed footer' bars, located on the left hand side of the image
4. 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
5. 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

1. Copy the recruitment website example prototype to your workspace.
2. Click edit on any image
3. Draw a hotspot container for your video
4. Select 'Link to URL or embed media' from the left hand options
5. Cut and paste your embed code into the field and use the dropdown to select embed
6. 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!