So, you've designed this really cool mobile app. Now if you could just explain the flow, transitions, and animations of your app to your developers and key stakeholders!
To make your design come alive, you'll need a solid design, mockup, and prototyping tools. The design process usually starts with designing the user interface using design tools. Next, use a mockup/prototyping tool to link up the screens so you can show the flow of your app. If you would like to design a particular interaction, use prototyping tools that can simulate animations.
Here are our 5 favorite design mockup and prototyping tools that we frequently use for mobile app design projects:
UPDATE AS PER JANUARY 2017
1. Sketch 3 + Sketch Mirror
Best for: mobile app UI design
Price: $99 for one license. Free trial available. Educational discount available (50% off).
This solid and easy to use design application has been a favorite for mobile app designers in place of Adobe Photoshop or Illustrator. Sketch comes with built-in iOS and Android app design template so you can get started quickly. One of the most useful function is the ability to quickly view distance between elements and slice elements in 1x,2x,3x or custom size. Download the companion Sketch Mirror app on your mobile device and view your designs directly on the device.
Get Sketch here: http://www.sketchapp.com
PRO TIP: More UI template can be downloaded from http://sketchappsources.com
Best for: mobile app UI design
Price: FREE until end of 2016. No pricing has been announced yet.
Figma is a great alternative to the popular app design tool, Sketch, with built-in design collaboration features. You can also import Sketch files and edit it in Figma. However since it is web-based, designing with Figma feels a lot slower. Figma also has Figma Live Design Preview app that works exactly like Sketch Mirror.
Get Figma here: http://www.figma.com
Best for: collaborative design process, app mockup and showcase
Price: FREE for 1 project. Additional tiers available.
Probably the best mockup tool out there. Invision offers a lot of features such as hotspots, many options for transitions and animations, commenting, moodboards, slick presentation mode, design-based project management tool, and version control. They even allowed you to capture user interaction with your prototype so you can get user feedback firsthand. They recently announced code-generation feature (now in Beta) which would really come in handy for your developers.
Get Invision here: http://www.invisionapp.com
4. Marvel App
Best for: simple mockup, showcasing flow of your app
Price: FREE for 1 user, unlimited projects.
Marvel is a simple mockup tool, similar to Invision but with less features. Marvel allows you to upload your designs and place hotspots to make a clickable mockup. Transitions and animations are limited, but creating clickable mockup Marvel is really fast and easy. You can share your mockup with an URL or view it in your device by downloading Marvel app. Marvel is suitable for independent designers as its free tiers allows unlimited projects for 1 user.
Get Marvel here: http://marvelapp.com
5. Framer JS
Best for: advanced, innovative interaction design
Price: $99 for 1 license including 1 year of updates. Free trial available. Volume discount available. Educational discount available (50% off).
Get Framer Studio here: http://framerjs.com