Psicología del color para design systems
Contenido del curso
Aarón González
Jonn Jiménez
Gabriela Urbano
Jesús Delgado
Cristian Contreras
Daniel Hidalgo
Anggi Vanesa Pallares Solis
Cristian Mojica
Andrea del Pilar Villada Toscano
Mariana Gómez
Daniela Cobos
Sergio Daniel
Brayan Andrés Gutiérrez Yela
Martin Coronel
Un libro que les puede servir un montón para esto es "RefactoringUI". Altamente recomendado.
Como plugin de accesibilidad, pueden usar "Stark"; está bueno, bueno.
Stark es uno de mis plugins favoritos. A parte de checar el contraste entre colores, puedes hacer simulaciones de deficiencias visuales. Hoy en día ya hasta es una aplicación stand alone con más opciones para ayudar a hacer tus diseños accesibles.
A11Y: es una abreviatura comúnmente utilizada para referirse a "accesibilidad", que se refiere a la práctica de hacer que los productos, servicios, entornos y tecnologías sean accesibles para todas las personas, independientemente de sus habilidades o discapacidades.
++Proceso de creación de un sistema de colores (recomendados):++
++Cómo organizar los colores base en grupos++
💡 Es primordial para asegurar una buena documentación
++Psicología del color++
Los colores tienen significado prestablecidos (generalmente aceptados), que me gusta definir más como los estereotipos asociados a los colores.
++Crear variaciones de los colores base++
++Definir convenciones de nomenclatura++
primary-300🤓 En mi caso personal, utilizo una nomenclatura similar a Figma
++Validar funcionalidad y A11Y++
🤓 Para este utilizo un Plugin llamado A11Y en Figma
++Establecer pautas de uso++
Ejemplos:
La herramienta de color tool ya no está disponible, redirecciona a una nueva versión del material design :(
Les comparto el blog que Teff recomienda en la clase. La psicología del color: el significado de los colores y cómo aplicarlos a tu marca
Generalmente, se recomienda un 60 % del color dominante, un 30 % del color secundario y un 10 % del color acento. El implementar el uso de esta regla ayuda a generar una sensación de balance y armonía en el diseño de la interfaz. Esta proporción también ayuda a guiar la vista del usuario a través de la interfaz
Recomiendo también esta herramienta: https://color.adobe.com/es/create/color-contrast-analyzer
Accesibilidad web (a menudo abreviada como A11y — como "a", luego 11 caracteres, y luego "y)
Espero les sirva esta herramienta https://www.figma.com/community/plugin/1068919813159975006/Coolors
En temas de accesibilidad existe una página súper chévere que nos dice si los colores de letra que estamos utilizando, generan suficiente contraste con el fondo, para que los usuarios puedan leerlo cómodamente https://colorable.jxnblk.com/
Procura que cuando evalúes el contraste en la página te diga que es un nivel AA (doble a) que son los básicos de accesibilidade :D
El término A11Y es una abreviatura de "accessibility" (accesibilidad en inglés) y se refiere a la práctica de diseñar productos que sean utilizables por personas con diversas discapacidades. En el contexto de la clase, validar A11Y implica asegurarse de que los colores y elementos de diseño contrasten adecuadamente, permitiendo que todos los usuarios, incluidos aquellos con discapacidades visuales, puedan interactuar con la interfaz sin dificultades. Esto es esencial para crear experiencias inclusivas y efectivas en el diseño de interfaces.
Yo saqué mi paleta de colores a través del siguiente link.
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
Proceso de creacion de un sistema de colores
. .
Organizar los colores base en grupos
. .
Psicologias del color Esta teoria puede ayudarte a definir los colores que vas a usar.
https://www.canva.com/es_mx/aprende/psicologia-del-color/
. .
Crear las variaciones de colores Se genera para satisfacer diferentes uss, background tooltip, se escogen pocos para reducir la carga congnitiva.
Mas opciones = mas carga cognitiva y mas esfuerzo para el mantenimiento.
Para definir tus colores, aqui hay una herramienta para evaluar el contraste de los colores.
https://webaim.org/resources/contrastchecker/ . .
Pautas de uso:
Esto es una documentacion, que nos servira para comunicarnos con el equipo y definir en que caso debemos usar cada color. Que sombra debo usar para el texto secundario?, cual deberia ser el color de fondo de los CTA? Que color se va a utilizar en los elementos deshabilitados? . . . Gracias por leer. 💕 . . .
Martin Coronel - Product Designer Linkedin