Unlocking ideas
with Framer Studio
On observation & exploration
Deep observation improves prototyping, and vice versa.
Picture a guitarist composing a new song. His eyes are closed while his mind is exploring different rhythms and melodies through the skill of his fingers. His hands dance between previously learned chords, a hard earned technique that improved his capacity to unlock new ideas.
At the same time, there’s people creating music with the help of software, without ever needing to touch a real musical instrument in the process.
There’s something similar going on with designers right now: In order to explore ideas for new interactions, the “chords” to learn are made of variables, methods and functions: programming languages.
Obviously, one doesn’t need to learn to code in order to prototype ideas. Specially when there are a lot of options out there using “no coding required” as their selling point. But just as the guitarist is able to experience the flow of ideas being leveraged by his mind through his hands, a designer can scrutinize the feasibility and practicability of interactions and navigation flows through code.
Debates of “should designers learn to code?” are a waste of time. Let’s just be clear on this: an intermediate level of javascript will lead you nowhere as a programmer, but it will greatly expand your skills and opportunities as a designer.
The key thing here is being able to observe the flow of ideas taking shape. If learning code helps, then great. If having pen & paper is enough for you, that’s OK. But take a moment to close your eyes and experience what’s going on in your head, some of the best solutions might end up buried for relying too much on apps that do all the (limited) thinking for you.
Evnnntr — Prototype
Disclaimer: This is not intended to be a tutorial, but rather a brief post to share a recent experience with Framer Studio.
Evnnntr is a fake app that combines the strange naming convention of startups that duplicate consonants and drop vowels for no reason. Is an app that lets you consult Events’ schedules and save specific sessions to your personal plan.
I’ve used Axure, InVision and After Effects with great results. I’ve also briefly used Pixate and Marvel. But for this prototype I set goals and requirements that couldn’t be accomplished using those tools.
I needed to control several elements at the same time, each one with different animation curves (bye Axure), it needed to be interactive (bye After Effects) and it needed to have multiple sticky elements (bye InVision).
Right now, the one tool capable of doing all of that is Framer Studio.
Planning
Since this app is about events and their sessions, I wanted to represent different blocks of time using sticky timestamps on the left, similar to what Google Calendar uses for days.
I prefer to sketch ideas before going into any software: I sketch layouts, navigation flows and notes on how I think things work. Usually I’m way off, and that’s ok, that’s the idea behind brainstorming the hell out of it; however, this time I was pretty close to the final functionality of timestamps.
Comp created in Sketch.
I used to import my Photoshop and Sketch assets into Framer using its built-in import feature; however, after some guidance with big multi-screen projects, I now prefer to manually import specifically what I need and have full control on what I’m creating.
Structure & Code
I created an isolated list in a new document to experiment with code. My goal was to focus just on the variables and functions I was going to use for this scrolling component, instead of juggling with the whole project.
This is an example of the structure I ended up using for my custom module.
When I got it working (and after some tears of joy), I proceeded to clean the code and set it up to become an easy-to-use module.
My module accepts one image and one array with all the data for the timestamps. That means: I export the sessions list as a png and the timestamps are created dynamically in Framer. This way I can have list items (sessions) with different heights (ie. titles that occupy one, two or even three lines) and I’m free to set specific Y positions for each timestamp.
The module (ListModule) handles all the logic behind the scenes. This is the only code needed to create new lists based on that class.
#Import module
{ListModule} = require "ListModule"#Data for each timestamp
dataList =[
{"y":45, "labelText":"9:30", "subLabelText":"AM"},
{"y":210, "labelText":"12:00", "subLabelText":"PM"},
{"y":915, "labelText":"1:00", "subLabelText":"PM"},
{"y":1570, "labelText":"1:30", "subLabelText":"PM"}
#and so on...
]#Create new list
list = new ListModule
data: dataList
stampHeight: 120
image: “images/list-event1.png”
imageHeight:4000
Update: I uploaded this module to GitHub.
This is the module in action.
I then added that module to the project, which is using even more modules and specific functions that I had to create in order to make it work just as I wanted to. This is the result.
Conclusions
I’ve worked in projects in which Axure or InVision were more than enough: great tools to communicate an idea. But honestly, there’s stuff that needs to be carefully explained as part of the sales pitch, like “ok, let’s imagine that in the final build this button is going to be animated from here to here, and the background will change at the exact same time” or “this scrolls the whole content because it’s just a prototype, but let’s just say for now that the timestamps will be sticky in the final version.”
That’s acceptable, but sometimes we are demanding too much from our partners/stakeholders and they might not picture the same thing we have in mind; hence the discussion falls short without anyone noticing it.
That’s why I‘m constantly looking for more options, and yes, Framer Studio offers some real power!
When we talk about high-fidelity prototypes, usually we mean it just as “high-fidelity UI”, but Interaction Design keeps evolving, and it’s time to stop cheapening the “high-fidelity prototype” term, as it should now englobe the triad of UI, motion and interactions, for the sake of bringing better discussions between designers and developers, to raise the bar in our industry, and to keep unlocking new ideas.
