BLACK
PRINCESS
A handcrafted HTML5 story that pulled users into fictional secrets of Brazilian nobility, rooted in the year Black Princess was born: 1882.
01 — Context
A 131-year-old beer needed a story people would remember.
Black Princess is one of the oldest beers in Brazil — created in 1882, in Petrópolis, during the peak of the Second Reign. But in 2013, for many Brazilians, it was just another supermarket label. Young & Rubicam was called to rescue what no one else told: the history.
The central question of the project: how to transform historical heritage into a digital experience without falling into the "institutional site" cliché? The answer was not in infographics or timelines. It was in fiction.
Brand mark — Black Princess, founded in 1882
02 — Concept
The nobility had secrets.
The creative insight was to treat the brand as the guardian of stories that were never told. Barons who sweated in secret, viscounts who knew too much, marchionesses who hid vices behind velvet curtains.
Fiction, not factual.
Invented characters, exaggerated situations, heavy humor. The historical truth only anchors it.
Painting, not vector.
Each scene is painted in acrylic on paper, photographed, and then digitized. Texture is the point.
Interface response to pressure and scroll
03 — Craft
Palette and texture — the artist's hand always visible
Illustrator Fellipe Gonzalez produced, one by one, more than fifty paintings in acrylic on paper — each one a frame of the narrative, designed already with movement in mind.
Script & Storyboard
Three short tales, structured like silent movie scenes. Each tale with between 8 and 15 physical painting keyframes.
Production & Prep
Deliberately restricted palette of black, graphite, ochre, and white. Scenes were separated into layers for real parallax in HTML5.
04 — Storytelling
Three tales. Three secrets.
Each tale has its own typography, its opening, and its own arc. Below, the entrance screens and a selection of internal scenes.
05 — Interaction
Let the scroll tell the story.
The scroll bar allowed each person to browse at their own pace — to advance, stop, or go back.
Allowing users to control the pace creates a more exploratory experience.
06 — Impact
Recognition and repositioning.
The digital experience successfully repositioned Black Princess for a new audience by merging a historic heritage with a cinematic narrative in HTML5.
Case film
07 — Reflection
Lessons learned.
The difference between a well-crafted website and an unforgettable digital experience rarely lies in the technology itself—it lies in the depth of human decisions sewn into it. By respecting the user's rhythm and letting the artist's hand show, design moves beyond utility into storytelling.
Let's
keep
in touch!
MORE
PROJECTS
Pulse Machine
2013 · Interactive Experience
Motz Freight Cards
2026 · Motz Transportes
