Line25

Useful Prototyping Tools and Good Practices to Follow

Read the full post

Add to Flipboard Magazine.

Prototyping encourages design review, feedback, and validation activity as well as encouraging teamwork and active stakeholder participation.

The ability to simulate an end product in significant detail generally results in a higher quality product that can be produced in less time than traditional design approaches allow.

Prototyping’s benefits, combined with the use of the best tools and practices, practically guarantees a successful outcome.

1

Three Good Practices

  • The Importance of Using Real Content –Avoid the temptation to wait until the end of the prototyping exercise to add real content. Content needs to fit into the overall scheme just as does any other design element. Real content, as opposed to “Loremipsum” placeholder copy, adds meaning to a mockup no matter what the prototyping stage may be, and it is particularly helpful whenever a mockup is to be shared with a client for review and feedback.
  • Test a Prototype Early and Often –Test early and test often, including testing for usability. One of the major benefits of a prototype is it enables testing to be conducted at any time. Early testing can uncover errors or omissions or highlight problem areas that can be quickly addressed, and in most cases can be quickly corrected or resolved. Test for usability throughout, and test on real people as the mockup nears completion.
  • Don’t Forget User Flows –A user flow represents a path a user will follow when navigating a website or app to complete a task. Sketch out user flows ahead of time. There may be one or two or many, depending on the nature of your site. When the flows are incorporated into initial prototypes (lo-fi prototypes), they can then be tested. Defining user flows early on and testing them repeatedly helps to ensure a smooth and streamlined user experience.

Introducing 5 of the Best Tools

Each of these five tools has its unique set of features, and each has its strong points. They represent the best on the market, although your eventual choice will be dependent on you or your team’s needs or requirements. Whichever one of these you choose will serve you well.

Proto.io

2

This web-based application is an excellent choice for anyone who is responsible for designing and prototyping mobile apps, whether that person is an individual contributor responsible only to a client, or a member of a team. Proto.io is packed with features designed to produce extremely realistic, interactive prototypes without having to resort to a single line of code. Features include a large library of UI elements, to which you can add your own, as well as functionality to support gestures and transitions, including, swipe, pinch, pan, touch, tap, and tap hold.

Proto.io’s user base is indeed a large one, and one that includes a number of famous brand companies that use this tool to create realistic prototypes before choosing to invest their resources in actual app development efforts. Just as these companies have discovered, you will also discover that this prototyping tool is a genuine time and money saver, and one that will enable you to create higher quality apps for less.

Pidoco

3

If you would like to take a quick tour of what Pidoco can do for you, add visiting their website to your to-do list. You will be treated to a demonstration that demonstrates how quickly and easily a working wireframe mockup can be created. 400+ interactive elements and icons are at your disposal, as are functionality supporting mouse, keyboard, and touch gestures in your mockup. In addition, sharing prototypes, design notes and comments is a snap thanks to this tool excellent collaboration features, which include issue tracking, comment collection, screen editing provisions, and most importantly, prototype version control.

Test-driving your prototype on an iOS or Android device, or on a web browser is a simple task as well. Constructing your prototype and running it on a device can be done without any need for downloading or installing code.

InVision

4

Transforming static screens into clickable, interactive prototypes without resorting to a single line of code should be a simple task. And when your prototyping not only does that, but allows you to easily share those prototypes with team members and project stakeholders for real-time collaboration—all the while maintaining version control—you have what’s rightly called the world’s most powerful design prototyping tool: InVision.

InVision’s presentation tool, LiveShare, makes that real-time collaboration and rapid prototyping a reality. But to achieve rapid prototyping objectives, workflow bottlenecks have to be avoided—or at least minimized. This powerful tool achieves that by creating to-do lists from team members or client feedback, while at the same time maintaining total version control over a rapidly evolving prototype. InVision will make a worthy addition to your design toolkit.

HotGloo

5

One of HotGloo’s key benefits is the manner in which it promotes co-simultaneous design workflow among team members, clients, or other stakeholders. This due to the fact that this rapid prototyping tool is web-based. There is no need to upload or download the latest versions from a server. Stakeholders can review design changes and provide feedback in real time, and team members can work together on certain aspects of a design in real time as well. HotGloo offers an ideal solution whether you are building an app or a large and complex eCommerce web store.

PowerMockup

6

Those who have PowerPoint and are familiar with its many uses will find PowerMockup an extremely valuable prototyping tool to have on hand. PowerMockup is a Microsoft PowerPoint add-on, and as such it capitalizes on PowerPoint’s many useful and powerful features such as slideshow, animation, and an ability to create a mockup within Microsoft Word. This tool is extremely intuitive and easy to use. If you are a PowerPoint user, or are thinking of becoming one, downloading a free trial version of this prototyping tool would be well worth considering.

Some Final Thoughts on Best Tools and Practices

Prototyping can get a project off to a fast start. Its highly iterative nature makes resolving design issues a relatively quick an easy task when a given tool’s collaboration features are brought into play. The same can be said for the project management features that are found in the best prototyping tools, such as the one described here. Since design errors or omissions can be caught early on, prototyping tools quickly pay for themselves in terms of savings of time and money. Using a tool that best meets your requirements, together with following best practices in using that tool, not only encourages teamwork, but is also a key to almost certain success.


  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

1 Comment

  1. Anne says:

    Mockplus is also a practical and useful prototyping tool. It is new and looks promising.

Leave a response