Fluent Design – Conceptual Motion Studies

Shortly after joining the Windows org in 2016, I was asked to contribute my motion design talents to the development of Microsoft’s Fluent Design System. Working within a small internal visual & motion design studio, I produced several conceptual motion studies with the goal of pushing the boundaries of the look and feel of Windows. Many of these concepts ultimately crystallized as foundational motion principals of Fluent and as platform features in the development toolkit.

This concept demonstrated the vision for “connected animations” – a feature that allows smooth transitions between related pages in an application. It also shows off parallax effects within a scroll pane.

This is an early concept for a photo app that presents content in a quick and visually striking way, with elegant transition animations tied to gestural input, and an emphasis on z-depth.

This concept is more “out there” – it was done as part of a hack week project to explore new interaction paradigms for video editing apps. Here I’m experimenting with materials, skeuomorphism, and rich transitions.

Here we see a concept for HoloLens where a floating contextual panel changes it’s contents based on the app currently being viewed by the user. This concept was designed to extend to 2D desktop environments as well, embracing the ethos of Fluent as a design system with consistency across computing modalities.

In addition to the conceptual UI seen here, I also filmed, camera tracked, and composited this shot.