El color en el diseño UX/UI (incluye hoja de estilos de color Figma)

1. Promo: En esta clase, aprenderemos todo sobre el color en el diseño UX UI. Empezaremos con todos los conceptos básicos sobre cómo elegir, mezclar y combinar colores, luego bucear un poco más profundo y configurar nuestras propias hojas de estilo. Durante el transcurso de la clase, cubriremos las siguientes materias. Técnicas comunes, consejos y trucos sobre cómo combinar colores. Conversión de colores entre diseño de impresión y pantalla. Valores de color como hex, RGB, Pantone y CMYK. ¿ Cuáles son y cuándo los usamos? Covarianza, ¿qué son y cómo configurarlos? Nombramiento de colores HACEN manera correcta. Nos vamos a la regla de los 60, 30, 10, una manera realmente genial de distribuir a tus compañeros por una sólida jerarquía. Vamos a buscar la accesibilidad. Y al final vamos a asegurarnos de documentar esos collares para el desarrollo. Y te voy a mostrar una manera realmente genial de cómo hacer esto. Al final de este curso, podrás usar colores en el diseño UX UI con confianza. Este es un curso por muy aprendizaje dosis IM. 2. Introducción: Hablemos de color en el diseño de la interfaz de usuario. Y juntos vamos a echar un vistazo a los siguientes temas. Vamos a empezar con lo básico y aprender sobre qué es hex to be Pantone y CMYK, y cuáles usamos para nuestro diseño de interfaz de usuario? Después vamos a hablar de convertir esos colores de impresión a pantalla. Y al revés. Vamos a hablar de cómo elegir colores y cómo mezclarlos y combinarlos como un profesional, vamos a aprender qué variantes sobre cómo crearlos, cómo nombrar los colores de la manera correcta. Vamos a hablar de un sistema de colores y cómo documentar tus colores para la programación. Y también vamos a hablar de la llamada regla 60, 30, 10, una forma muy útil de distribuir tus colores de la manera correcta. Entonces empecemos con nuestro primer tema. 3. Material de curso: Quizás quieras trabajar a mi lado, así que preparé algunos archivos para que los descargues en el curso que estás tomando simplemente navega a proyecto y recursos. Y ahí encontrarás toda la información y el enlace podemos descargar el material o puedes navegar a mi perfil. Bueno, también encontrarás un enlace directo a la página de descargas. Y en esta página encontrarás gran variedad de descargas. Simplemente puedes elegir la causa que estás tomando actualmente y luego solo tienes que hacer clic en Descargar. Y automáticamente descargará el archivo por ti. Para abrir un archivo de Figma para descargarlo, Es importante que tengas una cuenta de Figma. Dentro de tu cuenta, navega a nuevo, impresiona Import. A continuación, puede elegir un archivo que le gustaría abrir. Podría tomar un momento ya que son bastante grandes, pero una vez que los importaste, estarán a tu cuenta y no necesitas repetir este proceso. Estoy trabajando con fuentes de Google para la mayoría de mis diseños. Entonces si estás trabajando con la app Figma, entonces no necesitas hacer nada. Todas las fuentes de Google se precargan automáticamente. Si quieres trabajar con Figma en el navegador, entonces solo necesitas buscar la fuente que te está mostrando como faltante. Por ejemplo, Poppins, uso mucho. Y luego puedes descargar directamente esta fuente instalada en tu computadora y ya estás listo para salir. O los recursos son gratuitos para los estudiantes existentes y no es necesario ingresar ninguna información adicional. Puedes, por supuesto, también descargar cualquiera de los otros archivos en caso de que te interese. Por lo que bajo general siempre se suman Cualquier cosa que creo que podría ser útil. Entonces hay, por ejemplo, una plantilla Bootstrap y luego una lista con enlaces para libros de inspiración y bloques que son realmente geniales para el diseño de UX UI. Esta lista de descargas está creciendo constantemente, así que asegúrate de volver y echar un vistazo de vez en cuando. 4. ¡Pantone CMYK HEX!: Por lo que los colores pueden ser no se sienta de diferentes maneras. Los más comunes que probablemente te encuentres, nuestro Pantone, CMYK, hex, y RGB. Los dos primeros, Pantone y CMYK se utilizan típicamente para la impresión. Ahora la diferencia entre los dos es, es que Pantone es esa mezcla específica de tinta, por lo que es 100% del mismo color en cualquier parte del mundo. Ahora no puedes imprimir un color Pantone en tu impresora doméstica. Es algo que en la imprenta obtendrían esa tinta específica y luego la agregarían a tu impresión. No obstante, puedes ir a una imprenta y echar un vistazo a un llamado libro Pantone, o incluso podrías comprarte uno tú mismo. Dentro de ese libro, se ven todos los diferentes colores, relojes, y unos códigos correspondientes. El EU al final del número corresponde al papel sin estucar. Y podría verse un asiento para papel revestido o algunas versiones más. Entonces a pesar de que se te podría dar un color Pantone porque es la forma más confiable de hacer referencia a una huella de color. Probablemente sólo lo usarás para un logotipo o para empresas más grandes por los colores de sus marcas porque es bastante caro imprimir con Pantone. Por lo que la mayoría de las veces usarías CMYK y CMYK y Pantone corresponden. Entonces CMYK es cian, magenta, amarillo, y K es para negro. Entonces con esos cuatro colores, impresos se mezcla juntos para colorear que estás buscando. Ahora bien, es importante entender los valores de impresión y cuáles son, especialmente Pantone si necesitas mirar la referencia, pero no podrás usar esos valores en línea. Lo que utilizamos para nuestro diseño de interfaz de usuario es a los llamados valores hexadecimales y RGB. Rb es sinónimo de rojo, verde y azul. Por lo que nuestra pantalla mezcla esos tres colores para crear un color igual que en la impresión, mezclamos CMYK. Por lo que es un sistema muy diferente para crear un color, razón por la cual la impresión y la pantalla nunca se verán exactamente iguales. Hex es también una forma de RGB. Es sólo una forma mucho más corta de anotar. Hex significa hexadecimal y es un código de seis dígitos con un hash delante de él. Por lo que es muy corto y fácil de manejar. Se puede mostrar el mismo color con un valor RGB o RGBA a un presente representa la opacidad. Entonces puedes alterar eso. Por ejemplo, si pones ni 0.5 vista al 50 por ciento de opacidad, Es exactamente lo mismo. Por lo que puedes usar hex o RGB. No obstante, recomiendo usar hex porque viene en un formato de cadena que es más corto y más fácil de manejar y copiar y pegar y compartir. Entonces para ti, diseñé solo dar el valor hexadecimal para todos tus colores será más que suficiente. Ahora hay una cosa que realmente necesitas tener en cuenta cuando se trata de referencia de color y color en el diseño de interfaz de usuario. Ahora hemos aprendido que en el diseño de impresión tenemos los llamados colores Pantone. Esa es nuestra referencia universal de cómo debe verse ese color. Ahora esto no sucede con los collares en pantalla. Ahora, a pesar de que tenemos nuestros valores hexadecimales, se verán bastante diferentes en diferentes pantallas. No va a ser un color completamente diferente si estás eligiendo un rojo, no va a resultar verde, pero será un poco diferente. Lo que puedes hacer es abrir esta presentación en, por ejemplo, tu escritorio y tu teléfono. Y verás que lo más probable es que haya una ligera diferencia en los colores. Ahora así es justamente como funcionan las cosas en el diseño de pantalla. Y mientras tus colores tengan suficiente contraste y un armonioso entre sí, entonces eso tampoco es problema. Es solo importante que estés consciente de ello porque a veces tu cliente no está al tanto de ello. Y si, por ejemplo, te dieron una referencia Pantone, esperan que tu diseño luzca exactamente igual, lo cual simplemente no es posible. 5. Convertir colores desde el diseño de impresión a pantalla y la espalda: Por lo que en algunos casos, podría que se te pida convertir de impresión a pantalla usted mismo, o que simplemente encuentre el valor correspondiente. Entonces echemos un vistazo cómo podríamos hacer eso. Ahora si estás dando un valor RGB y quieres hexagonar o al revés. Eso es súper fácil. En cualquier software de diseño, solo puedes abrir el color y luego generalmente obtendrás una rueda de color o algo así. Y esto es, por ejemplo, en Figma, solo tienes un pequeño desplegable. Y luego puedes elegir tu color RGB, y luego verás la diferencia aquí. Si tienes un RGBA, solo pondrías el último dígito. Digamos que aquí no es 0.5, y te dará la opacidad. Ahora bien, si te han dado un color de impresión y te han pedido convertirlo en una web de color, eso es un poco más complicado. Hay convertidores en línea, pero la mayoría de ellos no son muy buenos. El que me gusta usar es el convertidor de sitio web oficial de Pantone. Ahora puedes usar eso en cualquier momento que conviertes Pantone CMYK o cualquier cosa desde la impresión hasta el diseño de pantalla. Y al revés, lo que haces es subir aquí para encontrar una herramienta de búsqueda de color Pantone y disco abierto. Entonces si he estado dando un valor Pantone, voy a Pantone, pantone, y luego pego mi valor aquí. Y yo lo escojo. Y NIC aquí me da la muestra. Y si seleccionas una muestra, entonces ves en el valor de Swatch a RGB ese hex y el valor CMYK. Si tienes esas muestreas físicas aquí, En realidad hay uno llamado puente de color. Y también se puede ver una directamente en las muestreas. Ahora esto también funcionaría al revés. Digamos que solo tenemos nuestros valores hex y queremos encontrar un valor de impresión correspondiente porque somos muy amables y queremos ayudar a los diseñadores de impresión. Entonces en ese caso, vamos a RGB CMYK en convertidor hex. Haga clic aquí, y luego podrá elegir aquí cuál es el valor que desea ingresar. Tengo Hex, entro mi valor, lo busco. Y de nuevo, te metes en las muestreas y va a hacer algunas sugerencias y el mejor partido y recogiendo de nuevo. Y puedes ver aquí encuentro mi muestra correspondiente. Ahora bien, esta es una manera realmente genial de convertir colores, y recomiendo encarecidamente usar esos convertidores Pantene. No obstante, nunca será 100% igual en impresión y en pantalla porque solo se trata de unos rangos de color muy diferentes. Pero probablemente sea el mejor resultado que obtienes. Y siempre recordaron esos convertidores están ahí para ayudarte y no para crear un obstáculo. Entonces si sientes que el valor hexadecimal que le das necesita ser ajustado un poco. Eso está bien. 6. Pick Mix y combinar los colores como un profesional: Hablemos de cómo elegir colores y mezclarlos y combinarlos como un profesional. Podrías tener un toque natural para recoger y mezclar color, y eso está absolutamente bien para que solo entonces sigas adelante y lo uses. Si eres Sin embargo, sintiéndote un poco inseguro acerca de configurar tus propios colores de marca. Te voy a mostrar algunas técnicas que puedes usar. En la pantalla, se ve una rueda de color RGB, que es lo que usamos para el diseño de pantalla. esta rueda hay 12 colores principales. Se pueden dividir en colores fríos y cálidos. En tu software de diseño, esto se verá así y podrás escoger colores a partir de aquí. Voy a usar una versión simplificada para mis ejemplos. De esta manera, podemos ver un poco mejor los diferentes segmentos de color. Un gran punto de partida para elegir colores para tu marca también lo hizo Google paleta de colores. En el sitio web de Diseño de Materiales, puede navegar a color y luego llamar a un sistema. Es un gran sistema en general para explorar. Y aquí encuentras las paletas de colores y él puede ver diferentes colores y hace que sea solo un poco más fácil empezar y como escoger tus primeros colores. Ahora voy a volver a la rueda de colores y mostrarte cómo combinar esos colores. Entonces nuestro primer acercamiento es el enfoque monocromático. Eso significa que escoges tu color. Por ejemplo, hay tono rojo, naranja, después caminar hacia el centro de la rueda de color. Por lo que obtienes un sombreado muy bonito. Puedes usar prácticamente cualquier color, sin embargo, el amarillo y el verde claro es un poco más complicado. Pantalla suele funcionar maravillosamente si apenas estás empezando y quiere algo muy seguro para trabajar. Ahora podrías escuchar mucho sobre la asociación con el color, como el azul es calmante y el rojo es muy dinámico. Pero para ser honesto, me enfoco más bien en la forma en que los combino porque aquí es donde creo el tono. Como viste en un enfoque monocromático, tanto el rojo como el azul tuvieron un efecto calmante bastante suave. Echemos un vistazo a nuestro segundo enfoque, que es el enfoque análogo, mediante el cual escogemos colores que están uno al lado del otro. Por lo que no necesitan estar exactamente en la misma piel justo dentro de un ángulo aproximado de 90 grados. De esta manera, puedes crear un poco más dinámico, pero aún tienes este look muy profesional y elegante. Si estás buscando algo aún más vibrante, entonces debes usar el enfoque de cortesía. Entonces empiezo con mi azul otra vez, pero luego agrego el color desde el lado opuesto de la rueda. Y puedo aflojar un poco esto agregando algunas formas más. Ahora puedes empujar esto aún más. Y en lugar de bajar por la rueda de color, puedes usar el llamado enfoque de cortesía split, que básicamente mezcla este enfoque con el enfoque análogo. Y solo escoges un color junto a él. Si quiero algo muy animado, este es el enfoque que uso porque estoy mezclando cálido y frío y estoy teniendo una dinámica de colores sin embargo todavía todos trabajando maravillosamente juntos. Basta con tener en cuenta que al usar un enfoque dividido, recomendaré que te quedes dentro la misma distancia del centro para escoger tus colores. De lo contrario puede ponerse un poco desordenado otra vez. Vamos a resumir. Echamos un vistazo al enfoque monocromático, que es por lo que bajamos a la rueda de color y obtenemos un look muy suave y sofisticado. Podrías usar el enfoque análogo, que es donde escogemos colores uno al lado del otro. Aquí Mi, agregamos un poco más de vibración, pero aún tenemos esta sensación muy tranquila y suave al respecto. Si buscas un poco más dinámico en tu diseño, entonces te recomiendo usar el enfoque complementario de cortesía o split donde mezclas colores de cortesía. Hay más formas de mezclar colores, pero estos son realmente los tres enfoques con los que puedes empezar. Y tendrás algo con lo que podrás trabajar de manera agradable y sencilla. 7. Inspiración de colores: Por lo que configurar un sistema de color y todas las cosas técnicas a su alrededor es realmente genial. Pero a veces solo quieres un poco de inspiración para que ese estado de ánimo sea correcto. ocasiones también ocurre que no hay colores de marca establecidos, pero ya hay un producto, imágenes impresionantes o tomas de empaque alrededor de un producto. Entonces vamos a ver qué dar esta imagen, lo que podemos hacer es entonces simplemente agregar eso a nuestro software de diseño y simplemente elegir los colores de la imagen para crear nuestro esquema de color. Posteriormente podremos adaptar ese esquema de color y utilizar un recolector de variantes o adaptado un poco en nuestro sistema para encontrar algunos colores de cortesía. De lo que también puedes hacer si solo quieres algunas ideas generales para los estados de ánimo, puedes ir a Pinterest y simplemente poner en paleta de colores. Y luego conseguirás algunas ideas realmente grandiosas. Generalmente, hay algunas cosas fantásticas que están relacionadas con las imágenes de la naturaleza y luego simplemente escoge colores de ahí. Por lo que esto es realmente grandes movimientos que también puedes usar en un tablero de humor. Por ejemplo, si te gusta uno de ellos, solo puedes hacer click en Agregar y luego obtendrás más imágenes similares como él. Otro gran lugar son las paletas de colores. Eso también te da una gran gama de diferentes paletas e inspiración. Otro que me gusta usar es el espacio de color. Con el espacio de color, puedes agregar tu color aquí y luego puedes hacer clic en Generar. Y lo hará simplemente en general es una muy agradable, así que relojes ir juntos por ti. Y aquí arriba lo que me gusta especialmente es la herramienta de gradiente. Para que puedas escoger dos colores. También puedes ajustarlos obviamente. Y luego se puede poner gradiente, y luego se puede ver el gradiente aquí. Y puedes cambiar las direcciones del gradiente. Y luego aquí abajo llegarás al código CSS de inmediato y un gradiente que solo puedes configurar en tu sistema de diseño con los colores que te dan aquí. Y una última que quizá quieras sacar es colores con mente doble o en la ortografía. Y también hay un solo genera muestras de color para ti. Por lo que aquí puedes ver esto en cualquier color. De verdad se puede hacer bastante con él. Para que puedas, puedes ver toda la varianza aquí. Se pueden subir fotos. Y te puede gustar tener uno que se ajuste o simplemente realmente, realmente ir y jugar con él. Porque realmente se puede hacer mucho en esta herramienta. 8. Variaciones de colores en el diseño de UI: Echemos un vistazo a las variantes, qué son, y cómo configurarlas. Por lo que una variante es básicamente una versión más clara u oscura de ese color. Entonces una cosa que podría venir a la mente es usar la transparencia. De esa manera podrías crear tonos más claros del color. No obstante, este es sólo el caso sobre un fondo claro porque los están viendo. Entonces esto es algo que puedes usar para una superposición o un efecto diferente, pero en realidad no es una variante. A muy final es una versión completa de un color en un tono más claro y oscuro. Entonces veamos cómo pudimos encontrar eso. Podrías hacer tus propias variantes alterando el valor del tono. Pero me parece mucho más conveniente usar un convertidor en línea. Hay muchos convertidores diferentes por ahí y simplemente puedes agregar el color que elegiste, y luego creará un montón de variantes para ti. No hay regla sobre cuántas variantes necesitas para tu diseño. Y siempre puedes agregar más a medida que te llevas bien. Lo importante es tener un color base y a partir de ese se crean sus variantes. Entonces para crear mi varianza, me gusta usar el diseño de materiales. Vas a Diseño de Materiales, color y sistema de color. Y algunos se desplazan hacia abajo, aquí se encuentran los pellets de color. En las paletas de color. Puedes jugar con el color que tienes si aún buscas color, o simplemente puedes pegar el que ya eligiste. Y luego de esa selección aquí, y obtendrás toda la varianza. lo que también podrías adaptarte al color, por ejemplo, solo puedes cambiarlo aquí y luego adaptará el valor para ti o puedes recoger aquí y siempre creará la varianza alrededor. Déjame volver a una naranja que realmente me gusta usar. Entonces creo que debería ser éste de aquí. Sí, exactamente. A mí me gusta esta naranja y probablemente voy a usar este tono aquí. Entonces lo que hace son dos cosas que puedes ver aquí. Una, te va a decir de qué color debes usar encima. Y por otro lado, te da esos números aquí abajo. Ahora esos números no son el nombre del color. El nombre del color es una vez que se pasa el cursor sobre él, el hex que se ve en la parte superior. Y este número de aquí abajo, hay 900, 250 es básicamente el número de la variante. Y esto es realmente gratis. No tienes que usar este sistema. También podrías nombrar tu varianza 10, 20, 30, 40. No les pongas nombre 1, 2, 3, 4, 5 porque quizá quieras tener una variante intermedia o algo claro o algo más oscuro. Por lo que siempre asegúrate de tener un sistema que permita agregar algo más adelante. Personalmente me gusta usar ese sistema que me está dando el diseño de materiales. Entonces utilizo esta anotación. Y lo que me gusta hacer es el color que estoy usando principalmente como mi color principal es el 500. Y de esta manera puedo subir y bajar sin ningún problema. También me gusta entrar en un paso de 100, así que me gusta usar 300 y luego 100 y luego arriba, estoy usando setecientos novecientos. Y sólo si noto que esto realmente no me está dando el resultado, todavía puedo meter ahí ochocientos cuatrocientos. También puedes agregar tu color secundario y crear tu variante. O puedes elegir un color de cortesía, color análogo, y, o un color triádico, que es un poco más complicado. Entonces, a menos que tengas realmente bueno con los colores, yo realmente no iría allí. Ahora solo agreguemos este color secundario. Copié el azul, el color de cortesía que quiero usar. Um, y entonces lo que puedes hacer es ir a ver en herramienta de color, que es realmente genial. Y así eso te da una visión general de cómo se verían tus colores en realidad en un diseño que es super cool. Y entonces lo importante aquí es que compruebes tu accesibilidad. Y puedes comprobar qué texto y qué colores puedes usar juntos encima de tus variantes y encima de tu color principal. Y esto es realmente, realmente importante que siempre compruebes esto. Entonces una vez que estoy contento con mis colores y variantes, solo escojo hexadecimal en su lugar. Me dieron en mi herramienta Google Material Design y luego transfieren esto a mi hoja de diseño. Por lo que en mi hoja de estilo, los anoto ya que mi color principal es el 500. Y de ahí estoy teniendo una versión más clara y oscura. Entonces como puedes ver, usé 200 pasos y por si quería un 400 color entre aquí también más tarde, solo puedo agregar este final. Mi sistema todavía va a funcionar bien y ser toda lógica para mi secundaria. Ahora, acabo de recoger el azul. No estoy seguro de si incluso necesito una variante ahora mismo. Entonces voy a anotar esto hacia abajo todavía con los 500 al final. Sé que esta es mi base para la secundaria. Y en caso de que quiera agregar algunas variantes, tantas como quiera más adelante, solo puedo hacerlo. 9. Nombrar a los colores de la manera correcta: Es muy importante tener un sistema adecuado a la hora de nombrar colores en el diseño de la interfaz de usuario. Por lo que una vez que escojas tu color, lo documentarías en la hoja de estilo y en tu sistema de diseño. Entonces lo que normalmente ves es que das una vista previa de tu color, le das un nombre, y añades el código hexadecimal. Ahora es muy importante que no pongas nombre a tu color después del color en sí, como rojo y azul y así sucesivamente. Pero debe ser algo genérico. Realmente no importa qué nombre utilices exactamente. Lo importante es que sea descriptivo y consistente. Entonces, ¿por qué es esto importante? Bueno, los colores podrían cambiar con el tiempo. Entonces si nombras tu color, por ejemplo, crema de menta, y luego en el último minuto, se cambia a morado simplemente no es muy conveniente. También es una buena práctica nombrar a tus colores en consecuencia a la función que tienen en tu diseño. Entonces, por ejemplo, tendrías algo así como colores de fondo o neutrales para algo que es como grado o beige, que usas en el fondo para crear algo más dinámico, pero realmente no es parte de tu marca. Para los colores de tu marca. A mí me gusta usar primaria y secundaria, pero podrían ser igual de bien llamarse marca y resaltar color, por ejemplo. De esta manera, le estás diciendo a tu equipo de diseño y tu equipo de desarrollo de inmediato qué función sostiene ese collar. Y es muy poco probable que alguien vaya a usar el color llamado neutral para llamar a la acción. Sabrán que el color destacado es el responsable de ese papel. Eso también te va a ayudar a estar muy organizado con tus colores. Un pequeño consejo cuando tengas variaciones de tu color, como lo hago aquí con mi primaria, no los llames 1, 2, 3, 4. Porque más adelante tal vez quieras tener algo un poco más claro o quizá necesites algo un poco más oscuro o solo ese tono en el medio. Entonces estoy usando 500 como mi color estándar y luego voy arriba y abajo en 200s. No obstante, no tienes que hacerlo de esa manera. También puedes llamarlo 10, 20, 30 a lo único es asegurarte de que haya algún espacio entre esos colores. Y por debajo y por encima del cuello que estás usando. 10. Colores de opinión: Los llamados colores de retroalimentación no son parte de tu marca. Están ahí para dar retroalimentación e interactuar con el usuario. Envía esa retroalimentación se puede dividir en peligro o error, advertencia, información y éxito. Se pueden utilizar como a todo color, como la escritura debajo del campo de entrada que acabamos de ver. O puedes tener algún tipo de banner que tenga un porcentaje de fondo del color y luego usa el color en la parte superior con la información. Tan solo asegúrate de que cuando hagas eso tengas suficiente contraste entre el fondo y la información en la parte superior para que esto sea legible para todos. A veces me gusta usar variantes de mi marca cuando se trata de mensajes de información y de éxito. El que no debes cambiar y dejar siempre en rojo brillante es la advertencia de error. Todavía se puede ajustar el tono del rojo, pero siempre debe mantenerse en rojo porque es muy importante que seamos coherentes con nuestra advertencia árabe. 11. Documentación de colores: Hablemos de documentar nuestros colores para nuestro diseño de interfaz de usuario. Entonces en lugar de solo decir que estos son los colores de la marca, tómenlos y adelante. Yo quiero mostrarles un enfoque sistemático. Entonces, ¿qué elementos tenemos? Vamos a descomponerlo. Tenemos nuestro color de fondo, luego tenemos un color primario. Estoy usando un tono oscuro aquí. Esto podría ser algo completamente diferente para ti. Y entonces tenemos nuestro color secundario. Los estoy llamando primaria y secundaria en este ejemplo, también podría llamarlos algo completamente diferente. Tan solo asegúrate de que sea genérico y descriptivo. La cantidad de colores de marca que necesitas también depende de ti. Podrías simplemente salirte con la tuya con una primaria y unas cuantas versiones de eso. O puede que necesites más colores. Yo recomendaría quedarme entre 23 colores. Eso suele dar un resultado bastante agradable. Y luego para cada uno de esos colores que tengo aquí, una variante por lo general son probablemente añadir unos cuantos más, como diría entre 25 variante suele ser lo que uso. nuevo, realmente depende de tu diseño y con varianza, lo grandioso es que puedes adaptar totalmente eso más adelante también. Además de mis neutrales y los colores de mi marca, también estoy teniendo algo llamado colores de retroalimentación. Para este ejemplo, configuré un cólera de error en rojo y un color de éxito en verde. Ahora podría tener también un color para la advertencia, que suele ser un naranja, y la información que es azul. Estoy adaptando eso con los colores de mi marca. Lo importante es que son advertencia de error que necesita estar ahí y que necesita estar en rojo. Y entonces esta es la parte importante, y esta es la parte inteligente sobre nuestra hoja de color. Vamos a añadir otra línea de colores, que llamamos nuestros propios colores. Ahora este color ONE definió todo lo que va encima de nuestro color. Entonces eso significa textos que van encima o cosas como iconos. Dbi, entonces este color ONE es realmente genial para agregar a tu hoja de estilo es porque te hace volver a comprobar tu diseño para la accesibilidad. Y para evitar el llamado rango fangoso, les voy a mostrar un poco más de cómo reviso esto. Entonces lo que me gusta usar es el Diseño de Materiales. Voy a Diseño de Materiales, color, y luego sistema de color, y a las paletas de colores. Y luego aquí, por ejemplo, se ve la gama de colores. Y te muestra de qué color va encima para asegurarte que tienes legibilidad y accesibilidad perfectas. Y entonces te puede gustar ir por esos colores aquí. Cualquiera que vea aquí es el rango donde el rango fangoso es donde empieza a cambiar. Por lo que voy a tratar de evitar esto por tener, por ejemplo, iconos colocados encima de algo como esto. Porque aquí abajo se puede ver que se pone mucho más claro y tener un resultado claro. También puedo poner mi naranja, por ejemplo aquí, y luego puedo ver que debería usar un tono oscuro encima de eso. Esta herramienta es de súper grado, por cierto, también para encontrar tus colores de cortesía y colores análogos y todo lo que ver con la combinación de colores. Lo que estoy tomando en la herramienta de material de Google, sin embargo, es solo que estoy usando blanco o un color gris muy oscuro, negruzco encima de algo. Si quieres combinar diferentes colores, lo que debes hacer es acudir a un verificador de contraste. Yo estoy por ejemplo, usando web aim aquí. Y solo puedes poner en tu color y te dirá si tu combinación de colores es accesible. Entonces digamos esta naranja encima de blanco, puedes ver que se siente en todas partes. Y entonces puedes igual que jugar con él aquí y cambiar tus colores y verás donde empieza a analizar. Entonces lo que puedes hacer es o adaptar tu color a tus necesidades o puedes poner en los colores que estás teniendo aquí y luego ver cuáles puedes combinar y cuáles no puedes. Entonces al revisar esto, noté que aquí, por ejemplo, definitivamente debería usar un color más oscuro. Otro aspecto que me gusta mucho de esta configuración es que mantiene a mis compañeros muy flexibles para cambiar. Permítanme darles un ejemplo. En esta configuración, el color primario se establece en un gris oscuro. Entonces si solo entrego colores, lo más probable es que mi texto también se vaya a establecer en este color. Y probablemente también vas a usar esto en tu archivo de diseño. Ahora bien, si quiero cambiar ese color de marca primaria a, digamos un azul, entonces de repente todos mis textos también estarán en azul, cual no es tan grande. Pero tendría que pasar poco a poco para volver a cambiar eso. El enfoque que estamos teniendo con nuestros propios colores, puedo cambiar los colores de mi marca, y luego puedo cambiar por separado los colores encima de mis elementos. Por lo que es realmente te da una gran flexibilidad con jugar con colores. Y solo para volverlo a recalcar, es totalmente adaptable a tus necesidades. Puedes agregar esas variantes que necesites y donde las necesites, y simplemente agregar un color on para cada uno de los colores que estás usando. 12. 60 30 10 rula de distribución de colores: Ahora una parte importante además de qué colores usas es cómo los usas. La regla de 1630 10 es una gran regla de oro. Básicamente significa que usas tu color base, eso compone el 60% de tu diseño, luego el 30 por ciento de tu diseño como tu color primario. Y solo para resaltar, usa tu color secundario por 10%. Ahora obviamente no medimos exactamente un color. Es más una sensación de distribución. Entonces eso es genial porque también te da espacio para jugar con variaciones como ves en mi ejemplo. Como se puede ver lo que hace. Se, te da una base muy sólida y una estructura realmente genial y realmente llama la atención a donde lo necesitas a tu llamado a las acciones. En caso de que necesitara cambiar los colores. Eso también funciona bellamente sin mucho retoque. Como de costumbre, esto es solo una regla de oro para empezar, usarla y hacerla suya. Hay una herramienta bastante increíble, diseño biomaterial llamado herramienta de color. Y lo que hace es, te muestra esta regla de 1630 10 básicamente. Para que puedas escoger un color primario, y luego solo puedes escoger cualquier color secundario. Y te muestra bastante bien cómo se verá eso en tu diseño. Y el diseño de materiales utiliza esto también, que tienes ese texto en primaria, textos en secundaria. Entonces aquí, por ejemplo, podrías establecer un color de texto separado a cualquier cosa que te guste. Y luego en la accesibilidad, puedes comprobar si tus colores son accesibles si tienen suficiente contraste. Y aquí solo puedes saltar y ver diferentes versiones de tu diseño. Y puedes por supuesto, personalizar todo al respecto. 13. Resumen de el color en el diseño de UI: Entonces resumiremos todo lo que hemos aprendido sobre los colores en el diseño de la interfaz de usuario. Por lo que en general, definimos colores en códigos hexagonales. Normalmente usamos de dos a tres colores, pero eres libre de usar tantos o tan poco como necesites para tu diseño. Utilizamos variantes de esos colores para más profundidad. Colores nombrados después de que usan. Entonces no llames entonces naranja o azul, sino primaria, secundaria o algo así como resaltar. De cualquier manera que los nombres, depende de ti, pero sé consistente. Documenta tus colores de la manera correcta. Comprueba siempre el contraste para asegurarte de que tus colores sean accesibles para todos. Y usa la regla de 60, 30, 10 para equilibrar tus colores a través de tu diseño. 14. Gracias: Bien hecho por terminar este curso. Siéntete libre de llegar a nosotros en moon learning dot io, siempre estamos interesados en escuchar tus comentarios. También harías como un gran favor si tan solo pudieras tomarte un minuto y dejar una reseña aquí mismo. Si disfrutaste de este curso y además asegúrate de echar un vistazo a nuestros cursos adicionales. En Moody Learning dot. Cubrimos todos los temas desde los fundamentos mismos del diseño UX UI hasta Figma e incluso algunos conceptos básicos de código. Asegúrate de visitar nuestro sitio web en Moody Learning dot IO, donde también puedes suscribirte a nuestro boletín de noticias.