Check out our example prototypes:<\/p>\n
- \n
- Heathcare app<\/a><\/li>\n
- Chat app<\/a><\/li>\n
- Hotel website<\/a><\/li>\n
- Travel app<\/a><\/li>\n
- Recruitment website<\/a><\/li>\n
- Finance app<\/a><\/li>\n<\/ul>\n
Now let's go into some of the features demostrated in the examples and how you can recreate the prototypes in your own account.<\/p>\n
Transitions<\/h3>\n
Transitions are the actions between hotspots that give the illusion of movement throughout a prototype. It\u2019s this movement that creates a realistic look and feel of a finished product. <\/p>\n
You can create the experience of a users swiping between screens, interacting with a popup or completing a form without needing to code. <\/p>\n
Adding a transition<\/strong><\/p>\n
- \n
- Copy<\/a> the travel app example prototype to your workspace<\/li>\n
- Hover over the image and click\u00a0Prototype<\/strong>\u00a0to enter the editor<\/li>\n
- Once in the editor, click and drag over any area of the design to draw a hotspot<\/li>\n
- Select the target image for the hotspot<\/li>\n
- Select additional screen transitions and actions<\/li>\n
- Click Play<\/strong> to interact with your prototype<\/li>\n<\/ol>\n
Here\u2019s an example of how a transition was used in our travel app example prototype<\/a>.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/transitions.gif\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nTimers<\/h3>\n
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. <\/p>\n
- \n
- Copy<\/a> the healthcare app example prototype to your workspace<\/li>\n
- Hover over the design<\/li>\n
- Click Prototype<\/strong><\/li>\n
- On the top left, click the Timer button<\/li>\n
- Enter the number of seconds you would like to stay on that screen before moving to the next one<\/li>\n
- Click Pick destination and select the screen you would like to move to<\/li>\n
- Click Play<\/strong> to interact with your prototype<\/li>\n<\/ol>\n
Here\u2019s an example of how a timer looks in our healthcare example prototype<\/a>.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/timers.gif\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nContainers<\/h3>\n
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.<\/p>\n
- \n
- Copy<\/a> the travel app example prototype to your workspace.
\nClick Prototype<\/strong> on the image<\/li>\n- Click and drag over the area where you want to add the container<\/li>\n
- Select the element you want to appear in that container from your images and click Container<\/strong> as the action<\/li>\n
- Choose the behaviour and direction you want, and click Play<\/strong><\/li>\n<\/ol>\n
Here\u2019s an example of how a container looks in our travel app example prototype<\/a>.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/containers.gif\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nFixed header & footer<\/h3>\n
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. <\/p>\n
- \n
- Copy<\/a> the finance app example prototype to your workspace. <\/li>\n
- Add your layer element to your project<\/li>\n
- Click edit on a screen which will trigger the layer<\/li>\n
- Select your layer as the destination<\/li>\n
- Then click Layer an image<\/strong> on the left<\/li>\n
- Position where you would like your layer to appear<\/li>\n
- Click Play<\/strong> to interact with your prototype<\/li>\n<\/ol>\n
Here\u2019s an example of how a fixed header and footer looks in our finance app example prototype<\/a>. <\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/fixed.gif\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nLayers<\/h3>\n
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.<\/p>\n
- \n
- Copy<\/a> the healthcare app example prototype to your workspace. <\/li>\n
- Click edit on any image<\/li>\n
- Slide the 'fixed header' and 'fixed footer' bars, located on the left hand side of the image<\/li>\n
- 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<\/li>\n
- Click Play<\/strong> to interact with your prototype<\/li>\n<\/ol>\n
Here\u2019s an example of how a layer looks in our healthcare example prototype<\/a>.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/layers.gif\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nEmbeds<\/h3>\n
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<\/p>\n
- \n
- Copy<\/a> the recruitment website example prototype to your workspace. <\/li>\n
- Click edit on any image<\/li>\n
- Draw a hotspot container for your video<\/li>\n
- Select 'Link to URL or embed media' from the left hand options<\/li>\n
- Cut and paste your embed code into the field and use the dropdown to select embed<\/li>\n
- That's it! Close the editor and hit play to take your prototype for a spin<\/li>\n<\/ol>\n
Here\u2019s an example of how an embed looks in our recruitment website example prototype<\/a>.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/embed.gif\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nNow you've seen what you can do with Marvel, check out all of our examples<\/a>, copy them to your workspace and get started!<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u2019s 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… Read More ￫<\/a><\/p>\n","protected":false},"author":282,"featured_media":21100,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[489],"tags":[],"class_list":["post-21093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-with-marvel"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n
- Copy<\/a> the recruitment website example prototype to your workspace. <\/li>\n
- Copy<\/a> the healthcare app example prototype to your workspace. <\/li>\n
- Copy<\/a> the finance app example prototype to your workspace. <\/li>\n
- Copy<\/a> the travel app example prototype to your workspace.
- Copy<\/a> the healthcare app example prototype to your workspace<\/li>\n
- Hover over the image and click\u00a0Prototype<\/strong>\u00a0to enter the editor<\/li>\n
- Chat app<\/a><\/li>\n