Antes de comenzar a falar sobre el tema propiamente dicho, podemos dejar claro una coisa, se você está leyendo este texto é, así como eu, un entusiasta sobre o assunto.
La relación del ser humano con el cor está por todo lugar. Una psicología de los núcleos, de Eva Heller, estuda como ellas afetam o comportamento humano, as emoções, percepções e decisões. Esta área de estudio analiza como una exposición a diferentes núcleos que pueden influir en cómo las personas se sienten y se comportan. Como, por ejemplo, en la escuela de una paleta de núcleos de una casa, en la percepción de la calidad de un producto, entre otros.
Todo esto para entender que definir una paleta para su Design System vai muito além da estética, preferencias y muchas veces están acima de decisiones já estipuladas, como a cor principal da marca.
Nem todas as pessoas enxergam cores da mesma forma. Técnicamente falando, nuestro cerebro identifica como núcleos ao receber luz pela retina dos olhos, onde são analizadas e interpretadas por algumas células: conos y bastonetes. E existem pessoas com uma deficiencia genética nessa capacidade de distinguir ciertos núcleos, o que faz com que tenhamos um número plural de pessoas que interpretam a mesma cor de formas diferentes.
Sob esse contexto, imagine lidar com pessoas usuárias com dificuldades de distinguir elementos em um aplicativo. Los núcleos deben ser seleccionados, además de auxiliares de usabilidad del producto, padronizam comportamientos, elementos interactivos y situaciones del sistema.
Como dito anteriormente, as cores de um sistema podem ser muito úteis para nos guiar na forma como nos comunicamos con determinado producto a través de una interfaz. Ou seja, em um Design System es fundamental que cada pequeña parte tenga una función, una forma de ser aplicada con el propósito de orientar a la persona usuária a tomar sus decisiones. nesse artigo aquí Nielsen Norman Group fala mais sobre la visibilidad del estado del sistema.
Dou um ejemplo clásico: um sinal de trânsito tem o objetivo de organizar y controlar el flujo de vehículos y peatones, evitando congestionaciones y accidentes. ¿E como isso acontece? Como auxiliar de núcleos. As cores usados nos sinais de trânsito são padronizadas internacionalmente e seguem uma lógica simples: vermelho (pare), amarelo (atenção) e verde (siga).
Al buscar en Internet y materiales de apoyo, no es una tarea fácil encontrar información más concreta y consolidada sobre cómo criar una paleta de núcleos eficiente. Ao longo de vários projetos nos quais trabalhei, eu aprimorei uma fórmula que tem me ajudado bastante nesse processo.
Para comenzar, elaboramos los 5 pasos necesarios para chegarmos lá:
Paso 1: Entender una necesidad
Iniciando con una pergunta: ¿por qué motivo você precisa gerar um paleta de cores? Pode ser que usted precisa desarrollar un sistema para un producto y no tenga nada na mão a não ser o logotipo da empresa e muita boa-fé. Talvez, ese producto ya existe y tiene núcleos predefinidos que sí se utilizan, pero usted sabe que faltan opciones para poder replicar el sistema.
En ambos casos, es preciso estar consciente de lo que es una etapa inicial y obtener alguna conexión con el producto, seja ele o conceito da marca, una necesidad de las partes interesadas, entre otros significados que usted puede buscar para agregar valor a su justificación.
Paso 2: Explorar referencias
Para un nacido profesional, seja el área de diseño o afinidad, nada como una buena pesquisa de referencias. Existen diversas formas y herramientas para esto, citamos algunos ejemplos. El primer paso es investigar los productos o marcas que puedan ser coincidentes o que compartan la misma área de negocio. É importante saber como la coleguinha ao lado trabalha as cores na prática.
Otro ejemplo, más inspirador, es un Comunidade do Figma, una herramienta de diseño de interfaz del usuario. Muchos acaban de publicar sus proyectos personales, además de grandes empresas que presentan casos de sus sistemas de diseño. É uma ótima oportunidade de saber cómo é proceso.
Paso 3: Definir categorías de núcleos
Este es el momento en que pensamos quais serão as cores de textos, botões, fundos, cores interativas, desabilitados, como representar elevación, jerarquia y por aí vai. Mas calma lá, para te ayudar nessa parte mais mão na massa, eu desenvolvi uma fórmula que não é a fonte da verdade, muito menos está escrita en piedra, mas pode servir como um bela fonte de inspiração, então vamos lá.
A partir de aquí, es interesante que usted tenga un corazón en mente, aquela que debe ser un principal entre todos, a que representa su producto y marca. Así como cuando cito o “roxinho” mi logo vem o Nubank a nossa mente, precisamos definir qual será nosso “roxinho”, seja ele a cor que for. Y então chegamos a primeira categoria.
Núcleos primarios y secundarios
Como dito anteriormente, a cor primária deve estar directamente ligada a cor da marca, produto, instituição, ou remeter diretamente ao que você e os stakeholders involucrados almejam. Para ilustrar todas las etapas juntas, seguimos com a cor terracota, visualmente ilustrada a seguir.
Cor primaria
Podemos ter uma cor secundária que se aplica da mesma maneira, ficando como o próprio nome diz, abaixo da cor primária. De esta forma escalamos de manera simple a cantidad de núcleos. Particularmente prefiro trabajar con una, no máximo dos núcleos que representen una marca.
Lembrando que não precisa ser a mesma cor do logotipo, até porque algunas veces essa cor não é muito escalável, não havendo muitas veces um bom contraste, mas não vamos pular etapas.
Como núcleos primarios y secundarios, hay más detalles en la interfaz, por botones, enlaces y vamos a guiar el tom visual de los demás núcleos, y frisarei isso, todo mesmo. Por esta etapa es muy importante.
Núcleos de estado del sistema
¿Lembramos cuándo falamos sobre la señal de tránsito num ejemplo anterior y como núcleos tem um papel fundamental na comprensión de las reglas de tránsito? Em sistemas digitales isso não é diferente, por isso vamos resgatar esse conceito aqui. Siempre que una persona usuaria interactúa con una interfaz, ella espera que a mesma regrese se sua ação foi bem sucedida. Es por eso que dos factores que soman a várias dirigen la retroalimentación como núcleos, y aquí no hay mucho misterio en la hora de la escuela. Continuando con nuestros ejemplos visuales a seguir están tres posibilidades de núcleos de retroalimentación.
Núcleos de estado del sistema
Núcleos neutros o escala de cinzas
São os toneladas más usadas en cantidad. Títulos, párrafos, fondos de página, tarjetas y más. Chamamos de núcleos neutros, por ficarem na escala de cinza, ou seja, do branco ao preto. Siga más ejemplos de esta escala a seguir.
Núcleos neutros
Paso 4: Tornar acceso
Temos nuestros núcleos escondidos en sus categorías, chegou a hora de validar se o contraste entre ellas está acessível. Para essa parte, também temos algumas diretrizes muito bem estabelecidas no mercado criadas e mantidas pela W3C (World Wide Web Consortium), una organización internacional que desarrolla padrões para una web.
Um desses padrões é a famosa WCAG (Pautas de accesibilidad al contenido web), que son como Diretrizes de Acessibilidade para Conteúdo da Web. Ellos definen una serie de orientaciones para navegar o consultar la web más accesible a personas con deficiencias, incluidas deficiencias visuales, auditivas, físicas, cognitivas y neurológicas. Por suerte, temos esse conteúdo traducido y disponibilizado por Marcelo Sales.
Como dirigen las WCAG están organizadas en tres niveles de conformidad (A, AA y AAA), con cada nivel estableciendo un conjunto de criterios que el contenido de la web debe atender para ser considerado acceso. Algunos de los criterios incluyen el uso de núcleos de manera accesoria.
Para una paleta que estamos construyendo juntos nesse artigo, una fórmula para generar núcleos eficientes seguirá un contraste mínimo (AA), con esto, estamos habilitados para una próxima y última etapa.
Paso 5: Gerar como variantes
Agora é aquele momento que nos aprofundamos mais sobre tal fórmula que citei. Antes de esto, vamos a entender algunas partes técnicas, entre ellas un modelo de núcleos utilizado para especificar as características de un cor, o HSLMatiz, Saturação e Luminosidade (en inglés, Tono, Saturación, Luminosidad).
A Matiz (Hue) representa o tom da cor, ou seja, qual cor ela é;A Saturação (Saturation) representa a intensidade da cor, ou seja, o quão vibrante ou mais apagada ela é;A Luminosidade (Lightness) representa o brilho da cor, ou seja, quão clara ou escura ela é.
Com base nessas informações, voltemos a nossa cor primária escolhida. En un sistema de diseño es interesante usar cantidades iguales de variaciones de un cor, para termos una referencia que delimita como núcleos más claras las escuras. Eu busco usar 3 o 5 núcleos primárias/secundárias.
Escala de cores primarias
Pensando en escala de luz, a cor do “meio” deve estar no meio-termo, ¿correto? Para isso a luminosidade da cor, siguiendo el modelo HSL, debe estar en casa dos 50%. A partir de esto, trabajamos os saltos de maneira proporcionales para obtener un resultado agradável, acessível e que colha as necessities do produto. O gráfico a seguir, ilustra como está administrado a configuración dessa escala.
Escala de luminosidad
A quantidade de luz da variante mais clara debe ser mais alto que a segunda cor mais clara e assim por diante. Já a saturação, eu mantenho as duas extremidades em 100%, para assim tirarmos o maior contraste e percepção daquela cor, conforme o gráfico a seguir.
Escala de saturación