No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Cómo escoger colores: psicología, pautas y accesibilidad

10/26
Recursos

Aportes 13

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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):

  • Organizar los colores base en grupos.
  • Crear variaciones de los colores base.
  • Definir convenciones de nomenclatura: cómo nombrar nuestros colores.
  • Validar A11Y: hay que asegurar la accesibilidad
  • Establecer pautas de uso: documentación de los patrones de diseño. Se incluye también la escala de color: porcentajes de uso.

Cómo organizar los colores base en grupos

💡 Es primordial para asegurar una buena documentación

  1. Primarios
  2. Secundarios
  3. Neutros
  4. Semánticos: vienen siendo los booleanos. Sirven para darle feedback a los usuarios.

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

  • Se generan para satisfacer diferentes usos
  • Se escogen pocos para reducir la carga cognitiva
  • Más opciones = más carga cognitiva = más mantenimiento

Definir convenciones de nomenclatura

  • Definimos el Design Token. Ejemplo: primary-300

🤓 En mi caso personal, utilizo una nomenclatura similar a Figma


Validar funcionalidad y A11Y

  • Reemplazar los colores en el diseño verificando si cumplen el propósito
  • Que cumplan las pautas de contraste

🤓 Para este utilizo un Plugin llamado A11Y en Figma


Establecer pautas de uso

Ejemplos:

  • ¿Qué sombra debo usar para el texto secundario?
  • ¿Cuál debería ser el color de fondo de los CTA?
  • ¿Qué colores se van a utilizar en los elementos deshabilitados?

La herramienta de color tool ya no está disponible, redirecciona a una nueva versión del material design 😦

Recomiendo también esta herramienta:
https://color.adobe.com/es/create/color-contrast-analyzer

Hola! les comparto esta herramienta de Material Design que nos crea nuestra paleta de colores a partir de los colores que definamos les dejo el link : https://m3.material.io/theme-builder#/dynamic

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

Accesibilidad web (a menudo abreviada como A11y — como “a”, luego 11 caracteres, y luego "y)

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 😄

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 en grupos base (ejemplo Cta)
  • Crear variaciones d elos colores base (Ejemplo Background)
  • Definir convenciones de nomenclatura
  • validar A11Y (accesibilidad)
  • Establecer pautas de uso. (es importante definir los porcentajes de usos , ejemplo 60% el azul y 30% Verde)

.
.

Organizar los colores base en grupos

  • Primarios:
  • Secundarios
  • Neutros: Escala de grises, puede funcionar en Shadows, bordes, etc.
  • Semanticos: Aqui hablamos de los colores que usamos para los errores, mensajes informativos, exitos, etc.

.
.

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