I Tried Framer And I Loved It
Some Caveats:
I am not a coder. There, I said it. I, like many other UX-ers out there, have felt the increasingly crushing pressure to learn to code. And I have resisted it for a long time.
Not anymore I guess.
Coming from a background in anthropology, film, and animation, ID was a very comfortable fit. To communicate ideas, it was as simple as jumping into Cinema4D/After Effects/etc. and banging out a convincing mock-up.
And often, there was a bit of trickery with xcode (node-based programming in Cinema4D) or expressions (simple programming in after effects) or but it never really got to anything that I would label as “code”.
But faking it doesn’t really cut it these days.
Clients expect faster, better prototypes that are closer to the real thing. And above all, they expect the one thing that faking it can’t provide: interactivity.
About Framer
For those of you not familiar, FramerJS is an extremely powerful code-based prototyping framework for mobile and web prototyping. A programming approach, as opposed to a node-based approach with programs such as Facebook’s Origami or Google’s Form, allows for (arguably) more complex and high-fidelity prototypes.
One of the main advantages of Framer is that it is one step closer to “reality”, in the sense that the constraints of a programming environment are (obviously) much closer to what a ‘real’ coder would face when trying to turn your monkey-code into production-ready code.
I will say that Framer still has some chinks in the armor; it does not support bluetooth send/receive (Origami does, which enables you to play with arduino), and it doesn’t support linking prototypes together to form more complex apps.
However, the second point does help reign in the scope of the application; the limitations of Framer also position it squarely in the interaction space, and outside of the ‘overall app flow’ space that InVision currently inhabits.
Prototyping
As a newbie to Framer, I began using it in the completely wrong way.
As aforementioned, I come from an animation and motion graphics background, and in that realm, problems are often solved with a simple adage: if it’s too hard, cheat.
So I did.
Faking it
Trolling through dribbble, I found a cool shot that was begging to be prototyped:
As often happens on dribbble, people create imagery that just doesn’t jive well with reality. I didn’t quite know how to approach this; it appears to have an actual 3D mesh, which makes this near-impossible to create, at least in Framer/Origami.
So I did what I knew best; I cheated.
aaaaand it didn’t quite work. I threw it into after effects, worked some quick magic, and the plan was to use a swipe interaction to scrub through the video. Unfortunately, the video module for Framer has its limitations, and it made the experience unstable.
Beyond that, the animation just felt unrealistic, unresponsive, and out of place. I had to find another way to approach this problem.
Making it
So I tried again, this time, with a slightly different approach. I found a shot that seemed more attainable:
This fell within the constraints of framer while still retaining the “3D-ness” of the original concept. Instead of scrubbing though a faked video, this version could actually use layers that are manipulated based on the swipe interaction.
And this was the result:
It was fully interactive, responsive, and most of all, not “fake”. It wasn’t a hack-around or unrealistic eye-candy. This was real code that worked. And I must say, it was satisfying.
Lessons Learned
The moral of the story is; do it right. If you have a concept that you’re willing to pour your time into, why not figure out how to make it actually work instead of succumbing to the sweet comfort of after effects?
Also, I learned that your first attempt/approach is often not the best/easiest way to do it. I actually created 5 different versions of the accordion, finishing with the iteration you see here.
The true benefit here is that I’m beginning to learn the constraints of Framer and work within them. In real-world terms, I took an initial prototype that was “un-code-able” and found a way to make it fit.
#tech, #life #interaction #design #education
