Home con grillas y columnas
Vista de la pantalla principal mostrando la aplicación de grillas, columnas, márgenes y distribución del contenido, junto con una variación del estado hover.
Proyecto UX/UI · Prototipo interactivo
Biblioteca Alderete
Prototipo interactivo desarrollado en Figma para una biblioteca digital, con foco en uso de grillas, organización visual e interacciones hover entre una pantalla principal y una vista de detalle.
Contexto
Este proyecto consistió en desarrollar un prototipo interactivo en Figma para una biblioteca digital, trabajando la organización visual de las pantallas y la interacción entre una vista principal y una vista de detalle.
El ejercicio se centró en la aplicación de grillas, en la distribución de los elementos dentro de la interfaz y en la incorporación de cambios visuales mediante hover en distintas áreas del prototipo.
Enfoque
Más que diseñar una interfaz final acabada, el objetivo fue practicar estructura, jerarquía visual y respuesta interactiva en un prototipo de baja complejidad, pero con decisiones claras de composición.
Grillas y estructura
Una parte importante del trabajo fue aplicar una base de grilla para ordenar el contenido dentro de las pantallas, manteniendo coherencia entre márgenes, separación de bloques y distribución de los elementos.
Esta etapa me ayudó a visualizar mejor cómo sostener la composición de una interfaz móvil antes de enfocarme en detalles más visuales o decorativos.
Detalle con grillas y columnas
Vista de la pantalla de detalle donde también se aprecia la estructura de columnas y la organización de los elementos.
Pantallas e interacciones
El prototipo contempla una pantalla principal con listado de libros y una pantalla de detalle. En ambas se trabajaron cambios visuales al interactuar, principalmente a través de hover en portadas, íconos e imagen destacada.
Pantalla Home
Vista de la pantalla antes de interactuar con las tarjetas que representan cada libro.
Home con hover
Cambio de color e ícono al interactuar con las tarjetas.
Pantalla Detalle
Pantalla resultado de hacer click en uno de los libros en pantalla Home antes de la interacción.
Detalle con hover
La vista detalle cambia la imagen al pasar el cursor.
Video del prototipo
Además de las capturas, registré el prototipo en video para mostrar con mayor claridad la secuencia entre pantallas y los cambios visuales que aparecen al interactuar.
Esto me permitió observar el proyecto como una experiencia completa, no solo como pantallas estáticas separadas, especialmente en los estados hover y en el paso desde la vista principal hacia la pantalla de detalle.
Ver videoDocumento final
En esta página resumí las decisiones y pantallas principales del prototipo, pero el documento completo reúne el desarrollo del ejercicio, incluyendo tipografía, grillas, capturas y estados interactivos trabajados en Figma.
El PDF funciona como respaldo del proyecto completo y permite revisar con más detalle el proceso presentado.
