Content Based Color
Visual Design at Google Play
Year
2024
Skills
Visual Design, Interactive Prototyping, Research & Testing
Weavingcolorandcontentintoaseamlessuserexperience
How can I create beautiful and engaging visuals that highlight diverse content and give users a consistent and accessible experience?
I utilize strategic color mapping and dynamic interactions to ensure diverse content remains brand-consistent, engaging, and intuitively navigable.
Goal
Showcase Content Effectively
2. Enhance User Experience
Optimize Design Flexibility
Context
To overcome the design limitations of Google Play’s rigid Material 3 color tokens, I integrated Google Search’s design system to develop a more flexible, multi-palette framework that balances new feature expression with core brand consistency.
Baseline Scheme
Source Image
Content Based Color Scheme
Baseline Scheme
Source Image
Content Based Color Scheme
Process
Using Google's Material color system, I generated 18 palettes and assigned color roles, making sure to be brand consistent.
Then, I prototyped a hero card that dynamically changes color based on the chosen frame.
In a nutshell..
From the source image, a dominant color is extracted.
Based on the hue, it snaps that image to the nearest color scheme that I developed.
Testing
Afterwards, I got together with about ten Google Play designers and engineers for a virtual test run session using FigJam.
The team's feedback showed me that some of the colors, needed to be brighter and have more contrast to really work well for Google Play. Thus refined palettes were the next step.
Results
Content based colors were then applied to content forward pages & detail pages.
Content Based Color
Visual Design at Google Play
Year
2024
Skills
Visual Design, Interactive Prototyping, Research & Testing
Weavingcolorandcontentintoaseamlessuserexperience
How can I create beautiful and engaging visuals that highlight diverse content and give users a consistent and accessible experience?
I utilize strategic color mapping and dynamic interactions to ensure diverse content remains brand-consistent, engaging, and intuitively navigable.
Goal
Showcase Content Effectively
2. Enhance User Experience
Optimize Design Flexibility
Context
To overcome the design limitations of Google Play’s rigid Material 3 color tokens, I integrated Google Search’s design system to develop a more flexible, multi-palette framework that balances new feature expression with core brand consistency.
Baseline Scheme
Source Image
Content Based Color Scheme
Baseline Scheme
Source Image
Content Based Color Scheme
Process
Using Google's Material color system, I generated 18 palettes and assigned color roles, making sure to be brand consistent.
Then, I prototyped a hero card that dynamically changes color based on the chosen frame.
In a nutshell..
From the source image, a dominant color is extracted.
Based on the hue, it snaps that image to the nearest color scheme that I developed.
Testing
Afterwards, I got together with about ten Google Play designers and engineers for a virtual test run session using FigJam.
The team's feedback showed me that some of the colors, needed to be brighter and have more contrast to really work well for Google Play. Thus refined palettes were the next step.
Results
Content based colors were then applied to content forward pages & detail pages.
Content Based Color
Visual Design at Google Play
Year
2024
Skills
Visual Design, Interactive Prototyping, Research & Testing
Weavingcolorandcontentintoaseamlessuserexperience
How can I create beautiful and engaging visuals that highlight diverse content and give users a consistent and accessible experience?
I utilize strategic color mapping and dynamic interactions to ensure diverse content remains brand-consistent, engaging, and intuitively navigable.
Goal
Showcase Content Effectively
2. Enhance User Experience
Optimize Design Flexibility
Context
To overcome the design limitations of Google Play’s rigid Material 3 color tokens, I integrated Google Search’s design system to develop a more flexible, multi-palette framework that balances new feature expression with core brand consistency.
Baseline Scheme
Source Image
Content Based Color Scheme
Baseline Scheme
Source Image
Content Based Color Scheme
Process
Using Google's Material color system, I generated 18 palettes and assigned color roles, making sure to be brand consistent.
Then, I prototyped a hero card that dynamically changes color based on the chosen frame.
In a nutshell..
From the source image, a dominant color is extracted.
Based on the hue, it snaps that image to the nearest color scheme that I developed.
Testing
Afterwards, I got together with about ten Google Play designers and engineers for a virtual test run session using FigJam.
The team's feedback showed me that some of the colors, needed to be brighter and have more contrast to really work well for Google Play. Thus refined palettes were the next step.