eContent - NY USA
Empresa de creación de contenido y marketing digital enfocada en ayudar a organizaciones de salud a conectar y construir relaciones con la comunidad hispana. Con sede en Nueva York, Londres, Madrid y Ciudad de México
Detalles del proyecto
Objetivos del Cliente
- Reflejar la modernidad y el enfoque digital de eContent a través de un diseño de sitio web que comunique eficazmente su identidad de marca.
- Implementar elementos interactivos a lo largo del scroll para mejorar la experiencia del usuario y mantener el interés.
- Mostrar los proyectos más relevantes de eContent para cautivar a clientes actuales y potenciales.
- Presentar a todos los miembros de eContent de forma completa y atractiva a través de un scroll dedicado.
- Facilitar la edición de contenido personalizado para el equipo de eContent, superando las limitaciones de la plataforma anterior (Wix).
Objetivos del Usuario
- Revisar el portafolio de proyectos en los que ha trabajado eContent y conocer más sobre el equipo.
- Fomentar una sensación de transparencia y conexión destacando de forma prominente a los miembros del equipo de la agencia.
Retos
Reto 1: Implementar un botón de audio personalizado para controlar el volumen del video (sin mostrar componentes de YouTube o Vimeo).
Solución 1: Como Webflow no tiene soporte nativo para esta función, el enfoque consistió en incrustar un video de Vimeo. Se utilizó código personalizado y las APIs de Vimeo para habilitar el control de volumen sin mostrar componentes de YouTube o Vimeo.
Reto 2: Animar múltiples elementos mediante scroll para una sección de scroll horizontal con 3 segmentos.
Solución 2: En lugar de hacer scroll por sección, se decidió utilizar el scroll de toda la página. Las animaciones se ejecutaban al completar la página entera, para calcular con precisión el porcentaje de cada animación en una sección de scroll horizontal con tres segmentos.
Reto 3: Implementar un diseño animado personalizado (4 elementos) a partir de un diseño vectorial estático proporcionado por el cliente.
Solución 3: Trabajando de cerca con una agencia de diseño de Motion Graphics (chakanastudio.com), usando After Effects y exportando las animaciones a Lottie, implementamos la animación activada por scroll tal como lo solicitó el cliente.