Hace poco más de 6 años, estábamos Manu y yo trabajando en una idea que teníamos; queríamos lanzar un producto digital en este caso una app para dispositivos móviles.
Habíamos alcanzado la etapa de validación y deseábamos crear un website para poder comenzar a articular algunas estrategias y comenzar a ver que tan bien podría ser percibido nuestro producto por su mercado meta.
Yo tenía algunas experiencias previas de sitios creados en Wordpress: yo diseñaba y algún amigo mío con conocimientos de programación levantaba el sitio. Sitios muy básicos, nunca había podido salir muy satisfecho. Sin embargo esta vez fue diferente. Tino, nuestro compañero de emprendimiento y programador nos contó y propuso que utilizáramos una nueva herramienta que comenzaba a dar de que hablar en el mercado, Webflow.
Ese mismo día abrí una cuenta y comencé a "travesear" la interfase. No quiero ser muy romántico pero la cosa fluyó muy bien. Me encantó y ahí estábamos los tres fantaseando y viendo como se hacía realidad nuestro primer website. No sería perfecto pero se parecía mucho más a esos sitios profesionales que veíamos en internet, con sus layouts y animaciones más interesantes.
6 años después han sido muchas las buenas experiencias, me ha permitido como diseñador contar con una herramienta que me permite ver como mis ideas se hacen realidad. He visto estrategias de comunicación y experiencia de usuario convertirse en producto final, en un proceso ágil y fluido, incuso en muchos casos desarrollando yo solo todo el proyecto.
Siempre he tenido deseo de poder compartir sobre Webflow con más personas tanto de Costa Rica como del mundo entero, y tratar de dar a conocer mi trabajo como diseñador.
Pues me animé a participar en el CloneComp2021, la competencia o hackathon más grande de Webflow a nivel mundial, el mismo es organizado por Finsweet y Webflow. Podés ver más detalles del concurso aquí.
La competencia consiste en 3 rounds en días consecutivos, 24 horas limite cada día para entregar una experiencia digital. Al inicio se entrega al participante una idea general para comenzar a elaborar una historia y un paquete de assets como ilustraciones.
El primer día cada uno de los participantes sube un proyecto con su forma de desarrollar y contar la historia, muchos crean juegos, otros cuentan historias mediante animaciones con el scroll, hay historias graciosas, de terror, etc... Las ideas vuelan y son muy divertidas e interesantes.
Al segundo día los participantes deben partir de una nueva "pista" para continuar la historia y duplicar el proyecto de algún otro participante para continuar su propia historia. Esto presenta un reto en ambos sentidos, los proyectos que uno hace deben ser construidos de manera que otros participantes puedan aprovecharlos para partir de ahí y crear cosas nuevas. Y uno también debe lograr aprovechar las creaciones de otras personas para dar continuidad a ideas nuevas.
Y así sucesivamente hasta llegar a la entrega final. El concurso tiene un enfoque fuerte en storytelling por lo que al mismo tiempo que se demuestra manejo técnico de la herramienta también se evalúa la capacidad del competidor de crear una experiencia y contar una historia de manera interesante y creativa.
Mí estrategia fue ver las historias como una canción, siempre una buena canción comienza interesante, te indica que la cosa va a estar buena, luego se pone aún mejor, para después cerrar de manera más suave o elegante.
Podés ver más detalles del concurso y la galería de proyectos aquí.
En mi primer día me enfoqué en crear un escenario y un look&feel quería primero saber qué podía hacer con los assets entregados. Una vez que tuviera esto y me sintiera cómodo sabía que podría desarrollar las demás ventanas de manera más rápida. El fuerte de la primera entrega sería un personalizador de un avatar basado en archivos Lottie. Hace un tiempo había trabajado en un proyecto muy grande donde aprovechamos esta idea para crear un parade. Por lo que pensé que era una bonita ocasión para ponerlo en practica. No fue para nada fácil, tuve que diseñar un personaje desde cero y todas las variantes de peinados, camisas, rostros y pantalones. Hice al rededor de 10 alternativas para cada uno, entre 40-50 elementos en total, después me topé con bastantes retos con customcode en Javascript para hacerlo funcionar. La historia consistió en tres etapas, la primera una animación parallax que se mueve con el scroll, luego la creación del avatar que permite al usuario divertirse un rato imaginando el personaje de la historia y para cerrar quise darle una nota graciosa con una simple animación donde al dar click a una papaya, un mono te la roba.
Podés ver el entregable del día 1 aqui.
Podés ver el entregable del día 1 aqui.
Para el segundo día partí de una dinámica que hizo el usuer #arondriessen, una idea simple pero que me pareció muy ingeniosa que consistía en que el usuario para poder continuar debía despejar la ventana de unas hojas, al darles click ya podés continuar tu camino. Aporté algunas mejoras a la dinámica para darle más usabilidad a la interacción y ya tenía mi punto de partida. Después hice una dinámica sencilla que te invita a crear un fuego para poder entrar a una cueva, y finalmente en la cueva es donde sucede el resto de la historia. La cosa se pone mística y un poco graciosa al final.
Podés ver el entregable del día 2 aquí.
Podés ver el entregable del día 2 aquí.
Para el tercer día estaba bastante cansado, decidí irme por una linea un poco más relax y divertirme un poco, se me ocurrió una linea para contar la historia un poco simple pero entretenida, dar un vuelco a la historia para que el personaje principal resultara siendo yo mismo, y permitirme de esta manera pasar las demás horas de trabajo que me quedaban creando una divertida interacción donde el usuario es el encargado de terminar el mismo de diseñar la interface final de la experiencia, utilizando Webflow, una especie de Webflow "inception" sencillo pero divertido.
Podés ver el entregable del día 3 aquí.
Podés ver el entregable del día 3 aquí.
Las reacciones de las personas que veían las presentaciones en vivo, donde los miembros del equipo de Finsweet quienes son famosos dentro de la comunidad Webflow, daban sus primeras impresiones sobre los entregables de cada día, fueron muy alentadoras. Sentí que estaba haciendo las cosas bien, pero no me imaginaba que fuera a ganar el concurso.
La presentación final de los ganadores se hizo en un espacio en gather.town asistimos virtualmente mi novia Silvi, Manu y yo. Esto fue muy divertido y gracioso, el sistema te permite crear un avatar e ingresar a espacios virtuales donde podés explorar, interactuar y llegar a diferentes sitios, uno de ellos el auditorio. Y entre emoción y nervios resulté el ganador del primer lugar de la competencia y el favorito del público.
Esta experiencia ha sido sumamente enriquecedora, me ha permitido acercarme muchísimo a la comunidad de Webflow, conocer a varios de sus actores más destacados y comunicarme con muchas personas super talentosas de todo el mundo. Espero que este sea el inicio de un acercamiento como profesional y como parte del equipo Impulso Studio con el resto del mundo y el movimiento NoCode. Para poner nuestro granito de arena y continuar trabajando duro con estas herramientas que nos permiten crear productos tan increíbles y dar rienda suelta a nuestra creatividad. Me encuentro muy agradecido con Finsweet, Webflow, Impulso Studio y toda la comunidad NoCode por hacer todo esto posible.
Si deseas saber más sobre Webflow, cotizar un proyecto con nosotros, o simplemente conversar para enterarte más de este tema podés escribirme a mi correo titosolano@impulsocr.com.
Para contacto general: info@impulsocr.com.
