Fortunately there are a few awesome tools available that can\u00a0help app developers and designers brainstorm and communicate ideas visually, while also saving time.<\/p>\n
Here are our top 3 picks:<\/strong><\/h3>\n1. Proto.io<\/h2>\n
![\"Proto.io](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/03\/12180000\/Protoio-image.gif\")
<\/a><\/p>\nFirst\u00a0is\u00a0Proto.io<\/a>, which is frequently cited as one of the top\u00a0prototyping tools for mobile.<\/p>\nProto.io was one of the earliest tools optimized specifically for mobile. It supports a large collection of gestures and an equally large collection of built-in animations.<\/p>\n
Proto.io is one of the most comprehensive prototyping tools out there for mocking up an app. It has a drag-and-drop interface and an easy way to share finished projects with others by sending\u00a0a link.<\/p>\n
One drawback with this tool is that, while it does offer the option of\u00a0leaving comments for edits, it doesn\u2019t currently provide\u00a0an easy way to cross-collaborate or\u00a0allow\u00a0multiple people to work on one project. This may be an issue for remote teams working together on a single product.<\/p>\n
That limitation aside, Proto.io can be used as an effective way to translate your idea and simulate the app without coding. You can even export it to your device.<\/p>\n
2. InVision<\/h2>\n
![\"InVision](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/03\/12180000\/inVision-image.gif\")
<\/a><\/p>\nOur second mobile prototyping tool,\u00a0InVision<\/a>,\u00a0is super quick, easy, and made for collaboration.<\/p>\nMultiple users can edit files, and it has simple built-in methods for gathering feedback. Additionally, InVision provides version control, which really comes in handy as the project progresses.<\/p>\n
Unlike Proto.io, it is page-based and not layer-based. That\u00a0means with InVision, you don’t\u00a0have as much control as you do with Proto.io. InVision also does not have as robust of a library for replicating gestures and animation. However, for rapid prototyping and real-time collaboration, this tool works very well.<\/p>\n
With InVision, it\u2019s much easier for geographically-diverse teams to collaborate. And, importantly for boot-strapped startups, the company offers free accounts!<\/p>\n
3. Quartz Composer + Origami + Avocado<\/h2>\n
Quartz Composer<\/a>\u00a0is a node-based visual programming language that\u2019s provided along with the Apple Xcode development environment<\/a>. Using Quartz Composer for prototyping can support much more complex app mockups. Using a code-based method with Quartz Composer will allow you to go a step further in helping to translate the mobile UI for a developer.<\/p>\nTo aid in programmatically using Quartz Composer, Facebook added a collection of open-source libraries named\u00a0Origami<\/a>\u00a0to enhance the process. Ideo did the same with Avocado<\/a>.<\/p>\n![\"Facebook](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/03\/12180000\/Facebook-Origami.png\")
<\/a><\/p>\nImage: Origami by Facebook<\/a><\/em><\/p>\nThere is a bit of a learning curve with these tools. But, once you\u00a0get over the hump, using the combination of the three together can give you a fast, complete, and descriptive mockup of an app.<\/p>\n
With this method, you can make the app prototype reflect state-based interactions. For example, a user can press a button and then something will happen. You can even export code snippets for development.<\/p>\n
To learn more about using Quartz Composer + Origami + Avocado as a prototyping method, consider checking out the following tutorials:<\/p>\n
\n- Prototyping 101 – Quartz Composer<\/a><\/li>\n
- UI Prototyping with Quartz Composer and Origami<\/a><\/li>\n
- Quartz and Facebook Origami<\/a><\/li>\n
- Neat Effects, No Code Required<\/a><\/li>\n<\/ol>\n
Conclusion<\/h2>\n
Prototyping is an essential step\u00a0in the development of an app. Part of the challenge of creating a great prototype is knowing the right tool to use to get the job done most efficiently.<\/p>\n
Depending on your need, each of the three tools above can help you create a great mockup and bring you one step closer to being ready for development. And if none of those are\u00a0your cup of tea, check out a few others such as Pixate<\/a>, Justinmind<\/a>, Flinto<\/a>, or Fluid UI<\/a>.<\/p>\nBut remember, sometimes the best way to get started in the planning process of an app, is just to pull out pen and paper and start sketching<\/a>.<\/p>\n
<\/a><\/p>\nFirst\u00a0is\u00a0Proto.io<\/a>, which is frequently cited as one of the top\u00a0prototyping tools for mobile.<\/p>\n Proto.io was one of the earliest tools optimized specifically for mobile. It supports a large collection of gestures and an equally large collection of built-in animations.<\/p>\n Proto.io is one of the most comprehensive prototyping tools out there for mocking up an app. It has a drag-and-drop interface and an easy way to share finished projects with others by sending\u00a0a link.<\/p>\n One drawback with this tool is that, while it does offer the option of\u00a0leaving comments for edits, it doesn\u2019t currently provide\u00a0an easy way to cross-collaborate or\u00a0allow\u00a0multiple people to work on one project. This may be an issue for remote teams working together on a single product.<\/p>\n That limitation aside, Proto.io can be used as an effective way to translate your idea and simulate the app without coding. You can even export it to your device.<\/p>\n Our second mobile prototyping tool,\u00a0InVision<\/a>,\u00a0is super quick, easy, and made for collaboration.<\/p>\n Multiple users can edit files, and it has simple built-in methods for gathering feedback. Additionally, InVision provides version control, which really comes in handy as the project progresses.<\/p>\n Unlike Proto.io, it is page-based and not layer-based. That\u00a0means with InVision, you don’t\u00a0have as much control as you do with Proto.io. InVision also does not have as robust of a library for replicating gestures and animation. However, for rapid prototyping and real-time collaboration, this tool works very well.<\/p>\n With InVision, it\u2019s much easier for geographically-diverse teams to collaborate. And, importantly for boot-strapped startups, the company offers free accounts!<\/p>\n Quartz Composer<\/a>\u00a0is a node-based visual programming language that\u2019s provided along with the Apple Xcode development environment<\/a>. Using Quartz Composer for prototyping can support much more complex app mockups. Using a code-based method with Quartz Composer will allow you to go a step further in helping to translate the mobile UI for a developer.<\/p>\n To aid in programmatically using Quartz Composer, Facebook added a collection of open-source libraries named\u00a0Origami<\/a>\u00a0to enhance the process. Ideo did the same with Avocado<\/a>.<\/p>\n Image: Origami by Facebook<\/a><\/em><\/p>\n There is a bit of a learning curve with these tools. But, once you\u00a0get over the hump, using the combination of the three together can give you a fast, complete, and descriptive mockup of an app.<\/p>\n With this method, you can make the app prototype reflect state-based interactions. For example, a user can press a button and then something will happen. You can even export code snippets for development.<\/p>\n To learn more about using Quartz Composer + Origami + Avocado as a prototyping method, consider checking out the following tutorials:<\/p>\n Prototyping is an essential step\u00a0in the development of an app. Part of the challenge of creating a great prototype is knowing the right tool to use to get the job done most efficiently.<\/p>\n Depending on your need, each of the three tools above can help you create a great mockup and bring you one step closer to being ready for development. And if none of those are\u00a0your cup of tea, check out a few others such as Pixate<\/a>, Justinmind<\/a>, Flinto<\/a>, or Fluid UI<\/a>.<\/p>\n But remember, sometimes the best way to get started in the planning process of an app, is just to pull out pen and paper and start sketching<\/a>.<\/p>\n2. InVision<\/h2>\n
<\/a><\/p>\n3. Quartz Composer + Origami + Avocado<\/h2>\n
<\/a><\/p>\n\n
Conclusion<\/h2>\n