Vídeo de demostración
Presento una demo que recorre la arquitectura visual del proyecto. A través de este flujo, se puede observar la implementación real de los Átomos de diseño que veremos a continuación —colores, tipografías y componentes— directamente sobre la interfaz desarrollada en Glide
Atomic design
1. Átomos (Colorimetría)
Acento Principal (Maroon): Uso de un tono granate profundo ($#3A0000$) para botones de acción crítica y estados activos en el menú inferior.
Paleta Semántica de Categorías: Colores de fondo desaturados (Lavanda, Verde Menta, Ocre) que actúan como identificadores visuales.
Neutros: Sistema de blancos puros para fondos de tarjetas y grises suaves para separadores.
1. Átomos (Botones)
Botón Primario (Contained): Bloque de color sólido con esquinas redondeadas (8px) y texto en blanco para acciones de inmersión.
Botón de Tarjeta (Ghost): Fondo blanco con sombra, diseñado para resaltar dentro de los contenedores de las categorías.
1. Átomos (Imágnes)
Radios de Curvatura: Uso de Border Radius pronunciado (16px) en imágenes y tarjetas de contenido, siguiendo el lenguaje visual moderno de la plataforma.
Composición Visual: Integración de ilustraciones o fotografías con recortes limpios y superposición de texto para crear jerarquía dentro de las fichas de actividades.
Flujo de trabajo
septiembre 2025
Investigación (Contextualización)
Análisis Teórico: Estudio de la «Psicogeografía» y las teorías de Guy Debord para traducir el concepto abstracto de la deriva en una experiencia digital funcional.
Definición de Usuario: Identificación de perfiles interesados en la exploración urbana, ecología y feminismo para crear las categorías temáticas.
septiembre-octubre 2025
Bocetaje en Figma (Arquitectura Visual)
Prototipado de Baja Fidelidad: Estructuración de la jerarquía de información, definiendo que cada «Deriva» debía tener una identidad cromática propia.
Sistemas de Rejilla: Diseño de las tarjetas (cards) y la disposición de elementos multimedia (ilustraciones con filtro duotono) para asegurar la consistencia
octubre 2025
Implementación (Construcción en Glide)
Arquitectura de Datos: Configuración manual de las Glide Tables, creando columnas específicas para títulos, descripciones, imágenes y los colores de categoría.
Montaje de Componentes: Uso de componentes Collection, Image y Button configurados individualmente para replicar el diseño de Figma.
Estilo Global: Aplicación del código hexadecimal $#3A0000$ en la configuración de apariencia de Glide para unificar la marca.
octubre 2025
Pruebas (Validación y Navegación)
QA de Flujos: Testeo directo en el editor de Glide para asegurar que cada botón «Empezar la Deriva» active la pantalla correspondiente.
noviembre 2025
Retoques y Finalización (Pulido Final)
Ajuste de Detalles: Refinamiento de los márgenes y del componente Timeline para la visualización del progreso del proyecto