For years, creatives and collectives like BASIC® have called San Diego home but have existed in silos. To unite these different perspectives under one roof, we worked with local leaders to launch Crafted. Alongside this community initiative, we built a digital experience to underline the richness and diversity of our city’s creative scene.
Brand Identify
Before even thinking about the website, it was imperative for us to define the Crafted brand and its visual identity. As a community initiative, our strategy was to create a brand that evokes a sense of nostalgia and intimacy, capturing the feeling of connection at the dinner table.
This identity came to life across the Crafted ecosystem, from the wordmark to the typefaces. To complement these designs, we created a visual representation of San Diego’s diverse creative talent with a set of hand-drawn characters, which can be seen throughout the website.
Crafted is our way of championing empathy within our community.
Content
The site is an homage to the real people who make up our vibrant community, using their words and anecdotes as a foundation for our content. We dedicated each page to a different facet of the Crafted experience.
Interviews explore the captivating careers and personal lives of creators and tastemakers. Through a series of thought-provoking questions, we dig deep into their origins and tell the stories of why they do what they do.
Lastly, Past Experiences give visitors an intimate glimpse at the conversations happening both at and away from the table. At the top of each experience page, we explain the evening’s theme with commentary on today’s cultural climate. The page also features a music playlist from the night in addition to a gallery of photos and a full guestlist to familiarize visitors with the faces who make up this flourishing community.
Experience Design
The Crafted design system on the site is as organic and human as the dinner experiences themselves.
Throughout the site, visitors are greeted by candid videos and portrait photography, overlaid by film grain and dust scratches. The site’s smooth scroll reflects the free-flowing nature of the table’s conversations, while accompanying visual elements overlap each other to depict the collision of ideas and perspectives.
Technologies
During the development process, the site saw multiple iterations as layouts and components were scrapped then rebuilt. From collaborating closely with our design team to major code refactoring, we all worked in sync to ensure the site we built is everything Crafted represents.
Front End
The front end of the site is powered by a custom JavaScript framework. We used a single, centralized animation controller to maintain fluid and performant animations, breathing life into the site. Using the controller also helped us reduce the amount of code that runs on each frame. Fluid page transitions, parallax images, and a custom eased scrolling experience give the site depth and energy. Each tool and component was customized to make the site feel like a Crafted experience.
Back End
The content for the site is managed in a headless instance of Craft CMS. A modular layout system allows each page to feel unique and reduces the time it takes to create new content. We used a GraphQL API to serve all of the data, so all data endpoints are customized to serve and structure only the data that we want to present—a big performance advantage over older REST-based API systems. We structured all content management tools around two priorities: long-term maintenance and ease of updates. Focusing efforts on key principles such as these makes it easy to identify how code and tools need to be structured.
Company Info
BASIC® is an experience design company that thrives at the crossroads of culture and technology. Combining human intuition with systematic thinking, its work in strategy, design, and digital transformation is recognized for challenging business convention alongside the world’s most forward-thinking brands.