Gelatina
Desarrollo y diseño de landing page responsive para el medio de comunicación argentino Gelatina
- 🎨Rol: Rediseño de producto (UX/UI), desarrollo web front-end
- 🛠 Herramientas: Figma, Adobe Illustrator, Adobe Photoshop, Visual Studio Code, HTML, CSS.
*Nota: Esto en un proyecto conceptual y realizado junto a Romina Miccono.
Desafío
El principal desafío fue el desarrollo y diseño de una landing page responsiva para el medio de comunicación argentino, con el objetivo de mejorar la experiencia del usuario. Esto implicaba ofrecer una tarjeta virtual con descuentos exclusivos y captar la atención de usuarios nuevos y recurrentes mediante una navegación intuitiva y rápida
Proceso de diseño
La investigación inicial consistió en un análisis profundo del medio y su audiencia, lo que permitió identificar las temáticas de discusión y la forma de comunicación. Esto llevó a la creación de dos user persona: una influencer interesada en el crecimiento en redes y la monetización, y un apasionado del debate político. A partir de estos perfiles, se definió que la recompensa de la landing page sería una tarjeta de regalo virtual con descuentos exclusivos
La fase de definición para Gelatina involucró la creación de un moodboard con una estética cyberpunk utilizando morado y verde como colores principales, inspirándose en el estilo de la página principal del medio. Además, se realizó un benchmark de otras landing pages para comprender las mejores prácticas en estructura y elementos clave, como titulares claros y llamados a la acción efectivos, analizando cómo Slack, HubSpot, Squarespace y Leadpages presentaban sus contenidos y beneficios
La ideación se centró en la creación de wireframes para facilitar la jerarquización de la información, asegurando que el Call To Action permaneciera visible y centrado. Las decisiones de diseño buscaron una navegación fluida sin necesidad de abrir nuevas pestañas, organizando el contenido en columnas y añadiendo secciones informativas. Estéticamente, se mantuvieron las tipografías y colores de Gelatina, con un uso prominente del morado oscuro, y se simplificaron las tarjetas para guiar al usuario hacia el formulario final
Mockups
Cuenta con registro personalizado utilizando JavaScript
-
Mantiene el branding de Gelatina para que usuarios activos sigan familiarizados con la marca
Resoluciones trabajadas para desktop: 1440 x 608, 1024 x 608
Resoluciones trabajadas mobile: 425 x 608, 320 x 608, 375 x 608
Resultado
La página fue desarrollada en HTML5, CSS y JavaScript utilizando VS Code. Se implementó la funcionalidad completa de envío de formularios y un diseño responsivo que se adapta a diferentes dispositivos, lo que permite el acceso desde múltiples plataformas
Aprendizaje
El aprendizaje principal fue la comprensión de las bases de HTML y CSS y la satisfacción de ver el diseño propio programado y funcional. Se logró conservar la esencia de Gelatina y crear una landing page con una recompensa atractiva, aunque siempre con posibilidades de mejora