Framer

A collection of prototypes made with Framer, melding design and code to create compelling interactive experiences.

  • Forever learning
  • UX Design, UI Design, Prototyping

Prototyping is a design superpower, and Framer is one of the most powerful tools for it because it's based in JavaScript. It enables me to conjure up new possibilities, test and validate more accurately, communicate ideas more clearly, and better empathize with a developer’s perspective. Not to mention, it’s been a really fun foray into writing code.

App Store

I tried recreating the iOS 11 App Store home feed. The interaction design of the story cards was inspiring, but difficult to replicate exactly. Some details I was able to add: edge swipe interactions, close button color changes.

Try the prototype →

AirPal

Wanting to make a better prototype for this project really fueled me to learn Framer. It was empowering to be able to build something so deep and functional. Check out the project here.

Try the prototype →

User profile

A profile page for a fictional organization (Space Travel And Recreation), and the first web interface I made with Framer.

Try the prototype →

Calculator

The first Framer prototype I made myself was a calculator concept with entry history. It was an exercise in crafting animations, but also in thinking through the UX. For example, the clear/undo buttons disappear after hiding the history pane.

Try the prototype →

Random number generator

I came up with this as an example to teach my DocuSign coworkers. Straightforward to make in the Design tab, and it includes some solid code logic.

Try the prototype →

More work

Evernote
Zumper
AirPal
DocuSign