At Facebook, we take pride in our open company culture. One way this manifests is being able to test out every product that’s in progress (also known as dogfooding) and give feedback to the team in an open forum. I originally wrote this as an internal post to provide pointer…

And how it’s different than designing at a startup — One year ago today the Branch team became part of Facebook. While excited for our new chapter, I was also anxious about what designing at a larger company was going to be like. This post is what I would have loved to know before starting my new job. For those…

Create impressive parallax effects in your prototypes using the motion sensor and a few lines of code. — Framer is a fantastic prototyping framework that makes it easy to test out cool interaction ideas for mobile and desktop. Among other things, you can prototype swipe and drag gestures with Framer, or use it to add motion to your web apps. Since Framer uses Javascript, it’s very easy to…

How we designed and built motion into the new Potluck with Framer and Angular.js — Earlier this week we released a refreshed design for Potluck, which aims to get you new and interesting things to talk about every time you log in. Our design process was a little different this time. We wanted to change the core interaction of Potluck, without relying on intrusive overlays…

Make a Twilio/Heroku mashup in 5 minutes, get a phone call when your local Apple Store has iPhones in stock. — I didn’t manage to get an iPhone on launch day. I was banking on using the “reservation” system to get it the next week, but Apple Store’s website doesn’t update squarely at 10pm anymore with what’s in stock, rather, around the clock. While using the availability checker on Apple’s website…

Extending Framer to make prototyping faster and more fun — Update: I ended up turning all these tips into a library you can instantly include in your projects. Check out Shortcuts for Framer! My favorite part about the Framer.js prototyping framework is being able to easily extend and tweak it to fit my workflow. …

Simple rules we follow for maintainable Sass code, portable HTML, and happy designers. — Nest conservatively Group things so that each module has a maximum of two levels of selectors inside. bad: .home-page { .invite-module { .header { .subtext { good: .home-invite-module { .header { .. .header-subtext { .. Sass makes it really easy to nest, but frivolously doing it will produce unnecessarily specific selectors, large…

Why are we showing off our work in dead mockups and not as finished products? — The only thing that really matters about a designer’s work is what ends up being shipped. Not her awesome idea that got the boot halfway through development, or her pixel-perfect mockup that the engineer botched. So why are some designers only able to show off their work in a gallery…

Update late 2014: This post is now over a year old. Framer Studio works with CoffeeScript (this post was written for Javascript) and certain syntax has changed. Head over to the draggable example on the Framer website for updated code. Here at Potluck we recently started using Framer.js to prototype…