El proyecto
Primero se hizo su web en Webflow, con CMS y animaciones a medida. Después, la home se rehízo en código propio, sin dependencias externas, para que su equipo pueda crear páginas nuevas con IA.
La nueva home tenía que ser más profesional y más centrada en el producto, sin perder la autenticidad de una marca que habla a profesores: aire entre secciones, un menú al estilo de Apple y animaciones con sentido.
El reto
Contar 21 herramientas de IA, en un sector donde la confianza lo es todo, sin que la web parezca un catálogo ni pierda el tono cercano que tiene la marca.
Cómo la construimos
Un clon fiel
Primero, la web de Webflow reconstruida en código propio, pieza a pieza, sin dependencias externas.
La librería
Después, su sistema escrito para personas y para IA: DESIGN.md, 9 bloques con «qué cambiar y qué no tocar» y 6 componentes.
El rediseño
Unas 37 rondas. Tras la revisión del cliente, que pedía menos cosas compitiendo por la atención, salieron pegatinas, pila y carga: la página pasó de 15.286 a 10.636 px. Una idea por contenedor.
Tres direcciones
IEP Copilot se probó de tres maneras antes de quedarse en pasos arriba y herramientas en el lateral de la app.
El filtro final
Antes de entregar: 17 tamaños de pantalla, de 320 a 2560 px, en Chrome y en WebKit.
Los detalles
Color
La paleta de Playground IEP, 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 playgroundiep.com, a 1440 px.
Espaciado
- Paso base
- 8 px
- Entre secciones
- 64 px
- Contenedor
- 1360 px
- 4entre elementos, 30 veces
- 8relleno, 127 veces
- 12relleno, 51 veces
- 16relleno, 174 veces
- 24relleno, 184 veces
- 32relleno, 18 veces
- 40relleno, 83 veces
- 96relleno, 8 veces
- 128relleno, 10 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 8 px.
Movimiento
Todo local, sin CDN ni seguimiento; GSAP y Lenis para el movimiento.
La app, de verdad
El hero es la app navegable: al bajar se fija y la app sube y crece.
Testimonios en cromos
Siete cartas apiladas: la nueva sube en arco y el resto la sigue en ola.
Preguntas en notas
Ocho notas adhesivas que giran en 3D para enseñar la respuesta.
Por dentro
Herramientas
- Figma
- Webflow
- HTML y CSS a medida
- GSAP
- Lenis
- Vercel
Cómo está hecha
- HTML, CSS y JS propios con un script de compilación que incluye parciales y versiona los recursos
- Todo local, sin CDN ni seguimiento; GSAP y Lenis para el movimiento
- Peso transferido de 4,67 a 1,91 MB; fuentes recortadas a latín, de 2,9 MB a 372 KB
- 0 % de fotogramas lentos al bajar en escritorio y 1 % en móvil con la CPU a ×4
- 0 errores en 17 tamaños de pantalla, en Chrome y WebKit
- Roles de pestañas, avisos para lectores de pantalla y contrastes revisados
En cifras
- 21 herramientas presentadas
- 1,91 MB de peso (antes 4,67)
- 17 tamaños de pantalla comprobados
- 0 % fotogramas lentos en escritorio
Lo que se descartó
- La carga del hoyo en uno (5 s) y la del cohete de cera (2,8 s): volvió la del logotipo, una vez por sesión
- Pegatinas por toda la web, el producto que entraba empujando y la pila de tarjetas en 3D
- Un buscador para las 21 herramientas: nadie sabría qué buscar
- Un logotipo en 3D: se quedó el suyo
Conclusión
Primero, una web en Webflow con CMS y animaciones a medida. Después, la home rehecha en código propio, sin dependencias externas, para que su equipo cree páginas nuevas con IA.
Pesa 1,91 MB (antes 4,67), no da fotogramas lentos al bajar en escritorio y se comprobó en 17 tamaños de pantalla, en Chrome y WebKit.
Lo que cuentan
«Eric y Andoni son increíbles. Es divertido trabajar con ellos y su trabajo es increíble. No solo tienen un talento increíble, sino que se preocupan profundamente por la colaboración. Durante todo el proceso se comunicaron constantemente conmigo y juntos construimos algo precioso.»
«Aquí va el testimonio del cliente sobre este proyecto: dos o tres líneas, con su retrato al carboncillo. Marcador para Eric.»