How To Use Framer To Create A More Effective Mobile App

One thing we’ve learned is that simple is beautiful. People today tend to want apps that are visually compelling but breathtakingly simple.

Designing a great mobile app can be a long, frustrating process, it’s hard enough to translate ideas into action, never mind turning design into development. But it doesn’t have to be that way!


Before we even started working on building Annotate for iOS, we discussed the different ways we might approach building a tool that allows people to communicate visually with simplicity and style. We decided that prototyping was the most efficient vehicle to get us there.

We’ve experimented with a number of prototyping tools, but currently Framer Studio remains our hands-down designer favorite.2015-06-10_11_20_22_360.gif.png-1

Annotate prototype in Framer Studio

That’s partly because Framer Studio has a seamless integration with Sketch, and partly because the built-in toolset in Framer allows our designers to create prototypes that look and act like the real thing.

2015-04-08_22_52_13_360.gif.pngAnd isn’t that exactly what you want a prototype to do?

This gives us a chance to get a real working idea of how the final product might be improved as well as get feedback from prospect users, allowing us to make changes and refine the UX without spending any additional developer time.

One of the best things about prototyping VS static mockups is that the process is highly dynamic and iterative. Ideas just tend to flow while designers explore different interactions, and that was definitely the case with Annotate.


Glimpse, on the other hand, was always an experiment.


Glimpse prototype in Framer Studio

We wanted to find the fastest method we could, to capture and share a photo or video. And when we say “fastest” we mean RICKY BOBBY FAST!!! ☺


Working on this prototype was both fun and intriguing. It gave us the opportunity to experiment with gesture-based interactions, which we learned a lot from.

Yeah, but where is the app?

Annotate for iOS is now available on the App Store. Many of the learnings from our experiments are evident in the UI/UX of the app. Others we’re saving for the future versions.

Beat this Annotate comp!

And speaking of future versions. We’re introducing stickers in the upcoming Annotate update, to help you communicate better visually and have fun while using our app.

We’re giving away a cool Driftt T-Shirt to anyone who can beat the Annotate composition on the left.

Are you up for the challenge? Send us your Annotate sticker comp! ☺ ❤

As we continue to refine the experience of our products, prototyping will be always a very important part of our design process and we encourage every designer that hasn’t already made it part of their process to do so.

Thank you for reading.



P.S. Join 20,000 of your peers. Subscribe to the newsletter for hypergrowth.

Every Sunday evening we'll send you a roundup of the best content and events from Drift and around the web. Make sure you're ready for the week! Subscribe now.

Subscribe Here