Fluid Interfaces

Natural gestures and animations

The project

Inspired by Apple's WWDC18 presentation Designing Fluid Interfaces, I wanted to provide a resource for iOS developers to create their own fluid interfaces.

This took the form of an open source app on GitHub and accompanying Medium article. The GitHub repo has been popular, gaining over 2300 stars.

A screenshot of the code repository on GitHub
The source code is freely available online for anyone to integrate into their own app.

Design process

I started by breaking down the topics in the WWDC presentation into eight distinct interfaces.

Sketches of the interfaces
Early ideas about the different interfaces and how they would work.

This project required content for each interface: a working example, source code, design reasoning, and technical guidance. The goal was to be a complete resource—a developer could learn the motivation behind the interface as well as the code to build it.

I performed some basic user testing of the app with some fellow iOS developers, incorperating their feedback into the final app.

Preparing a keynote presentation for an Austin iOS developer meetup solidified my explanations of various interfaces. It was helpful to build a Keynote presentation and write an article simultaneously—the presentation forced me to be concise and visual, and the article gave me a place to expand my full thoughts.

Slides from my presentation about fluid interfaces
Slides from my presentation about building fluid interfaces.
Read more on Medium