Categories / Tutorials

How to Mock Up Your Dream App in 20 Minutes

Laura Busche March 31, 2021 · 4 min read
Sometimes simply talking to someone about your next earth-shattering app isn’t enough. You want to bring it to life and show all those intricate details that you’ve been working on. Whether you know about programming or not, creating a clickable prototype can truly make a difference. In this article, you will learn how to build a simple mockup to share your vision using free tools in an unbelievably short amount of time. You will need to download this free mockup framework and have a very clear idea about what your app’s flow should look like. This file can be edited using Photoshop or Sketch, which is an amazing low-cost alternative. Optionally, open a free InVision account to make your prototype clickable in steps 4 and 5. Picture this: I’m building an app to send daily inspirational quotes. The kind of app that becomes a lifesaver on Monday morning. I’ll show you how I created a clickable, realistic mockup in 20 minutes:

1. Decide which screens you want to show in your mockup

The 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. do-part5

2. Pick a theme that goes well with your color palette

There are 10 options to choose from. You can select whichever one fits your visual identity best. Free_to-do_app_UI_kit_for_Photoshop_and_Sketch___InVision___InVision Since my app’s color palette is mainly purple and white, I went with the third theme. do-part3

3. Tweak colors, components & copy to fit your dream app

Here’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. do-part3_psd___33_3___Background__RGB_8___

4. Hide the screens you won’t use and rename those you will

This 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. do-part3_psd___12_5___RGB_8___ 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. do-part3_psd___12_5___RGB_8___ * Here’s how it actually works.

5. Import them to InVision, organize and animate them however you want

Upload 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. Daily_Inspiration_App_Screens_-_InVision

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:


getpaidtowrite-banner
About the Author
Author
Laura Busche

Brand strategist. Creating design tools to empower creative entrepreneurs. Author of the Lean Branding book. MA in Design Management from the Savannah College of Art and Design (SCAD).

View More Posts
Go to My Shop
Related Articles