System onlineCase file · DESANTIS-MUSIC-001
BYLT.MEDIA / case-deckEdinburgh · GMT
HomeCase studiesDESANTIS-MUSIC-001
// Mission Brief
REC-001
Case closedMusic & EducationWeb DevelopmentFile N°001

An Interactive Site for a Working Composer

De Santis Music is a composer and educator with music on BBC One, ITV and Sky. He needed one site to do two jobs, present the artist and sell the teaching, and to feel genuinely made rather than templated. BYLT designed and built an advanced, fully bilingual site with custom audio tools you can play in the browser, video heroes and a full light and dark theme.

>>StatusTARGETS HIT

// Mission Data
META
ClientDe Santis Music
SectorMusic & Education
DurationLive
ChannelsNext.js on Vercel
DeliveryBYLT Media (sole)
StatusDelivered
// Live Counter
VERIFIED OUTPUT
Fully Bilingual
EN / IT
Interactive Audio Tools
3
Full Theme Switch
Light / Dark
Built on Vercel
Next.js
// Objective.log
§ 01 — PROBLEM
Problem statement · priority 01

>A composer with serious credits needed a site that matched them and did two things at once: present the artist and sell the teaching to schools, students and the industry. An off-the-shelf template would have flattened the craft, so the brief was a site that feels made, interactive and bilingual.

PP.01Two audiences on one site: an artist portfolio and a teaching business, each needing a clear path
PP.02It had to feel premium and hand-made to match the client's BBC, ITV, Sky and Super Bowl credits, not a template
PP.03Fully bilingual in English and Italian, with the SEO and hreflang to match
PP.04A music brand deserved genuine interactivity, not static pages
Objective · priority 01

>>A bespoke, interactive, bilingual site that matches a working composer's credits and carries both the artist and the teaching business.

// Target Asset
IMG-01
De Santis Music campaign visual
Acquired
// De Santis MusicCase visual
// Verified Output
RESULTS
Languages
2
Languages
2
Interactive Audio Tools
3
Teaching Disciplines
3
Colour Themes
2
Bars indicative · values verifiedSource · platform reporting
// Phase Log
§ 02 — METHODOLOGY

The methodology.

Total duration · Live
φ1Closed
Two jobs, one site
Structure & Audiences
Separated the artist story from the teaching business and gave each a clear path
Structured the teaching around three disciplines: music production, songwriting and composition, and sync and media composition
Planned the schools, workshops and online mentoring routes around real enquiries
Set a bilingual English and Italian content model from the start
Agreed a premium, made-not-templated design direction
φ2Closed
Premium, made, cinematic
Design & Brand
Designed a premium, cinematic look with full-bleed video heroes
Built a complete light and dark theme, switchable across the whole site
Set typography and motion that feel crafted, with reduced-motion respected throughout
Carried the brand consistently across the artist pages and the teaching pages
Designed the bilingual experience so both languages feel first-class
φ3Closed
Tools you can play
Interactive Build
Built a playable step-sequencer drum machine on the music production page
Built a chord player for the songwriting and composition page
Built a scene-scoring tool for the sync and media composition page
Wired video heroes with reliable autoplay and clean fallbacks
Built the whole site bilingual in English and Italian with a single content model
φ4Closed
Found and fast
SEO & Launch
Added structured data for the artist, the teaching courses and the video work
Set correct hreflang across the bilingual English and Italian site
Tuned performance so the video-rich pages stay fast
Made the interactions accessible, honouring reduced-motion preferences
Launched on Next.js and Vercel
T0 · kickoffClosed
φ1
φ2
φ3
φ4
// Countermeasures
§ 03 — STRATEGY STACK
V.01Active
01

Interactive by Design

Custom in-browser audio tools, a step-sequencer drum machine, a chord player and a scene-scoring tool, so visitors play rather than just read. The kind of interaction an off-the-shelf template cannot do.

V.02Active
02

One Site, Two Jobs

An artist portfolio and a teaching business under one roof, across schools, private students and industry mentoring, each audience given a clear, distinct path through the site.

V.03Active
03

Bilingual and Built to Be Found

A fully bilingual English and Italian site with correct hreflang and structured data for the person, the courses and the video work, so the right people and search engines find it.

// Gallery
IMG · HIGHLIGHTS

Build highlights

04 frames
G.01Capture
Music production page on the De Santis Music site, with a playable step-sequencer drum machine

>The music production page: a playable step-sequencer drum machine, so a visitor makes a beat in the browser.

G.02Capture
Sync and media composition page on the De Santis Music site, with a scene-scoring tool

>The sync and media composition page: a scene-scoring tool that lets you score a clip, showing the work in action.

G.03Capture
About page on the De Santis Music site, telling the artist story and credits

>The about page: the artist story and credits, from BBC and ITV to the Super Bowl, told with real weight.

G.04Capture
De Santis Music homepage on mobile, with a full-bleed video hero

>The homepage on mobile: the full-bleed video hero and cinematic feel carried intact onto a phone.

// Results Console
§ 04 — VERIFIED OUTPUT

The results.

ReferenceDESANTIS-MUSIC · FILE 001
M.01 · LanguagesLive
2
M.02 · Interactive Audio ToolsLive
3
M.03 · Teaching DisciplinesLive
3
M.04 · Colour ThemesLive
2
// Comms Log
§ 05 — CHRONOLOGICAL RECORD
M00>Brief received.···
P01>Mapped the two audiences and the route structure that serves both.···
P02>A dark-first premium design with video heroes and a full light and dark theme.···
P03>Custom in-browser audio tools built in-house, plus the bilingual content engine.···
P04>Structured data, hreflang and performance work, then live on Vercel.···
END>De Santis Music programme delivered.●●●
END OF LOG.
// Await Next Brief
OPEN CHANNEL
Ready to receive

Ready for results like these?

Tell us where you want to grow. We'll send back a no-fluff audit and the first three moves we'd make.

// What you get
Where the opportunity is
The first moves we would make
No fluff, no obligation
► Request your free auditNo commitment · no lock-in