Atomic design
A continuación se detallan los átomos principales de este sistema de diseño. Si deseas conocer la lógica completa y la construcción de moléculas y organismos, accede mediante el siguiente botón.
1. Átomos (Colorimetría)
Colorimetría de Marca: Definición de Primary Orange ($#CE6A3B$) para elementos de acción y títulos.
Colores Funcionales: Sistema de grises (Grey-50 a Grey-150) para jerarquía de fondos y textos secundarios.
Feedback Visual: Implementación de semántica de color (Verde/Éxito, Naranja/Error) para estados del sistema.
1. Átomos (Tipografía)
El sistema combina la familia Impact para títulos de gran relevancia visual y Poppins para el resto de la interfaz. Mientras Impact se reserva para encabezados con un interlineado ajustado de hasta -7%, Poppins organiza la jerarquía funcional adaptando pesos (Light, Regular, Medium) y tamaños según el dispositivo para asegurar la máxima legibilidad en cuerpos de texto y botones.
1. Átomos (Iconografía)
El sistema utiliza una iconografía minimalista basada en trazos de color Gris-150 sobre contenedores circulares. Los iconos están diseñados para ser totalmente adaptativos, escalando proporcionalmente desde 20px en móvil hasta 50px en ordenador para garantizar una legibilidad óptima y coherencia visual en todos los puntos de contacto.
Flujo de trabajo
Octubre 2024
Investigación
Fase inicial de inmersión para comprender las necesidades del usuario y establecer los pilares estratégicos del proyecto.
Noviembre 2024
Wireframing de baja fidelidad
Traducción de ideas a esquemas estructurales simples para definir la arquitectura de la información y pruebas estéticas preliminares.
Diciembre 2024
Testeo de usabilidad
Primera ronda de validación con usuarios para identificar puntos de fricción y asegurar que la navegación sea intuitiva.
Enero-Febrero 2025
Fidelidad media e iteración
Evolución de los wireframes con mayor detalle visual y funcional, integrando las mejoras obtenidas en la fase de pruebas.
Marzo 2025
Validación final
Segundo ciclo de testeo para pulir la interacción y confirmar que cada componente cumple con los estándares de diseño.
Abril 2025
Diseño final
Consolidación del sistema visual y entrega de los wireframes definitivos listos para su implementación.