Using Prototyping and Animation to Create Better Products

User experience is a very important factor in the product world. An application or website can succeed or fail if the experience is or isn't optimal. On top of this problem, communication between designers and developers has always been a challenge when it comes to interaction design. Action items like buttons, UI states, and more can be designed, but the actual movement must be crafted by a developer or designer who can code their own ideas.

Many app makers are working towards eliminating this brick wall in the process by offering their own apps which help designers take static designs and animate them with little to no knowledge of coding experience.

This post is a collection of applications that allows designers to create better products using both animation and animations as their form of communication.

Invision

Invision reigns supreme in the prototyping world. The app offers a lot of features and allows users to communicate in real-time while inside it. Features such as prototyping, commenting, animations, real-time file syncing, and what they call “boards” are all unique ways to make your designs exceed your own expectations.

Marvel

Straight from their site, “Marvel is the easiest way to turn your sketches, images, and mockups into realistic mobile and web prototypes.” There’s support for a variety of devices and use cases. Marvel just recently announced a new user testing feature as well that records your user’s interaction with the prototype in place.

Axure

If you’re looking for advanced prototyping, look no further than Axure. The app takes the “click-through” approach and adds to it functionality for drag and drop, calculations, animations, and conditional logic if your prototype calls for it. A very powerful tool.

UX Pin

With UX Pin you can create prototypes and mockups right inside the app. Rather than depending on other software for creation you can use the tools provided to get the job done. There is still support for people who want to use other software like Sketch or Photoshop, but the main difference is being able to create it from the ground up.

Principle

Principle is a new app geared around animation and prototyping. If you’re a Sketch user you may notice the interface is very similar in style. Users can create animations based off their own ideas with the addition of editing durations in a timeline-like interface, you may have seen back when Adobe Flash was in its prime. Great things are coming with this app.

Pixate

Pirate delivers native prototyping so you can experience the ideas you have in a way you were envisioning from the start. Animations, workflows, and more are all possible inside the app giving it a very real feel. Pixate has also recently joined Google.

POP App

POP App is a neat mobile application that allows you to take photos of pen or paper mockups you sketch by hand and transform them into working prototypes that behave like a real app. Users, will of course, need to supply sketches to make this app excel but when done you can have a fantastic original looking prototype.

Framer JS

Framer JS takes more of a code based approach to creating prototypes and animations. If you need to convey a certain interaction you can do so with a bit of JavaScript. Framer JS has support for both Sketch and Photoshop files.

Keynote

Keynote from Apple is a hidden gem in the animation/prototyping world. Even though it’s intended use is for presentations a lot of designers have made use of it’s transitions from slide to slide to build usable prototypes. You can customize a lot of features to make it work like an app or website.

OmniGraffle

OmniGraffle is a native Mac application that allows you to create a variety of prototypes. Anything from workflows, storyboards, to complete clickable prototypes are bundled in the software. There is support for creating templates that allow you to use and reuse certain UI elements as well as style them to resemble realistic-looking objects.

Balsamiq

Balsamic is a long time runner in the prototyping/wireframing world. While you can’t click through these mockups you can use their large library of UI elements to create all types of applications no matter the device.

MockFlow

MockFlow is an all in one solution that focuses on working in the cloud. Users design applications by wireframing, collaborating with your team, commenting and even create websites using your prototypes. If you’re interested in trying out MockFlow, it’s free for one user with some limitations.

Moqups

Moqups is a neat application that gives more of a bare bones approach to wireframing and prototyping. It’s also available in the Google Chrome Store. You can create prototypes using predefined stencils which you can later customize to your liking.

Origami

Origami from Facebook is a neat framework which designers and developers can use to easily create, animate, and prototype their designs. Common patterns found on the Facebook application itself can be found within this framework. Origami uses some native Mac components to operate such as Quartz Composer so having a Mac is pretty essential.

Adobe After Effects

I would consider After Effects to be the predecessor of Adobe Flash minus the need for annoying plugins. After Effects has the famous timeline approach which allows you to graphically see durations and animation frames take place. You can export your projects to a variety of different formats which makes it a very popular tool in the animation world.

Photoshop

Photoshop believe it or not has support for animation. While it’s not the most popular application for that type of use it can be done. It’s interface is very similar to what you might find in After Effects only with less features. You can export your files as quite a few different file types as well which is a big perk.

Final Words

I’ve only scratched the surface of the number of apps out there you could potentially prototype or animate with. In the end, I would use what you are the most comfortable with. The main purpose of these tools are to communicate designs combined with interactions as well as develop better designs in the first place. With these tools in your arsenal, you will always save time, money, and frustration down the line.

Have a tool or app you would recommend instead of what we have listed? Let us know what it is and why you like it in the comments!