Categories / Tutorials
How to Mock Up Your Dream App in 20 Minutes
Laura Busche March 31, 2021 · 4 min read
1. Decide which screens you want to show in your mockupThe Do framework (that you just downloaded) comes with 13 templates for each theme. You’ll find screens to display the following views: login, signup, walkthrough, home, calendar, overview, groups, list, create, profile, timeline, settings and navigation. In my case, all I wanted to show was four simple views: home, walkthrough, a list of quote categories, and a view inside each category. The groups view worked great for the list of quote categories that I wanted to show. The list view, which is designed to display a series of items, was a great way to display each of my app’s quote categories. Get creative and think about how these 13 views can be tweaked to do exactly what you need.
2. Pick a theme that goes well with your color paletteThere are 10 options to choose from. You can select whichever one fits your visual identity best. Since my app’s color palette is mainly purple and white, I went with the third theme.
3. Tweak colors, components & copy to fit your dream appHere’s where it starts getting interesting. Change things around a bit: modify titles, customize buttons, tweak colors and move around anything you want. In my case, it was just a matter of changing a few texts here and there. I also copied the screen for the walkthrough 3 times, since my welcome flow featured three different items.
4. Hide the screens you won’t use and rename those you willThis step is all about preparing the file for upload. Just hide (or delete) the layer groups that you won’t be using. My app, for instance, only needed 4 out of 13 total. Save the file. Now, at this point, you’re probably wondering: is she just going to upload all of that? Yes, she is. And you are too. Ready for the pro tip? Add a plus sign to the layer groups (screens) that you are using and InVision will automagically* understand that they are views in your app. * Here’s how it actually works.
5. Import them to InVision, organize and animate them however you wantUpload your file to InVision and start organizing the images in the order in which they should appear. Use InVision’s Build Mode to add hotspots: places where your user can tap, double tap or swipe for something to happen. Tell InVision which screen should come up when any of these things happen. Get as sophisticated as you want. As you’re doing this, you might even realize that you’ll need an extra view or two.
6. SHARE AWAY.You can share your new prototype pretty much anywhere. Mine, for example, is right here. If someone wants to try it out using a mobile device, they’ll find that taps and swipes work like a charm. InVision lets you collaborate with others, who can also comment and annotate your work.
Products Seen In This Post: