I'm Francis Cortez. I enjoy prototyping, interaction design, and front-end development. My other corner on the web is at Design Sprints, where I write and record screencasts about interaction design tools. You can also find me on Medium, Twitter, and Dribbble.

I live in New York. Oh, and I also go by Ces.


Responsive Features

I'm on the creative technology team. We combine design and code to build monthly features. We've shifted focus to mobile through responsive design. I've given internal presentations, created prototypes, and written internal posts to demonstrate responsive design principles. After launching each feature, we identify reusable components as we build and refine our pattern library.

Wishlist Prototype

I worked closely with our UX team to create a wishlist prototype. The video shows a few iterations with resizable items, product filtering, and multiple lists. I also worked with the ecommerce team on the production version, focusing on touch interactions.

Holiday Gift Guide

The brand creative team created a holiday gift guide with videos inside the product grid. I focused on video implementation and mobile fallbacks. The gift guide was nominated for a Webby in the General Shopping category.

Design Sprints

I’m very interested in design sprints, especially the methodology outlined by Google Ventures. I took these steps and applied them to a few side projects of my own. I wrote pretty long posts that give insight into how I approach design problems from understanding existing solutions to designing and building testable prototypes.

Design Sprint I: Photo Layout

This was my first personal design sprint. After building a site to share photos from a Spain trip with some friends, I thought about how I could streamline the photo layout process. Check out the post, which has been shared on Twitter over 1000 times.

Design Sprint II: Meal Tracking

I designed a mobile food tracking app and detailed each step eventually leading to a Keynote prototype. Check out the Medium article.

Design Sprint III: Prompts

I designed a daily writing app and detailed each step leading to a mobile Framer prototype. Check out the Medium article.

Material Design Exploration

After Material Design was announced, I used the guidelines to create a concept NBA app. I wrote about the process and the thinking behind design decisions. Check out the Medium article.

The post has over 50,000 views on Medium and was shared by Smashing Magazine on Twitter a couple times. And it was really exciting to see that Matias Duarte checked it out:

Origami + Material Design

I re-created some of the Material Design guideline videos with Origami. Through this project, I was really able to get a handle on Origami while also learning the specific animation concepts that the Material Design guidelines talked about. Check out the Medium article.

Framer Projects

Framer is a code-based prototyping tool focused on interactions and animations. It's JavaScript-based so it clicks particularly well with my background. Framer has a great community and these are a few of the projects I've shared.

Layered Animation

I put this layered animation demo together to share with the Framer community. You can move the controls around to change the white dot’s path. It was featured on the official Framer blog and is used as an example on the Framer site.

Firebase + Framer Intro

Firebase provides backends for web and mobile apps. I've found it very useful for prototyping. It excels with real-time data. I created an example and screencast showing how to use Firebase with Framer to sync animations across devices. Check out the blog post.

Sketch + Framer Talk

I spoke at the New York Sketch Meetup (hosted by BuzzFeed Product) about working with Sketch and Framer. I re-recorded it solo on the left, and you can also check out a recap I wrote.

Form: Getting Started

Google/RelativeWave’s Form is another patch-based tool for interaction design. I broke down one of the RelativeWave examples to get started and wrote about the process to help others get started as well. This post was featured in the Design+Code Best Design Resources newsletter. Check out the Medium article.

In the article, I take an example and break it down. Starting with a few assets created in Sketch.

We can trigger animations after tapping the icon.

Then we can combine the animations and tweak curves and timing until the interaction feels good.