Marvel is an excellent online tool which allow designers to create prototypes of mobile applications and web projects. In this tutorial we’ll see how we can use Marvel for the first time, creating a mobile game prototype and learn the process of navigating through different screens and options.
There are plenty of incredible prototyping tools available today: Invision, Framer, Flinto, Pixate, the list goes on. So why should I use Marvel? I always thought that what really matters is not the tool, but feeling comfortable when I’m working. I’m comfortable with Marvel.
Features
Some of the features Marvel boasts include:
- Dropbox syncing, as you work in Photoshop and hit save, the prototype updates in real-time.
- Add sketches from mobile app if you like to start on paper first.
- Support of different types of transitions and gestures.
- Ability to create unlimited teams (you might have a team for a client, a team around a hackday, etc.)
- Device frames for previewing purposes.
- A very neat interface visually and full of details.
- Multiple options for sharing prototypes.
Shall we begin?
1. First Contact
Step 1
Go to https://marvelapp.com/ and sign in. Keep in mind that you need to have a Dropbox account to start using Marvel; this enables you to synchronize all the files you use in your prototypes. You don’t need Dropbox installed to use Marvel, but you do need to be able to authenticate on Dropbox.com.
If you’re already registered with Dropbox, great! Let Marvel access to your account so you can proceed to the next step. Marvel makes use of the images you work with but never accesses any other files. Once you do that, you’ll see the following screen:
Step 2
It’s time to create our first project, so click the Create project button. A new popup will appear for you to enter the project’s name. Notice how you can fill additional options such as "sharing the project with a team" (not this time) or add password protection (not what we need right now) too. Enter a name for the project. In my case I’m going to use "WORDS". Now click the Create project button.
Step 3
Having created our project we need some content. Once the project is created, take a look at the new options you’ll have on screen. Focus on Add designs from Dropbox and Take photos of sketches, the most important options when you’re creating new projects in Marvel.
It’s time to use the exercise files I’ve attached to this tutorial. If you haven’t already, go and download a copy from Github. Next, you have to upload all the .png files to a folder in your Dropbox account, wherever you want. For this tutorial I created a folder called WORDS to put all the content inside. Once that’s done return to the screen.
Now click the Add images from Dropbox button, select all images into your Dropbox folder and proceed.
Step 4
Check the images. Their size is 750x1334px which matches the resolution of an iPhone 6. We’ll tell Marvel that we want to create a prototype for this phone. How? Click Settings to display a new options window. You should see how the iPhone 6 device frame is already selected. That’s because Marvel has autodetected the frame that fits best, based on the size of our screens. Thank you Marvel!
From this screen you’ll be able to select other device frames and configure other options related to visuals and behaviours of the prototype. Let’s leave everything as default and return to the previous screen to continue. Click the ✕ icon to close the window.
2. Our Prototype
Step 1
Now comes the fun part: let’s create our first interaction. Move the cursor over the images and you’ll reveal new options. You see them? For example, hover over 00-Intro.png then click Edit. You’ll see a nice popup showing how to create hotspots. Go ahead and you’ll be presented with something like this:
Tip: Use the zoom option located on the top menu if you’re seeing the image too big in your screen. I’m using a 50% zoom level.
Step 2
To add interactions and transitions we need to add “interactive areas” to our images. These areas are known as hotspots. You can create them anywhere you want just by clicking and dragging until you have the desired shape.
Create a new hotspot above the Casual mode button in our design. When you’re done, a new toolbar should appear. We’re going to use it to set how the hotspot behaves.
Tip: You can change the position and the size of a hotspot by simply selecting and moving it or scaling it.
Step 3
On the toolbar you’ll see all the images we have in the project. We created the hotspot just above the Casual mode button, so click the image 01-Casual-option to select it and link the hotspot to that image. This image will be what we see on screen when we interact with that particular hotspot, simulating a tap or click action.
Now focus on Hotspot Behaviour. You’ll see that by default the type of transition is None. This means that no animation between screens step is performed. We also see that the action that triggers the interaction is Click or tap (if you’re going to use a mobile to test the prototype). Let’s leave it as default for now.
Click the Duplicate this hotspot option. On the new window select the 02-Challenge-option image. Click the green button to complete the action.
Tip: Duplicating hotspots saves time when you want to reuse the same interaction and destination screen across multiple images. Note that duplicated hotspots turn to green instead of standard blue.
Step 4
That was the basis of creating interactions in Marvel. Easy, right? Now click the ✕ icon to close the toolbar. Using the slider at the top, move to the next image, 01-Casual-option.
Step 5
Create a new hotspot above Casual mode. Remember, just click and drag. This time link it with the 06-casual-mode image. To change the transition effect click on Transition then select Fade. We are simulating the access to one of the game modes of the application.
Step 6
Create a new hotspot over the Challenge mode button and link it with the 02-Challenge-option image. Make use of the Duplicate this hotspot option to also copy it into the 00-Intro image
Create another hotspot, this time over the trophy icon at the bottom of the image. Link this hotspot to the 04-trophies image. Change Transition to Slide Up. Use Duplicate this hotspot and copy it into 00-Intro and 02-Challenge-option.
One more time: create a hotspot over the No limit button. Link it to the 03-Nolimit-option image. Change Transition to Push left and use Duplicate this hotspot to copy it in 00-Intro and 02-Intro-Challenge-option
In the end, you should have something like the following image:
Step 7
Use the slider at the top to move to the next image: 03-Nolimit-option. Create a new hotpost just above the Back to menu option. Now click the Link to last visited screen option. In this way, our prototype will return to the previous screen where you have made the interaction. Remember that we could access this screen using the hotspots we put in the 00, 01 and 02 images. With Link to last visited screen we can return to any of these images and not just one exclusively.
Step 8
Let’s move to the next image: 04-trophies. Focus on the option that says Fixed header. Click and drag down until you reach the 92px mark. This way we can keep the header fixed while scrolling up and down. As this image in particular is 2050px height, we can see this effect when we’re ready to test our prototype.
Step 9
Create a new hotspot above the icon in the upper left area. Link it to the 00-Intro image and select Slide Down as Transition. Duplicate this hotspot for 05-trophies-share and also for 08-results and 09-trophies-unlocked.
Create another hotspot over the entire area of Trophy title 1. Link it to the 05-trophies-share image and set Fade as Transition. You can see the hotspot I created in the image below:
Step 10
Continue to the next image: 06-casual-mode. Here we’re going to create a hotspot to display the pause menu and another hotspot to display the result we would see at the end of the gameplay.
So create a new hotspot over the icon at the top center, just between the timer and the score. Link it to the 07-pause image. Use Fade as Transition. Create another hotspot over the center of the screen and link it to 08-results. Set Slide Fade as Transition.
Step 11
Next image! Use the slider and go to 07-pause. Make a new hotspot over the Continue option. You can use the Link to last visited screen option or link the hotspot to the 06-casual-mode image to simulate the effect of returning to the game from the pause menu.
Also create a hotspot over the Back to menu option and link it to the 00-Intro image selecting Slide Fade as Transition.
Step 12
We’re almost finished! Go to 08-results. You should see a previously created hotspot on the icon at the top bar. Create a new one over the New Game button. Link it to the 06-casual-mode. Use Fade as Transition. Duplicate the hotspot in the 09-trophies-unlocked image.
Create another hotspot, in the middle of the screen. Use the image below for reference if needed:
Link the hotspot to the 09-trophies-unlocked, use Slide Left as Transition and Swipe Left as Action. When you see this prototype on a mobile device, you can use this gesture to trigger the interaction (desktop computers will continue to run the action of clicking).
Step 13
Continue to the 09-trophies-unlocked; last image! You should already have two hotspots created. Create a new one on the medium-left zone of the screen. Link it to 08-results, use Slide Right as Transition and Swipe Right as Action.
Finished. Now it’s time to view our prototype and share it with other people!
3. Previewing and Sharing Options
Step 1
Click on the Preview option in the top bar. A new window with your prototype will appear within a template iPhone 6. It’s alive! Click the house icon to automatically return to the first screen.
Now you can browse through the screens and interact with the different hotspots you have created.
Tip: Notice how the cursor changes when you’re hovering over a hotspot (desktop computers). If you don’t remember exactly where they are, just tap or click on the screen to show where they are.
Step 2
Everything should work fine and I hope you liked the result! Now close the window with the prototype and return to the screen where you were working before. Click the Close option to return to the main screen of the project.
From here you’ll be able to access the editing screen, add new images, update the previous ones, include an application icon, etc. You can also use the Play option to re-launch the preview in your browser.
Click on the Share option. You will see all the options you have available to share the prototype you just created with other designers, devs or clients.
You can also download the files needed to run your prototype anywhere. Close the Share your prototype window, then on the project screen click Download to download a zip file with everything you need.
Conclusion
All the things we’ve practised throughout this tutorial will have armed you with the skills to fully understand how to use Marvel to quickly create prototypes. If you have any questions about one step in particular, or Marvel in general, just leave a comment below. I’ll be glad to help!
