{"id":25894,"date":"2015-07-01T16:47:14","date_gmt":"2015-07-01T23:47:14","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=25894"},"modified":"2024-04-09T05:30:51","modified_gmt":"2024-04-09T12:30:51","slug":"how-to-mock-up-your-dream-app-in-20-minutes","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/how-to-mock-up-your-dream-app-in-20-minutes","title":{"rendered":"How to Mock Up Your Dream App in 20 Minutes"},"content":{"rendered":"

Sometimes simply talking to someone about your next earth-shattering app isn\u00e2\u20ac\u2122t enough. You want to bring it to life and show all those intricate details that you\u00e2\u20ac\u2122ve 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.
\nYou will need to download this free mockup framework<\/a> and have a very clear idea about what your app\u00e2\u20ac\u2122s flow should look like. This file can be edited using Photoshop or Sketch<\/a>, which is an amazing low-cost alternative. Optionally, open a free InVision<\/a> account to make your prototype clickable in steps 4 and 5.
\nPicture this: I\u00e2\u20ac\u2122m building an app to send daily inspirational quotes. The kind of app that becomes a lifesaver on Monday morning. I\u00e2\u20ac\u2122ll show you how I created a clickable, realistic mockup in 20 minutes:<\/p>\n

<\/span>1. Decide which screens you want to show in your mockup<\/span><\/h2>\n

\nThe Do framework (that you just downloaded) comes with 13 templates for each theme. You\u00e2\u20ac\u2122ll 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\u00e2\u20ac\u2122s quote categories. Get creative and think about how these 13 views can be tweaked to do exactly what you need.
\n\"do-part5\"\n<\/p>\n

<\/span>2. Pick a theme that goes well with your color palette<\/span><\/h2>\n

\nThere are 10 options to choose from. You can select whichever one fits your visual identity best.
\n\"Free_to-do_app_UI_kit_for_Photoshop_and_Sketch___InVision___InVision\"
\nSince my app\u00e2\u20ac\u2122s color palette is mainly purple and white, I went with the third theme.
\n\"do-part3\"\n<\/p>\n

<\/span> 3. Tweak colors, components & copy to fit your dream app <\/span><\/h2>\n

\nHere\u00e2\u20ac\u2122s 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.
\n\"do-part3_psd___33_3___Background__RGB_8___\"\n<\/p>\n

<\/span> 4. Hide the screens you won\u00e2\u20ac\u2122t use and rename those you will <\/span><\/h2>\n

\nThis step is all about preparing the file for upload. Just hide (or delete) the layer groups that you won\u00e2\u20ac\u2122t be using. My app, for instance, only needed 4 out of 13 total. Save the file.
\n\"do-part3_psd___12_5___RGB_8___\"
\nNow, at this point, you\u00e2\u20ac\u2122re 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.
\n\"do-part3_psd___12_5___RGB_8___\"
\n* Here\u00e2\u20ac\u2122s<\/a> how it actually works.\n<\/p>\n

<\/span> 5. Import them to InVision, organize and animate them however you want <\/span><\/h2>\n

\nUpload your file to InVision and start organizing the images in the order in which they should appear. Use InVision\u00e2\u20ac\u2122s 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\u00e2\u20ac\u2122re doing this, you might even realize that you\u00e2\u20ac\u2122ll need an extra view or two.
\n\"Daily_Inspiration_App_Screens_-_InVision\"\n<\/p>\n

<\/span> 6. SHARE AWAY. <\/span><\/h2>\n

\nYou can share your new prototype pretty much anywhere. Mine, for example, is right here<\/a>. If someone wants to try it out using a mobile device, they\u00e2\u20ac\u2122ll find that taps and swipes work like a charm. InVision lets you collaborate with others, who can also comment and annotate your work.