Belrad

Design

Development

Art Direction

Interaction

Headless

Shopify

Sanity

Vue

Klaviyo

Introduction

Belrad is a streetwear shop heavily influenced by the anti-design patterns of popular skate brands such as Monster Children and Quasi Skateboards. The website's bold visuals and unconventional layouts create a visually striking environment, yet beneath the surface the website remains a familiar shopping experience.

Navigating through Belrad is meant to immerse users in a world that rejects the mundane conventions found in traditional ecommerce, both in what it sells and how its digital layout is presented to the user.

Technology Used

Typefaces Used

Type Family

Ballinger Mono

Vist the Website

I aimed to craft distinct layouts for the majority of modules that make up the content on each page. The type is set far off to the side or bottom, juxtaposed by large images that take up a significant portion of the viewport. This design pattern is meant to be unconventional, prompting users to scroll and discover what comes next.

Design & Art Direction

Belrad's design is meant to be somewhat minimal and feel intentionally off-kilter. This is reflected in various elements of the site, such as the dark background colors seen within the filter and cart drawers, which contrast with the overall site design.

The art direction, while unconventional, was a little more straightforward. I took inspiration from the photography found on popular skate magazines like Thrasher and then applied a film grain effect in Photoshop to create a cohesive visual style.

Web Development

Belrad's development involved a headless build using Shopify and Vue.js. This allowed me build out native site components in Vue, while having access to the wide array of back-end extensions that are offered within the Shopify ecosystem.