Cómo ayudamos a Fernández Molina a estrenar su nueva marca con una web en Webflow, animaciones a medida y su catálogo extraído con IA

Sobre el cliente

Fernández Molina es una constructora con sede en Madrid. Es especialista en edificaciones singulares, con servicios de rehabilitación, obra nueva, restauración y fit out. Acumula más de 4.000 obras entregadas y más de 250 clientes públicos y privados.

En este proyecto, nuestro cliente directo fue Messer Branding, una firma especializada en branding y experiencias de marca con la que ya habíamos colaborado en algún proyecto más pequeño. Messer se encargó del cambio de marca de Fernández Molina y del diseño de su nueva web.

El problema

Fernández Molina estrenaba marca y necesitaba una web que la reflejara. Messer tenía que construirla en Webflow y no contaba con un equipo propio en esa herramienta, así que nos encargó la maquetación. La web anterior estaba hecha en WordPress y todo su catálogo de proyectos y noticias vivía en el gestor de contenidos (CMS) de esa plataforma, al que no teníamos acceso.

Eso nos dejaba tres dificultades:

1. Unas animaciones muy cuidadas. El diseño incluía muchas, documentadas con vídeos que mostraban el comportamiento exacto. Desde la primera reunión vimos que con las animaciones de serie de Webflow no llegaríamos a ese nivel de detalle.

2. Un catálogo sin acceso a su origen. Había que trasladar todos los proyectos de la web antigua a la nueva estructura de campos de Webflow sin perder nada por el camino.

3. Un diseño de otro equipo, todavía en marcha. Al arrancar no todas las páginas estaban cerradas, y aun así había que empezar a desarrollar respetando un diseño que no era nuestro.

La solución

Qué construimos

Una web corporativa en Webflow con dos tipos de usuario.

• Quienes visitan la web (externos al cliente). Navegan por 5 páginas, las plantillas de proyectos y noticias y las páginas legales, en español e inglés, en escritorio y en móvil, con las animaciones del diseño.

• El equipo de Fernández Molina (interno). Publica proyectos y noticias en los dos idiomas desde el CMS de Webflow.

Decisiones técnicas

• Webflow, a petición de Messer. La herramienta venía dada, algo que nos pasa a menudo cuando el cliente ya tiene clara la plataforma en la que quiere su web.

• Animaciones con código a medida. Dejamos a un lado las animaciones de serie de Webflow y las desarrollamos con código generado con ayuda de Claude. Era la primera vez que abordábamos así las animaciones de una web, así que las trabajamos una a una.

• Migración con IA. Como no podíamos entrar en el CMS anterior, usamos Claude para escanear todos los proyectos publicados en la web antigua y volcarlos en una hoja de cálculo. Con ella, el equipo de Messer adaptó los proyectos a los nuevos campos del CMS de Webflow.

• Velocidad de carga. Webflow genera un código limpio, así que el trabajo estuvo sobre todo en controlar el peso de imágenes y vídeos.

Proceso

Organizamos el proyecto en cuatro fases.

• Arranque. Dejamos claro qué necesitábamos para empezar, la versión móvil de cada página, y acordamos ir construyendo a medida que el diseño se cerraba, en lugar de esperar a tenerlo todo terminado.

• Desarrollo. Avanzamos página a página, en escritorio y móvil. Las decisiones de diseño las tomaba Messer, con Claudia Gandoy, su directora de diseño, al frente. Su diseñador, Alejandro Mayo, estuvo muy implicado de principio a fin. Hablábamos por email y, en la recta final, por Google Chat.

• Revisión. Antes del lanzamiento comprobamos que la web funcionaba bien en todos los dispositivos y navegadores.

• Lanzamiento. Formamos al cliente para editar la web y el CMS, y para gestionar lo básico de SEO, como los meta títulos y las meta descripciones.

El desarrollo nos llevó 1 mes, pero entre el arranque en marzo y el lanzamiento en junio hubo un parón largo. El equipo de Messer tuvo que recopilar, actualizar y subir todo el contenido de proyectos y noticias con los campos nuevos, y era mucho volumen.

Guardarraíles

• No empezábamos una página sin su versión móvil.

• Los vídeos del diseño marcaban el comportamiento exacto de cada animación.

• La formación final permite al cliente editar la web sin romper el diseño.

Resultados y beneficios

• Todo el histórico extraído sin acceso al CMS original. Más de 100 proyectos sacados de la web antigua con IA, en lugar de copiarlos a mano uno a uno.

• Animaciones fieles al diseño. Las que las herramientas de serie de Webflow no permitían, recreadas con código a medida.

• Un CMS que el cliente edita por su cuenta. Con la formación final, el cliente publica proyectos y noticias en los dos idiomas sin depender de nadie.

Fernández Molina ha estrenado una web acorde con su nueva marca, editable desde el CMS y con los proyectos que ya tenía publicados. Con el contenido estructurado en el CMS y en dos idiomas, la web queda preparada para seguir creciendo con sus nuevas obras y noticias.