Secret weapon of app building: how to make a great prototype

Do you know the story of Pulse app? It is a newsfeed reader that became one of the 50 apps in Apple’s App Store Hall of Fame. The Pulse case is famous not because it was a university project that became a successful business, but because of the story of its amazingly user-friendly interface.

Two students of d.school (design school based at Stanford University), Ankit Gupta and Akshay Kothari, had enrolled in the LaunchPad class, where they were assigned a task to start a company from scratch and incorporate it within 10 weeks. They had no idea about mobile apps or entrepreneurship, but they decided to take the challenge. They spent long hours in the coffee shop, on the university campus, prototyping their app with post-it notes and colorful markers. Every time they made some changes, and they were doing them every few minutes, they were asking customers and pedestrians for their opinion, basing their improvements on their feedback.

“On any given day, we would make hundreds of small iterations,” Akshay summed up, “And I’m not exaggerating, we changed everything from interaction patterns to the size of a button.”

While it took few days, it definitely paid off since the very next year Pulse became one of TIME’s top 50 Apps of the year, and three years later was bought by LinkedIn for $90 million.

Design cycle

If you haven’t heard this story before, I hope it got you excited about endless possibilities of the mobile market. But I hope you also noticed the importance of prototyping. If they hadn’t started with making a mock-up, they would never have made such a great app. It would be just as good as their intuition, and that is usually not enough.

So how to make a great prototype? Is just as easy as you saw. Take a piece of paper, pencil, some post-its and start drawing. Your sketch doesn’t have to be good looking or detailed, just keep proportions right to make sure everything matches. You can make a few scaled rectangles first, to imitate a smartphone screen.

After you finish, show it to someone. Don’t explain anything, just tell them what is the purpose of your app (e.g., newsreader), and leave them to see how they experience it. Their behavior will be your best source of feedback, for things such as where they look for features, is the app intuitive, and if there is too much clicking or it is easy to navigate. Then it is time for the next cycle of improvements and feedback.

At this stage it is important to make your prototype cheap both in terms of time and resources, so we recommend you to stick to paper and pencil. But there is one more thing. Nick Pettit, from Tree House, put it great, “The less time I spend on an idea, the less attached I’ll be; this is good in the early phases because I don’t want to settle too soon.”

Advanced tools

When your basic prototype is ready, it is time for the next step. At this point, you can either start developing your app or make a more detailed mock-up, using some of the web based tools. They vary a lot. From advanced to simple, from pro to amateur, and from cheap to expensive and time-consuming. There is no right tool for everybody. Obviously, you will need a different one for a few-screens app and for a new social media client, as well as different for your own use, and your Venture Capital pitch.

Check out the reviews below, made by Mashable, to find the one that fits you best.

1. Balsamiq Mockups

Perhaps one of the most well-known and popular mockup tools, Balsamiq Mockups is a cloud-based mockup service (with accompanying desktop application) that enables you to quickly and easily create fun and interactive website mockups. With its trademark sketchy, hand-drawn look, Balsamiq Mockups lets you focus on solving larger UI problems rather than obsessing over the details.

The application comes with a huge collection of drop-in components and reusable libraries, and an easy drag-and-drop interface. Since it is cross-platform and has full offline support, you can create mockups anywhere.

Pricing for the desktop application starts at $79 for a single-user license, but a 50% discount is available when you sign up for a monthly subscription to myBalsamiq (plans start at $12 per month).

2. Mockingbird

Mockingbird is another popular web-based wireframing application, with some great functionality baked in for linking and sharing your mockups. Designed for rapid prototyping, Mockingbird lets you create interfaces quickly with the drag-and-drop editor, either alone or in collaboration with a team.

By linking pages together, you can then create interactive mockups and wireframes — perfect for sharing with your clients, reviewing workflow and streamlining your user experience.

Mockingbird subscription plans start at just $9 per month for a personal account (which allows you to have two active projects), and team plans range from $20 to $85 per month, depending on the number of projects.

3. Mockup Builder

Mockup Builder is a free web application built in Microsoft Silverlight that is designed to let you create software and website mockups, and then easily share them with clients or coworkers.

The library of available elements is diverse (supporting desktop, browser, iOS and Android components) but limited in quantity. For a free tool, however, Mockup Builder certainly has its bases covered and offers a great starting point for prototyping simple ideas and concepts.

When you’re ready to share your mockup, projects can be exported as both PNG and PDF files or shared directly. Those with access can then leave feedback and comments on the project.

4. MockFlow

MockFlow is a “super-easy wireframing” service that enables you to create and collaborate on complex interactive wireframes and UI prototypes for your websites and applications.

