Grupo Francachella

El sitio de una agencia creativa, servido como un menú

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 reúne dirección creativa, branding y producción audiovisual para artistas y marcas. Trabaja en Colombia, México, Estados Unidos y España. Convertí su concepto de marca, la mesa, en la arquitectura del sitio. Después llevé el diseño de Figma a un sitio en vivo, construido con Claude bajo mi dirección.

Año: 2026
Cliente: Grupo Francachella
Industria: Agencia creativa
Tipo: Diseño y desarrollo web

Servicios

IA creativaDiseño webUX/UIDesarrollo

Ver sitio en vivo

Mostrado solo con fines de portafolio. Las marcas pertenecen a sus dueños; si eres el titular y quieres que lo retire, escríbeme. Términos ↗

Grupo Francachella, una marca que ya era una metáfora

01El concepto

Una marca que ya era una metáfora

Una francachella es una reunión para comer y celebrar. La agencia se presenta como «Mesa Creativa». Decidí que el sitio no solo usara esa idea en los textos: que la estructura entera fuera la mesa. Los servicios se vuelven un menú en tres tiempos: Origen, Identidad y Amplificación. El equipo es «nuestra mesa» y el contacto dice «Hay sitio en la mesa».

Grupo Francachella, una dirección visual con apetito

// una-direccion-visual-con-apetito.md
const grupoFrancachella = {
  tags: ["IA", "Web", "Figma"],
  type: "Diseño y desarrollo web",
};

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

02Diseño visual

Una dirección visual con apetito

Definí la dirección visual en Figma: rosa intenso, granate y amarillo, tipografía muy gruesa y tarjetas con carácter. La metáfora acompaña cada sección sin quitarle claridad. El menú funciona como lista de servicios. Cada tiempo agrupa lo que la agencia hace, de la dirección creativa a la producción audiovisual.

Grupo Francachella, del diseño al sitio en vivo con claude

// del-diseno-al-sitio-en-vivo-con-claude.md
const grupoFrancachella = {
  year: 2026,
  industry: "Agencia creativa",
};

03Construcción

Del diseño al sitio en vivo con Claude

Construí el sitio con Claude como herramienta de desarrollo. Dirigí cada paso desde el diseño: la estructura de cinco secciones, las interacciones y el formulario. Ese formulario pregunta desde qué país escribe cada persona y frena el spam. Cada caso de la agencia tiene ficha con cliente, año y créditos. El sitio también incluye términos, privacidad y política de cookies.

Grupo Francachella, cuatro países, un mismo idioma

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

04Resultado

Cuatro países, un mismo idioma

La agencia tiene un sitio en vivo en grupofrancachella.com. La presenta en cuatro países con su propio lenguaje. Su trabajo con artistas y marcas aparece con ficha, créditos y la nota legal sobre marcas de terceros.

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

Primero los más parecidos a este caso. Con las flechas ves los demás.