Lately, I have had a lot of discussions about UI and UX. Nobody has complained about this, so I presume we are reaching a point where everyone involved with app development recognizes the importance of UI and UX.
A great app idea is so easily ruined by a poorly thought out interface and experience. And with many tools now available for rapid wireframing and prototyping, there shouldn't be any reason not to execute a brilliant experience.
Although the terms are often used together, there is a clear distinction between a wireframe and a prototype.
A wireframe is a skeletal, bare-bones layout of your app's structure. It is usually done without any color - simple black and white - and while a wireframe shows where text, images, and other design elements will go, it doesn't include actual images, text, etc. However, each of the wireframe elements is shown at true scale. The reason for this is that wireframes are meant to focus your attention on the structure, not the actual design. Much like the blueprints for a house or building: you get a clear idea of the structure and placement of everything, without being distracted by the design.
Prototypes fall between wireframes and a fully functional app. The most important part of a prototype is the use of animation, which allows you to examine how your app will respond to user interaction, and page or screen transitions. Prototypes can also include actual images, icon sets, and text, but this is determined by the purpose of the prototype. If you're only testing out interactions and screen flow, you can create a prototype that only includes animations and maybe a bit of color. If you're trying to validate your idea, or pitching to potential investors, you want your prototype to be more polished, using proper images, text, etc.
Although the tools I've included in this roundup make it easier to create prototypes, including more elements over and above animation and a splash of colour mean you need more time to make any changes to the prototype.
1. Balsamiq
If you're only interested in putting together a wireframe of your app idea, then Balsamiq is the tool for you. Available as both a desktop and web application, Balsamiq has been around since 2008.
Wireframes are meant to require very little effort and time, so Balsamiq is designed to help you create you wireframes quickly. Simply add the basic elements you need, then resize, position, and customise as needed. The wireframes you create with Balsamiq will look a little rough, but that is intentional. The creative team behind the tool believe that a wireframe that looks more like a sketch encourages brainstorming. Which is a big reason for wireframing in the first place.
Simple version control will help you keep track of where you started, and where you are now. And just because this is a wireframe doesn't mean you can't get input from potential users/clients. You can't create a fully interactive prototype using Balsamiq, but you can link the screens/pages you create to generate a simple click-through prototype. No animations or interactions: the purpose is solely to demonstrate flow.
And if Balsamiq seems a little too limited, you can always add any of the community created extensions, templates, and icon packs.
Balsamiq is available as a desktop app , priced at $89 /user, a web based app starting at $12 /mo, or a Google Drive linked app, priced at $5 /user/mo. But you can start out with a free trial first, to see if it is the right tool for you.
2. WireframePro
Although a MockFlow license includes access to eight different apps, it is WireframePro that you would be interested in as you start developing your own app. Again it is a web based app, with a drag and drop interface to effortlessly create a wireframe.
It comes with all the standard UI elements, along with a multitude of other components you may need, including a selection for Apple and Android smartwatches. The app also gives you access to the Mock Store, which offers a large selection of 3rd-party templates that you can either use for inspiration, or as a quick starting point for your own wireframe.
As with all the tools listed here, WireframePro is designed for individuals and teams, with collaboration tools built right in. A nice inclusion is the ability to automatically generate specs for each element, so if you are not doing the design work yourself, your designer will have easy access to all design related details.
Finally, when sharing any of your projects, you are able to assign rights, limiting some people to only being able to view and comment on a project, while others would also be able to edit it.
WireframePro does not have any free plans , but you can try it out for 30-days before switching to a paid plan. Licenses start at $19 /mo for one user, and $39 /mo for up to three team members.
3. UXPin
As the name suggests, the team behind UXPin emphasise UX. Nothing wrong with that, wireframing and prototyping is meant to help you refine your app's UX. With UXPin, you can take care of both wireframing and prototyping, so no need to switch tools.
As you would expect, UXPin supports Sketch source files and Photoshop files. But it also has a built in editor that supports CSS code snippets, allowing you to customise any element used in your wireframe and prototype. And UXPin makes it super easy to keep track of each iteration of every file you add or create, so you won't have to click through dozens of files looking for the original version.
Creating basic wireframes and prototypes is fast and easy, with all the standard prototype interactions available. Naturally, you can still create custom interactions if the need arises. And once your prototype is ready, you can send it off to anyone for testing, with all interactions being captured on video, along with audio of each tester's comments.
UXPin supports wireframing and prototyping of websites, mobile apps, and web apps, and comes with 14 breakpoints pre-set, allowing you to easily view your design on multiple devices. Pricing starts at $19 /mo for the basic plan , and $29 /mo to unlock advanced features.
4. Prott
Although Prott is branded as a prototyping tool, it does include a wireframing feature too. If your app idea is little more than roughly drawn sketches, you can photograph your sketches and import them directly into the app. These sketches can then be animated, or used as the foundation for your wireframe. Drag and drop pre-set shapes and UI elements directly onto your sketch to instantly go from shaky lines, to professional lo-fi wireframe.
Prott includes a large number of UI kits for a variety of devices, from iOS through to Android and web. But you can also create your own library of interface elements.
Instead of just sharing your prototype with other people, you can now even include a detailed map that clearly shows the structure of your app. And anyone you share your prototype with can comment directly on each screen, so it is easier for you to understand what their comments relate to.
Prott offers a full-featured 30-day trial , with a free plan having no limits other than the number of projects you can create. If you need to create more projects, you can switch to a Starter or Pro plan, priced from $19 /mo.
5. InVision
InVision is exclusively for prototyping , but with support for a variety of uses. With InVision you can rapidly create interactive prototypes of your website, web app, or mobile app, and then view the prototype on actual devices. And this includes tablets and wearables, not just mobile phones.
The process is as simple as:
- Add your design assets (InVision supports GIFs, PNGs, JPEGs, PSDs, and Sketch source files) via drag and drop, or by syncing with Dropbox.
- Draw hotspots on each asset, and set them to link to other assets, external URLs, or anchors.
- Add interactivity in the form of gestures (taps or swipes), fixed areas (menu bar, etc.), and transitions.
Once done, you can view the project on your phone, tablet or computer, or even SMS or email a link to friends and colleagues. This makes it easier for you to involve other people in the design process, with anyone you send a link to able to comment on each design.
Pricing for InVision starts at no cost for one prototype, $25 /mo for unlimited prototypes, and $99 /mo for teams of up to 5 members.
6. Marvel
Like InVision, the Marvel app is for prototyping. It includes standard support for Sketch and Photoshop files, or you can use their built-in Canvas design tool. Marvel also has an iOS and Android app that allows you to photograph your own doodles and designs, and upload them directly into your Marvel library.
It is easy to create hotspots on your designs, with dozens of interactions and screen transitions available to bring your prototype to life. And you can test your prototype on a multitude of screens, including Apple Watch.
Of course, no prototyping tool is worth discussing if it doesn't include collaboration. And with Marvel you can annotate your prototype to highlight specific areas you want people to comment on. Comments can be made by anyone you send your prototype to, without the need for them to first create a Marvel account.
Pricing on Marvel starts at $0 /mo for one user and up to two projects, but with limited features. For $14 /mo you get unlimited projects, and all features, with separate pricing for teams and enterprise clients.
7. Proto.io
Proto.io is a popular prototyping tool that received a massive update in 2016. Proto.io includes all the features required in a prototyping tool, but the update has also brought a slew of simplified features.
Along with a redesigned UI that makes all the core features more accessible, Proto.io has also put a lot of emphasis on animation. Motion is an important feature of mobile apps, and Proto.io's State Transitions feature makes it easy for anyone to create and customise animations in their prototype.
Proto.io has also introduced an interaction design patterns library, making the addition of interactions effortless. These patterns include interactions such as slide-in menus, and pull to refresh. All you have to do is add an interaction to your project, and customise it.
The new version of Proto.io extends your ability to have users test and comment on your prototype. It integrates with user testing platforms such as Validately and UserTesting, giving you access to a larger pool of real users. And with Lookback integration, you get unlimited recordings - on iOS only, for now - showing you how users are interacting and navigating through your app.
Proto.io offers a full-featured 15-day trial , after which you can switch to a very limited free account. Paid plans start at $29 /mo, depending on the size of your team.
Conclusion
When you're just getting started in app development, you may want to create both wireframes and prototypes of your app idea. But as you become more comfortable with the development process you can consider just doing one or the other.
Because wireframes are so basic in design, they force you to focus on getting the flow and user-experience right. Prototypes can help you refine both flow and UX, highlight any design flaws, and more importantly, look better than wireframes if you need to present to clients or investors. And while it might be tempting to settle for a tool that combines both wireframing and prototyping, the deciding factor should always be which tool includes all the features you actually need, and is most comfortable to use. And since each of the tools listed here offer a free plan or trial, why not spend a day testing them all out before making a decision?