2024Boolean / Frontend

Streamix UI

Recursos del proyecto

Tecnologias

Vue.jsBootstrap 5CSSAPI integration

Funcionalidades

UI estilo streaming con carruseles dinamicos y microinteracciones

Resumen

Desarrollo de una interfaz web inspirada en plataformas de streaming, pensada para poner a prueba habilidades avanzadas de UI/UX, responsive design y gestion de contenidos dinamicos. El objetivo era recrear una experiencia creible de estilo streaming, con catalogo dinamico, navegacion fluida y microinteracciones, manteniendo coherencia visual en todos los dispositivos. Se presto especial atencion al layout, spacing y animaciones para mejorar la percepcion de calidad del producto.

Rol

Diseno de la interfaz y desarrollo frontend, con foco en responsive design avanzado, componentizacion UI, calidad visual, interacciones y gestion de datos desde API.

Que hice

Construi una homepage de estilo streaming con hero dinamico, filas en carrusel horizontal y tarjetas de contenido con estados hover y focus. Integre un catalogo dinamico via API, gestionando estados de carga, error y empty state. Optimice el comportamiento responsive en distintos breakpoints adaptando grids, carruseles, tipografia e imagenes para desktop, tablet y mobile. Anadi microinteracciones y animaciones en hover, entrada y scroll para mejorar la percepcion de respuesta y calidad de la UI. Estructure la interfaz en componentes reutilizables para layout, filas/carruseles, tarjetas de contenido y estados skeleton/loading.

Problemas resueltos

Layout complesso con caroselli

Las interfaces basadas en carruseles son dificiles de gestionar de forma responsive. Se definieron reglas especificas para preservar coherencia visual, interacciones consistentes y una densidad de contenido adaptativa segun los breakpoints.

Percezione di qualità della UI

Sin animaciones, la interfaz se percibe estatica y poco convincente. Las microinteracciones mejoraron la percepcion de respuesta, la calidad visual y la continuidad entre secciones.

Gestione dati asincroni

Con contenidos cargados desde API, es necesario gestionar varios estados de la aplicacion. Se implementaron patrones para mantener una experiencia fluida incluso con condiciones de red no optimas.