01 - Trinsic
Como diseñé y desarrollé una landing solo en 5 días.
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.
SVG path Shimmer
Anima el path de un SVG. No es creación mía. lo puedes encontrar aquí.
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,