Grupo Francachella

A creative agency’s site, served like a menu

0 1 0 1 1 0 0 1 0 0 1 0 0 0 1 0
0 1 0 1 1 0 0 0 0 1 1 1 0 1 1 1
1 0 0 0 0 0 0 1 1 0 0 0 1 1 1 0
0 1 0 1 0 0 1 0 1 0 0 1 1 0 1 0
0 0 1 0 1 0 1 0 1 0 0 0 0 0 0 0
1 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0
0 1 1 1 0 1 0 1 0 0 1 0 1 0 1 0
1 0 0 1 1 0 1 1 0 0 0 1 1 0 1 0
1 1 0 1 1 1 0 0 1 1 0 0 0 1 1 0
1 1 0 1 1 1 1 0 1 1 1 0 1 0 1 1
1 0 1 0 0 0 1 0 1 1 1 1 1 0 0 1
0 1 1 1 0 1 1 0 0 1 1 1 1 1 1 1

brief.json

Grupo Francachella brings creative direction, branding and video production together for artists and brands. It works in Colombia, Mexico, the United States and Spain. I turned its brand concept, the table, into the site’s architecture. Then I took the Figma design to a live site, built with Claude under my direction.

Year: 2026
Client: Grupo Francachella
Industry: Creative agency
Type: Web design & build

Services

Creative AIWeb designUX/UIDevelopment

Visit live site

Shown for portfolio purposes only. Brands belong to their owners; if you own it and want it removed, email me. Terms ↗

01The concept

A brand that was already a metaphor

A francachella is a get-together to eat and celebrate. The agency calls itself a “Creative Table”. I decided the site wouldn’t just borrow that idea for its copy: the whole structure would be the table. Services become a three-course menu: Origin, Identity and Amplification. The team is “our table” and the contact page says “there’s a seat at the table”.

Grupo Francachella, a visual direction with an appetite

// a-visual-direction-with-an-appetite.md
const grupoFrancachella = {
  tags: ["AI", "Web", "Figma"],
  type: "Web design & build",
};

1 1 0 1 0 0 0 1 0 0 0 1 1 1 0 0
0 1 1 0 0 0 1 0 0 1 1 0 0 0 0 1
1 0 0 0 1 0 1 0 0 1 1 0 0 1 1 1
1 1 1 1 1 0 1 1 0 1 0 1 0 1 1 1
1 1 0 1 0 0 1 0 0 1 0 0 0 0 1 0
1 1 0 0 1 1 1 0 0 1 0 1 0 1 0 0
0 0 0 1 0 1 1 1 1 1 0 1 0 1 1 0
0 0 0 0 0 1 1 0 0 0 1 0 0 0 1 0
0 1 0 0 1 1 0 1 0 1 0 1 1 1 1 1
1 1 0 0 1 0 1 0 0 0 1 0 1 1 1 1
1 1 1 1 1 1 1 0 0 1 0 1 0 1 1 0
1 0 1 0 1 1 0 1 0 1 1 1 1 0 1 0

02Visual design

A visual direction with an appetite

I set the visual direction in Figma: hot pink, maroon and yellow, extra-bold type and cards with attitude. The metaphor runs through every section without costing clarity. The menu works as the list of services. Each course groups what the agency does, from creative direction to video production.

Grupo Francachella, from design to live site with claude

// from-design-to-live-site-with-claude.md
const grupoFrancachella = {
  year: 2026,
  industry: "Creative agency",
};

03Build

From design to live site with Claude

I built the site with Claude as my development tool. I directed every step from the design: the five-section structure, the interactions and the form. That form asks which country people are writing from and keeps spam out. Each of the agency’s cases has a fact sheet with client, year and credits. The site also includes terms, privacy and cookie policies.

Grupo Francachella, four countries, one language

1 1 1 0 0 0 0 0 0 1 1 1 1 0 1 1
1 0 0 0 1 0 0 1 1 1 0 1 0 1 0 1
0 1 0 0 1 1 0 1 0 1 1 0 0 1 1 1
0 1 1 1 1 0 0 0 0 1 1 1 0 1 0 0
0 0 1 1 1 0 1 0 0 0 0 1 0 0 1 1
1 0 1 1 1 0 0 1 0 0 0 1 1 0 0 1
0 0 0 0 0 0 0 1 0 0 1 1 1 1 0 0
1 1 1 1 0 1 0 0 1 1 1 0 0 0 1 1
0 0 0 1 0 1 0 0 0 0 1 0 0 0 0 1
0 1 0 1 0 0 0 1 0 0 0 1 1 0 1 0
1 1 0 0 0 0 0 1 0 1 1 0 1 1 0 1
0 1 0 1 1 1 0 1 1 0 0 1 1 0 1 1

04Result

Four countries, one language

The agency has a live site at grupofrancachella.com. The site introduces it across four countries in its own language. Its work with artists and brands appears with fact sheets, credits and a legal note on third-party brands.

[ OR™ ‒ RELATED / grupo-francachella.related ]

The closest matches to this case come first. Use the arrows to browse the rest.