When it came time for San Francisco–based digital design firm Upperquad to redesign its website, it challenged the studio to reflect upon its identity and on what it wanted to put forward about itself on a site. “It was a real balancing act to find a way to explore our definition of creativity without distracting from our work,” says Phil Ruppanner, founder and managing director at Upperquad. “And what surfaced from this process became the first thing that visitors will notice when they land on the site: always-moving, always-evolving shapes.” Flexible, energetic shapes move and react to what happens on each page, creating the site’s conceptual building blocks. Arranged one way, the shapes form patterns; in another way, they become canvases. They serve as both partitions and portals, dividing content or inviting visitors to discover new content. “These shapes represent the ideas and creativity that we infuse into our designs everyday,” Ruppanner explains. “They're what makes our site—and the work we do—uniquely ours.”

Upperquad built the site with Browserify, the GreenSock Animation Platform, GulpJS, Jekyll, ScrollMagic and the Siteleaf CMS. A custom-built YouTube player enables the video to play through the site but links users in when they interact with it. Since the launch of its new site, Upperquad has seen a 3,000-percent increase in daily visitors.