MENU
ShareShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someone

prototype

Mobile App Prototyping Tools

Prototypes are not the final product but a simulation or a sample of the original that can differ from one stage of the product life cycle to another. Application prototyping for mobile devices refer to creating such models that will have all the features of the final app. Starting from conceptualizing to final product development, prototyping recurs time and again to make sure that the final product is exactly what as desired. This saves a lot of time and cost for the company and smooth-ens the process of final application development.

The prototype of the app will be treated as a base for future apps. You can research on new alternatives that will improve its functionality prior to its final development. With state-of-the-art mobile app prototyping tool you can receive valuable feedback from the users even before launching the actual app.

The basic steps that mobile app developers follow for working on the prototype are quite simple. You have to identify the basic requirements including the input and output data you would need. The next step would be to create the initial prototype. Once this is done, it is time to review it and this often is done by end-users/clients. On the basis of their feedback, additions or deletions are done and after making changes the final app is developed.

Developing the prototype for mobile app is a creative and ingenious process. It doesn’t involve any kind of coding. But, you will have to put your creativity into maximum use in translating your ideas to useful and attractive features. This would, in turn, help the business to streamline its process and software experience and translate it in to desired mobile and web experience. With the help of GUI, useful connections, associations, pagination, user experience and user interactions the app can keep the end users hooked to the app.

The factors like the purpose of the app, the amount of time and resource you have and definitely the features decide which mobile app prototyping tool you are going to use for your purpose. Following are some categories we have come up with that you may use as a guide.

Online Tools

Marvel: This web-based prototyping tool for mobile and web needs no coding skill to work with. It has a simple interface that lets you add image from a lot of source including your Dropbox. Editing the features is also quite simple. It also has lots of tools for setting up, adding members to your team, preview, share etc.
Pros: Working with sketches, images are real fun.
Cons: Too simplistic and the free version has limited features to play with.

Fluid UI: This tool scores high because of its easy-to-understand design. It gives you a number of options when it comes to conceptualizing the features of the app. There are separate wireframes available for creating prototypes for iOS and Android platforms. There are two versions of this app. With the free version you can create ten screens. If you need more flexibility, you can get the paid version. The prototype can also be tested on iOS and Android platforms by scanning its QR code.
Pros: Excellent tool to start a prototype from scratch.
Cons: Cannot upload multiple images together and will have to upload each mock-up one by one.

Feature-Rich Tools

InVision: InVision is preferred by professionals as prototyping tools because of its feature-rich quality. You can work on a single app or multiple apps, forming separate teams. In the free version you can work on a single app, but if you use the paid version you can work on up to 100 projects at the same time. You need to build the basic design and for that InVision needs to be used along with another tool like Sketch. The prototype can also be tested to a certain extent in simulated environments. Anchor links, transitions, scrolling and hover states are some of the popular interactions available with this tool.
Pros: Version controlling helps you switch between several rounds of design.
Cons: You can only see one page on the browser and when you have many images, it becomes a bit difficult to visualize the complete picture.

UXPin: You have access to a large number of elements and templates. You can use it along with Sketch or Photoshop and the modifications made in these programs can be pulled in to your UXPin prototype. It is ideal for complex desktop and mobile interactions. In spite of attractive features like real-time viewing and comments, its performance isn’t as smooth as pros would love and so its adoption is not extensive.
Pros: The best interface and quite easy and quick to work with.
Cons: Limited customer support and lack of features on free trial keep many developers away from it.

Proto.io: Interactive to a great extent, Proto.io can give you access to animations and lets you use its drag-and-drop UI. The result can be very close to the final product. It can be viewed online as well as through iOS and Android players. With this you can view multiple screens in a single project. It is also possible to create transitions between the screens.
Pros: Great interactions and animations.
Cons: No option of live preview and more interactions make the animations slow. Also, takes quite long to create a prototype from scratch.

GameSalad: GameSalad Creator is what you need to build a perfect prototype of games that can run on both mobile devices and web platforms. With this tool you can also publish and distribute games.
Pros: Quite easy to learn and work with.
Cons: Developers find the features to be restrictive.

For beginners and non-technical users

Keynote: For non-technical users, Keynote is highly popular as it does great while presenting the design. If you are looking for quick product testing with easy-to-use features, then Keynote is a good choice.
Pros: Great features including gestural control, animated transitions and editing.
Cons: The process of sharing is not very user friendly.

What professionals prefer

Antetype: Not only can you create and re-use widgets, you can choose from around 400 widgets as well. A free trial of thirty days is available. Better than FluidUI in many ways, Antetype is available only for Mac users. It is also simple and intuitive in nature. After you begin using the paid version of the tool you can download the additional features for iOS, Android and Windows platforms.
Pros: Great visual design based tool
Cons: Alas! The price!

JustinMind: While Axure has limited mobile interactions for designing a prototype, Justin Mind makes up for it as a better version of Axure. There are design templates that can be used for creating the prototype. It’s still new in the scene, so there are not many takers for it. Complex mobile interactions can be designed on it, including a preview on the device.
Pros: Ample number of features to keep you attached to it.
Cons: Learning will take some time!

Framer.JS: This is pure JavaScript coding domain and a favorite with programmers. Designers, though, will feel less comfortable with this. Every interaction needs to be coded. There is no place for dragging and dropping or using templates. It opens a huge possibility with coding to introduce a lot of features.
Pros: Loads of features for you, if you know coding.
Cons: Learning curve for new users will be quite steep.

Other noteworthy tools

ProtoShare: Collaboration, real time prototyping and team work is possible in ProtoShare, the first cloud-based tool in the market. You can use the thirty-day trial offer and see if it suits your purpose.
Pros: You can insert your customized drop-in components.
Cons: Runs slowly because of JavaScript.

Bizness Apps: Another simple and cost effective prototyping tool, Bizness Apps can help you in creating apps for Android and iOS platforms. There are design templates available. Leave the choice of design to those who are about to use or sell the app.
Pros: Loaded with templates.
Cons: Lack of drag-and-drop feature keeps many developers away.

Form: If your prototype needs to use the mobile device’s camera or sensors, and visual programming is of great consequence, then Form is ideal for you. It is comparatively new and is often taken to be the easier version of Facebook’s Origami. If you’re good with grouping patches and still clear with the bigger picture, then Form is for you.
Pros: Live simulation and good support
Cons: Not easy to learn and cannot preview on desktops (only on mobile devices).

Another popular differentiation is done on the basis of page- and layer-based prototyping tools. Page-based tools are a good option when the design is still unclear in your mind. In this, different screens are laid out which are then connected with the help of hotspots. There are options for page transitions as well. Some of the page-based tools may also have certain amount of animations but it’s limited. Examples are Fluid, InVision, Mockup.io, Red Pen, Briefs, Keynotopia, among others.

Layer-based tools include Origami, Form, Proto.io, Framer, etc. These require comparatively lesser investment than Axure or Studio, etc. which are also examples of layer-based tools. In this, the level of interaction and user interface is higher. There is also greater amount of animation. Layers can be animated with these complex tools. This is what makes it different than page-based ones.

We have discussed quite a few useful and beneficial mobile app prototyping tools. Read well and think what purpose you want your prototype to serve. This should be able to help you in picking one or more tools for different stages of prototyping.

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *