News
Awards

Our Founder Interviewed by Communication Arts Magazine

Our founder, Callum Griffith was interviewed recently by Communication Arts on the creation of the Black Music Project – an online exhibition that educates visitors on the history of Black American music with an extensive compendium of artists and genres.

September 5, 2022

More Posts

View All

Responses by Callum Griffith, chief executive officer, Composite.

Background: The Black Music Project is an interactive exhibit celebrating, promoting and preserving the idea that the history of Black American music is the story of America. Content includes genres and artists from call and response of the pre–Civil War period through the end of the 20th century’s birth of hip-hop and Neosoul music with lesser-known stories and curated music playlists.

There is no story more compelling than that of African American music. It is a story born in bondage and pain but full of love, passion, joy and faith. The story of Black music can make you weep with sorrow one moment and sing with elation the next. It is not a fairytale story but always leaves you with hope.

The goal of the Black Music Project is to reach students of all ages, music fans, and appreciators of Black culture and its impact on the world stage. The exhibit offers a broad historical perspective, entertaining trivia and curated playlists.

Design core: A core feature of the website is its retro design style combining vintage display fonts and cartoon-style illustrations with a modern, minimalist card design. The style strikes a balance between the historic and timeless subject matter with museum-inspired minimalism and unbiased information presentation. The dark UI and white text on a black background are purposefully reminiscent of the Black Lives Matter imagery.

Challenges: The Black Music Project has been a labor of love for the past several years. Originally pitched as an interactive infographic microsite in 2018, it was initially just an infographic displaying the evolution of American music genres and their interconnectedness illustrated by founder and director Christopher Fuller. The illustrations would later become a prominent feature of the project alongside extensive research and content production by researcher and writer Marc Fuller. Even then, we saw the limitless potential of what it could become but did not have the time or resources to commit.

In 2020, the COVID-19 pandemic provided an opportunity to work on the project with an abundance of newfound time. Over two years, we built three different versions of the site, each time needing to scrap the design and development because the scope and magnitude of the project continued to grow. We began with 26 static pages that used an experimental horizontal scroll to show off the genres and eras in a linear, timeline-like fashion. Eventually, we decided that the project needed a more accessible user experience to have mainstream appeal and reach a larger audience. The site’s current version was built to support a limitless number of genres, artists and an ever-expanding library of content that will continue to be layered upon.

Navigation structure: There are several different navigation and filtering options on the site. The two main navigation structures are the eras and artist and genre galleries, which each needed to display information in a way that could help users navigate and understand where to find relevant content. For the era gallery, we wanted to display the content in a linear, chronological timeline that users would intuitively understand. For the artists and genres galleries, we needed a structure that could support more than 125 artists and still help users find content quickly. We designed the page with a filtering system inspired by e-commerce product galleries with categories that help users sort by era or genre and narrow down the number of results shown at a time. Alternatively, you can scroll through eras to find relevant genres and artists.

Technology: The entire website was built on Webflow using its CMS to manage the whole library of artists, genres and exhibits with a combination of Finsweet libraries, JavaScript and jQuery to make some of the filtering and sliders functional. We used the default Spotify API player to embed curated playlists with custom artwork as album covers to change the background of the Spotify player to match the artist or genre page.

blackmusicproject.com

More News & Insights

View All
What Goes Above the Fold Still Matters: How to Capture Attention in the First 5 Seconds
Graphic image displaying 'above the fold' on a generic website

What Goes Above the Fold Still Matters: How to Capture Attention in the First 5 Seconds

What Goes Above the Fold Still Matters: How to Capture Attention in the First 5 Seconds

Above-the-fold content still makes or breaks first impressions. In this post, we explore why it matters, how to craft compelling hero sections, and what homepage design strategies actually improve engagement—from layout structure to CTAs that convert.

Read Post
Insights
Website Migration Guide: React JS to Webflow
Graphic image of React JS and Webflow logos

Website Migration Guide: React JS to Webflow

Website Migration Guide: React JS to Webflow

Migrating from React JS to Webflow isn’t just about switching platforms. It’s about unlocking speed, flexibility, and scalability. This guide walks through everything you need to know to successfully transition from a React-based front-end to a fully hosted Webflow site.

Read Post
Guides
How We Deal With Ambiguity in the Design Process
Graphic image with a purple question mark in the center, surrounded by wireframes for a homepage and a contact form.

How We Deal With Ambiguity in the Design Process

How We Deal With Ambiguity in the Design Process

Designers often crave clarity, but the best work happens before all the answers are known. At Composite, we lean into ambiguity as a creative advantage. This post breaks down how we use UX strategy, content planning, and collaborative structure to reduce risk, guide feedback, and build alignment at every phase of the design process.

Read Post
Insights
Available for new projects

Ready to take the next step?

Book Discovery Call