Summary: The site is about color — so I made it available in four different vintage-color pallets: Tangerine orange, lemon yellow, purple grape, and avocado green.
This was a fun design project – designing a website about collectible spray paint cans for Cap Matches Color (CMC). CMC is a group of collectors dedicated to the discovery and documentation of spray can history. It participates in artifact archival, educational exhibitions, and cultural events.
Understanding the business and its needs
The bulk of CMC’s public-facing activity is on Instagram, where they have built a strong community. They share images of spray cans and spray can memorabilia, along with merchandise available for sale, with their followers. While their following mostly consists of graffiti artists, who have always fetishized spray cans in their art, it also extends to collectors, and to restoration enthusiasts from other fields who are looking for authentic era paint colors. Where Instagram serves CMC well is through its broad audience reach and community engagement. Where Instagram falls short of their needs is in providing a static location for evergreen topics.
Scoping site requirements
With the client's market and needs in mind, we designed the site to feature three content types:
-
An already existing collection of interviews with graffiti artists from past and present. Early influencers and their modern successors reminisce on how cans and colors have played influential roles in their lives.
-
Event pages – CMC needs a static location for overview pages of events to link to from social media.
-
Photo galleries of collections, rare-finds, vintage in-store displays, and color charts.
Drawing design inspiration
Up until this point, the CMC branding leaned towards the angry teenage male graffiti aesthetic. This contrasts with the bulk of the imagery they put into the public sphere which is of vintage advertising from the fifties. To harmonize the brand identity, I brought the two together in a mashup of tags, drips, retro color pallets, and line work illustration.
The result is a kind of non-specific-era retro. – an unplaceable vintage, with aesthetic inspirations from the ’90s, when graffiti was at it’s prime, the late ’70s and early '80s when graffiti was born, and the early '60s when spray cans became household items.
Adding interactivity
The Cap Matches Color site features waypoint triggers on the long-scroll-homepage to animate key points into attention as the user scrolls. The fixed top header transforms itself as it re-enters the page on scroll down as well. The Gallery pages use isotope to provide animated filter results. And as a unique touch, how could a page about spray colors not have a color selector? Capmatchescolor.com comes in four flavors: Tangerine orange, lemon yellow, purple grape, and avocado green.
A toggle on the homepage flips the site theme from one color palette to another. Color themes change text, backgrounds, sidebars, and featured images. With the site CSS built with sass, it was simple to set up a file containing different values to four sets of color variables. Each set is output as a different CSS file and the toggle changes the header reference. There is a little more to it, but not much. It provides a touch of uniqueness in a world of template websites.
