If you are looking for an online mobile app prototype tool, you’re in the right place. This post explores several mobile prototyping tools that you can use to build mobile apps without writing a single line of code. I have personally used many of them and can suggest which to use.
A great way to create mobile app mock ups to present to clients, investors or other stakeholders is the use of prototyping tools. Here are the best free tools out there.
Proto.io
Proto.io is a feature-rich Web UI mockup tool that provides a 15-day trial plan after which, the basic plan starts from $29 per month for a single user. If your aim is to showcase all the UX features which you want to add in your website, including animations, this is an free wireframe tool that gives you the liberty to create a dynamic prototype.
TemplateToaster
TemplateToaster is a robust desktop application able to handle heavy design work. With an interactive interface, it allows you to create responsive websites that are SEO-friendly as well.
The trial version provides unlimited usage with limited features, while the standard and professional editions are priced at $49 and $149 respectively.
Wireframe.cc
For creating a static wireframe, this is one of the best tools to try. You can sketch your single page prototype for free. While the premium version provides you a private account and allows you to create multiple pages and export them in different formats. The premium plan starts from $16 per month for a single user and for $99 per month, you will have access to unlimited accounts and features.
Axure
This is another free Web UI mockup tool that allows you to create an interactive prototype with functional elements like clickable buttons or dropdowns with animated effects. With a 30 day free trial and a basic plan starting from $29 per month, you can also add complex animations like table filtering and list sorting.
Sketch – Create high-fidelity prototypes with super details on Mac
Price: 30-day free trial; 99$ for a one-year license
Platform: Mac
Make prototypes for: Websites & iOS/Android apps
The sketch is quite like Photoshop allowing you to edit and manipulate photos. It is a best prototyping tools for mobile apps. The vector shapes easily adapting to changing styles, sizes, and layouts. The vector-based workflow makes it easy to create beautiful and high-quality prototypes from start to finish. It has a broad choice of design symbols that can be reused and shared with the others.
Sketch is a vector-based design tool that allows you to create high-fidelity web/app prototypes and polish the interface details with ease. With simple geometric elements, color tools, Mac-like toolbar, you can learn it fast even when you’ve never used it before.
Moreover, as one of the most widely-used design tools for UI/UX designers, there are also many plugins created to improve your prototypes and streamline your design process.
For example, with iDoc plugin for Sketch, you can easily export your web/app designs and assets to iDoc for online previewing, commenting, collaborating and handoff.
Pros:
- Rich tools to create high-fidelity interfaces
- Offer useful collaboration feature, such as Sketch Cloud syncing and sharing
- Work well with Illustration assets
- Use its Symbol feature to design UI assets and elements for reuse
Cons:
- Mac only
- One device per license
- Not so good to create a fully interactive web/app prototype
- Limited collaboration features
So, it is good to create high-fidelity prototypes with simple animations at the very early design stage.
UX-App
This is another free WebUI mockup tool meant for designers who want something for rapid prototyping. Apart from adding stunning effects and events on your design, you can also invite your team to comment on it and share it via a link and export to PNG or HTML format.
The browser-based tool provides a free trial without any need to log in, while with $65, you will get a lifetime subscription.
PS – Create static prototypes with super details on Windows
Price: 7-day free trial; 239.88$ for a one-year license
Platform: Windows
Make prototypes for: Websites & iOS/Android apps
Adobe Photoshop, a professional pixel-based photo editing tool, is also another widely-used design tool for UI/UX designers to build web/app prototypes with super details. It offers many photo, video and photography editing tools, allowing you to draw out your web/app interface from very tiny layers.
Pros:
- Offer rich cutting-edge tools, such as drawing and typography tools
- Integrate with many famous image, video and design tools
- Support 3D design capacity
- Provide synced libraries and Cloud documents
Cons:
- A high learning curve
- No design collaboration feature
- Raw updates or untested Beta Versions
So, at the very early design stage, PS is perfect for you to create static prototypes, and present your design ideas to other team members, clients and stockholders.
Framer x – Create interactive, high-fidelity prototypes on Mac
Price: 14-day free trial; $12 for a one-month license
Platform: Mac
Make prototypes for: Mobiles & Websites
Framer x is a new prototyping tool that allows you to bring ideas into life. Prototyping and creating interactions are super easy. Moreover, what makes this tool special is that it allows you to write React components. So, if you are React fans, this tool is a good option.
Trusted by organizations like Airbnb and Dropbox, Framer is the solution for creating everything, starting from websites to mobile applications in MacOS. You can even make your own custom icons and finely tune them using a path editor and other Illustrator tools.
Pros:
- Provide an extensive component library
- Rich community support, like Dropbox, SnapChat, Twitter, etc
- Support 3D effects or momentums
- All component or prototype related codes can be directly used
Cons:
- Mac only
MockFlow – Create rough wireframes or sitemaps quickly online
Price: Free version: (1 project, 2 reviewers per project) ; $14 for a one-month license
Platform: Mac & Windows
Make prototypes for: Mobiles & Websites
MockFlow is an online wireframing tool that allows you to design and collaborate user interfaces and user flows easily. You can get access to thousands of pre-built components and layouts to make any web/app UIs quickly. It is ideal to create a raw sitemap or main structures of your web/app at the brainstorming stage.
Pros:
- A powerful pre-built component and layout library
- Support design online sharing, commenting and approving
- Integrate with many leading apps for better collaboration, like Slack, Trello, Confluence, etc
Cons:
- No way to add animations or interactions
Moqups – Create wireframe, diagrams and prototypes online
Price: 30-day free trial; $20 for a one-month license
Platform: Mac & Windows
Make prototypes for: Mobiles & Websites
Moqups is a web-based prototyping tool that helps you create wireframes, mockups, diagrams and prototypes, share and collaborate with your team in real-time.
Pros:
- A comprehensive library of widgets and smart-shapes
- A built-in library with hundreds of pre-designed icon
- Drag and drop elements to create your prototypes
- Rich font and styling options
- Organize your projects easily
- Integrate with tools, like Dropbox, Google Drive and Slack
Cons:
- Limited hotspots so that you cannot make fully interactive prototypes.
- There is a learning curve
- A little bit laggy for some users
Figma
If you are looking for a WebUI Mockup tool that does design as well as prototyping, Figma is the solution. It allows you to switch between prototyping and designing without any need to export or sync. Moreover, you can share the prototype with your teammates or stakeholders by just sending a link.
The basic plan is free with only 2 users and 3 projects. The professional plan starts from $12 per editor per month with unlimited access to all the features.
Adobe XD – Create simple, animated prototypes for webs/apps
Price: Free version(1 project, 2GB Cloud storage); $9.98 per month
Platform: Windows & Mac
Make prototypes for: Mobiles & Websites
Adobe XD is a UX prototyping tool that allows you to quickly create designs for your websites, mobile apps and voice interfaces without codes. It also supports collaborating with files and sharing in a view-only mode.
Pros:
- Minimal and easy-to-use interface
- Time-saving features like symbols and grids
- Allow you to link pages with drag-and-drop
- Work with plenty of plugins and app integration, like Photoshop
- Support simple voice interactions
- Free for Creative Cloud users
Cons:
- It helps making interactions between pages only
- No customized shapes to create your desired web/app interfaces
- No way to get CSS codes
So, it is best for you to create a simple, animated mobile app prototype for better design collaboration.
Fluid UI
This is another free wireframe tool that is popular across designers worldwide for offering a library consisting over 2000 web elements. It allows you to create page animations and interactive prototypes that will let you know how the real webpage will look and feel like. The tool is free to use with a limitation of one project and limited elements in the library. The premium version starting from $8.95 per month gives you access to more elements and animation effects.
Avocode
This is a WebUI Mockup tool that allows you to open or inspect any PSD, Sketch, or other design formats. It is supported by all operating system and enables you to share your designs with your colleagues in a secure and encrypted format.
After the free trial, the basic package starts from $14 per month billed annually for a single user.
Conclusion
Prototyping tools — we’ve all heard them and we’ve all probably used them at some stage in our careers. It’s difficult to work on mobile phone apps without a prototype. And while not everyone has 1 million dollars to spend on Axure (which is the number one wireframing and prototyping tool), there are many free mobile app prototyping tools available for us to play around with.