How do you know which prototyping or wireframing tool is right for you and your project? Easy! By running through these 7 steps, from defining your design context to tool integration, fidelity and pricing plans.
As the number of high quality prototyping and wireframing tools on the market increases, finding the right tool for your design needs can seem like mission impossible. With so many competing factors in the mix, including team dynamic, tool integration, timeframes and project objectives, less-experienced prototypers (and perhaps even those more experienced) run the risk of sticking with the wrong tool just because it’s the one they’re most comfortable with. But by considering these 7 factors all designers will be able to choose the best wireframing and prototyping tool for the job in hand.
What are wireframing tools?
Let’s go back to basics here. Wireframing and prototyping tools are desktop apps or online programs that allow you to mockup a website or app idea without getting on to coding. You can simulate how your web or mobile app will work and even test it on users. You can also use wireframes with your internal team to play with ideas, and can present prototypes to potential clients or existing stakeholders. In a nutshell, wireframing tools enable you to build, visualize and iterate on a digital product, without having to write any code.
If you’re not sure of the difference between wireframes and prototypes, swing by here.
Why are wireframing tools important for designers?
So why is the ability to build-test-iterate so important for designers and design teams? First off, our online lives are now populated by hugely interactive, personalized interfaces; recreating that kind of experience with textual descriptions, or even paper or Photoshop mockups, is pretty tough. Second, design is all about iteration, and wireframing tools give your team the chance to rebuild at lower cost and effort. Lastly, having the chance to see and test how a product runs before you’ve even built it is invaluable, and also just really cool.
But how do you pick the best wireframing tool for the job you’ve got to do? Running through these 7 steps – from clarifying objectives to being honest about your learning curve – before investing in a tool will save you headaches and money in the end.
What do I need to know before choosing a wireframing tool?
- Your objectives
- The context – team, timeframe, level of collaboration needed
- Other tools you might need to work with
- Learning curve. What you already know and how long a tool will take to learn
- How you are going to use the prototype – audience
- What level of support and community you’re looking for
- How much cash you can spend
Ask yourself, “why do I need to build a prototype?” The answer will largely dictate the functionality and fidelity you require, and by extension the wireframing tool that you need. Do you want to design a whole new website or app, or do you just need to test proposed tweaks to an existing system? Tweaks to an already built system might best be served by a basic wireframing tool that lets you focus on logic without getting bogged down in aesthetics; building a whole new system with rich interactions will require a more powerful tool complete with events, animations and OS specific icons (known as UI kits or libraries).
Do you need to:
- Pitch an idea to clients?
- Test a basic concept with internal team?
- Run user tests?
If you’re pitching to clients, you likely need a high fidelity tool that can handle micro-interactions and complex logic. Testing big ideas of concept internally will be served by quick, throw-away wireframes which promote focus on core functions. Running user tests typically requires mid-high fidelity, unless you’re testing the very basics of Information Architecture, which is well served by wireframes or even pen and paper prototypes. So decide on your fidelity before deciding on your tool.
What are you prototyping? Web, desktop or mobile?
A website, a desktop app or a mobile app? With web wireframes you’ve got a big choice of tools, some of which generate HTML-based prototypes that can be passed along to developers, and can also integrate with any PSD or Powerpoint mockups you might already have. For desktop apps, check which tools come with full UI libraries for Windows or iOS (these are a great time-saver). If you’re aiming for a mobile wireframe or prototype, you can find dedicated tool such as Origami built to produce native prototypes, which simplifies the process; but be aware that these tools are only good for apps – if you need more flexibility then a prototyping tool like Justinmind enables you to create websites, desktop and mobile apps in low to high fidelity, and enables on-device testing. When buying a wireframing tool specifically for mobile, make sure it supports the full range of UI elements for your chosen operating system, comes complete with UI kits and includes a variety of mobile gestures and transition effects.
The context: team, timeframe, collaboration
While figuring out your objectives will help you nail down the fidelity of the prototypes you need, choosing the right tool depends just as much on the context in which you’ll be working. If you’re a designer freelancing alone then you don’t need a tool that prioritizes collaboration; if you’re working in a team or planning to outsource parts of a project, then a tool like Justinmind or HotGloo will support team projects and collaborative prototyping. Wireframing tools that promote collaboration allow for feedback to be captured within the tool, making it easier to capture and react to client feedback.
Time is another big factor to consider. How long do you have to spend on wireframing and iterating? Wireframing tools dispose of different features to make your life easier and your prototyping faster – pre-built libraries should be available for your chosen platform, be it iOS, Windows, Android or OSX. Similarly, if you already have static mockups and just want to link them together in a click-through wireframe, some tools are geared towards that. Try out Keynote.
What other tools will you need to work with?
If you want to save yourself a lot of frustration, make sure from the start that you pick tools with automated integration. Being able to import and modify files from Photoshop, Illustrator, Sketch or any other design software will save you infinite headaches when it comes to iterating and updating features.
Learning curve. What you already know and how long a tool will take to learn
Every tool, no matter how simple, has a learning curve. Before selecting a tool, think about your existing knowledge base – if you’re adept at coding, maybe Framer might be easier for you to get a handle on; if you’re a Visio fan try out Balsamiq. The high powered tools may take a few weeks for you to become fully adept, but they should provide a full gamut of support systems and learning materials (more of which later). Basically, how long do you have to spend on getting up to speed?
How you are going to use the prototype – audience
This factor is linked to your objectives but is more practical in essence. Who will be using this prototype and how? Think about your target audience of the prototype – if you’ll be using it with design professionals, there’s often no need for something super high fidelity as they can imagine what grayscale boxes and nodes will translate into. If you’ll be working with a less savvy target audience, you’ll want a hi-fi prototyping tool that can incorporate content and images.
What level of support and community you’re looking for
It might seem like an add-on, but the vibrancy of the community and support team can be a clincher in choosing a wireframing tool. Video tutorials and detailed wireframe examples from beginner to advanced levels are a great way for wireframing newbies to find their feet; a responsive and knowledgeable support team should be able to address more advanced user questions. Some tools such as Justinmind also have helpful user communities backed up by support staff. The level of support you want from a tool is personal, but always check that the tool’s website is up to date and alive – you don’t want to buy into a moribund technology.
How much cash you can spend
There is a broad range of ways to pay out there. Almost all wireframing tools offer free 30 day trials so you can test the water. Thereafter, some just ask for a one-off payment and then you’re good to go; the majority however will require a monthly payment for individual users, or a ratcheted payscale for teams and enterprise projects. At the other end of the scale there are free tools out there, but be aware you’ll be settling for reduced flex and functionality in a lot of areas.
Wireframing tools – that’s a wrap!
So there you have it! Taking all these factors into account should get you a long way towards your goal of picking the right wireframing tool for your particular project. But don’t get too comfy! No tool can cover all the bases, and variables such as project, designer and team will impact on your choice from project to project. You’re going to want to switch it up from time to time. Check out this regularly updated list from Cooper to find out more about the best wireframing tools out there for a range of needs.