For the next installment of my 30 day challenge series, I dove into a sea of prototyping tools and pulled out Framer. In the battle for the best prototyping tool, the industry is the Wild West, and Framer is the new Sheriff. I know not everyone will agree with this, but if you consider the amount attention it has received, it is worth a look. From all of the prototyping tools I have tried (and I’ve tried them all), Framer promises to bring a level of realism to interaction and motion that most prototyping tools cannot deliver. I spent 30 days **dipping my toes into learning what Framer is and how I can integrate it into my workflow. Here are the four lessons I have learned.
Lesson 1: Coding is weird for designers
You should not feel uncomfortable admitting that. Designers are not always encouraged to learn any coding. It takes extra effort to try. Once I did, I found a whole community at work and online who were willing to help. There are tons of resources on Framer’s site, tutorials on medium and a small group of evangelists at IBM flooding our Slack channel. I have a little experience putting together poorly built sites, but finding this open community helped lower the learning curve. Here is a great tutorial to get you started with Framer and Coffeescript.
Lesson 2: Applying tutorials to actual work takes effort
Tutorials are made for you to follow simple steps and copy them in order to simulate their results. I found it a challenge to take those lessons and apply them to a prototype with real work. The trickiest one for newbies is multipage prototypes. I found some solutions to get you started. Here is a simple controller I found that makes navigating different page views much easier.
Coding is weird for designers, but there is a giant community out there open to helping you
Lesson 3: Interaction and Motion give the application life
In the quest for simulating fidelity, all paths lead to motion. When we can show how an app will respond to a tap, we can more adequately gauge the user’s true emotional response. This is just not possible with static screens.
Lesson 4: There are limits to prototypes and prototyping tools
When you move from simple clickable PNG’s to complex interactions, the prototype itself becomes complex. The more we wanted to simulate and test, the more my developers and I often questioned at which point should be just move to coding HTML? At the same time, I can quickly search and find new posts and tutorials trying to push those limits. Here are a few examples.
How complex and elaborate should a prototype be?
Pushing limits – Framer and Firebase.
Overall 30 days is more than enough time to get comfortable with making a basic prototype in Framer. I recommend just taking the plunge and buying the license. The **trial period will run out quickly. Once you do that, there is so much to explore with what you can animate and prototype.
Notes on Framer’s trial period:
**Trial period lasts for something like 30 minutes. So, I just paid the $100 (whatever the full price is now).
If you interested in my first 30 day challenge, check out my post on creativity and tea drawings.
