Design prototyping tools on Windows
In the last few years, there has been a surge of new prototyping tools. They are great time savers and remove all repetitive maintenance tasks allowing a designer to focus on creating value. But it is easy to get lost in all the hype and pick the right tool for your product.
While MAC OS has amazing Framer & Sketch, there are plenty of options for Windows users:
Adobe XD
Good stuff:
- Easy to get started - very simple and structured UI + it's free for one project.
- Great client preview and developer export tools.
- A powerful symbol, color and typography library tool. It saves a bunch of time maintaining a large project.
- Continuously updated with new features.
Biggest pains:
- Limited instruments: no support for hover states, video, gif or SVG animations.
- Only 3 interaction triggers: tap, drag and voice. Actions can't be triggered by page load or any other useful events.
- You can't hide elements or do actions within the same art-board. You can only navigate to another art-board.
- It has annoying bugs and sometimes crashes.
Summary:
Handy for App & Web UI design, cooperation with developers and project maintenance of any size. Interactivity tools will significantly limit what you can test with live users.
Proto.io
Good stuff:
- The richest toolkit for real interactivity prototyping, any kind of actions and triggers I wanted I was able to create.
- Supports animated screen transitions, SVG animations, videos and sound.
- Interaction tools allow you to modify contents of the art-board, switch states or go to another art-board.
- Developed by a small team with extremely helpful and responsive support.
Biggest pains:
- Complicated interface structure and controls, easy to get lost as your project grows.
- Doesn't have good tools for atomic design / UI library management.
- There is no dedicated "Developer View" mode and asset export is limited.
- It's web-based, the bigger the project - the slower it gets.
Summary:
While it's a great tool to test your idea with very realistic behavior it doesn't really connect well into a current app/web production pipeline. Best used for experimental projects that really require prototype testing with close-to-reality behavior.
Figma, Lunacy, Sketch & Framer will be covered in Part 2.