Site for a performer, singer, and podcast host.

Daniella Rabbani

The top of Daniella Rabbani's redesigned homepage: a dark plum page with her portrait, her name, a short line about her new album and two buttons.
RoleDesign and build, start to finish
Timeline2026
StackFigma, Claude Design, Wix
Visit the site

The brief

A site for Daniella Rabbani — performer, singer, and podcast host — that could carry a concert announcement, an album release, and casting/booking inquiries at once, without feeling like three sites bolted together.

Before and after

The site she had was one dark section: a long paragraph of credits beside a portrait, a single tickets link, and the contact routes underneath. Everything on it was true, and none of it was easy to find. Drag the divider to compare.

BeforeAfter
Before: one section, one paragraph, one link. After, at launch in September 2026: the portrait leads, and each thing she does gets its own strip. Both are the top of the page on a desktop.
BeforeAfter
The same pair on a phone, again with the launch version as the after.

What I built

Designed in Figma, with Claude Design in the loop for direction and prototyping, then built in Wix. Design and build, start to finish. The list below is the site at launch; it has been trimmed since, and today it is the hero and the album with the signup and contacts below.

  • A dark, portrait-led hero with the album as the one primary button, and a short line instead of the paragraph of credits.
  • Four practices, four strips. Acting and the album, the concert, the film, and the podcast each get their own ground color and one action: get concert tickets, watch on Prime, listen on Spotify. A small mono label names the practice and the one date that matters.
  • A newsletter signup between the strips and the footer, promising twice a month at most.
  • One contact footer routing each kind of inquiry — bookings, management, commercial and voiceover work, the podcast — to the right place instead of a single generic form.

The system

The palette and type scale from the Figma file: five plums, five orchids, three citrons, cream, blush and a ramp of inks, above the display serif.
The palette and type scale defined in Figma before the build: plum for depth, orchid and citron as accents, cream and blush for the light strips, ink for text. The built site uses a subset of it.

One page, four practices

The first strip of the one-page layout in Figma: a header with anchor links, a name, a line of credits and two buttons, with a placeholder where the portrait goes.
The one-page layout drawn in Figma at the classic Wix canvas width, 980 pixels, with the photos left as placeholders. Shown: the header and the first strip. The rest of the page repeats the pattern for the album, the film and the podcast.

A fuller version, proposed and not built

After the first version I proposed a fuller homepage and prototyped it: a textured hero with the portrait in a circle, a row for what is happening this month, one door into each practice, and a slot for her Instagram posts. It's the next phase and hasn't been built yet.

The hero of the proposed homepage: a purple, grainy ground, a large serif headline, the portrait in a circle, and a ticker of credits.
Proposed, not built. The hero of a homepage concept I prototyped for the next phase. The switcher at the bottom left is part of the prototype, not the site.
Below the hero of the proposed homepage: three cards for what is current, then four doors, one for each practice.
Proposed, not built. Below the hero: a row for what is current, then "Pick the room you came for", with one door per practice.

What this taught me

A site that serves four audiences is mostly a question of order: what gets the first screen this month, and what waits. The version that launched answered it with strips in a fixed order. The proposal answers it with a row that changes with the calendar.

Got a hard problem? I’d like to hear about it.