Framer

^

Framer

My Role:  

  • Interaction Design
Dating App - Onboarding


In my Interaction Design and Prototyping class, I was asked to design the interaction for a dating application for a mobile context. We had a choice to pick any aspect of the application and I choose onboarding. After having done competitive analysis on other Dating applications currently available in the market like Tinder, Match, Bumble and Zoosk, I noticed that some of them force users to login through Facebook, while some ask unnecessary questions. Most dating apps try to match you based on some common interests that users enter.
I wanted to make the most simple dating app which requires just person’s name, photo, date of birth, short description and their location. My dating app pulls a list of people of a particular gender that the user is interested in finding in the same continent and does not bias on any other shared interest. It allows space for interaction and some amount of surprise which I wanted to focus more on.
Logo Animation


Amidst redesigning my website, I wanted to create a welcome loading animation with my logo. Before I could code it out, I wanted to test the animation and used Framer to do so. Here is the final rendition of the animation.
SVG Animation - 50


I wanted to animate SVG's using Framer. SnapSVG javascript library provides a lot of functions to achieve this. I found the svg on 365cons.com and used Framer modulate function to create the animation.
SVG Animation - Oscars


It's that time of the year where everyone wishes Dicaprio wins an Oscar. Using SnapSVG library and Framer's modulate function, I created this loading image for Oscars.