Paleta de colores

Estos artículos explican muy bien cómo deben funcionar los colores y también tienen algunos trucos o guías para elegirlos más profesionalmente, son excelentes complementos para la clase 👌✌️:

• Teoría del Color en el diseño de interfaces
• Cómo hacer un diseño efectivo con jerarquía visual - Blog de Platzi

COLORES PARA PALETAS DE COLORES

Primarios: Rojo - Azul - Amarillo

• Monocromático: Un color con diferente opacidad
• Análoga: Un primario + un secundario + un terciario
• Complementaria: Primario + Inverso Secundario
• Triádica: En triangulo (Tres del mismo tipo)
• Tétrada: En rectángulo (2 primarios + 2 secundarios)

Esto lo aprendí en el curso de Diseño para programdores

Insistio, estaria bueno que suban la documentacion completa del proyecto en algun lado no ? Darnos el link del Notion.

Una de las partes mas importante del diseño de la plataforma son los colores. Definen el estilo visual

Los colores se puede clasificar en nuestro sistema (Action colors, primary colors, secondary colors, etc)

Se puede definir plaeta de colores por productos Ej: Seleccionamos un color en especifico para ventas, otro color para clientes, etc. Un ejemplo real es Mercadolibre (Tiene su paleta de colores), Mercadopago (Tiene otra paleta de colores), son parte de la misma empresa pero diferentes productos.

O hay otros sistemas de diseños que inventan categorías de colores que les convenga a su producto.

Brand Colors: Tomar los colores de la marca y aplicarlo al producto. (En algunos casos no es conveniente hacerlo)

Gray: Es importante tener una paleta de colores de gruises. (Del blanco al negro)

Backgrounds: Le da contraste a los botones de acciones. (Normalmente en los sistemas de diseño no se define, pero en algunos casos no escaria mal hacerlo)

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

Así es como yo hago mi sistema de jerarquía de colores para el producto que estoy diseñando.
En Figma hay una función que se llama “Reactive components” y es una autentica chulada para organizar los sistemas de diseño atómico.
Por ejemplo, en mi sistema no solo hago jerarquía usando los colores, si no también usando el relleno y el grosor de la linea, luego haciendo uso de los reactive components, hago una muestra de como se vería el feedback de ese botón cuando hacemos un Hover.

Les comparto este articulo donde podran encontrar 9 herraminetas web para generar tus paletas de colores:
https://www.informacionyarte.com/herramientas-para-crear-paletas-de-colores

Se puede complementar esta clase con el Curso de Manejo del Color que ofrece Platzi actualmente.

Creo yo que le fato definir aun mas los colores, por uso y no solo ponerlos y ya.

Sintieron agotado al profesor en esta clase, me sentí como cansado/agotado en la forma en la que comenzó a hablar.
Como cuando corres por una botana y subes corriendo a seguir aprendiendo en Platzi 💚 jaja

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

como logras esas presentaciones tan cool?, en que programa desarrollas las animaciones como la manzana de apple

Apuntes de la clase:
Podemos tener varios paradigmas, por ejemplo Material Design. O tener clasificaciones dependiendo del producto, área, etc.

• action colors:
  • primarios
  • secundarios
• brand colors
• gray: escala de blancos a negros
• backgrounds: muy importantes para darle contraste

Los colores dan jerarquía. Necesitamos colores “booleanos”, positivos y negativos.

Documenta qué colores vas a usar para qué categoría.

Hola, hay una página de adobe que es buenísima para armar paletas de colores. Se llama Adobe Color y puedes sacar colores análogos, complementarios, etc. Depende de lo que desees.

Contestando a la pregunta de jessrcks
El profe Rulótico González, dice que necesitamos colores afirmativos y negativos.
El le llama colores boléanos “Boléanos es” Falso y Verdadero

“corazón coreano, nos vemos luego”

¿Cómo le pusiste el verde al título? 😮

Colores como Identidad

ℹ️ Definición
Las paletas de colores definen el estilo de nuestro sistema de diseño, ayudando a diferenciar la identidad de la marca y del resto de efectos y elementos visuales.

.
Cada color seleccionado, auxilia en la identificación exacta de aquello en lo que los usuarios necesitan ver.
.
Los colores son equilibrados y seleccionados para armonizar la visibilidad de nuestro producto, trayendo un sentido objetivo de marca.
.

✨ Concepto clave
Escoger categorías (primarias, secundarias y extendidas), permiten que los colores se enfoquen en su usabilidad permitiendo un contraste entre elementos y componentes.

.
Actualmente, existen varias referencias para la creación según las guías que se desee seguir, por ejemplo Atlassian. En esta última, la paleta de colores está dividida de la siguiente manera:
.
Paleta Primaria. La cual define los colores de marca.
.

.
Paleta Secundaria. La cual define los colores auxiliares o contextuales.
.

.
Paleta Extendida. La cual define aquellos tintes y tonos utilizables, tomando desde oscuros y brillantes, hasta tonos de la misma paleta secundaria.
.

.

✨ Concepto clave
Considere darle un identificador y referencia según la abstracción de color (RGB o Hexadecimal).
Por ejemplo, B400 - Pacific bridge #0052CC RGC(0, 82, 204)

