About the project
Google Cloud design system
At Google, I led the team working on the Cloud design system. This team’s remit wasn’t limited to just components and styles; it also included the structure of the Google Cloud console, and common experiences such as navigation and search.
Another key part of the group was our Inclusive Design practice, which provided the foundational guidelines enabling all of Cloud to meet and exceed WCAG 2.1 AA standards. This team was directly responsible for Google being able to win substantial deals within the public sector. In addition to providing specifications for ARIA roles and keyboard accessibility, the team was also responsible for building a color system that simultaneously represented the best of Google’s visual brand identity while working elegantly across an expansive array of scenarios (fig. 03.01 ).
During my time leading the team, the Cloud design system was the largest design system in use within Google. While Material provides the base style specifications and a handful of foundational component objects, teams at Google are responsible for extending the system for their own purposes.
To this end, the system team built and maintained an extensive system serving dozens of feature teams, hundreds of designers and thousands of engineers – with excellent documentation showing the structure, usage guidelines and functionality of composites such as menus, dialogs, tables and other complex component assemblies (fig. 03.02 ).
Google Cloud – data visualization
Google Cloud Platform provides a battery of mission-critical features centered on monitoring, observability and data. This creates some unique challenges around data visualization and data accessibility.
We were fortunate to have a team of designers and UX engineers who specialized in this area. The Cloud design system provides a rich array of data-aware components, from basic charts to more advanced diagrams, which allow users to understand the health of their application or network in more intuitive and interactive ways (fig. 03.03 ).
Close
