Career Services in Coda! [Katie Rivard]

Explore

Career Services in Coda! [Katie Rivard]

Career Services in Coda! [Katie Rivard]

Enhancing Your Skills

Lesson: Animation & Interactive Prototyping

5 minute read

There are incredible benefits to understanding how to create animated or interactive prototypes. These can be used for high-fidelity testing with users before spending extensive time in the development phase. It can also help you articulate to a developer more clearly what you expect from the interaction design standpoint.

There are many tools to select from, but they all center around these key goals of being able to showcase your designs in a different way from static screens.

Tools

For creating animated or interactive prototypes, the landscape of tools has grown immensely in the past few years and will likely continue to grow as the design industry evolves and shifts.

Let's review a few of those tools in the marketplace to enhance your static designs from being flat to being able to display and articulate how they should feel and look.

Framer

⁠

Framer⁠

can help bring your designs to life and closer to a production-ready standpoint.

The platform allows you to take your designs and craft realistic prototypes rapidly, while using component-driven design to build them.

Axure

⁠

Axure⁠

is a fairly common tool for designers that want to add functionality to their designs for testing, prototyping, and showcasing different flows.

Made for Mac and Windows machines, it is an extensive tool that can handle dynamic content, conditional logic, and adaptive views for your designs.

Flinto

If you are designing a mobile app,

Flinto⁠

provides a platform to create animated and interactive prototypes that features common mobile-based gestures, micro interaction capabilities, and animated transitions.

Flinto also has integration directly with Dribbble to showcase your designs, in addition to giving you ability to include sound effects if you choose.

InVision Studio

⁠

InVision Studio⁠

is a desktop application you can use to animate websites, mobile applications, and other digital designs.

Some highlights include the ability to create responsive layouts with ease, while being completely synced for collaboration with developers.

Adobe XD

⁠

Adobe XD⁠

is a newer design tool within the Creative Suite that allows you to design for all devices while creating interactive prototypes to share.

It is a vector-based tool, much like Illustrator, but dedicated for designing digital experiences.

Principle

⁠

Principle⁠

, a Mac-only application, is an animation tool for turning your flat designs into interactive screens.

It can be used for designs on all devices, whether you want to animate elements on a website or within a mobile app.

Proto.io

⁠

Proto.io⁠

provides the ability to import your design files from Sketch or Photoshop to create high-fidelity prototypes.

Like the other tools listed here, you can share your prototypes for people to test and view. In addition, Proto.io provides clients or stakeholders with the ability to comment directly on the designs.

Origami Design

Built by Facebook,

Origami Design⁠

allows you to create live prototypes for iOS and Android applications.

It works natively with Sketch, as you can copy and paste layers into Origami from your Sketch files to create the prototype. With that, you can record videos to share with clients and stakeholders, or even share prototypes for them to test on their devices.

While all of these tools have their benefits and issues, you should decide on one to master. Building animated prototypes with interactive features can be done with the majority of these tools, so regardless of which you select, you would be able to achieve your goal.

More importantly, it's essential to understand why these tools can help speed up the process from design to development.

Design to Development

If you decide to extend your skillset into learning these interactive design tools, it can help you when passing off your designs to development.

Many times, you are trying to annotate or talk through how a design should interact. These tools provide you with the ability to display those interactions more easily and rapidly.

Before diving into the development phase, these tools can help you craft an experience to test and ensure your design decisions make sense to the user before moving forward.

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.