Trakkem Pro Web
Diseño web dinámico con animaciones y scroll interactivo para una experiencia de marca única.
Resumen del proyecto
Fui el diseñador y desarrollador principal de la página web oficial de Trakkem Pro. El trabajo comenzó en Figma, donde creé los wireframes y todos los assets gráficos. También desarrollé el sitemap y el user flow en Draw.io. Diseñé animaciones personalizadas en After Effects, que luego exporté con Lottie para integrarlas de forma vectorial en el sitio. La web fue desarrollada en Webflow, lo que me permitió trasladar fielmente el diseño e incorporar las animaciones y las interacciones avanzadas. El objetivo fue mostrar la gama completa de dispositivos de Trakkem Pro de una forma atractiva y fácil de navegar.
Año
2024
Mi rol en el proyecto
Diseño UX/UI completo en Figma. Creación de wireframes, sitemap y flujo de usuario en Draw.io. Creación de assets gráficos en Illustrator. Diseño y producción de animaciones en After Effects exportadas con Lottie. Desarrollo completo del sitio en Webflow. Integración de animaciones y efectos al hacer scroll. Optimización para dispositivos móviles.
Objetivo
Diseñar y desarrollar un sitio web atractivo, dinámico y alineado con la identidad de Trakkem Pro, que comunique de forma clara sus productos y genere un impacto visual mediante animaciones interactivas.
Problema
La marca necesitaba una página web que fuera mucho más que un catálogo estático: debía transmitir innovación, dinamismo y facilidad de uso, diferenciándose de la competencia en el sector de la logística.
Usuarios
Empresas de logística, clientes potenciales interesados en la línea de dispositivos Trakkem Pro, y socios y distribuidores.
Casos de uso
Presentación de productos
Mostrar todos los modelos de dispositivos con sus características técnicas.
Generación de confianza
Transmitir la solidez y profesionalidad de la marca a través de un diseño cuidado.
Atracción de clientes
Captar el interés de visitantes mediante animaciones e interacciones dinámicas.
Soporte comercial
Servir como herramienta de referencia para el equipo de ventas y distribuidores.
Proceso de diseño
01
Investigación y Planificación
Definición de objetivos y análisis de la competencia.
02
Diseño UX/UI en Figma
Creación de wireframes, sitemap, user flows y diseño visual completo.
03
Producción de Animaciones
Diseño de escenas en After Effects y exportación con Lottie.
04
Desarrollo en Webflow
Implementación del diseño con animaciones y efectos de scroll.
05
Pruebas y Optimización
Test de usabilidad, optimización de la carga y adaptabilidad a móviles.
Galería
Características clave
Animaciones Lottie
Elementos gráficos animados que mejoran la experiencia de usuario.
Interacciones con Scroll
Efectos y transiciones activadas al desplazarse por la página.
Diseño Responsivo
Visualización óptima en desktop, tablet y móvil.
Integración Visual con la Marca
Aplicación consistente del branding de Trakkem Pro.
Resultados
El sitio final logró reflejar la innovación y el dinamismo de Trakkem Pro, mejorando su presencia digital y ofreciendo una experiencia atractiva para clientes y socios. Las animaciones y los efectos de scroll generaron una navegación fluida y memorable.
Lo que aprendí
Este proyecto me permitió dominar la integración de Lottie en Webflow, así como perfeccionar mis habilidades en animaciones para web y en la creación de experiencias interactivas. También reforcé mi capacidad para unir el diseño UX/UI con el desarrollo, logrando un producto final atractivo y funcional.