El proyecto
Se presentaron varios conceptos alineados con la visión de Cubbo, siempre respetando su identidad, y se afinó la dirección con Ignasi hasta el concepto final. Desde ahí, cada página se aprobó casi sin cambios.
Con la home aprobada, el desarrollo empezó en paralelo mientras el diseño cerraba las páginas secundarias.
El reto
Unir dos webs en dos idiomas sin perder contenido, posicionamiento ni formularios de venta, y rediseñarla por el camino.
Los detalles
Por debajo
El CMS se estructuró para migrar cada caso de éxito y cada artículo del blog de México (es-MX) y Brasil (pt-BR), con un plan de redirecciones 301 en Cloudflare y los formularios de ventas conectados a HubSpot, que avisan al equipo en Slack.
Color
La paleta de Cubbo, por lo que se usa en la web entregada. Pasa por encima de cada color.
Uso medido en las grabaciones de la web entregada: cada píxel cuenta para el color más cercano; fotos y degradados aparte.
Tipografía
Medido en cubbo.com, a 1440 px.
Espaciado
- Paso base
- 4 px
- Entre secciones
- 64 px
- Contenedor
- 1360 px
- 4entre elementos, 47 veces
- 6relleno, 11 veces
- 8entre elementos, 74 veces
- 12relleno, 76 veces
- 16relleno, 21 veces
- 24relleno, 48 veces
- 32relleno, 41 veces
- 40relleno, 37 veces
- 64relleno, 12 veces
Los rellenos, márgenes y huecos que más se repiten en la web entregada, a 1440 px y a escala real; casi todos caen en pasos de 4 px.
Movimiento
GSAP con ScrollTrigger, SplitText y Flip; carga del CMS con Finsweet.
Cómo conecta Cubbo
Cuatro pasos de la operación que se pulsan y cambian la imagen.
Seis productos, un sistema
La capa tecnológica: cada producto con su icono isométrico animado y su texto.
Tecnología, red y expansión
La infraestructura de Cubbo con sus cifras, en fotografía.
Por dentro
Herramientas
- Figma
- Webflow
- GSAP
- Osmo Supply
- Finsweet
- HubSpot
- Cloudflare
Cómo está hecha
- Un solo proyecto de Webflow con localización es-MX y pt-BR
- Migración del CMS: casos de éxito y blog de los dos países
- GSAP con ScrollTrigger, SplitText y Flip; carga del CMS con Finsweet
- Redirecciones 301 con Cloudflare
- Formularios de ventas en HubSpot con avisos en Slack
En cifras
- 2 → 1 webs unificadas
- 2 idiomas: es-MX y pt-BR
Conclusión
México y Brasil viven ahora en un solo proyecto de Webflow, con localización es-MX y pt-BR, el contenido de los dos países migrado y redirecciones 301 para no perder posicionamiento.
Los formularios de ventas llegan a HubSpot y avisan al equipo en Slack.
Lo que cuentan
«Nos encantó trabajar con Andoni y Eric. El resultado superó nuestras expectativas, pero lo mejor fue lo increíblemente proactivos que fueron. Nunca tuve que ir detrás de ellos: venían a mí con soluciones. Desde el primer día entendieron quiénes somos, qué hacemos y qué necesitábamos.»
«Aquí va el testimonio del cliente sobre este proyecto: dos o tres líneas, con su retrato al carboncillo. Marcador para Eric.»