mr UXD and Prototyping Tools

By pjain      Published July 26, 2020, 7:48 p.m. in blog Programming   

Part of Series - UXD and Prototyping (this doc)

Mobile Design

Draw to Rapid to Static Prototyping to Wireframing Interactive to HiFi Tools BPR


Compare Reviews

Drawing and Paper Prototyping Tools - LoFi

Paper Prototyping


It is much more of a drawing tool, which is great for utilizing during the sketching and wireframing stages. Nevertheless, it provides you with actionable low-fidelity prototypes. It can be of assistance especially if you are new to design in general. Balsamiq lets you do the following:

Static design and Prototyping Tools

Rapid Prototyping

An efficient application for those, who prefer doing all the design activities via a browser (Google Chrome). However, the app offers a wide range of design solutions, its fans like using it for prototyping solely, while importing sketches and wireframes from other tools.

  • IMPORT - Sketch and other software importing feature
  • VERSIONS Slick History slider option, enabling to backtrack all the iterations
  • Great collaborative power
  • Quick sharing functions
  • More Pro features than a usual go-to app ever has

Mixed Design and Wireframing UX Pathways - Medium and high Fidelity

Adobe XD

Adobe XD is perfect for designers. Here you can easily switch between Design and Prototype modes to accomplish certain current tasks for your project. The latter one enables you to perform the following:

  • High-fidelity interactions
  • Getting ready-to-use assets within one app
  • Integration with other Adobe products, like Photoshop and After Effects
  • Real-time viewing, commenting and sharing capabilities
  • Smooth importing

  • Smooth collaboration between co-designers and other stakeholders
  • Easy switching between Design and Prototype modes
  • Quick sharing and getting real-time feedback
  • Automated sync capabilities for all the design data
  • Powerful editing features
  • Intuitive import/export options - Collaboration

The app runs on the web and works well on simplifying the workflow between designers and other teams.

  • Rich interactions and animations easily added to static images
  • Compatibility with most popular graphics file formats like PNG, GIF, PSD, JPG and many others
  • Smooth integration with website management and collaboration apps like Slack, Jira, Dropbox, Trello, just to name a few.
  • Real-time collaboration and presentation features both for teammates and clients

Animation and Motion Design - Rich Web Prototyping and Animation

This is rather an overall design platform than just a pure prototyping tool.

  • Built-in interactions
  • Custom interactions
  • Slick animations
  • Responsive breakpoints
  • Built-in UI libraries
  • CSS styling - Web Design focus

A great example of 2019 tool that combines the functionality of both design and website management software solutions.

  • Using visual aids instead of coding
  • Smooth layout building with box models, floats and flexboxes
  • High precision for animations and interactions
  • Rich libraries with pre-built components

Framer X is powerful but requires some advanced understanding of design processes.

  • Interactive components with built-in functionality
  • Creating master components in one click
  • Reversible changes across all instances
  • Smooth overview filters and settings
  • React-based components
  • UI options customization


This tool is mostly known for its awesome animation design capabilities, lacking however some of the end-to-end solutions like developer handoffs, collaboration, and integration options. The instrument has the following features:

  • Short animations
  • Slick interactions
  • Multiple-screen design flow
  • Artboards and timeline
  • Import of various design formats
  • Preset and share of favorite designs

Code Generation - CSS to Full Apps


There are no comments yet

Add new comment

Similar posts

SOA Api Metadata

Serverless Computing

Android Layouts Design 101

Drawing, Canvas in Kotlin