As with Balsamiq, MockFlow includes a cross-platform desktop application (powered by Adobe Air), so you can build your UI concepts in a streamlined, clutter-free environment with full offline support. MockFlow also includes a free mobile application that is perfect for presenting prototypes to clients and accessing your mockups on the fly. A number of other add-ons are also available.

MockFlow has two pricing options — a free plan that gets you one small project (four pages) with two collaborators, and a Premium package at $99 per year for unlimited projects, several add-ons and a few additional perks. With a price point at under $100 annually for the premium account, Mockflow is one of the more affordable professional solutions.

5. HotGloo

With more than 26,000 projects created, HotGloo is another wireframing and website mockup tool that’s been around for quite a while. This web application sports a large library of components, a feature-rich, drag-and-drop interface and tools for both collaboration and review.

The service has one of the more polished web-based authoring environments we’ve seen, making this application a pleasure to use. With HotGloo, you’ll be able to create entire user interactions – you can design, test, revise and review your complete application workflow. Other tools include the ability to create master templates (which can be applied across an entire project), smart element stacks for organizing your UI, and role-based access for authors and clients.

HotGloo’s pricing plans range from $14 to $54 per month, with a 15-day free trial for new accounts.

6. Invision

Invision is another online tool aimed at helping you design, share and test your user experience. More than just wireframes, Invision lets you create fully featured and highly interactive mockups with as much polish as you want to put into them. Great collaboration tools make it easy to share projects and work together as a team, and mobile support is quite good.

Whether you’re creating high-fidelity prototypes or interactive wireframes, Invision makes authoring and sharing projects easy. The wireframing tools include a large element library, and more detailed mockups give you complete control over images, colors, and layout via a streamlined and clean editing environment.

Invision boasts a network of more than 30,000 designers, including some big-name companies. Subscription plans range from free (for up to two projects) to $75 per month for up to 20 active projects. There’s also a 30-day free trial on all accounts.

7. JustProto

JustProto is a wireframing web application with a few features we haven’t seen in other products. Like many similar offerings, JustProto has a large library of wireframe elements and widgets, accessible via a simple drag-and-drop interface. However, there are a few other key features that set JustProto apart from the crowd.

Not only can you share projects via a single share link, JustProto also enables you to collaborate in real-time with other designers, chat with clients and collaborators, and keep a history of all chat communication. With JustProto, you can create fully featured, interactive wireframes in real-time and then gather instant feedback.

JustProto plans range from $19 to $99 per month, with custom packages available for large-scale and enterprise customers. A free 15-day trial period is provided, and there’s no credit card required to sign-up.

8. Proto.io

Proto.io is an application prototyping platform designed specifically for prototyping mobile applications. This web app helps you to create mobile mockups with ease for iPhone, iPad, Android and a number of other devices. Proto.io gives you full control over colors, fonts and layout, and it comes with a large element library to make building rich prototypes easier.

Proto.io also lets you share projects and collaborate with other designers. Proto.io mockups can be viewed directly on your mobile device, giving you a better feel for how your application will look and function in a real-world setting, or you can view projects via the Proto.io web player.

There’s a free plan available that is good for one small (five screen) project, and paid subscriptions are $24 and $49 per month, with fairly generous offerings on disk quota, screens, collaborators and other resources.

9. inPresso Screens

Last, but not least, inPresso Screens is a prototyping tool for both desktop software and websites. One of the things we like about inPresso is the ability to skin applications using popular window manager themes from a variety of operating systems. This is great if you’re mocking up a desktop application and you need to get a real feel for what the final product will look like.

inPresso is available as a free desktop application or via subscription, with some pretty important distinctions between the two. The free version gives you a desktop tool for authoring application prototypes and wireframes, which can be saved and edited locally. In addition to the base tools, the subscription package also allows access to an online library of UI elements, and enables instant online publication and sharing of your prototypes as well as a web player for presenting prototypes to your clients.

The desktop application itself is cross-platform and annual subscriptions are only $29 per year.

Conclusion

Prototyping takes time, but it is definitely worth it. Not only because it helps you to design a greater user experience, but also because it paradoxically saves a lot of time. Just imagine that after hours of coding, you suddenly realize that the app is completely counter-intuitive, or just in the middle of the process, you notice that there is no room for some buttons or features. Obviously you can continue, but in order to make a great app, you will need to start from the beginning.

But there is one more thing. Even when you use such simple software as Mobincube, first steps might be overwhelming. In order to make this process easier, prepare yourself a plan to follow. You will not only save a lot of time and energy, but also have more fun, doing one thing at a time.

Please, let me know your thoughts about prototyping in comments below.