.
Finalmente, la organización que le demos a nuestra paleta de colores podrá generar una guía como referencia de aquello que fuéramos estipulando.
.

Color Semántico

ℹ️ Definición
El color semántico ayuda a los usuarios a identificar estados, ver acciones, localizar auxiliares e intuir escenarios contextuales.

.

Comparto un enlace muy bueno para el color https://material.io/design/color/the-color-system.html#color-theme-creation

Les comparto una pagina que ofrece paletas de color y las aplica para ver cómo utilizarla. https://www.happyhues.co/

Cómo usar la teoría del color en Marketing y Diseño

Paleta de colores

• Es uno de los aspectos más importantes del Sistema de Diseño, pues define todo el estilo visual de la plataforma o producto.

• Lo importante es que se clasifiquen y categoricen para que todo el equipo los pueda utilizar.

• Colores call to action: para generar acción de compra, de continuar, de iniciar, de suscribirse, etc.

• Colores background: para fondos de pantallas, fondos de interfaz, etc.

Es buenos usar el color rosado para el área de servicio al cliente ya que esta comprobado que calma el mal humor de una persona.

Nos ayuda a pensar en el objetivo, las micro o macro conversiones, los “CTA”…etc…Al principio, no sabía al 100%, si me acostumbraría al sistema de diseño. Es muy fluido el trabajo.

Clasificar y categorizar.

Para poner la imagen del color al lado del texto pueden utilizar columnas:

1. Escriben 2 líneas seguidas.

Linea 1
Linea 2

1. Las seleccionan y hacen click en Turn into
   .

.

1. Eligen Columns
2. Se habrán creado 2 columnas con los textos correspondientes.

Linea 1	|	Linea 2

1. Sustituyen los textos por los elementos que quieren inserter, en este caso la imagen del color y el texto correspondiente.
   .

.

1. Acomodar las columnas

Cuando elijas una paleta de colores para tu sistema de diseño, considera la identidad de tu marca, la emoción que deseas transmitir y la accesibilidad.
Comienza seleccionando colores base que representen la esencia de tu marca, luego elige tonos complementarios para crear variedad. Asegúrate de que haya suficiente contraste entre los colores para garantizar una fácil legibilidad y accesibilidad. Por ejemplo, si tu marca tiene una identidad fresca y relajada, podrías optar por tonos de azul y verde.
Para destacar elementos importantes, como botones, elige un color vibrante que contraste con el fondo, facilitando la navegación para todos los usuarios.

Uff los colores son todo un mundo xd

Que hermosa clase

Gracias en la practica es que se aprende!

Los colores transmites las emociones y tamicen nos dan dirección en nuestra composición.

Excelente clase!

En este artículo encontrarémos herramientas verdaderamente útiles para crear mejores paletas de colores digitales en este 2020: https://www.paredro.com/7-herramientas-ui-para-crear-mejores-paletas-de-colores-digitales/

¿Qué son los boolean colors?

El enlace de Notion no incluye nada en las páginas de Sistema, Fundations y Componentes.

Hecho en falta tener en algún lado los archivos para descargar.

El git hub que comparte @Rulotico que es y como se puede descargar?

cual es la cantidad de colores que puedo usar en un sistema

Una pregunta, una vez me habían dicho que el #FFF no debe ser considerado dentro de nuestra paleta de colores y veo que rulótico lo tiene como brand logo. Esto es correcto ?

¿En que momento se genera el sistema de diseño? Pienso que los tamaños de la typografia y el juego de colores son resultado de poner la práctica del diseño.

La selección de colores es la parte mas importante del Sistema de Diseño, ya que estos irán en todo el estilo visual de nuestro proyecto.

Muchos sistemas de diseño clasifican sus colores según sus productos

(un color para ventas, otro para servicio al cliente, etc) , otros utilizamos Material Design y clasificamos los colores como actions colors , _secondary colors y otros niveles de clasificación. En realidad no importa, podemos tomar cualquier otro paradigma de fundamentos de color para nuestros sistemas, lo importante es clasificar el uso de estos colores y asegurarnos de que todo el equipo los entiende.

Los brand colors es tomar los colores de la marca para apropiarlos en la plataforma. Siempre hay que utilizar una gama de grises que estén entre el blanco y el negro.

Hay que aprender a generar jerarquías entre los colores.

Sintieron agotado al profesor en esta clase, me sentí como cansado/agotado en la forma en la que comenzó a hablar.
Como cuando corres por una botana y subes corriendo a seguir aprendiendo en Platzi 💚 jaja

COLORES PARA PALETAS DE COLORES

Primarios: Rojo - Azul - Amarillo

Monocromático: Un color con diferente opacidad
Análoga: Un primario + un secundario + un terciario
Complementaria: Primario + Inverso Secundario
Triádica: En triangulo (Tres del mismo tipo)
Tétrada: En rectángulo (2 primarios + 2 secundarios)

A esto es lo que se refiere el profesor cuando habla de Material Design

Profesor: los colores o podemos nada mas como ponerlos asi al libre albedrío

Yo: ahh si soy jajajajjaja