Published on | Prototyping: From UX to Front End — Medium David M. Utt

From basic interface tools to deep interactions

With the new year, the continual expansion of the design industry has lead to a growth of design tools available. This last year new tools have become available leaving beta and entering the hands of creators. This list is meant to be a guide and reference for design teams to help explain what tools are available and what context is optimal for using them.

This story is split into two sections user interface design tools and interaction design tools. As the name states the former is a list of design tools to create static interfaces for a variety of screen types. The later is a list of interaction design tools for creating animated prototypes with varying levels of fidelity.

User Interface Design Tools

Sketch Version 48.2 User Interface

Sketch is a vector based design system and the current industry standard for digital designers to build interfaces. Sketch has a simple design system, when viewed as a standalone product. However, what makes it unique is its vast collection of plugins. These plugins, such as Craft, significantly boost the productivity, decreasing the production time of designers and developers. Due to the framework, it is only available for Mac. As such it is hard to integrate in large enterprises without significant overhaul. In addition, while it is the mainstay in the industry, much of the code has become bloated leading to slowdowns in larger projects as a common problem.

Pros

Current industry standard for design teams
Vast collection of plugins to tailor workflow
Connected to various prototype applications through plugins

Cons

Only available on Mac
Limited as standalone product
Sketch overtime, has become bloated (prone to slowdowns and crashes)

For Mac — Price: $99/year for single licence use (company licencing available)

Figma Browser based interface

Figma is a browser-based alternative to Sketch, developed by Google. Similar to Sketch in many respects as a vector based UI tool. Figma’s stands out in it’s collaboration. This key feature allowing for real-time sharing, editing, and work, all on the same document. This ensures that everyone involved sees the same state of design, prevents unintended overwrites. While still early the software receives continual updates adding features such as prototyping capabilities and developer support. It is missing some core aspects (plugins and enterprise purchases). Hopefully, with continued support these will be added in the coming year to build on a strong foundation.

Additional Reading Here

Pro

Browser based for collaboration and easy sharing
Generated markup code
Collaborates with Sketch file formats
Responsive design capabilities

Cons

Limited file support (comparatively to Sketch and XD)
No plugin support
No option to integrate real data

For Mac and Windows — Price: $12/month with Enterprise option coming soon

Adobe XD User Interface

Adobe XD, released in 2016, is the spin-off of the earlier prototyping tool, Adobe Edge, back in 2012. XD is a vector based drawing app (like the previous options) allow quick creation of interfaces and click-through prototypes in-app. Adobe, over the last year, has greatly improved the app allowing for greater connectivity through Adobe’s other services and exporting options (for developer collaboration early on in the process). XD is available for both Windows and Mac as part of their suite of applications.

Pros

Light, Fast, and adaptable user interface
Connects with various Adobe applications
Collaborates with Sketch file formats
Code export options available for developers

Cons

Bundled price point (with Adobe CC)
No plugin support

For Mac and Windows (10 and above)— Price: Available with Adobe CC

Axure RP 7 User Interface

Axure RP 8 is a combination wire-framing and prototyping tool like Adobe XD, and Figma. Currently it is used primarily among large enterprise groups for deep application development. It can be utilized to build quality sitemaps, user-flows, screens designs, even click-through wire-frames in one file. This is at the cost of a significant learning curve, so on-boarding and rapid prototyping can be difficult to those unfamiliar to the program. It is available for both Mac and Windows. It is adaptable to the large community and offers incredible library options that cover Android, Web, iOS and responsive sises. It does offer collaborative feedback, but only on Pro.

Pros

Most comprehensive of all UI tools (in terms of functionality)
Familiar with large enterprise workflow

Cons

Steep learning curve
Not mobile user-friendly
Time to design is time-consuming

For Mac and Windows — Price: Enterprise option $99 per user per month

Interaction Design Tools

https://dribbble.com/shots/4097808-Initial-Wireframe

Low Fidelity — Quick, Mobile and Screen based

Perfect for rapid prototyping and testing out layouts and designs, low fidelity prototypes are the shareable versions of whiteboard sketches and wire-frames. While quick to produce and put into people’s hands they are limited in functionality to only show tap though designs and possible gestural interactions. — Here are a list of applications that are good for these use cases:

https://dribbble.com/shots/3880642-Dropbox-Plans

Mid-Fidelity —Responsive Experiences

Why must we prototype responsiveness? Sometimes a design system needs to be scaled for multiple products. In addition, being able to demonstrate how a design language can evolve through multiple systems and years of iteration can demonstrate market viability to business owners. — These applications are available to help show this functionality:

Axure (Adaptive Responsive)
Figma
Raw HTML/CSS/JS (true responsiveness)

https://dribbble.com/shots/2428762-Cut-Copy-Share-Delete

Mid Fidelity — Micro Interactions and Unique Features

Prototyping a single animation can be a lot of fun for both the maker and user as well as provide ton of value in these little nuances, even when it is invisible to the user. The overall experience can feel more pleasant and fluid, as well as demonstrating a particular feel or emotional response you want to garner from your design. When a system has a unique or key feature to be demonstrated building a micro interaction demo can save time comparable to high fidelity prototypes.— Many applications are available to demonstrate this here are a few:

https://dribbble.com/shots/871796-Telly-Android-Holo-Assets/attachments/93516

High Fidelity — Project Entirety and Authentic Experiences

Used in final presentations for directors teams or getting systems ready for development. Having a fully usable experience available and showing screen navigation with code references available, can significantly improve hand-offs with development and limit the need for last minute changes to showthe authentic desired experience. — In these use cases here are some applications which can be used.

Mobile & Tablet

Desktop

Axure
Raw HTML/CSS/JS
Flinto

These are all references and lists to pull from being both project dependent, team preferential and far from the only options out there (Pen and Paper). Though I believe having a current list of options and understanding the context and capabilities of each one will allow for effective testing and development helping to avoid the occasional miss step. Initial tool list came from https://www.cooper.com/prototyping-tools? along with personal experience.

2018 list of Interface Prototyping Tools was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

2018 list of Interface Prototyping Tools

Cool stuff, every week

More Articles