Este proyecto fue realizado dentro de la asignatura Web Dinàmica. La actividad consistía en desarrollar una página web completa utilizando Vue.js (Framework de JavaScript) y Bootstrap (Framework CSS), aplicando los principios de usabilidad, accesibilidad y experiencia de usuario (UX) trabajados en clase.
Para este ejercicio creé desde cero una marca ficticia llamada Rock Records, una discográfica centrada en la promoción de grandes grupos musicales del ámbito del rock, festivales del rock y su blog con las noticias más importantes dentro de este mundo. El diseño y el contenido del sitio buscaban reflejar la energía, personalidad y estética del género, manteniendo al mismo tiempo una navegación clara y accesible para todos los usuarios.
Esta es la web final creada para la marca ficticia Rock Records. Desarrollada íntegramente con Vue.js y Bootstrap.
Haz clic en la imagen para visitar la web.
PROCESO CREATIVO
Durante el desarrollo del proyecto trabajé cada etapa del diseño y la implementación técnica:
- Conceptualización y diseño visual: Definí la identidad de marca de Rock Records con su paleta de colores y tipografía contundente.
- Wireframe: Realicé un wireframe digital que me permitió definir de forma rápida y visual la estructura y disposición de los elementos principales de la web antes de implementar el diseño en alta finalidad.
- Estructura y maquetación: Construí la interfaz utilizando Bootstrap, aprovechando su sistema de rejilla y componentes para lograr una estructura adaptable a distintos dispositivos.
- Desarrollo dinámica con Vue.js: Impplementé interacciones dinámicas y componentes reutilizables en Vue, mejorando la experiencia del usuario con una navegación fluida y responsive.
- Usabilidad y accesibilidad: CUidé el contraste de color, la jerarquía visual y la claridad de los textos, asegurando una experiencia inclusiva y coherente con las buenas prácticas de diseño web.
- Pruebas y revisión: Revisé la web en distintos navegadores y resoluciones para garantizar un rendimiento óptimo y una navegación conistente.
El resultado fue una página web dinámica y completamente funcional, que combin diseño visual, interactividad y una estructura accesible centrada en la experiencia de usuario.