Prototyping is a vital part in designing great products, from a simple poster to a car, it's extremely important to test designs in situations that resemble the real usage environment. My background is in Industrial Design and we used to prototype everything. Then I moved to graphic design and again I was always printing and checking to see how my designs felt. Now in the digital world, and with mobile taking over it's really important to be able to simulate the products in the handsets. There are quite a few frameworks out there but I would like to share one called Framer.

Frame can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote. I started using it a few days ago, recommended by Noah Levin, a fellow Googler and the amazing designer behind the Google App for iOS with Google Now.Framer is a prototyping tool for animation and interaction on desktop and mobile.

Features

  • Photoshop: Framer integrated with Photoshop to quickly export assets and set up a project.
  • Animation: Animate any view in full 3D space with spring physics and bezier curves.
  • Performance: Hardware accelerated for high frame rates. Based on CSS keyframes.
  • Flexible: Works well for desktop, mobile and tablets. Plays well with the rest of the browser.

Video preview

Framer Photoshop from Koen Bok on Vimeo.

For more information, to check out some demos visit http://www.framerjs.com/

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.