En este proyecto, trabajamos en colaboración con la agencia InboundCycle para desarrollar la maquetación de diversas páginas web basadas en bocetos gráficos proporcionados por su equipo de diseño para la empresa Catalana Occidente / Plus Ultra.
El objetivo fue convertir esos diseños en una estructura funcional, utilizando HTML y CSS para asegurar una experiencia web óptima y totalmente adaptable a dispositivos de diferentes tamaños.
1. Objetivos
El objetivo principal de este proyecto fue transformar los bocetos gráficos en páginas web interactivas que mantuvieran la coherencia visual del diseño original.
La meta era que las páginas fuesen totalmente responsive, con una visualización impecable en cualquier dispositivo, y alineadas con las mejores prácticas de usabilidad y accesibilidad.
Otro objetivo clave fue garantizar una colaboración fluida entre nuestro equipo de desarrollo y los diseñadores gráficos de InboundCycle, para lograr un ajuste perfecto entre diseño y funcionalidad.
Esto permitió que el cliente final, Grupo Catalana Occidente, tuviera una web que no solo destacara visualmente, sino que también fuera efectiva en términos de conversión y rendimiento.
2. Características
Maquetación Responsive: La adaptación a diferentes dispositivos fue una prioridad desde el principio.
El proyecto incluyó el uso de herramientas como Sketch e InVision para visualizar los diseños antes de implementar el código en HTML y CSS. Estas plataformas nos permitieron asegurar que el diseño mantuviera su integridad visual en todas las resoluciones.
Colaboración con Diseñadores: La interacción constante con los diseñadores de InboundCycle permitió realizar ajustes de manera rápida y efectiva.
Esta colaboración aseguró que todos los detalles gráficos se respetaran y que el producto final cumpliera con las expectativas del cliente.
Cumplimiento de Especificaciones: Las especificaciones del proyecto se implementaron de acuerdo con las pautas establecidas desde el principio.
Todas las funcionalidades solicitadas por el cliente, como la estructura de la información y los elementos visuales, se reflejaron de manera fiel en la maquetación final.
Páginas Maquetadas
Landing Page: Esta página está diseñada para captar la atención de los usuarios y guiarlos hacia una acción específica, como completar un formulario o registrarse en un servicio.
La maquetación de la landing page sigue los principios de diseño centrados en la conversión, asegurando que los elementos clave como los llamados a la acción (CTAs) estén visibles y accesibles desde cualquier dispositivo.
Thank You Page: Después de completar la acción en la landing page, el usuario es redirigido a la thank you page.
Esta página confirma la acción realizada (por ejemplo, una suscripción o descarga), y refuerza la relación entre el usuario y la marca.
En este caso, se maquetó de forma simple, asegurando una navegación fluida para que el usuario no pierda interés después de completar la acción.
Email: También trabajamos en la maquetación de emails, asegurando que su diseño y estructura sean coherentes con la identidad visual de las páginas web.
Los emails fueron optimizados para adaptarse correctamente a diferentes clientes de correo electrónico, manteniendo la misma estética y usabilidad que el sitio web.
Estas páginas no solo fueron maquetadas teniendo en cuenta las mejores prácticas de diseño visual, sino también los principios fundamentales de accesibilidad y usabilidad, asegurando que todas las personas, independientemente de sus habilidades o dispositivos, puedan interactuar fácilmente con el sitio web.
Este proyecto no solo supuso un reto en términos de coordinación y detalle técnico, sino también una oportunidad para reforzar la imagen corporativa del Grupo Catalana Occidente a través de un entorno web moderno, funcional y atractivo.
