App and web wireframing doesn’t have to be tough, especially when you pick the right prototyping tools for the job.
Wireframing tools: there’s a whole bunch of them on the market. From browser-based freeware to powerful enterprise-focused tools, there is an almost overwhelming number of ways you can build wireframes for both web and apps.
What are wireframing tools for?
Real nuts and bolts explanation – wireframing and prototyping tools mean you can build a prototype of an app or website, before writing code. They’re mostly online programs or desktop apps, designed both for collaborative and individual projects, and have all the features you find in real-life software, without the coded functionality. So you can build a web or app prototype in high or low fidelity and use it to run usability tests, sweet talk stakeholders or get your internal team members all on the same page. You’re halfway to a successful product before coding – pretty neat!
How to pick the right wireframing tool
But selecting the right wireframing or prototyping tool can often be the first step to producing an awesome product, so choosing wisely is a must. Of course, the type of tool depends on what kind of project you’re working on, but there are some basic rules that can applied across the board to ensuring you get the right one – prototype objectives, audience and available resources, for starters.
Check out this blog post on How to pick the best wireframing tool.
What tools are out there?
Obviously, you’re not the first designer and would-be prototyper to agonize about how to pick the right tool for app or web wireframes. Luckily, help is at hand: Emily Schwartzman, Interaction Designer at Cooper, has built an interactive list of the best app and web wireframing tools available right now, with detailed information on the strengths and weaknesses of each. Emily does a bang-up job of evaluating the key features of each tool – speed, fidelity, support, user testing potential etc, and the filter-sort potential of the list means you can also use it as a wireframing toolfinder, according to the features you need.
Doubtless, the stand-out quality of the Cooper list is the detail – clicking on each tool will take you to a review by a long-standing designer, who walks though the pros and cons of building web or app wireframes with each technology, as well as the cost and learning curve.
A few examples
You want a prototyping tool that builds lo-fi wireframes and hi-fi prototypes for all devices, allows team collaboration and conditional logic, plus animation and a range of UI elements…
Justinmind is a pretty holistic solution to prototyping needs, whether you’re aiming for simple click-through wireframes or a full-on interactive prototype that can be tested on all devices with animation and teamwork features. It’s also designed for enterprise software creation, with tons of requirements management potential.
You want to build to a quick and dirty prototype for iOS, and you’ve already got a bunch of UI mockups in Photoshop…
Flinto Lite might be a good tool to start with – it’s fast, easy to edit screens and you can share your click-through prototypes with the team. It doesn’t go beyond iOS and you’ve got limited control in a number of features, but if you’re looking for something speedy and device/OS specific, Flinto Lite could work.
Cooper’s Wireframing Tools List – the takeaway
If you want to find out how Emily winnowed down the prototyping tools, plus her evaluation criteria, you can find all this information in “Designer’s Toolkit: Road Testing Prototype Tools”.
The Cooper list is a great jumping off point if you or your team want to prototype an app or website, and are unsure about which wireframing tool is right for you. They’ve got you covered, no matter what your workflow and project objectives – so get prototyping!