❷❻ Build UberEat on Marvel
Use Marvel to have an easy app design on the iPhone module.
First, we go to the website.
Creat Project
Name your prototype, choose iPhone.
Click the create design button.
Choose the Design in Marvel, not recommend directly upload the photo, cause you might need to make sure the length and width that appropriated to your iPhone regulation.
You’ll see white canva for you to create creativity!
Today I’m simply wanna show the Marvel Prototype, so I use UberEat app interface screenshot straightly. You can simply drag your pictures in your file as I did bellow.
There’s a button at the right corner, add to library.
Now we create one page successfully in our library page.
As the steps above, create other pages you need.
If you select 4 of the pages, the prototyope can show you 4 pages by swiping the pages in the library.
To be more like a real app, we need those buttons at the bottom of the homepage that can be triggered and segued to the destinated page we would like.
Now we choose the homepage, which is also the firsts page in my orders.
Press Prototype into the Prototype editing page.
You can set the segue to differnt pages by simply clicking and choosing the area on your page. It will automatically show you the pages you have added in library, click the page you like and it connected.
The Prototype is simply simulation, so might bothers that every pages are individually seperated. Remember to set all these little squares on every page, so you make it look like connected naturally. If we are in Xcode, simply need to set the segues in our main page, don’t need to set these segues replicatly.
Result:
Reference:
