Al final del artículo tendrás una copia del proyecto para que puedas bichearlo tú mismo.

Resumen breve

Se trata de una landing page que muestra el trabajo realizado por el cliente, conectada al CMS (sistema de gestión de contenidos) para hacerlo todo escalable.

En resumen:

• Un ticker de proyectos (parte inferior) conectado al CMS con un hover dinámico que muestra imágenes de cada proyecto con un overlay. Con filtrado incluido.

• Un manifiesto con scroll automático de texto.

• Un logo que aparece al hacer click en toda la web.

Para verlo más claro, puedes ver aquí la página directamente.

Adquisición

Alex Vaughtton (de NocodeHackers) me escribió para hacer este proyecto una realidad. Valoré el reto, tiempos (la idea era tenerlo cuanto antes). Me encajaba, así que estaba dentro.

Al verlo supe que la posibilidad de ir a lo sencillo estaba ahí, sin CMS. En Framer, por defecto, no puedes usar los datos de una misma colección CMS tanto para mostrar el ítem como para alimentar su overlay. Son dos componentes distintos y la herramienta no los conecta de forma nativa.

Pero hacerlo así era muy aburrido. Quería divertirme.

Fue entonces cuando comenzó todo.

Kick-off

El servicio incluía únicamente el desarrollo. El diseño ya venía cerrado en Figma.

Por lo que… con el diseño, copy y contenido listos podíamos comenzar.

Proceso

Empecé por aquello que sabía que podía hacer. La maquetación. Poner cada cosa en su sitio. Ya que, por otro lado había dos funcionalidades que no sabía si las iba a poder hacer y de hacerlas… cuánto tiempo me llevarían:

• Conexión de una misma colección de CMS al ítem y a su overlay

• Scroll automático del Manifiesto

Maquetar me llevó alrededor de una hora y media.

Decidí continuar con la columna vertebral del proyecto. Conexión de CMS a un ítem y a su overlay.

A pesar de intentarlo con la ayuda de ChatGPT no daba con la clave, lo que me llevó a escribir a un amigo, Fred Moon. Él había hecho ya algo parecido para un cliente suyo. Y así fue… en cuestión de minutos tuvimos la solución. Sobre dicha base yo trabajé (con ayuda de ChatGPT) algunas cosas para que se alineara con este proyecto. Tuve así dos overrides totalmente funcionales.

Estos trabajan juntos para crear dos sistemas interactivos en la web:

Overlay dinámico: Cuando haces hover sobre un elemento, cambia la imagen de fondo con (o sin) animación. Al salir, vuelve la imagen por defecto.

Filtros: Al hacer clic en una categoría, filtra los ítems del CMS, resalta el botón activo y actualiza todo sin recargar.

Con esto listo, quedaba el scroll automático del Manifiesto. Alex lo resolvió con Framer Workshop, tras un par de prompts bien afinados. Brutal.

A partir de aquí era coser y cantar. Tuvimos que modificar alguna cosa basada en feedback del cliente que me llevó a cancelar mi suscripción de ChatGPT, pero eso es otro tema… lo gordo ya había pasado 😅

Con todo listo, hicimos un pequeño QA y finalizamos.

Hand-off

Organizamos una reunión con el cliente en la cual le explicamos (además de mandarle un vídeo) cómo funciona el CMS en Framer y cómo podía hacer alguna edición básica.

Se creó una cuenta de Framer y le transferimos el proyecto.

Materiales/herramientas

Las dos herramientas que nos han ayudado a sacar el proyecto adelante, permitiéndonos ir más allá de las capacidades nativas de Framer han sido:

1. Framer Workshop. No es la primera vez que lo uso en un proyecto. De verdad, si sabes pedirle las cosas, las hace. El scroll automático y la aparición del logo al hacer clic son gracias a esta herramienta.

2. ChatGPT ClaudeAI. Funciona mucho mejor, al menos para el código. La hemos usado para retocar algunas funcionalidades de los overrides del CMS.

Ah, y como te decía al principio te dejo aquí una copia del proyecto (retocado con info falsa por cuestiones lógicas) para que le eches un ojo y veas cómo está todo 😊

Este proyecto me recordó que a veces hace falta querer divertirse para descubrir cosas nuevas.

Solo necesitas tener criterio, pedir ayuda cuando toca, y saber hasta dónde puedes estirar tu stack.

Como decía Arnold J. Toynbee: “The supreme accomplishment is to blur the line between work and play“.

Si tienes ganas de charlar un poco más acerca de algún punto específico del proyecto, responde a este mismo correo. Te leo.

Finalmente ha llegado, la primera edición de Entre Líneas. Sirvete un café o un té y disfrútala. Espero que te guste.

Resumen breve

Hoy te cuento como — junto con mi colaboradora Elena — diseñamos y desarrollamos una landing page en solo cinco días para una startup digital que recaudó $8.5M hace un par de años.

Perfecto para explicarte cómo ordenamos el proceso para no morir en el intento.

Adquisición

Framer tiene un programa llamado Switch. Donde cualquier empresa/startup que tenga ya una web y quiera migrarla, puede aplicar. Para dicho programa, Framer tiene una red de unos 20 expertos en todo el mundo del que formo parte.

(Si te interesa saber cómo conseguí entrar, responde a este correo y hablemos.)

Por tanto, este cliente viene de dicho programa. Tanto timeline como precio vienen ya cerrados por Framer, por lo que no tuve — tuvimos — que preocuparnos más que de lo que realmente importa; el resultado final.

Kick-off

Como te adelantaba, tuvimos cinco días para diseñar y desarrollar una nueva pagina para esta compañía. Ya que tenían un evento importante al cual querían llevar esta nueva pagina.

Elena Perini — mi colaboradora — se encargo del diseño y yo, del desarrollo.

Por otro lado, el cliente estaba ubicado en Utah, teniendo una diferencia horaria de 8hrs. Esto podría ser nuestro mejor aliado — más horas para trabajar para las entregas — o nuestro peor enemigo — respuestas mas tardías por parte del cliente.

Por tanto, saber exactamente que necesitaban era clave, no teníamos apenas margen para imprevistos. Además el día de entrega yo tenía un viaje que no podía cancelar. ¿Todo pintaba de lujo, verdad? Spoiler: el cliente quedó muy satisfecho.

El cliente nos mandó un documento donde indicaba:

• Dirección de diseño que buscaba

  • Estética, valores del diseño, elementos a incluir, tipografía y objetivo de la narrativa

• Sitios de referencia y porqué le gustaban

• Wireframe de lo que tenían en la cabeza

• Prototipo en Figma Make

Además, le pedimos acceso a sus UIs del producto. Para poder utilizarlas en el diseño.

Tuvimos una reunión donde vimos este documento. ¿Para que, si ya lo habíamos leído? Queríamos oír de su propia voz las cosas que tenía en la cabeza, como pensaba, como se expresaba, a donde quería llegar. Esto nos acerco más a él (CEO) y por tanto a su startup.

El objetivo era claro: Renovar la home actual de la startup con el prototipo de Figma Make para darle un aspecto más moderno y limpio.

Proceso

Teniendo tan poco tiempo, el proceso fue clave para no morir en el intento.

Empezamos el diseño por el hero. Realizamos varias iteraciones dentro de las paginas de diseño de Framer. Recibimos feedback e iteramos.

Cuando la tuvimos — y por tanto la dirección que debíamos seguir — continuamos con el resto de la pagina. Recibimos feedback e iteramos.

Teniendo poco menos de un día y con el diseño aprobado, procedimos con el desarrollo. Recibimos feedback y modificamos.

El truco aquí fue dividir rápido: primero claridad visual (hero), luego ritmo (resto), y por último, ejecución técnica. Un proceso de manual y gracias al gran trabajo de Elena pudimos llevarlo a la realidad sin ningún inconveniente.

¿Suena fácil, eh? No todo es color de rosa. Esa semana dormí una media de 5hrs.

Hand-off

Hicimos la entrega a las 01 de la madrugada hora española. Las 5pm hora local del cliente.

Como el evento era al día siguiente, toda la información de la pagina estaba actualizada y no hacía falta ninguna actualización de texto y/o imágenes, por lo que no hizo falta ayudarles en ello.

El cliente quedó muy satisfecho con el trabajo realizado en el poco tiempo que tuvimos.
Tanto así, que decidió seguir trabajando con nosotros en un volumen dos de la home page — con más calma y sosiego — y la migración del resto de las páginas (+15) de su web.

Por lo que en futuras ediciones te contaré como nos va.

Materiales/herramientas

En la home (si sigue igual cuando leas esto) que desarrollamos hay un bento grid con dos componentes que nos ayudaron a darle movimiento.

1. SVG path Shimmer

   Anima el path de un SVG. No es creación mía. lo puedes encontrar aquí.

2. Curved Image ticker

   Es un ticker curvado. Este lo realicé con Framer Workshop (la IA de framer). Copia este archivo y pégalo en tu proyecto.

El proceso no te salva del estrés, pero te salva del caos. Y cuando hay caos, es cuando más proyectos se caen.

Cómo dijo David Ogilvy, “Great work is the result of great order.”

Si tienes cualquier duda sobre el proceso (o algo que no haya comentado), responde a este email y hablamos.

Nos vemos en la próxima,