How to Mock Up Your Dream App in 20 Minutes

By on May 2, 2016 in How To
How to Mock Up Your Dream App in 20 Minutes

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-part5Pin It

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___InVisionPin It

Since my app’s color palette is mainly purple and white, I went with the third theme.

do-part3Pin It

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___Pin It

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___Pin It

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___Pin It

* 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_-_InVisionPin It

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

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

2 Comments

  1. Thanks you very much for your informative and effective post. I think it is very useful content for visitor. Again thanks for sharing.

  2. With fluidui.com you can get a prototype running on your mobile in 4 easy steps:
    Step 1: Create an account and choose your device type.
    Step 2: Use our built in libraries or upload your own images to create some pages.
    Step 3: Link them together and choose your transitions.
    Step 4: Install the Fluid UI app and scan the code to test your prototype on your mobile.
    Here's a link to the editor: https://www.fluidui.com/editor/live/
    You will definitely have your design mocked up in well under 20 minutes.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →