Stories from Dribbble

Courtside

How to improve the design process with animated prototypes

What are motion prototypes, how do they help improve the design process, and what are the best prototyping tools to use? Ayana Campbell Smith, Creative Director at Envy Labs digs into everything you need to know about using animated prototypes in your design process and how to get started—even if you’re a beginner.

Web animation was completely out of my wheelhouse. “The designs are all done and the style guide has been handed off. Surely the developers can handle animation.” I thought while dusting off my hands. The world of animation was uncharted territory for me, so leaving it up to front-end developers to shoulder that responsibility was an easy choice. It wasn’t until my first motion prototyping experiments with Framer in 2014 that my love affair with web animation began. Since then, I’ve come to appreciate how motion prototypes bridge the gap between design and development and bring clarity to the gray area where the two disciplines converge.

So what are motion prototypes? Think of them in the same way a design system is handed off from designer to developer to kick-off the build process. Instead of detailing color and typography standards, these prototypes visually convey the overarching motion patterns that define the experience and inform future additions. When implemented as part of the design process, designers are empowered to make decisions about interactivity and test drive them before hours of dev time are committed.


0c6f1e979f817fa5b74ca1af46236247

The Benefits

Before we talk about the how, let’s first dive into the why.

Early buy-in

Showing clients (and the developers on your team) a prototype in motion conveys ideas that would otherwise be difficult to see, especially with static compositions. It is not uncommon for non-designers to have difficulty picturing motion based solely on the description. Animated prototypes help fill in the blanks.

51f81aefc150c2756de8d763fe832230

On the flip side, animated prototypes help developers make informed decisions about how interfaces should be built and the potential challenges they might face during the process. For example, the prototype below for an internal project at Envy Labs outlines the interface’s core transition patterns. Though it may seem simple enough, this prototype called attention to the potential difficulties of transitioning an image from a 1:1 aspect ratio to a 3:4. By catching this early on, developers were able to get a head start on figuring out a solution that would be performant while also maintaining the integrity of the original design.

7691d3449aa78607c6048ca5ef45b833

Better Control Over the Final Product

“Motion, by its nature, has the highest level of prominence in a user interface. Neither text paragraphs nor static images can compete with motion.” -UX Planet

Interface designers should treat animation with the same decisive care they use throughout a project — lest it falls to the wayside as deadlines loom or are defined by someone lacking the big picture. Style guides are one (static) piece of the design handoff puzzle; animated prototypes should be seen as an important companion that offers another level of dimension and clarity.

Improved Communication of Ideas

Mocking up animations may seem like a time-consuming task (it is) when one could simply communicate their ideas verbally or via Slack. This may sound fine and dandy, but let’s take a look at how these scenarios typically play out:

Dccfe13900f5e956378e109236a5d1bb

Written or spoken explanation: 👎

Communicating complex animations via the written word can be a losing battle. In the example above, @designerayana is attempting to convey her animation ideas to @developercharles on Slack to no avail. Just imagine how frustrating this situation could be! Developers already have enough on their plates when working to build out designs — forcing them to decipher your animation vision via a series of Slack messages, over email, or even by word of mouth introduces unnecessary stress.

Da6a5b12f0e46efb02e8b0097326df53

Animating it yourself: 👍

What if instead, when we replay this scenario @designerayana has already taken the time to mock up her animation ideas and can quickly send them to @developercharles when he asks? In this situation, any potential confusion has been eliminated. Questions related to styling, timing, and easing are easily answered and the project can progress without major roadblocks.

Knowing which tools to use

There’s a wide spectrum of tools available for prototyping animations. Each possesses a unique set of strengths and weaknesses. Knowing where these tools excel will help you in deciding which will work best for your specific needs. Here’s a breakdown of a few of my favorites:

after effects:

After Effects has been in the animation game for ages and is still invaluable for adding motion to illustrated assets. It can flex to fill a need for UI demonstration, but it’s a bit like using a hammer to place a screw. Compared to other more UI-focused programs, AE is much less intuitive. However, strides have been made to ease the potential sting. A number of designers sing the praises of the Sketch2AE plugin, which allows for the quick and easy import of Sketch assets.

Although a lot can be done, it is important to loop in developers often when using such a robust program to ensure that what you’re creating is feasible for the web. Animation is cool and all, but performant experiences are even cooler. The impressive prototype by Joshua Oluwagbemiga (below) is just one example of what can be made when Sketch, After Effects, and the Sketch2AE plugin come together.

