ZDBT
ZDBT
ZDBT
ZDBT

ZDBT. Musician, Producer.

ZDBT. Musician, Producer.

ZDBT. Musician, Producer.

2024.

01

Context

Zach Treble, known as ZDBT, is a musician and producer who recently surpassed 1 million streams on Spotify. He has requested a sleek, user-friendly website for his brand, designed with a transparent UI that allows his music to take center stage. The site will feature well-organized sections to ensure easy navigation, enabling users to access all of Zach's projects, collaborations, music videos, mixes, and live events effortlessly.

Zach Treble, known as ZDBT, is a musician and producer who recently surpassed 1 million streams on Spotify. He has requested a sleek, user-friendly website for his brand, designed with a transparent UI that allows his music to take center stage. The site will feature well-organized sections to ensure easy navigation, enabling users to access all of Zach's projects, collaborations, music videos, mixes, and live events effortlessly.

02

My Role

lead UX/UI designer

Deliverables: Product development, UX Design, UI Design, Design System, User Flow and Graphic Design.

03

Design

Goals 

Design Goals 

Design Goals 

A.

A digital aesthetic that reflects his creative ethos.

A digital aesthetic that reflects his creative ethos.

B.

Well organised categories with easy navigation and user flow.

Well organised categories with easy navigation and user flow.

C.

Visual transparency so the user focuses on the content.

Visual transparency so the user focuses on the content.

D.

Designed for accessibility and scaling on desktop, tablet and mobile devices.

Designed for accessibility and scaling on desktop, tablet and mobile devices.

E.

url connections for catalogue access and information.

url connections for catalogue access and information.

F.

SEO best practices for first search optimisation.

SEO best practices for first search optimisation.

G.

Custom HTML and CSS build with client-side updates, featuring a bespoke CMS system built with Sanity.

Custom HTML and CSS build with client-side updates, featuring a bespoke CMS system built with Sanity.

A digital aesthetic that reflects the ZBDT creative ethos.

A digital aesthetic that reflects the ZBDT creative ethos.

Minimal and punchy brand identity. Fading halftones alluding to the analogue production ZBDT is know for.

Minimal and punchy brand identity. Fading halftones alluding to the analogue production ZBDT is know for.

LIVE

ALBUMS

MIXES

PROJECTS

ABOUT

LIVE

ALBUMS

MIXES

PROJECTS

ABOUT

A responsive header for desktop.

ALBUMS

LIVE

MIXES

PROJECTS

OTHER

ALBUMS

LIVE

MIXES

PROJECTS

OTHER

ALBUMS

LIVE

MIXES

PROJECTS

OTHER

…and mobile with a hamburger menu.

…and mobile with a hamburger menu.

Both these components work. Hover to try it out.

This component works. click to try it out.

Splash pages scalable for desktop, tablet and mobile.

Splash pages scalable for desktop, tablet and mobile.

Interactive components.

Interactive components.

All components are responsive and scale across all breakpoints. Each item in ZDBT's catalog is encased in dashes, resembling … stamps. The hover state triggers an inverse effect on the component, signaling that it’s linked.

All components are responsive and scale across all breakpoints. Each item in ZDBT's catalog is encased in dashes, resembling … stamps. The hover state triggers an inverse effect on the component, signaling that it’s linked.

try hovering

try hovering

Evening Star

ZDBT

2023

Live and Albums pages.

Live and Albums pages.

Mixes, Projects and About pages.

Mixes, Projects and About pages.

Custom HTML and CSS with client-side updates, featuring a tailored CMS built with Sanity.

Custom HTML and CSS with client-side updates, featuring a tailored CMS built with Sanity.

We build a content management system using Sanity so that ZDBT can easily update the site without needing further development work.

We build a content management system using Sanity so that ZDBT can easily update the site without needing further development work.

Check out the site here…

Check out the site here…

zdbt.ca

zdbt.ca