9

Recording videos of prototypes?

over 7 years ago from , CEO @ Dreamten & GiveForms

There are a ton of prototyping tools out there, but I'm curious what tools/techniques people here us to record videos of prototypes. For example:

https://dribbble.com/shots/2121350-Delivery-Cardhttps://dribbble.com/shots/1945593-Login-Home-Screenhttps://dribbble.com/shots/2589690-Be-amazing-today

My first guess is after effects or a simple quicktime recording of a prototype. But these animations are very clear, not grainy. Any advice/tips on how these are done?

10 comments

  • Sean McNultySean McNulty, over 7 years ago

    I'm almost certain these are all made completely with After Effects. Some of the animation hints that they're not interactive prototypes. I'm not sure what you mean about not-grainy though? AE or QT recordings shouldn't be grainy unless they've been badly compressed.

    1 point
  • Brand Winnie, over 7 years ago

    Adobe XD has recording built right into it. Super easy to use.

    https://www.youtube.com/watch?v=nu7bd8m1GJg

    1 point
  • Wyatt CampizWyatt Campiz, over 7 years ago

    For things like this, I've strictly used After Effects. Whether the UI is mocked up on a phone, or just the UI. Personally I think After Effects is the best choice.

    1 point
  • Tyson KingsburyTyson Kingsbury, over 7 years ago

    I've wondered that myself..tried asking the question here a few months ago, and didn't really get a satisfactory answer, (my own fault i think, didn't ask the question properly) hoping you get a better answer here...our new company website plans on having some of these in a tour, and I'm the one that's going to have to design and build them...would love to see a tutorial on how to do that, or just some good advice....

    1 point
  • Philip LesterPhilip Lester, over 7 years ago

    I created a Dribbble shot with a recording of a live web prototype: https://dribbble.com/shots/2900721-Servers-Volumes

    It's not as smooth as some of the other Dribbble shots I mentioned in my original post, but it's an actual developed prototype and not simply an interactive mockup. I created this using Screenflow - http://www.telestream.net/screenflow/ - then imported into Photoshop to adjust the bg and dimensions.

    0 points
  • Edgar Chaparro, over 7 years ago (edited over 7 years ago )

    Both Flinto and Principle have recording options. Principle lets you export to gif and for flinto you will have to import the .mov into frames and create a gif in photoshop! Check out my buddy Pablo Stanley he puts out great resources. For basic animations!

    https://dribbble.com/shots/2647565-Loading-Animation-Carbon

    0 points
  • Reide Iredale, over 7 years ago

    Invision uses screenflow for a lot of recording interactions. A lot easier than learning after effects by the looks of things.

    http://blog.invisionapp.com/7-tips-for-designing-awesome-gifs/

    0 points
  • Bilal MohammedBilal Mohammed, over 7 years ago

    Principle let's you record the prototype you make. And export as movie or gif.

    For everything else, of course, there is Quicktime recording.

    0 points
  • Dean HaydenDean Hayden, over 7 years ago

    Looks like all of these are done with After Effects rather than a QuickTime recording. A recording will always have some form of compression and as a result won't be as crisp as a generated animation.

    Maybe, you could record the results on a Retina display and scale down?

    0 points