Pros of After Effects:

  • Robust interface offering great flexibility
  • Prototypes can be as simple or as complex as your skillset allows
  • Assets can be created directly in AE or imported

PSST! If this all sounds great but you’re concerned about the learning curve, don’t worry! Impressive animations can be made only using very basic transforms. Start with the fundamentals and build from there. There are countless AE tutorials available on YouTube ranging from basic to super advanced. My personal favorites include those from ECAbrams
 and Mt Mograph
.

SPACED Challenge (Travel + VR)

SPACED Challenge (Travel + VR)

by Joshua Oluwagbemiga

The Shot is sped up about 3x due to gif compression. Make sure you check out the attachment for a better render. Here is my submission for SPACED. One unique feature I added was virtual tours to gives users the ability to visit a planet in VR before tr...

View on Dribbble

Principle

Principle
 is an excellent option for UI-centric animations. Similar to After Effects, it can be used to mock up motion ranging from simple hover states all the way up to complex, multi-step flows. However, the built-in Sketch import capabilities means start times tend to be on the shorter side in comparison. With the added benefit of creating truly interactive prototypes that can be tapped, swiped, scrolled, and dragged, the results are perfect for hands-on device testing. The video above shows just how quickly animations can be created.

Given its numerous benefits, the app is well worth the $129 price tag. Visit their site to download a free 14-day trial, then check out Pablo Stanley’s awesome Principle Crash Course
 on YouTube to get building in no time.

Pros of Principle:

  • Easily imports Sketch files
  • Both GIFs and MOVs of your animations can be easily exported for quick sharing
Eb8a7075f0901090134d4b140667a642

Invision Studio

InVision’s commitment to the design community shines through with the release of it’s most ambitious endeavor yet, InVision Studio
. Despite its newcomer status, Studio is poised to disrupt the design tools industry in a big way. Most impressive is its current low price point of $FREE.99 making it accessible to a wide variety of users on Mac OS devices. Although similar to Principle in its implementation, the app is set apart by a heartier design interface — giving users more freedom to craft beautiful interfaces without having to jump through a bunch of hurdles. Overall, the interface offers a familiar experience that falls in line with many of the design tools on the market today.

Pros of Invision Studio:

  • FREE! (for the foreseeable future at least)
InVision Studio — Finance Dashboard

InVision Studio — Finance Dashboard

by Martha Bergmann for InVision

📉Had fun exploring an appearing line animation created with a mask, and a sliding graph interaction. 👉Play with the prototype here 🎁Get the source file here 💖Press L to show some love Not collaborating with InVision yet? Sign Up - Free Forever! ⚡️️M...

View on Dribbble

Framer

Since its inception, Framer
 has always been more code-focused: it requires users to know or learn CoffeeScript in order to create prototypes. Thinking back to my first use, I remember the slow ramp-up time made picking it a hard sell. The endless cycle of watching tutorials and reading documentation only to quickly forget everything I’d learned the next time I wanted to create a prototype was discouraging. Plus, the inability to design directly in the app meant assets had to be imported and reassembled manually. Yet, for what the app lacked in ease of use back then, it made up for with its ability to produce really great, high-fidelity prototypes. Now, several years and updates later, the fine control that comes with code implementation has been bolstered by an integrated design interface, allowing for a seamless transition between designing and prototyping. Despite its steep learning curve, it remains an excellent option for both code-curious designers and more seasoned coders alike.

Framer is available for as low as $12/month. Download their free trial then pop over to YouTube for yet another crash course from the talented Pablo Stanley: Framer Crash Course
.

Pros of Framer:

  • Able to make really impressive, high-fidelity prototypes with real data
  • Allows designers to meet developers halfway by presenting animation in a language they understand
Why Framer X - Prototyping

Why Framer X - Prototyping

by Jurre Houtkamp for Framer

Our new prototyping page shows you how you can go from static UI to high-fidelity prototype in just minutes. Learn more about our intuitive canvas tools, interactive components, and community-driven Store on the new page.

View on Dribbble

If the number of tools on the market today is any indication, it’s safe to say animated prototypes are here to stay, continuing to bridge the gap between design and development. When deciding which is best suited for your needs, remember: the tool used is much less important than ensuring animation ideas are able to be communicated effectively.

3a14d7471dd009262e1777476ce708f1

Want to keep up with Ayana? Find her on Dribbble, Twitter, and at ayanacampbell.com.

Find more Community stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


×

Almost Sold Out: Hang Time Workshops with Jon Contino,
Danielle Evans, and MDS.

Icon shot x light