What bridges your bright idea and the actual product is prototyping. Not a single great product was created from the first attempt. What may sound great in words may also look quite terrible on paper (or in design), especially when it comes to information architecture and navigation. By creating a mockup first, you can easily identify all the workflow dead-ends and bottlenecks before investing too much time or money into actual development.
To minimize such costs and risks, here are five great prototyping tools that seasoned designers and non-coding product owners will enjoy using equally.
PowerMockup
Why should you bother with adopting another tool when you can power up an existing one? That’s what PowerMockup does. It’s a handy Microsoft PowerPoint add-in that turns the app into a full-feature prototyping tool. It adds a library pane to the original application, thus offering you quick access to all the included wireframe and mockup shapes to use for quick prototyping. Drag and drop the elements onto the slide to create your mockup and upload custom ones if you feel limited.
PowerMockup is great to use for creating storyboards as you can just flip from one slide to another to demonstrate the flow between screens. Collaboration and prototype sharing gets easy as pretty much everyone has Microsoft PowerPoint installed. Besides, your non-coding partners will appreciate the easiness of adding new elements and making tweaks or suggestions. In addition, you can export your files in any format available in PowerPoint (JPEG, EMF, MP4, WMV, PDF, and more).
NinjaMock
NinjaMock is a web-based prototyping tool crafted primarily for mobile app design. You can immediately choose to use the common dimensions for iOS, Android, or Windows Phone, along with a special toolbox containing the stencils you’ll need for the platform. The app has plenty of icons to choose from for faster design, plus you can always upload your custom elements or images from the web.
This tool has a powerful vector editor with plentiful tools available for drawing vector graphics and custom elements. The interface is intuitive, non-distractive, and easy-to-use. In addition, you can add active links to each element of your design to highlight the clickable app elements. Sharing prototypes is easy as well – the app will host your design and generate a private link you can send to anyone. Besides, you can restrict sharing to only a specific part of your wireframe project so your clients will not see the sections still in progress.
Marvel
Do you love highly visual tools? Than you should love Marvel, a web-based mobile app prototyping tool that makes the whole process dead simple. Simply upload all your image files and start adding specific gestures and transitions. You can choose from 17 different device templates when creating your prototypes to make sure your design will look good on specific devices. You can also resize images and change backgrounds; however, there aren’t many other editing options available.
Marvel compensates for this with another great feature: the mobile companion app. If you love sketching your designs longhand, you can use this app to turn your drawings into prototypes by snapping a picture. Your photos are automatically added to your account, allowing you to experiment with the design before crafting a single layout in Photoshop.
Pixate
Pixate is another web-based prototyping tool backed up by Google. It’s simple, powerful, and free to use; however, you are expected to pay $5 per user if you want to share your prototypes with others.
With this tool, you can easily create interface layouts and individual animations via drag and drop. You can also simulate tactile interactions with these elements through a pre-configured option set (including tap, double tap, and drag). Once you are satisfied with your sketch, with one click you can send it to an Android or iOS device to test drive it.
Codiqa
Last but not least comes Codiqa, the tool to choose for HTML5 mobile apps and websites. The app interface immediately allows you to choose the right size for your prototype (numerous options available both for Android and iOS devices), as well as view how your design will look when rotated and drag and drop all the elements you need onto the canvas. You can set the elements to be flexible or static in size depending on your needs, making it easy enough to preview the interface at different sizes.
Codiqa also allows you to include multiple pages in your prototype and easily switch between them when presenting to a customer. Once done, you can load your prototype onto any device in one click or try it out in a browser. To collaborate on a project, simply share an auto-generated link to the prototype or send a QR code to access it.