Learn how to prototype web and mobile apps with Marvel, the popular (and free) UX prototyping tool.
- [Brian] Hello and welcome to Prototyping with Marvel App. My name is Brian Wood. Marvel App is one of my favorite tools for helping design and prototype apps and websites. And in this course, I'm gonna show you everything it has to offer. We'll start off by covering the basics of Marvel App, what it is, how it works, basically just a little bit of introductory material to get you started. We're not gonna go through and talk about how to set up a Marvel App project. And this is gonna talk about a lot of different things, what you can do, what you can't do, the whole general process, I guess you could say.
It's actually really simple, and you'll see as we go through. We'll then start to add design content, and this can be design content from just about anywhere. You can bring in JPEG, GIF, PNG, even PSD and AI if you use the iOS apps, and we'll talk about that. You can bring in content from Dropbox, from your hard drive, from Google Drive, all over the place. We'll add some design content and that's probably gonna be the bulk of the course, to be honest. And then we're gonna start to prototype, because the design that's static is, well, just like going to Photoshop or some other program, or Sketch, and saying, oh, here's my design, it's great.
We're gonna add the interactivity. This is gonna give people a sense for what it's gonna act like, how it's gonna work. And then we'll go through and we'll talk about collaborating, how we can gather comments from different people to have feedback. How we can send it to team members and create teams, and do different things like that. So let's take a look at what you're gonna build. So this is the app that we're gonna create a prototype for, it's really simple. But, it's gonna give us a lot of functionality that we're gonna be able to show our clients, and say, hey, this is generally how it's supposed to work.
You can go through to different screens, figure out, maybe I wanna go through an ordering process or filling out a form, and just see how that's gonna occur. We can do things like do overlays or layers. We can have it scroll for us if we want to, in a large scrollable area like this. We can have fixed headers, fixed footers. Got a shopping cart here, let me just go through, I'll show you a few other things. We can make it so that we layer content on top, and it could be hidden under here, or have a transparent area if we want to. And then I can go through and do things like, this is actually a transparent area overlay.
I can add video, we can add video content, links, email, email kind of like this down here. There's a lot of things we can do, and it's really simple. Once you understand the process, you'll just be able to hit the ground running, honestly, and start taking this to the next level. So, what we're gonna do is just gonna start to jump in. So let's go.
- What is Marvel?
- Creating a new Marvel project
- Linking screens
- Adding images
- Setting up screen timers
- Adding video
- Sharing and downloading prototypes