What it Takes to Make FAB Components
Bethany Fong on tactile design and the thrilling early days of Material
Design Notes is a podcast by Liam Spradlin about creative work and what it teaches us. This season begins with a special series celebrating ten years since the launch of Material Design, which explores the inception, evolution, and future of Google’s design system.
The second episode features Bethany Fong, a design director at Meta who was a pivotal figure in the creation of Material Design. During her time at Google, Fong was responsible for designing the first set of Material components (including Material’s signature Floating Action Button), and went on to become a design lead on the team. In their conversation, Liam and Bethany talk about the tactile nature of design, the importance of keeping a notebook, and how the heady early days of Material unfolded.
In this episode, Bethany speaks about…
Designing the original Material components:
“Working on components felt very much like mechanical engineering to me. I would actually have pictures of mechanical objects in the back of my mind, imagining how they would translate into z-space.”
Early sketches of what eventually became Material’s bottom app bar.
Bethany and the team explored many different shapes and behaviors for the switch component.
Creating a sense of elevation was an innovative aspect of Material 1. These sketches show how UI components lift and descend in “z-space” in relation to touch interaction.
The origin of the Floating Action Button:
“What if I took the most important action of any given app and placed it [as a button] into this visual focal point? And the idea of the FAB just kind of took off from there.”
The impact of Material ten years on:
“Material Design has helped create the world that we now live in, which is where design systems are everywhere, and it’s so easy to just go into a program and start playing around with a sticker sheet of incredibly high-fidelity components.… All those things were not the norm ten years ago, and I think that’s progress.”
Intersectionality in design:
“My design journey is inextricably linked with being a woman in tech, being an Asian American woman in tech, being a leader, and learning to find my voice... and I would hope that any creative would be able to draw inspiration from and be able to pull from the emotional realities of their experiences when making new things for other people.”
Design by Specht Studio x Google Design. Motion by Yanis Berrewaerts.