Just before you dive into the exciting process of prototyping and mockups, choosing the right tools to define your idea is key to the definition phase of any digital project. This way it is easier to communicate your mobile app objectives with your developer, saving time and money in the process.
In this blog, I am going to introduce you to some of the great tools that you can use to start wireframing your idea for a mobile app or web project. First of all, this is not a classification of which ones are better than others. It is intended to provide you some insight to decide which tools might be more useful for you, depending on your project, your skills, and the final output you want to get.
You can produce static low level wireframing with any of these tools. Although, it's always very useful to start with some hand drawings of your idea before jumping to these tools, but it is up to you.
This is a very intuitive drag and drop tool to quickly wireframe any type of digital project: website, mobile app, etc. You don’t have to be a designer to start using it. It offers a clean UI with well structured menus and a wide range of UI elements to choose from. It provides a quick export of all your wireframes to png files, or you can export your whole project to a single pdf file. It's also possible to define clickable elements to navigate between wireframes.
License: Free 30 days trial
Very similar to the Balsamiq option, but I personally find the interface a bit less intuitive than the previous one. It offers more prebuilt ui elements to choose from than Balsamiq. Beyond the wireframing capabilities, it also provides access to multiple users to the same project and the possibility to add comments and feedback on it.
License: Free 30 days trial
Clickable prototype: Yes
This tool provides pre-built UI libraries specifically designed for iOS, Android and other mobile devices, which offers the possibility to produce high resolution wireframes with a native look and feel.
One of the main advantages of this tool is that it is possible to download it for free. You just have to pay if you are interested in using the collaborative tools that they offer. It also includes for free advanced features for using templates, importing data from external sources like a csv file or defining variables. It has a intuitive UI, but it's also more complex than the previous options. They provide a lot of tutorials, but the learning curve might be a bit steeper than using Balsamiq moqups.
This tool offers very similar functionality to Justinmind. It has nice prebuilt UI kit for iOS, Android and other platforms. So you can easily produce high resolution wireframes. It has advanced features like defining variables, which can come in handy for most user types. Although this is a very powerful UX designing tool, it has very clean and intuitive interface, very easy to learn, even if you are not a frequent user of designing tools. It also provides a mobile app for iOS and Android where you can preview your designs and test it in real devices. As all the previous tools, it also has collaboration features for a team to work on the same project and provide comments and feedback.
License: Free 15 days trial
One of UXpin strengths is the extensive UI kit for different platforms and even web frameworks: iOS, Android, Bootstrap, Foundation, Material Design and much more. So, as you can imagine, with this tool it is possible to produce high resolution wireframes with the look and feel on a wide variety of platforms.
License: Free 7 days trial
Complementing tools to convert static designs into fully functional prototypes:
If you've already created some static wireframes with another tool or even hand drawn ones, take a look at these tools:
You can add interactivity to your existing designs. Just import them, and easily define clickable parts to simulate the navigation between different screens. They also both provide plugins to seamlessly import your static designs from Photoshop or Sketch.
All of these are fantastic tools. To decide which ones are the best fit for you, think of your project needs, budget and design skills. If you are new to UX design in general, we advise you to start with Balsamiq moqups, since it provides a clear and simple interface to start your low level wireframes, and it also provides clickable capabilities to navigate between your different screens. This clickable low level prototype is perfect to start testing your idea with potential users, investors, developers, designers and anyone involved in the project.
If your budget is tight, Justinmind is is free to create your wireframes, if you don’t need team collaboration at this stage. Justinmind also provides more advanced functionality than Balsamiq, it's a very powerful tool to produce static low level wireframes for functional high level prototypes. The learning curve of this tool is steeper, but it is totally worth giving it a try.
If you have any questions on wireframing, the tools we use, or need help with building your wireframes, give us a call and we'd be happy to help!