My previous article about the prototyping tools has gained much appreciation and interest lately so I’ve decided to dwell upon the topic and make an overview of other functional tools for designers. A great number of readers have shared their reasonable thoughts on the subject in private messages and comments. And here I’d like to express my profound gratitude to @Radek Taraszka for his qualified opinion about UXPin. His valuable response informs readers about the most important recent changes in the product’s features and capability.
Prototyping: Why?
No matter either you are designing a commercial website or a mobile application, you will find it extremely necessary to test your project at different development stages. Prototyping proves to be the most effective way to reduce costs and save time. In what way? Let’s have a look at the following statistics:
- You can detect around 85 % of pitfalls just applying interface usability test with several groups of 5 users. The calculations are almost a decade old but laws of mathematics are timeless.
- Developers spend 50 % of their working time redoing previously designed products. Moreover, fixing bugs in the released project costs 100 times more expensive than it would at the initial stage. The video The ROI of User Experience also demonstrates how these problems become avoidable due to UX testing.
- 90 % of users claim that they stop using an application due to poor performance. Obviously, the statistic confirms the significance of prototyping on different design stages before the product release.
Prototyping: How?
First of all, a successful project relies on savvy planning from the very beginning. Also, the tight cooperation between designers and developers ensures you of meeting users’ expectations. This is why choosing the right prototyping instrument for your individual needs is so award-winning.
Click below to see more interactive classifications.
To guide you throughout the enormous scope of prototyping tools, here is my updated review of suitable instruments. Once again, there is no universal solution, hence all your valuable thoughts and opinions would be gladly taken into account.
The major part of designers who are professionally involved in prototyping stays true to Axure RP 9 and can always find a good word for this tool. Axure RP 9 is an advanced software instrument that enables to create splendid quick prototypes, has great linking facilities and provides a wide range of interactive features. To my mind, this software tool is ideal for prototyping interfaces, mobile apps and quick sketches. Maybe, in some cases, Axure lacks broad-spectrum options for advanced animation though you are able to buy and download separate styles and symbols libraries that resemble Bootstrap, for instance. In addition, the decisive leverage is the speed of changes, not the prototype design.
Among the others, Axure RP 9 offers the following features:
- Suitable for web and desktop applications
- Installable for Mac and Win
- Lo to Hi wireframing and prototyping
- Detailed data-driven interaction
- Nice and powerful interface
- User flows and journey maps
- Widgets resizing and formatting
- Drag and drop placement
- Steep learning curve
- Feedback availability on live prototypes
- Writing full codes is not required
On the other hand, Axure may seem complicated for beginners and it is sometimes deprived of collaborative and handoff features. Some designers call it old-fashioned but I’d rather change the word to classic and traditional.
Marvel is an efficient page-based application whose greatest strength is simplicity for young professionals who are involved in UX and UI design industry. This software tool helps turn sketches, mockups and designs into various app prototypes. Marvel is connected to the cloud which makes it a perfect solution for Apple products, like iPhone, Apple Watch, Apple TV and others, likewise web and Android designers leverage from this tool, too.
- The simple, friendly design thus no learning curve
- Prototyping in collaboration
- High/low fidelity wireframing
- Image import from Sketch and Photosho
- Complete online workflow
- Integrated prototyping on paper
- Direct comments and annotations from users
However, the application delivers no symbols, repeaters, conditions as well as it lacks responsive design. Marvel is an online web tool, consequently, it cannot provide offline and desktop designing.
3. Flinto for Mac
One more another popular prototyping tool among designers is Flinto. This tool provides a number of features for creating both simple tap-through and comprehensive interactive prototypes. Flinto has a strong focus on customizable animations and design complexity, page transitions and layers control. Furthermore, the specialized viewer accelerates modifications and saves time due to real-time editing.
- Suitable for mobile, desktop or web apps
- Impressive robust design
- Lo to hi prototyping
- Minimized complexity
- Easy drag-and-drop system
- No programming
- Consistent feedback from users
- Collaboration available
Inevitably, Flinto for Mac has its minor drawbacks, such as the absence of collaborative features, limited animation functions and lack of handoff tools.
In a short time, Haiku’s animation features have attracted users worldwide though at the beginning of its existence this UI builder was developed to be a bridge between design and code. Haiku Animator is a design portal for animated app user interfaces and it does a good job. This software allows creating interactive designs with easy-to-use convenient scripting tools along with the following characteristics:
- Nice and friendly interface
- Robust sample outputs
- Imaginative animation elements
- Suitable for web, iOS, Android
- Sync with Sketch, Figma, Illustrator and SVG
- Designer and developer teams’ unity for building projects
- Robust iteration capabilities due to public preview
Some users claim that 14-day trial as a disadvantage as it is not enough to surf all Haiku capabilities. You can still encounter minor bugs with updating and in some cases, building animation still requires JS to run on the web.
Proto.io is a great example of a collaborative online prototyping tool. One of the beneficial properties of this app is an intuitive user interface that makes it rather popular among coders and non-coders. This platform provides you with a sufficient number of functions, such as:
- Low/high fidelity and rich animation
- Web and device prototyping
- Real-time mockup preview with instant feedback
- Suitable for iOS and Android
- All specialists engagement
- Extensive libraries of UI elements
- Manual drag and drop
- No coding required
All in all, the interface can be tricky and overwhelming at times because of the complex multi-layered menu. In addition, the preview mode requires constant saving and does not have a live option.
This is a free Facebook design platform for modern user interfaces with speedy linking and iteration. First of all, Origami is intended for Mac app and enables the easy creation of layer-based prototypes. This tool offers numerous features for interactive prototyping:
- Integration with Sketch and Photoshop
- Quick behavior modifications
- Precise control over processes
- Multi-layer animation
- Extensive documentation library
- Mobile prototypes testing on iOS devices
- Perfect for endless creativity
- Visual programming
In fact, Origami was initially developed for MacOS users though it comes with preview apps for iOS and Android. Prototyping with this tool can be too way complicated for simple projects and may take a lot of time. In contrast to traditional editing, prototyping within the Origami community is puzzling for a new-comer. And sometimes you may miss the feedback tool.
7. Adobe After Effects and Adobe Animate
Adobe After Effects is a powerful video effects software tool and Adobe Animate is a professional drawing and animation app, known previously as Adobe Flesh. Both products represent the same premium quality, like any other gold-standard Adobe Suite representative from this top software developer.
At present, I widely exploit Adobe After Effects and Adobe Animate prototyping features as these all-in-one cross-platform tools are suitable for websites and mobile apps. The awesome functional capabilities of AE include:
- Slick motion graphics
- Data- and expression-driven animation
- Wide range of intuitive thus professional tools
- VR and 3D transitions for remarkable visual effects
- Team projects support
- Suitable for multiple OS and devices
- Feedback tool available
Among the most prominent features of Adobe Animate are:
- Compatible with Mac and PC
- Quick animation through bone rigging and animation paths
- Better control over the animation
- Rapid sketches and drawings with skins, brushes and layers
- Realistic sync characters due to interactive animation
- Comprehensive tutorials and databases
While Adobe products are top-rated in designing and prototyping functionality, there are still issues that may restrain some users. Firstly, these applications require extensive training, so if you are unlikely to spend time learning, this solution is not for you. Secondly, only a powerful machine enables full benefits, in other words, get ready to meet high hardware configuration requirements. Finally, Adobe Suite is somewhat limited within its own ecosystem and dependable on related family programs.
Conclusions
Providing users with exclusive and catchy experience proves to be decisive for major prototyping and designing tools vendors. Consequently, the software supply is destined to evolve and improve. Interactive prototyping serves to show developers how the product works in the final version due to different design effects, animations and transitions. These tools are aimed at studying UX with tapping buttons, at disclosing time delays, etc.
As for me, I have been prototyping with Axure for a long time and I will definitely stick to this application in the future because it helps quickly sketch up separate code elements. In contrast, Flinto and Origami require JavaScript which can be time-consuming. To add advanced animation I prefer Adobe After Effects and Adobe Animate. Though Principle (which was covered in the previous article) contains a number of alpha-channels with limited functions, I use when there is a necessity to present how the final product works.
I’d like to know what your favorite tool is. If there are other prototyping tools that are worth mentioning, you are welcome to follow me and my comment section.
