San Francisco is alive with the sound of music.
The foundation of the new SFCM brand is a delightful and dynamic animated logo designed by my colleague Andy Davies. Graphic lines with the energy of live music build to a crescendo, revealing an abstract take on the Golden Gate Bridge.
As the designer behind the rest of the visual identity and website, this was a great note to start off on. (I like puns, and I won’t apologize for it.) I also got to jump into After Effects myself to create playful riffs on the logo, including variations that celebrate Karl the Fog, SFCM’s annual carnival, and SF Pride.
San Francisco’s vibrant music scene—campus is right around the corner from SF Jazz, the Opera, and Symphony—is one of SFCM’s key distinguishers (especially when you consider winters at an East Coast conservatory). Beyond representing the city in the logo, San Francisco vibes are also infuse into the color palette, which complements our “Golden State” yellow with an iconic red-orange and blues and lavendars students would find on hand-painted bodega signage and painted ladies as they explore their new city.
With a breadth of opportunities for students, live programming for the community, and a large ensemble (see, I can’t be stopped) of talented faculty to highlight, navigability was a key concern for the new SFCM site.
A mega menu helps flatten the site hierarchy and surface important content from deeper in the site. It also means the most important actions on the site—requesting program information and applying—are never further than a hover away.
Clickable pre-headlines give context to content regardless of the path you took to it (unlike traditional bread crumbs) and provide an easy way to pogo through the levels of the site.