Alex Tsai
Framer.js is a flexible prototyping tool made by designers for designers. It requires some coding knowledge, however, as a code-based tool it allows for interesting prototypes that would not be possible otherwise. Designing with code was definitely a different type of thinking. For example, it made me think more about the logic behind interactions, which was not something I thought about as much when designing on Sketch or Illustrator. Over the summer, I played around with Framer and the following are the products of it.
Recursively creating layers. Give it a click!
Quora users explain recursion better here.
Recursion is a principle in computer science in which a function calls on itself. To see what Framer was capable of, I wrote a function that on a click would split a circle into smaller circles that would then call the same function on the said smaller circles. To give it some polish, I played around with the colors and gave it a little bounce with the animation.
A/BBY, is a module I wrote for Framer to record data from quantitative usability testing with Framer. It uses Parse to store the data which can then be filtered through and analyzed. The idea is to leverage prototypes that teams would be creating anyway and enabling them to test it at scale. The four data points it records are:
  1. Email for you to identify a user (this can be replaced by just a generated ID if contact information is unnecessary
  2. Errors, or the interactions users make that are incorrect.
  3. Success, a true/false value to see whether they successfully completed the task.
  4. Time it takes for the user to complete a predetermined task if they did complete it.
You can find the module on Github here. It was difficult for me to balance ease of use and flexibility in customization with the module. I did not want the prototyper to have to change their workflow to incorporate my module, but different tests may need different metrics so it still had to maintain flexibility.
3D cards prototype here.
As a side note, Framer gave me a lot more confidence coding as a designer and curious about what else I could design with code.
The quick shall inherit the earth, and the successful prototyper is the one that can fail faster. With Framer, that means validating an interaction or concept with the simplest prototype possible. The Framer website displays many beautiful prototypes, and while prototypes like that have a role in the design and development process, there is also a need for quick and dirty prototypes. Embracing those quick and dirty prototype allowed me to iterate and test more experimental ideas than I would have if I shot for the polished looking prototype from the beginning.