Cómo construimos este sitio: el caso EMPOWR.

Este sitio es nuestro primer caso de estudio, y decidimos construirlo en público: documentar las decisiones, los números y también los errores. Esta pieza es el diario. Se actualiza mientras el proyecto avanza.

Empezamos donde empezamos todo: investigación. Antes de elegir un color estudiamos el mercado de estudios en México y LATAM, doce competidores locales y sus precios publicados, y los referentes internacionales que marcan la vara — de Anagrama a Locomotive. La dirección creativa salió de ocho rutas divergentes reducidas a una: la que llamamos Ácido Editorial, lujo silencioso interrumpido quirúrgicamente por un verde que no pide permiso.

La lección más cara del proyecto nos la dio un iPhone. Las primeras versiones del prototipo escondían el contenido detrás de animaciones que dependían de JavaScript — y el visor donde se revisaban no ejecuta JavaScript. Resultado: página en blanco. La regla que nació de ese error gobierna todo el código de este sitio: el contenido existe primero, completo y legible; el motion es una capa que se enciende encima cuando el navegador puede. Si estás leyendo esto, la regla funciona.

Decisiones técnicas, en corto: Astro con salida estática, porque el HTML plano es imbatible en velocidad; cero librerías de interfaz; menos de 5 KB de JavaScript propio para todo el motion; bilingüe /es /en desde la arquitectura, no como parche; y accesibilidad AA tratada como requisito de construcción, no como auditoría de última hora.

Lo que sigue: conectar el formulario, medir Lighthouse en producción y publicar los números en el pie — los buenos y los malos. Cuando este caso tenga resultados comerciales (leads, proyectos), los reportaremos con datos de analítica a 90 días del lanzamiento. Esa es la gracia de construir en público: no podemos maquillar el final.

— Paola A. González Guerrero · fundadora, EMPOWR STUDIO