One of the challenges we face as designers is presenting finalized design compositions to clients. This usually involves saving a flat pdf document with multiple frames to illustrate how the design will function, and then explaining why certain decisions were made. Most of the time, this format is sufficient. However there are some cases when a design is highly interactive (virtual tours, experimental features, etc.) or just unconventional and no amount of static frames will truly illustrate that. So how do you get clients to understand your goals for the design?

One of the challenges we face as designers is presenting finalized design compositions to clients. This usually involves saving a flat pdf document with multiple frames to illustrate how the design will function, and then explaining why certain decisions were made. Most of the time, this format is sufficient. However there are some cases when a design is highly interactive (virtual tours, experimental features, etc.) or just unconventional and no amount of static frames will truly illustrate that. So how do you get clients to understand your goals for the design?

Enter: Motion Prototypes

Motion prototypes are animated video files that play back the design in real-time. They showcase page scrolling, hover transitions, interactive features, and more. The client gets an accurate picture of how the design would look and function as a developed website.

The web is interactive, shouldn’t your design comps be too?

You can save yourself time and guarantee more clarity for your clients by letting the motion prototype do the talking. It is still helpful to save out flat pdfs in conjunction, as they are easier to share due to the smaller file size. After presenting motion prototypes, we often use a pdf during the question and answer period.

Motion Prototype Examples

We had the opportunity to work with Bucknell on their new website, and these are the three concepts that we presented. Keep in mind that most of the content within these motion comps was for placement only. 

Bucknell University

How To Create a Motion Prototype

At Fastspot, we use Adobe AfterEffects to create our prototypes. This gives us the most control, allows us to work quickly and ensures that quality time is spent on the design itself, not on the creation of prototypes. Remember, you just want to get the motion intent across. You don't need to animate every piece of interactivity.

Here are some tips on how to create your own.

  1. Export Transparent Slices - Once your design is complete, you’ll need to export all the parts so you can put it back together in AfterEffects. It’s helpful to think with a development state of mind, so separate only the elements you plan on animating. Always use transparent PNGs, as they give you the best quality and versatility.

  2. Re-create Design in AfterEffects - Use folders within AfterEffects to keep files organized (Comps, Assets, Footage). The main comp resolution is usually set at a realistic browser size, so it's around 1200px by 950px. Place all your flat graphics in the canvas and get everything lined back up properly. Don't worry, this shouldn't take very long. Use "parenting layers" to link layers together (ex: body graphic *link* header), which allows you to easily scroll vertically within the site by animating one property.

  3. Animate with Keyframes - Within the timeline, set keyframes to animate basic properties such as opacity, scale, and position. Those three properties can handle a majority of the work. It's important to think about pacing, so don't go too fast. Pause when you get to a new content section so the client can take in the design.

  4. Export Rendered File - Once everything is ready, render out your final file in H.264 format. This provides the best quality in relation to file-size.

Remember, motion prototypes aren't always required, but at Fastspot we're finding that they can sometimes prove to be invaluable.

 

Share on Twitter or Facebook Published June 23rd 2014