A guide to creating your first prototype

What are prototypes?

A prototype demonstrates the functionality of your idea before building the final version. It is now a fundamental part of the product design and development process, alongside user testing and developer handoff (both of which you can also do in Marvel!).

Marvel turns static mockups, wireframes, and designs into interactive mobile and web experiences, all without needing to code.

The end result is a prototype that looks and feels just like the real thing, but takes minutes to produce rather than days and weeks. 

How you can use prototypes

  • Getting tangible ideas down from people who might not know how to code
  • Testing out ideas for websites and apps 
  • Understanding user-behavior 
  • Demonstrating ideas to stakeholders 

With Marvel, you can create a prototype that could demonstrate your ideas on a number of different platforms that you can then share with developers, designers, stakeholders or even your own customers.

 

Already got some designs? How to prototype using our own designs stored on your computer

If you've designed your screens and have them as JPG, PNG or GIFs, you can quickly drag or add them into your Marvel project to start prototyping.

 

 

 

  1. Go to your Dashboard
  2. Click the Create project
  3. Select Prototype and enter your project name and select a device
  4. Select Create project
  5. Click Add images then select Upload from computer. Alternatively, you can drag and drop your designs straight into the browser window to upload them to your project.
  6. Hover over any image that you've uploaded and click Prototype to enter the editor
  7. Once in the editor, click and drag over any area of the design to draw a hotspot
  8. Select the target image for the hotspot
  9. Click Play to interact with your prototype

 

Don't have designs? How to prototype using Marvel to create designs and wireframes

If you don't have design software, don't worry! You can create your screens using our built-in tool. It comes with hundreds of pre-made assets, millions of stock photos and icons to speed up your design process.


  1. Go to your Dashboard
  2. Click the Create project
  3. Select Prototype and enter your project name and select a device
  4. Select Create project
  5. Click Add images then select Design in Marvel
  6. Once in the design tool, select from the options on the left to begin designing
  7. When you are ready to add the design to your project, click Close on the top right or Add design on the bottom left to continue designing
  8. When you're ready to prototype, hover over any image that you've uploaded and click Prototype to enter the editor
  9. Once in the editor, click and drag over any area of the design to draw a hotspot
  10. Select the target image for the hotspot
  11. Click Play to interact with your prototype

 

Use Sketch? How to prototype using our Sketch plugin

If you use the popular design tool Sketch then you'll love our plugin that allows you to sync artboards, prototypes and developer handoff to Marvel.

 

 

  1. Download the Marvel Sketch plugin here
  2. Double click file within the ZIP file to install
  3. Now open Sketch, you will see the Marvel sync buttons on the left-hand panel
  4. Select the artboards you want to sync to Marvel, and click Sync Selected
  5. You'll be prompted to connect your Marvel account, click Connect
  6. When the sync dialogue appears, select an existing project or create a project
  7. Click sync

Now that you've mastered the basics, check out some advanced prototyping features and user testing.

Was this article helpful?
769 out of 922 found this helpful