Web Components

Client
Web Components
Services
Brand Implementation & Application
Creative Direction & Visual Identity
Brand Strategy & Positioning
Motion Design
Year
2023
Credits
Created whilst at Google Developer Studio
Background: Imagine building with Lego blocks for the web. Web components are like those blocks – reusable pieces of code that you can customize and assemble to create websites and web apps. They work on any website, regardless of how it's built, and solve common development headaches like duplicated code and compatibility issues. Essentially, they make building websites easier and more efficient.
Opportunity: Many developers were unaware of the power and simplicity of web components. This meant they were missing out on a powerful tool that could save time and improve their websites. To address this, we needed to raise awareness and make it easy for developers to find and use web components. By promoting web components, we aimed to foster a more robust and interoperable web, where developers can easily build high-quality user experiences. An additional ask was to help fix the brand architecture between the Web Components brand, the website and local chapters.
Solution: Web components neatly package code like a box or a cube. This simple analogy inspired the new brand identity. We created a free and open-source toolkit, including a versatile typeface and a flexible color palette, to visually represent the modularity and accessibility of web components.