In our previous post “How to research and evaluate for good user experience?” we looked at different techniques that can be used throughout the UX design process to ensure good UX and UI. These techniques are crucial, but sometimes time-consuming, so luckily there are lots of tools out there to help you make the most of this process.
In this post we’ll take a look at the design, prototype and user testing tools that we feel everyone should be using.
Used for: Design, Prototyping, Collaboration, Online, Desktop
Figma is a browser based user interface design and prototyping tool. It is surprisingly easy to learn and fast. This tool is amazing for teamwork and co-designing, as more than one person can collaborate on the same project in real-time. All changes are live in the browser which allows clients and teammates to discuss and send feedback as they happen. What’s more is that it offers detailed version history, so you can easily save or restore previous versions.
Pros
- Easy to learn
- Fast
- Version History
- Live preview and co-designing
- Developer Handoff
- STARTER Account is FREE
Cons
- Very basic prototype tool
- The browser version does not work offline
Used for: Prototyping, Online LITE version and MAC OS
Flinto is the tool that we use at GearedApp to create prototypes. Flinto comes in two different versions. Flinto LITE is a browser version which allows you to create simple prototypes in just few MINUTES!! Flinto for Mac on the other hand, offers Transition Designer which can be used to create customised animations between two screens. Sharing your prototypes in Flinto LITE is easy and are able to use it with Lookback.io for user testing. However this is not the case with the Mac version as prototypes can only be previewed in Flinto iOS App.
Pros
- Easy to learn
- Relatively cheap, one time purchase costs £99.99 from the Mac App Store and student discount is available
- Device preview
- Sketch Plugin
- Transition Designer
Cons
- Flinto LITE online (not MAC version) requires subscription and it is around £16 a month
- It is not suitable for designing
- No Photoshop import
- Sharing Prototypes is difficult
Used for: Design, Prototyping, Coding, Collaboration, MAC OS
Framer is considered the hottest prototyping tool of 2017. Designing stuff in Framer is super easy, but if you prefer to use Sketch, Photoshop or Figma that is ok too. You can simply import your designs to Framer and get coding. Coding in Framer is used to create interactions and animations. All coding is done in CoffeeScript so you will need to be familiar with it. Framer provides interactions examples and sample projects so you can quickly learn how it works. Overall it is a great tool worth getting familiar with.
Pros
- Design, Prototype and Code all in one
- Import from Sketch, Photoshop and Figma
- Preview on the device
Cons
- Available for Mac only
- You need to know CoffeeScript to prototype and create animations
- Subscription based, £150 a year
Used for: Prototyping, Mac OS
Principle is an amazing tool designed to create animated and interactive user interfaces. If you love Sketch interface then you will also love Principle. It feels very familiar and it is easy to learn. Principle uses a Timeline Animation which is another familiar concept known for all of us who have used After Effects before. With Principle you can create amazing animations and interactions easily. It is definitely a tool that everyone should get familiar with.
Pros
- Export your finished prototype as a video or gif
- Window preview
- Device Preview
- Artboards
- Sketch Import
Cons
- No prototype sharing via link
- No export animations values
Used for: Design, Prototyping, User Testing, Collaboration, Online
This browser based-prototyping tool will allow you to create prototypes that look and feel like a real thing (Click here for examples). Proto.io is easy to learn, however everything works by drag and dropping and selecting values which might be a little bit annoying after some time. It takes some time to create with Proto.io but what you get is a prototype with transitions, animations and with gestures support. Moreover Proto.io offers a wide library of tutorials, articles, documentations and forums which can speedup the learning process. Proto.io integrates with Lookback.io which is an amazing tool for user testing.
Pros
- Huge library of UI elements
- Device preview
- Advanced animations, interactions and gestures support
- Lots of tutorials and articles dedicated to Proto.io
- Offers Sketch import and Dropbox Sync
Cons
- Slow
- Too much drag and dropping
- Does not work offline
- You cannot download your prototype which means that if you will cancel your account you will loose all your work.
- Expensive, Basic Plan is around £228 a year
Used for: User Testing
You may have noticed us mentioning Lookback.io a few times throughout this post, so we should probably explain what it is! Lookback.io is not a prototyping or design tool but you can integrate it with Proto.io (Or Flinto LITE) in order to conduct user testing. This tool is easy to use and really handy for testing your prototypes. Lookback.io records your tester as they use your prototype, all their comments and also on-screen interactions. The result are presented as two recordings, one of the user’s face and one of their interaction with the prototype, which helps to understand user’s initial reaction and if they were struggling with anything.
Pros
- Remote testing
- In-Person Testing
- Simple and user friendly interface
Cons
- Expensive
Used for: Design, Prototyping, Collaboration, Online
UX Pin is a powerful online tool used for collaborative interface design and prototyping. UX Pin’s newest product Design Systems can be used to create guidelines for design and development. This will help to resolve any inconsistencies. UX Pin allows you to design interfaces in a blink of an eye thanks to dozens of UI libraries that are built-in. What’s more, you can collaborate with others and co-design the same prototype. When your UI design is ready you can start prototyping by creating custom interactions and animations. When this is done, simply send your prototype to your client and they can comment on your work, even without a UX Pin account.
Pros
- Integrates with Photoshop and Sketch
- Extensive library of UI elements
- Collaborative
- Prototype Preview and share
- Auto-generate specs for developers
- Create and manage documentation
Cons
- It might be a little bit difficult to learn
- Does not work offline
- Short trial period
- Expensive, Pay Monthly or Annually Plans available only
Conclusion
So there’s a summary of the tools we find most effective when it comes to the UX and prototyping stage of the project. All of these tools are great, but if you want to get some quick prototyping done then we would highly recommend FLINTO or PRINCIPLE. If you want to dedicate time to learning how to code then you should definitely try FRAMER. Everyone is different and the tools you choose will depend greatly on the project type, so it’s best to just try them out and see for yourself. Overall, remember that just designing UI is no longer enough, and that where possible you should always prototype.