Crea increíbles esquemas de colores para tus proyectos diseño UI/UX

1. Introducción: ¿ Por qué es tan difícil trabajar con colores? Si eres diseñador de UI/UX, eres muy consciente de la importancia del color. Ya sabes que a veces crear la paleta de colores correcta se convierte en una tarea desalentadora. Pero, ¿por qué? Porque necesitas saber cómo crear una gran combinación de colores y cómo aplicar a tu diseño. Si no tienes idea de cómo hacer eso, y estás luchando con crear esquemas de color increíbles, no te preocupes, estás en el lugar correcto. Hola, soy Arash Ahadzadeh, y soy diseñador de UI/UX. También enseño diseño de UI y UX en la Universidad de Economía y Ciencias Humanas de Varsovia y en este curso, tú y yo vamos a caminar por todos los detalles sobre los colores. Empezaremos con los fundamentos más básicos del color luego pasar a temas avanzados como armonías de color, psicología del color, y mucho más. Si eres de esas personas que piensan que crear la paleta de colores grises requiere talento y habilidades artísticas, probablemente sea el momento de cambiar tu mentalidad porque el color es todo acerca de la ciencia. Sí, lo escuchaste bien. Cuando aprendes la ciencia detrás de los colores, puedes fácilmente llegar a tus propias paletas de colores armoniosas en poco tiempo. Además de crear paletas de colores, también aprenderás a aplicar colores a tu diseño sin importar si se trata de un sitio web o de una aplicación. Además, hablaremos de la importancia de la accesibilidad al color en el diseño de UI/UX y aprenderás a crear hermosas y accesibles paletas de colores a través de ejercicios sencillos. último, pero no menos importante, les compartiré algunos consejos y trucos personales para trabajar con colores que aceleren dramáticamente su proceso de diseño. Este curso está diseñado para brindarte los conjuntos de habilidades teóricas y prácticas que se requieren para elegir y aplicar los colores correctamente. También te ayuda a convertirte en un diseñador más seguro y mejor con solo practicar diferentes técnicas. Entonces si estás listo para dominar el color y crear increíbles esquemas de color, te veré en clase. 2. Estructura del curso: Oigan a todos. En este video, vamos a hablar de la estructura de este curso. Este curso se divide en dos partes diferentes, la teórica y la práctica. En la parte teórica, aprenderás todos los fundamentos del color como la teoría del color, la psicología del color, las armonías del color, y mucho más. En la parte práctica, practicarás cómo aplicar los conocimientos que has adquirido en la parte teórica a proyectos del mundo real. Crearemos diferentes paletas de colores y las aplicaremos a un sitio web y una aplicación móvil. De esta forma, comprenderás verdaderamente el proceso de creación y aplicación de paletas de colores a las interfaces de usuario. Nos vemos en el siguiente video. 3. La importancia de los colores en el diseño UI/UX: Cuando hablamos de diseño, no importa si se trata de diseño UI/UX, diseño gráfico, o incluso diseño de interiores, los colores juegan un papel más blanco en cualquiera de ellos. Sin duda, los colores son uno de los aspectos más importantes de tu diseño UI/UX. Sin colores, es casi imposible dar a nuestros personajes y sentimientos de diseño. No importa lo buena que sea tu composición, si no usas los colores apropiadamente garantizo que tu diseño no destaque. Cuando diseñas un proyecto, ya sea un sitio web o una aplicación móvil, es esencial transmitir el mensaje y sentimientos correctos al usuario final eligiendo los colores adecuados. Pero, ¿por qué el color es importante en el diseño UI/UX? La serie de taquigrafía, primera impresión visual importa. ¿ Estás convencido? Si no, permítanme que explique más al respecto. Cuando los usuarios lanzan una aplicación móvil o un sitio web, les toma alrededor de 50 milisegundos decidir si quieren quedarse o no. Sus decisiones dependen de diferentes factores y uno de estos factores es el uso del color. ¿ Puedes ver lo importante que es usar colores adecuados en tu diseño? Elegir colores grises se ve complejo a primera vista, pero confía en mí, cuando aprendes los fundamentos de los colores y la ciencia detrás de eso, te aseguro que puedes crear increíbles esquemas de color para tus proyectos en poco tiempo. En los siguientes videos, aprenderás sobre los conceptos básicos de los colores para el diseño UI/UX. Te vi entonces. 4. Modos de color: Cuando queremos usar colores, existen diferentes modos de color entre los que podemos elegir, como CMYK, RGB, Escala de grises, etc., pero los más dominantes son CMYK y RGB. Los modos de color pueden impactar en cómo se presentan las imágenes a los usuarios. Déjame descomponerlos por ti. CMYK es sinónimo de cian, magenta, amarillo y negro. Se utiliza con mayor frecuencia para la impresión a color. RGB es sinónimo de rojo, verde y azul. Es mejor para el trabajo digital porque estos colores son los colores primarios utilizados en pantallas de computadora, pantallas móviles, etc. Así que si eres un diseñador gráfico que quiere diseñar ilustraciones para impresión, debes usar CMYK, y si eres un diseñador de UI/UX que quiere diseñar para pantallas digitales, debes usar RGB. Déjame mostrarte rápidamente cómo se diferencia RGB de CMYK. Echa un vistazo a esta foto. El modo de color de esta imagen es RGB. Pero mira lo que pasa si lo convierto a CMYK. ¿ Viste eso? ¿ Cuál es la razón detrás de esta diferencia? Aquí está el diagrama de cromaticidad, y esta es la gama de colores que nuestros ojos podrían procesar y reconocer. Esta es la gama de colores que podemos lograr en modo RGB, y esta es la gama de colores que podemos lograr en modo CMYK. Como puede ver, el rango o gama RGB es mucho más grande que el rango CMYK. Es por eso que los colores del modo RGB se ven más vibrantes que los colores del modo CMYK. Espero que ahora tengas una mejor comprensión de los diferentes modos de color. Nos vemos en el siguiente video. 5. Los ingredientes de color: Podemos descomponer cada color en tres ingredientes centrales: tonalidad, saturación y valor. matiz es básicamente el origen del color que vemos como rojo, azul, morado, o cualquier otro color. La segunda propiedad de un color es la saturación, y es la intensidad de un matiz. Toma el verde por ejemplo. Aumentar la saturación, y la intensidad aumenta. Por el contrario, si disminuyes esa saturación, la intensidad disminuye. El último atributo de un color es el valor. Es básicamente el brillo de un color. Ahora, podemos desglosar el valor en dos términos diferentes: tinte y sombra. Un tinte es una versión más brillante de un matiz, y podemos crear uno si mezclamos el tono con el blanco. Por otro lado, un tono es una versión más oscura de un matiz. Como pueden adivinar, podemos crear uno agregando negro a nuestro tono. También podemos crear un tono de nuestro color agregándole gris. En futuros videos, aprenderás a crear diferentes tintes y tonos de un color para tus proyectos. 6. Domina la rueda de colores: Alguna vez te has preguntado cómo algunos diseñadores de UI crean las paletas de colores perfectas para sus proyectos? No sólo utilizan sus habilidades artísticas para este asunto. Usan la ciencia, y se llama teoría del color. Para aprender esta ciencia, debes entender qué es una rueda de color, y cómo puedes usarla. Esta es una rueda de color, y al igual que lo que aprendiste en la escuela, está hecha de colores primarios , secundarios y terciarios. Los colores primarios son rojo, azul y amarillo. Si mezclamos estos colores juntos, ellos hacen los colores secundarios, y son verdes, anaranjados y morados. Por último, cuando mezclamos los colores secundario y primario, hacen los colores terciarios, amarillo-naranja, rojo-naranja, rojo-violeta, azul-violeta, azul-verde y amarillo-verde. Estos conforman la rueda de color, inventada por Sir Isaac Newton, y simplifica cómo podemos trabajar con diferentes colores. El color rueda se puede dividir en dos grupos principales en función de la temperatura del color, los colores fríos y cálidos. Pero, ¿cómo podemos usar la rueda de color para llegar a sorprendentes paletas de colores para nuestros proyectos? Bueno, podemos usar algunas fórmulas básicas conocidas como armonías de color para escoger diferentes colores de la rueda de color de manera armoniosa. Hablaremos de armonías de color en futuros videos. 7. Diferentes colores: Como mencioné en el video anterior, tenemos dos grupos de colores, colores fríos y cálidos. Pero, ¿cómo debemos saber qué grupo es más adecuado para nuestro proyecto de diseño de UI? Cada grupo de colores tiene algunas características que nos ayudan a decidir si es una buena opción o no. Por ejemplo, los colores fríos representan agua, nieve, cielo, y son tranquilos, calmantes y refrescados. Por otro lado, los colores cálidos representan calor, luz solar y amabilidad. Son enérgicos, emocionantes, y acogedores en general. Dependiendo de las características de la marca, podemos decidir qué grupo de colores es adecuado para nuestro proyecto. Por ejemplo, si la marca ofrece actividades emocionantes y divertidas, puedes ir con los colores cálidos. Por el contrario, puedes usar colores fríos si la marca es todo sobre confianza, seguridad, profesionalismo, etcétera. Los colores que utilizamos deben reflejar la personalidad de la marca. Además de estos dos grupos, tenemos otro grupo de colores llamado colores neutros, blanco, negro, marrón y gris. Los colores neutros no aparecen en la rueda de color. Normalmente los usamos para fondos porque complementan y resaltan bastante bien otros colores en nuestro diseño. Pero usar un color gris o blanco como fondo no siempre se ve interesante y estético a los ojos del usuario. Entonces, ¿qué podemos hacer? Para que nuestro diseño luzca aún mejor, podemos agregar un matiz y un poco de saturación a los colores neutros. Gracias a esta técnica, los colores neutros se ven más interesantes para los ojos del usuario. 8. Harmonias de colores: Ahora que aprendiste sobre la rueda de color y el color en general, es hora de aprender a usar la rueda de color para crear esquemas de color de aspecto profesional. Existen algunas fórmulas básicas basadas en la armonía de color que pueden ayudarnos a elegir colores armoniosos fácilmente. Empecemos con la fórmula más fácil, que se llama monocromática. Utiliza sólo un color o matiz. Simplemente elige un color en la rueda de color y crea variaciones utilizando la saturación y el valor. Lo que me gusta de los esquemas de colores monocromáticos es el hecho de que se les garantiza que funcionen bien juntos. La siguiente fórmula de color es complementaria. Toma dos colores de lados opuestos de la rueda de color, como azul y naranja, o amarillo y morado. Es un gran esquema de color cuando se quiere utilizar colores de alto contraste en su diseño. Un esquema de color split-complementario toma los colores a ambos lados de los complementos. Te da diferentes colores con los que trabajar manteniendo el mismo nivel de contraste. Un esquema de color análogo toma colores que están uno al lado del otro en la rueda de color, como amarillos y verdes, o azules y morados. Un esquema de color triádico utiliza tres colores que están espaciados uniformemente, y forman un triángulo en la rueda de color. Estas combinaciones de colores suelen ser vibrantes, así que asegúrate de usarlas sabiamente en tus proyectos. El esquema de color tetradic toma dos conjuntos de colores complementarios y forma un rectángulo en la rueda de color. Estos colores funcionan muy bien cuando dejas que un color actúe como el color principal y los demás como acento. Se pueden crear diversos temas, tonos y tonos dentro de cada paleta de colores. Si estás un poco abrumado, no te preocupes. Cuando empieces a aplicar estos métodos, ganarás confianza y podrás reconocer fácilmente si algunos colores funcionan juntos o no. 9. Contraste de colores: contraste de color es la diferencia de luz entre el primer plano y el fondo. ¿ Te suena raro? Permítanme mostrarles un ejemplo. Aquí hay un fondo afilado, y si le agregamos un elemento con un color saturado encima, conseguiremos esta terrible pieza de arte. Ojalá pudiera fingir que nunca he visto un diseño tan horrible. Afortunadamente, podríamos arreglar eso. A menudo podrías obtener una mejor relación de contraste solo modificando los tonos, los tintes o la saturación de tus colores. Una relación de contraste es sólo un valor asignado a la diferencia de luz entre primer plano y fondo. Cuanto mayor sea la relación, más fácil será leer el contenido en la pantalla. Estos son algunos consejos que podrían llevar tu calidad de diseño de buena a grande. Punta número 1, nunca use negro puro y blanco puro y viceversa. Hace que el tren ocular digital y lastime los ojos de los usuarios. En cambio, puedes usar un gris muy oscuro en un gris muy claro y viceversa. Punta número 2, no uses un color brillante en un color brillante. No deja que tus elementos destaquen. En cambio, puedes usar un color brillante en un tono oscuro. Punta número 3, comprueba siempre tus colores tanto en fondos claros como oscuros. En ocasiones es posible que necesites ajustarlos para obtener una buena relación de contraste en fondos oscuros. último pero no menos importante, punta número 4, valida siempre tus colores comprobando la relación de contraste. Créeme, hay hermosos diseños de interfaz de usuario en Dribbble y Behance que fallan la prueba de relación de contraste. Aprenderás a comprobar la relación de contraste más adelante en este curso. 10. ejemplos de colores real.: Ahora que has aprendido cómo funcionan las combinaciones de colores, veamos algunos ejemplos de cada armonía de color para ver cómo puedes aplicarlas a tu diseño. Esquema de colores monocromáticos. Como se puede ver, este sitio web utiliza un esquema de color monocromático. ¿ Por qué? Porque sólo usa un solo color aquí. Pero Aresh, tenemos muchos colores aquí, ¿por qué dices que solo usa un solo color? A primera vista, puede parecer que aquí hay muchos colores. No obstante, tenemos un solo color y diferentes tonos, tonos, y tintes de ese color. El color primario es este azul, y usaron un tono oscuro de ese color para este título grande y también los enlaces en la parte superior y para el botón de inscripción, como puedes ver, usan el color primario y un tinte claro de ese color. Básicamente, el matiz es el mismo, pero el valor y la saturación son diferentes. Echemos un vistazo a otro ejemplo. Este sitio web llamado Orbit también utiliza un esquema de color monocromático, y aquí también usan un solo color y aplican perfectamente estos colores a su diseño para crear una gran jerarquía visual. Esquema de color complementario. Aquí hay un sitio web popular, Booking, y como puedes ver, utiliza un esquema de color complementario. ¿ Por qué? Porque aquí tenemos azul y naranja. Estos dos colores se colocan en los lados opuestos de la rueda de color. También usaron un color neutro para el fondo, y esta es la razón por la que aquí destacan los colores naranja y azul. Es muy importante elegir el color de tu fondo sabiamente. hay algunos otros colores, Aquíhay algunos otros colores, como el verde o el rojo, pero estos son colores semánticos y hablaremos de ellos más adelante. Echemos un vistazo a esta aplicación móvil. También es una empresa muy popular, y como puedes ver, aquí utiliza la misma combinación, azul y naranja. Se trata de una combinación de colores muy popular que se puede ver en el diseño de interiores, en el diseño gráfico, y en el diseño UI/UX. Dividir esquema de color complementario. Este sitio web utiliza un esquema de color complementario dividido, y como puedes ver, es enérgico y divertido. El motivo es que, estos son colores de alto contraste, generalmente los usamos en ilustraciones. Ahora echemos un vistazo a este sitio web. Aquí, también usé un esquema de color complementario dividido, y como puedes ver, lo usé para los patrones del lado derecho, no para el resto de elementos del lado izquierdo. Es muy importante saber qué colores son adecuados para qué contenido. de colores análogo. Este sitio web utiliza un esquema de color análogo, y como se puede ver, el diseñador aplicó perfectamente estos colores a la ilustración y acaba de usar un color blanco para el contenido de primer plano. Por lo tanto, aquí tenemos una relación de contraste muy alta. Este sitio web también utiliza un esquema de color análogo. Como puedes ver, usan el color principal como fondo, y usan otros dos colores que se colocan en los lados derecho e izquierdo del color en la rueda de color, y los usan para el CTA o llamado a la acción, como puedes ver, y también para el título, estos son los colores de acento y deben llamar la mayor atención. colores triádico. Este sitio web utiliza un esquema de colores triádico, y como notaste, estos colores son emocionantes y divertidos. Este es también otro ejemplo de esquema de color triádico. Como se puede ver aquí, el diseñador utilizó algunos colores desaturados para dejar que los contenidos y la información como su texto y estas imágenes estallaran en esos fondos, y el resultado es genial. colores tetradic. Aquí hay un ejemplo de esquema de color tetradic utilizado en el diseño de la interfaz de usuario. Como se puede ver aquí, la mayoría de los colores se utilizan para la ilustración. ilustración aquí tiene muchos colores como verde, naranja, rojo, rosa, morado oscuro, etc. En realidad no es buena idea usar este esquema de colores para los principales elementos de tu proyecto como texto, botones, etc. A menos que seas un diseñador experimentado y saber lo que estás haciendo, no sugeriría usar este esquema de color en el diseño UI/UX. Este sitio web es otro ejemplo de un esquema de color tetradic. Aquí de nuevo, tenemos una ilustración, y es obvio que el diseñador no utilizó toda la paleta de colores para los contenidos. 11. Introducción a la psicología del color: Saber emparejar colores es crucial para cualquier diseñador. No obstante, no es suficiente para crear un diseño significativo. Veamos el significado de los colores individuales. No obstante, cualquier color puede transmitir un sentimiento positivo o negativo a los usuarios. Por lo que quieres asegurarte de usar los colores adecuados para comunicarte con los usuarios correctamente. Cada color puede tener sentimientos positivos y negativos. Por lo que es importante usarlos en el lugar correcto para evitar cualquier malentendido. Rojo. El rojo implica emoción, amor, poder y energía. También podría transmitir peligro, error, y agresión. Por lo tanto, asegúrate de aclarar lo intenso con una breve descripción al lado del color. Amarillo. El amarillo representa creatividad, felicidad, optimismo, y amabilidad. Por eso McDonalds lo utiliza como color de su marca. Naranja. El naranja podría proporcionar a los usuarios una sensación de calidez. Es acogedor y muestra éxito y confianza. Verde. El verde es un color dominante en la naturaleza que puede evocar emociones poderosas. Representa salud, frescura, y crecimiento. Si quieres diseñar un proyecto para un producto ecológico, ese es probablemente el mejor color que podrías usar. Azul. El azul significa confianza, calma y paz. Para algunas personas, es un signo de tristeza y depresión. Es posible que hayas reconocido que la mayoría de los sitios web de tecnología y corporativos usan azul para entregar un sentido de confianza, calma y respeto. Algunos hospitales también usan el azul en su página web. De lejos, el azul es el color más preferido por todos los usuarios. Es por ello que ves muchas aplicaciones móviles y sitios web por ahí usando el azul como su color dominante. Violeta. El violeta es un color que simboliza la realeza y la riqueza. Dado que el tinte violeta era escaso en el pasado, estaba reservado a la realeza. También es el color favorito de muchas usuarias femeninas, y aporta una sensación de creatividad. Rosa. El rosa es un color de compasión y positividad. tanto que el rosa se ha utilizado para productos femeninos desde hace años. También puede ser neutral de género, pero asegúrate de pensarlo dos veces cuando quieras usar el rosa para una página web de tienda de carpintería. Marrón. Al igual que el verde, marrón se asocia con la naturaleza, pesar de que puede proporcionar una sensación de comodidad, también puede ser aburrido y sucio. Asegúrate de revisar diferentes formas marrones antes de aplicarlas a tu diseño. Porque un marrón claro puede hacer limpio y uno oscuro puede parecer sucio. Negro. El negro implica elegancia, lujo y sofisticación. Asegúrate de usarlo correctamente ya que podría proporcionar una sensación de tristeza y tristeza también. A pesar de que comúnmente se usa para texto, podrías usarlo para el fondo siempre pongas colores blancos de la marca en primer plano. Blanco. Vemos blanco en casi cualquier diseño, y eso se debe a que simboliza limpieza y sencillez. Si quieres diseñar una página web minimalista o una aplicación móvil, asegúrate de usar mucho el blanco. Es posible que esté familiarizado con el término espacio en blanco, y significa dejar algún espacio vacío que el usuario no se sienta abrumado. no mencionar que deja que otros colores pop en tu diseño también. A partir de ahora, quiero que pienses en el significado de los colores que estás usando tus proyectos que podrías actualizar tu diseño de bueno a impresionante. 12. Diferencias de género en la preferencia de colores: Al diseñar una aplicación o un sitio web, es fundamental saber quién es tu público objetivo. ¿ Por qué? Porque en función de la demografía de los usuarios, puedes decidir qué colores funcionan mejor para el proyecto y potencialmente aumentar la tasa de conversión. En los últimos años, diferentes proyectos de investigación han demostrado que hombres y mujeres prefieren colores diferentes. hecho de que conozcamos el significado de los colores, no significa necesariamente que debamos usarlos todos. Comparemos los colores más preferidos por hombres y mujeres lado a lado. Como puedes ver, el azul es el color más popular tanto para hombres como para mujeres. Ahora entiendes por qué tantos sitios web y aplicaciones usan el azul como su color dominante. El púrpura es del agrado mayormente por las mujeres, mientras que tanto a hombres como a mujeres les gusta el rojo y el verde. Ahora vamos a comparar los colores más disgustados por hombres y mujeres. Como puedes ver, el marrón y el naranja son los colores menos favoritos tanto para hombres como para mujeres. Por lo que la próxima vez que quieras crear una paleta de colores, primero podrías hacer un poco de investigación para averiguar quién es realmente tu público objetivo, y en base a lo que encontraste, podrías elegir tus colores fácilmente. 13. Colores necesarios: No importa en qué tipo de proyecto de diseño de UI trabajes, necesitarás los siguientes colores para trabajar: uno, colores primarios y secundarios. El color primario es un color dominante que se usa con mayor frecuencia en tu interfaz de usuario. Por lo general, debes usar el color de la marca como color primario. Considera esta imagen como un ejemplo; Qatar Airways utiliza su color de marca púrpura como su color primario. Opcionalmente, puedes crear un conjunto de colores secundarios para que tu diseño sea más interesante. Ten en cuenta que debes usar colores secundarios si y solo si son necesarios para que tu diseño se pop. Supongamos que desea diseñar un menú con diferentes opciones. Para distinguir entre la opción seleccionada y las opciones no seleccionadas, puede utilizar un color secundario. Dos; colores de acento. El color de acento se utiliza para enfatizar acciones y resaltar información como texto, botones o llamada a la acción, deslizador, enlaces, barra de progreso, etc. Una vez que escojas tu color primario, puedes usar las armonías de color que hablamos a punto de crear el color de acento. Te mostraré cómo crear una paleta de colores paso a paso en el siguiente video. Considera la página de aterrizaje de Lyft. Utiliza el morado como color de acento y como puedes ver, se ha utilizado para la llamada a la acción y los enlaces. Tres; colores semánticos. Se utilizan para advertir, error, éxito, e información. Use amarillo para la advertencia, rojo para el error, verde para el éxito, y azul para la información. Estos colores se sugieren en base a la psicología del color. Eres libre de usar diferentes tonos, tonos, y tintes de estos colores. Asegúrese de no utilizar estos colores semánticos manera intercambiable porque pueden transmitir el mensaje equivocado al usuario. Colores neutros: esquemas blancos, negros o grises. Estos colores se utilizan en su mayoría para texto y fondo. Dejan estallar todos los demás colores en tu diseño. Casi todas las paletas de colores requieren colores neutros para crear una alta relación de contraste de color entre el fondo y el primer plano. Como se puede ver, este sitio web utiliza un color neutro claro para el fondo. último pero no menos importante, el número 5, gráficos y colores de visualización de datos. Al igual que los colores secundarios, tener estos colores también son opcionales dependiendo del tipo de tu proyecto. Si necesitas tener gráficos, heatmaps o treemap en tu interfaz de usuario, considera crear un conjunto de 10-20 colores en un orden particular. Podrías crear este tipo de colores utilizando las siguientes pautas. Se puede crear un esquema de color categórico hecho de múltiples colores que contrasten entre sí en cierto orden. Es bueno para gráficos de líneas, gráficos de barras, etc. Dado que estos son colores contrastantes, usa este esquema de color cuando necesites presentar los datos de manera distintiva. El otro tipo de esquema de color que puedes crear es secuencial. Se trata de una transición gradual de colores de claro a oscuro y viceversa. Es adecuado para treemap y heatmap. El último tipo de esquema de color que puedes crear es divergente. Los colores divergentes son útiles cuando se tienen valores negativos y positivos para presentar. No uses estos colores para escalas categóricas. 14. ¿Cómo crear una paleta de colores para tu proyecto?: Ahora que has ganado todos los conocimientos requeridos sobre el color, pongámoslos en práctica y creemos una paleta de colores paso a paso. ¿ Estás listo? Empecemos. No importa el software que estés usando, cambia el modelo de color a HSB. Yo uso Figma. Entonces déjame mostrarte cómo funciona. En primer lugar, me dirijo a la sección Relleno, y desde este menú desplegable, elijo HSB. Como se puede ver, aquí tenemos tres valores diferentes H para matiz, S para saturación, y B para brillo. Cuando queremos aumentar la intensidad de nuestro color, debemos aumentar la saturación aquí. Si deseas crear un tono, debemos disminuir el brillo para agregar negro a nuestro color base. Paso 1, elige tu color base. Es el color primario de tu IU. Puedes escoger el color de la marca para ello si hay alguno. Paso 2, aplica el color a la forma en tu lienzo. Podría ser un círculo o un rectángulo. Paso 3, duplicar la forma cinco veces para obtener seis formas idénticas. Estas son tus muestras. Paso 4, elige las muestras cerca del color base y modifica solo la saturación o brillo para obtener dos tonos oscuros de apoyo de tu color. No cambies el matiz. Estos colores se utilizan para diferentes estados de elementos accionables como botones o enlaces. Por ejemplo, cuando diseñamos un botón, queremos crear todos los estados del botón como predeterminado, activo, inactivo, etc. Paso 5, ahora elige dos colores neutros agregando gris y blanco a tu color. Paso 6, finalmente, crea un tono oscuro de tu color agregando más gris a tu color. Ya estamos hechos. Como puedes ver, con solo usar un solo color base, puedes diseñar una interfaz completa. Tengo una pregunta para ti. ¿ Qué tipo de armonía de color usamos para crear esta hermosa paleta? Si tu respuesta es monocromática, tienes toda la razón. Utilizamos un color y creamos variaciones agregando tintes, tonos y tonos a nuestra paleta de colores. Ahora vamos a crear un esquema de color análogo. Voy a usar la rueda de color como mi referencia. Escojamos el morado como nuestro color base. Ahora voy a mover ligeramente el deslizador de tonalidad hacia la izquierda y derecha para elegir tres colores más. Ten en cuenta que con el fin de crear variaciones para tu esquema de color, no necesitas grandes cambios de tonalidad. Solo necesitas modificar ligeramente el tono y crear variaciones ajustando la saturación y el brillo. En este caso, voy a elegir un tinte de este color rosa como mi color de acento. Ahora que nuestros colores primarios y acentos están listos, es hora de agregar dos colores neutros agregando gris a nuestro color principal. Ahora veamos cómo se ve esta paleta en una interfaz. Se ve increíble, ¿no? Dependiendo del tipo de proyecto, puedes agregar colores semánticos a tu paleta de colores. Los colores semánticos se utilizan para advertir, error, éxito e información. Como mencioné en el video anterior, debes usar el amarillo para la advertencia, rojo para el error, el verde para el éxito y el azul para mostrar información. Una nota rápida aquí, tener estos colores es imprescindible si quieres diseñar un tablero de mandos. Porque en los cuadros de mando, solemos presentar datos importantes y es esencial utilizar colores semánticos para transmitir claramente el propósito y el significado de todos los datos a los usuarios. 15. ¿Cómo elegir el color base?: En este video, vamos a hablar del proceso de escoger un color base para tus paletas de colores. El color base es el color dominante en tu proyecto. Para elegir el color base, comprueba primero los colores de la marca. Si quieres diseñar un sitio web o una aplicación móvil para KFC, ¿cuál sería el mejor color base para tus paletas de colores? Sí, tienes razón. Rojo. ¿Por qué? Debido a que los clientes de las marcas están familiarizados con el color de la marca y pueden conectarse con su diseño al instante. Si necesitas elegir el color primario de la marca, primero, enumerar las características de la marca, y luego pensar en qué color conecta con la idea detrás de la marca de acuerdo con la psicología del color. Es esencial usar colores que se comuniquen con los usuarios. Supongamos que desea elegir un color primario para una empresa que ofrece productos orgánicos. En ese caso, el verde podría ser una buena opción porque se siente natural y fresco. Cuando decidas qué color es adecuado para la marca, puedes jugar con los atributos de esos colores como saturación, brillo y valor. La mayoría de las veces, eliges un color y dices que se ve genial. No obstante, cuando intentas combinar ese color con otros colores, puede que no se vea tan bien como esperas. Asegúrate de comprobar tu color primario frente otros colores para ver si esa es la opción correcta para tu proyecto. Hablaremos de la accesibilidad de los colores más adelante en este curso. 16. ¿Cómo elegir un color?: Los colores de acento se utilizan para enlaces, llamada a acciones, barra de progreso, etcétera. Por lo general son brillantes y saturados. Se puede crear un color de acento eligiendo el color base o primario y utilizando diferentes armonías de color como monocromáticas, análogas, o un complementario. Si aún no estás seguro de cómo elegir un gran color de acento, déjame mostrarte mi proceso. Elige tu color primario y aumenta o disminuye el tono en 30-40 puntos. Ahora aumenta el brillo en 5-10 puntos. Voila, tu color de acento está listo. Esta fórmula funciona con cualquier color. ¿ Puedes ver lo fácil que es crear un color de acento ahora? 17. ¿Cómo elegir los colores de fondo?: No importa lo bonitos y vibrantes que sean tus colores de acento, si no tienes un buen color de fondo, no reciben suficiente atención. Por lo que es crucial elegir sabiamente tu color de fondo. Cuando se trata de fondo, no estás limitado a usar solo colores claros. En ocasiones podemos usar el color primario para el fondo, siempre y cuando no sea demasiado vibrante hacer que los usuarios abandonen su sitio web o aplicación. También podemos seleccionar tu color primario y crear un tinte muy claro disminuyendo la saturación y aumentando el brillo. Como puede ver, utilicé esta técnica para esta interfaz. Por ejemplo, puede establecer el valor de saturación entre 2-8 puntos y establecer el valor de brillo entre 95-100 puntos. Se garantiza que los colores neutros funcionen mejor para los fondos. 18. Colores semánticos en el diseño de UI: Como mencioné antes, los colores semánticos se utilizan para el estado y la retroalimentación como advertencia, error, éxito e información. Si bien debes usar el amarillo, el rojo, el verde y el azul como tus colores semánticos, no estás limitado a un solo color. La mejor práctica es que crees diferentes tonos y tintes de estos colores para poder aplicarlos de manera flexible. Una vez que tus cuatro colores estén listos, puedes usar la armonía de color monocromática para crear variantes. Eso te da suficiente flexibilidad para aplicar estos colores a tu diseño. Supongamos que quieres diseñar una advertencia. Si utilizas un solo color, se vería así. Ahora, vamos a dar un paso más allá y añadir un tono de amarillo a nuestros colores semánticos. Ahora el resultado se ve mucho mejor. podría aplicar la misma técnica a todos los demás colores semánticos. 19. ¿Qué es una escala de color?: ¿ Qué es una escala de colores? ¿ Te acuerdas de los tres atributos del color? Sí, hablo de matiz, saturación, y valor. Una escala de color es una transición gradual de un color particular de claro a oscuro o viceversa. ¿ Qué atributo del color está cambiando en una escala de color? Tienes razón, valor. Muchos artistas y diseñadores creen que el valor es el atributo más importante del color. Pero, ¿por qué? Porque no necesitas color para diseñar un proyecto hermoso y accesible. Todo lo que necesitas es una escala de grises que podrías usar para crear una gran jerarquía visual usando colores contrastantes. Como diseñador, debes entender que si no consigues los valores correctos, el resto de tus colores no se verán bien. Cuando se trata de la accesibilidad al color, los valores juegan un papel importante. Echemos un vistazo a las paletas de colores Material Design. si no lo sabes, Material Design es un lenguaje de diseño desarrollado por Google. Te da un conjunto de pautas para mejorar tu proceso de diseño. Aquí hay algunas escalas de color creadas por Material Design. Estos colores son elegidos para trabajar juntos de manera armoniosa. Como se puede ver, cada color corresponde con un número, entre 50-900. Los valores más altos representan colores más oscuros, y los valores más bajos representan los más claros. Tener diferentes valores de un color nos ayuda a cumplir con los estándares de accesibilidad. ¿ A qué me refiero con accesibilidad? Tomemos este morado, por ejemplo. Como se puede ver, el color del texto utilizado en alguna varianza es blanco, y en otros es negro. Significa que debes usar un color de texto claro y algunos colores, y en otros, debes usar un color de texto oscuro para que el texto sea legible. Exploraremos la accesibilidad del color más adelante en este curso. 20. ¿Qué es la escala de grises?: ¿ Qué es la escala de grises? La escala de grises simplemente está hecha de diferentes tonos de gris. Muchos artistas y diseñadores inician su diseño usando una escala de grises. Pero, ¿por qué? El motivo es que cuando trabajas con solo diferentes tonos de gris, puedes enfocarte en otras cosas importantes como espaciado, tamaños, jerarquía visual, el peso de tus elementos, y más. Simplemente puedes concentrarte en cómo deben colocarse tus elementos como botones, texto, deslizadores o tarjetas. Cuando usas el modo de color en escala de grises, puedes notar fácilmente si tienes suficiente contraste entre tus elementos o no. Por ejemplo, esta interfaz tiene una gran jerarquía visual. Como puede ver, la información más importante es más oscura que la información menos importante. Ahora quiero que se centren en la columna de prioridades. ¿ Se puede ver que cuanto mayor sea el nivel de prioridad, más oscuro se pone el color? Analicemos más a fondo. Aquí tenemos tres niveles prioritarios: alto, medio, y bajo. Ahora cambiemos al modo de escala de grises. Como puedes ver, la más alta prioridad tiene aquí la sombra más oscura. Es por ello que no solemos usar amarillo para el botón Eliminar en una interfaz. Ahora echa un vistazo a esta tarjeta. Los colores son armoniosos y estás listo para agregar la tarjeta a tu diseño, excepto que no lo eres. Cambiemos al modo de color en escala de grises por un segundo. ¿ Se puede ver el problema? Como puedes ver, aquí no tenemos una buena jerarquía visual, haciendo que nuestro diseño sea menos accesible. ¿ Cómo podemos arreglar eso? Bueno, usaría un color más claro para la descripción y el botón de cancelar. Pero, ¿por qué? Por la importancia de la jerarquía visual. Nuestros elementos más importantes, que son el título y el botón de confirmación deben llamar la mayor atención. Por lo tanto, el botón cancelar y la descripción deben tener un tinte más claro de nuestros colores. Ahora vamos a compararlo con el modo escala de grises. Obviamente, ahora se ve mucho mejor tanto en términos de accesibilidad como de jerarquía visual. Si desea tener un proceso de diseño eficiente, asegúrese de comenzar con escala de grises y luego aplicar colores a su diseño. 21. ¿Cómo aplicar una paleta de colores a tu diseño?: Ahora que has aprendido a elegir tus colores basados en armonías de color y psicología del color, realidad es el momento de aplicarlos a tu diseño. Pero espera, ¿no puedes aplicar colores a tus elementos al azar? Por supuesto que no puedes. A menos que quieras que tu diseño se vea así. Es hiriente, ¿no? Imagina que estás cocinando una porción de comida deliciosa y hermosa para el almuerzo. Tienes todos los ingredientes listos a tu disposición y solo necesitas saber cuánto de cada ingrediente se debe agregar a tu sartén. Si usas los ingredientes de manera desproporcionada, es posible que termines con una comida salada o una comida insípida. Si esa no es tu intención, necesitas tener una receta. Pero, ¿tenemos una receta para aplicar colores también? Afortunadamente, sí lo hacemos. Existe una regla conocida llamada 60-30-10 que se toma del diseño de interiores. Veamos cómo funciona. En base a esta regla, necesitas usar 60 por ciento de tu color dominante o primario, 30 por ciento de tu color secundario y 10 por ciento de tu color de acento. En primer lugar, vamos a revisar estos diseño de interiores. Como se puede ver, el color primario se utiliza para el 60 por ciento del entorno, el color secundario se utiliza para el 30 por ciento del entorno, y el color de acento se utiliza para el 10 por ciento del entorno. Ahora es el momento de darle una oportunidad. Esta es una interfaz diseñada en modo escala de grises. Empecemos a usar solo tres colores primero. Un color primario, un secundario, y un acento. Voy a usar el color primario para nuestro fondo, el color secundario para el texto y estas tarjetas, y el color de acento para el CTA, que son estos botones y también para estas barras en el gráfico de barras. ¿ Se puede ver lo equilibrado que es este diseño? Ahora podríamos incluso reorganizar nuestras proporciones de color. Vamos a reemplazar el color primario por nuestro color secundario y ver cómo resulta. Todavía se ve bien, ¿no? Pero, ¿normalmente no tenemos más colores en nuestra paleta de colores? Sí, sí lo hacemos. Todavía podemos aplicar esta regla aunque tengamos diferentes tonos de nuestro color primario o colores más secundarios y acentos. Simplemente necesitamos mantenerlos en la misma proporción. Consideremos esta paleta de colores. Podríamos querer usar estos color neutrón claro y este color primario azul mayormente en nuestro diseño. Entonces ambos deberían tomar el 60 por ciento de nuestra relación. Estos dos colores ahora van a ser nuestros colores secundarios, lo que se llevan el 30 por ciento de nuestra relación. último, pero no menos importante, estos dos colores de acento deberían tomar el 10 por ciento de nuestra relación. Ahora veamos cómo podríamos aplicarlos a nuestra interfaz. Podríamos empezar con nuestra sección de héroes. Escogemos uno de los colores de nuestra relación primaria, que toma el 60 por ciento de nuestro diseño en total y lo usamos como fondo de secciones de héroe. El otro color primario también se utiliza como la otra parte de nuestro fondo. Ahora para el contenido, podríamos usar nuestros colores secundarios. Para los botones CTA, necesitamos usar un color que llame la atención del usuario, por lo que debemos utilizar nuestros colores de acento para este propósito. Voy a usar amarillo para los botones CTA y naranja para el botón de deslizador e indicador. Recuerda que siempre debes comprobar tus colores el uno contra otro para ver si hay una buena relación de contraste entre ellos o no. Un color de acento puede verse increíble en fondos oscuros, mientras que el otro solo podría ser legible en fondos vivos. Esta es básicamente cómo puedes asignar diferentes colores a diferentes elementos de tu diseño. Una de las cosas que puedes hacer para asegurarte de que tu relación de color funcione bien es crear varianza para diferentes partes de tu diseño y compararlas entre sí en términos de legibilidad y accesibilidad del contenido. 22. ¿Cómo poner el nombre de tus colores adecuado?: Convenciones de nomenclatura. Uno de los temas más importantes a la hora de crear sistemas de diseño. Como diseñador único, puede considerar nombrar colores como el factor menos importante que se puede pensar cuando se trabaja en un proyecto. Es comprensible, pero permítanme darles un ejemplo para entender la importancia de nombrar verdaderamente las convenciones. Supongamos que estás trabajando en un proyecto con una pequeña paleta de colores que incluye 4-10 colores. Estos son tus colores. ¿ Cómo los nombra? Bueno, la mayoría de ustedes puede llamarlos; azul, azul claro, verde y amarillo, y está totalmente bien si estás trabajando en un pequeño proyecto como diseñador único. Ahora imaginemos que trabajas en un proyecto a gran escala, con más colores para trabajar, y deberías colaborar con otros diseñadores. ¿ Se puede utilizar el mismo enfoque aquí? Por supuesto que no. Pero, ¿por qué? Cuando se nombra a los colores en un sistema de diseño, el objetivo principal es hacer que el papel de los colores sea lo más vívido posible. ¿ Por qué crees que azul/luz/ 2 es un nombre lógico, no tiene sentido para otros colaboradores. A menos que quieras ir y explicar tus convenciones de nomenclatura a todos los demás diseñadores, desarrolladores y comercializadores de tu equipo, debes usar un enfoque, que funcione para todos, sin necesidad de explicar la lógica detrás de ella. Supongamos que tenías un color primario, y tres tonos de este color para diferentes estados de tus elementos, como por defecto, activo, prensado, etc. ¿Cuál es la mejor manera de nombrar estos colores? En primer lugar, comienza con el uso de este color. En este caso, es primario. Después usa un guión o una barra inclinada hacia adelante, y escribe las variaciones como, activas, inactivas, predeterminadas, etc. De esta manera, podríamos describir los colores, sin siquiera mencionar sus nombres. A esto se le llama convención de nomenclatura funcional. No importa quién utilice nuestro sistema de diseño, ya sea que esa persona sea un diseñador ciego de color, o un nuevo miembro de su equipo, él o ella puede entender fácilmente, cómo se deben usar esos colores en el proyecto. Este enfoque es claro, escalable y universal. Por supuesto, existen diferentes convenciones de nomenclatura, pero ésta es la que funciona bien para proyectos pequeños, medianos y grandes. 23. ¿Cómo crear grandes degradados?: Ahora que ya sabes crear una gran paleta de colores para tus proyectos, es hora de hablar de gradientes. ¿ Qué es un gradiente? Un gradiente es una transición gradual de un color a otro color. Aunque el uso de gradientes en tu diseño es opcional, agrega carácter y personalidad a tu diseño. Es por eso que la mayoría de los diseñadores hoy en día utilizan gradientes en su diseño. Tenemos básicamente cuatro tipos diferentes de gradientes: lineal, radial, angular, y diamante, pero el más popular es el gradiente lineal. Ahora déjame mostrarte cómo puedes crear grandes gradientes para tus proyectos. En primer lugar, abre enfriadores.co. Ahora haga clic en el menú Más en la parte superior y haga clic en el botón Crear un degradado. Aquí podríamos crear nuestros gradientes. Como puedes ver, aquí tenemos diferentes colores. Si paso el ratón encima de estos deslizadores y hago clic en alguna parte, puedo agregar un nuevo color a este deslizador. Si quiero quitar un color, puedo dar click en este botón quitar igual que eso. Ahora que tenemos dos colores diferentes, déjame decirte cómo puedes llegar a grandes gradientes, porque obviamente no todos los colores se ven muy bien cuando los mezclamos juntos. Déjame seleccionar mi 1er color y lo voy a cambiar a azul, por ejemplo, este azul. Ahora te voy a mostrar un mal ejemplo. Déjame seleccionar el 2do color y cambiarlo a, por ejemplo, naranja, así como así. Como puedes ver, este gradiente no se ve muy bien porque aquí no tenemos una transición suave, aunque estamos usando una armonía de color, el resultado no es bueno. Recuerda, algunas armonías de color solo son buenas para colores sólidos, no gradientes, pero ¿cómo podemos hacerlo mejor? Aquí está mi técnica y te recomiendo que también uses eso, porque es tan simple y te va a hacer la vida mucho más fácil. Primero, selecciona tu 1er color, copia el código de color hexadecimal y pégalo para el 2do color. Aquí tenemos dos colores idénticos. Ahora, usando el selector de color, voy a mover el deslizador hacia la derecha y hacia la izquierda con el fin de escoger colores análogos así. Ahora puedes ver lo increíble y suave que es esta transición de color? Ahora probemos otro ejemplo. Voy a mover un poco el slider de tonalidad hacia el lado izquierdo, ¿ puedes ver lo bonito que es? También puedes modificar el brillo de tus colores si lo deseas, depende totalmente de ti. Esta técnica siempre funciona. Para crear grandes gradientes, necesitas recordar solo una regla, y eso es usar la armonía de color análoga. Si quieres llegar a gradientes aleatorios, puedes hacer clic fácilmente en estos botones aleatorios y Coolers crea gradientes aleatorios para ti así como así. Otra cosa que puedes hacer es usar la armonía de color monocromática. Con el solo uso de un color y diferentes tonos y tintes de ese color, se puede llegar con grandes gradientes así. 24. ¿Qué es la accesibilidad del color?: Cuando se trata de diseño UI/UX, la accesibilidad importa mucho. Después de todo, los diseñadores están ahí para resolver problemas, no para hacerlos. Es importante diseñar de una manera que todos, independientemente de sus discapacidades físicas, auditivas o visuales, puedan utilizar el producto. accesibilidad del color permite a las personas con discapacidad visual utilizar el producto que diseñamos al igual que todos los demás. ¿ Recuerdas el ejemplo sobre los colores semánticos? Todo esto se trata de la accesibilidad del color. Aquí tenemos tres imágenes de perfil con el indicador de estado en la esquina superior derecha. verde significa que el usuario está en línea, azul indica que el usuario está desconectado y el morado significa que el usuario está ocupado. Pero veamos cómo ven este diseño las personas con visión monocromática. Como se puede ver, los colores son difíciles de distinguir entre sí. Es por eso que elegir el derecho de valor para cada color importa mucho. Ahora modifiquemos estos colores para que este diseño sea más accesible. Usemos colores semánticos para estos indicadores. Ahora es mucho mejor. ¿ Se puede ver por qué la accesibilidad es importante ahora? Las personas que sufren de visión monocromática no pueden distinguir los tonos. Sólo pueden ver diferentes tonos de gris. Es por ello que ya mencioné que el valor de los colores es más importante que otros atributos del color. Podemos crear un buen contraste entre nuestros tonos simplemente cambiando el valor de un color que incluso las personas con visión monocromática pudieran reconocer nuestra jerarquía de elementos. Por supuesto, hay muchas deficiencias de visión de color, pero el punto que estoy tratando de hacer es que no todo el mundo percibe los colores de la forma en que lo hacemos. Consideremos este diseño y veamos cómo diferentes personas con deficiencias de visión del color pueden procesar estos colores. Visión monocromática o daltonismo completo. Como mencioné antes, las personas con visión monocromática sólo pueden ver diferentes tonos grises. Protanopia colordaltonismo. Las personas con esta deficiencia de visión de color perciben los colores rojos como colores más oscuros de lo normal y generalmente el rojo se convierte en un verde oscuro. Si eliges el rojo como tu color de primer plano y el negro como tu color de fondo, sería demasiado oscuro para que leyeran el texto. Monocromacía de cono azul o BCM para abreviar. Las personas con BCM no pueden ver los colores rojo y verde adecuadamente, mientras que pueden percibir el azul. También hay otras deficiencias de visión del color, pero lo importante es que nosotros como diseñadores debemos asegurarnos de elegir nuestros colores de una manera que mejore la funcionalidad de los productos que diseñamos. Siempre pon al usuario en el centro de tu diseño. 25. Validada tu paleta de colores basado: Uno de los factores que siempre debemos comprobar con respecto a la accesibilidad del color es la relación de contraste. De acuerdo con las Pautas de Accesibilidad al Contenido Web, o WCAG para abreviar, existen dos niveles diferentes de relación de contraste, AA para contraste mínimo o AAA para contraste mejorado. El nivel AA requiere una relación de contraste mínima de 4. 5:1 para el texto normal y 3:1 para el texto grande o en negrita. Por otro lado, el nivel AAA requiere una relación de contraste mínima de 7:1 para texto normal y 4. 5:1 para texto grande o negrita. Pero espera, ¿cómo podemos medir realmente la relación de contraste de nuestros colores? Bueno, podemos usar damas de contraste en línea para este asunto. Existe un sitio web llamado Coolors tanto para crear paletas de colores como para verificar la relación de contraste. Vamos a intentarlo y ver cómo funciona. Acude a coolors.co/contrast-checker. Aquí, debemos especificar un color de fondo, y aquí debemos especificar el color del texto que vamos a utilizar en nuestro fondo. Como pueden ver, tengo un número bastante alto y es fantástico. También indica que esta combinación de colores funciona bien tanto para texto pequeño como grande. Ahora, vamos a revisar otro par de colores. ¿ Puedes ver eso? Todavía es legible, pero solo funciona para texto grande. Por lo que siempre revisa la relación de contraste de tus colores para ver qué tan accesibles son. 26. Herramientas útiles para accesibilidad: En este video, te voy a presentar algunas herramientas útiles para la accesibilidad. ¿ Estás listo? Empecemos. Número 1, Stark. Se trata de un plugin de Figma, Sketch, y Adobe XD. Te permite comprobar tu relación de contraste de color y simular diferentes deficiencias de visión de color. Solo necesitas seleccionar una mesa de trabajo y ejecutar el plugin y Stark maneja el resto. Número 2, Contraste. Se trata de un plugin de Figma que te permite comprobar la relación de contraste de tus colores. A diferencia de Stark, que te permite comprobar la relación de contraste solo tres veces con el plan libre, Contrast no tiene límite en este sentido, y también tiene una característica genial que escanea todo tu diseño para encontrar problemas de contraste de texto . Número 3, whocanuse.com. Se trata de un sitio web increíble que no solo comprueba la relación de contraste de color, sino que también muestra cómo las combinaciones de colores pueden afectar a diferentes personas con deficiencias visuales. Vamos a intentarlo. En primer lugar, especificamos el color de nuestro fondo, luego establecemos nuestro color de texto, y especificamos el tamaño y el peso de la fuente. Aquí podemos ver la relación de contraste, que es bastante alta, y una calificación que es AAA. Adicionalmente, podemos ver cómo diferentes personas pueden procesar esta combinación de colores, por lo que tenemos la Visión Regular, las deficiencias de ceguera de color más populares, y algunos otros problemas de visión. También tenemos los eventos de situación o visión, lo cual es bastante interesante porque podemos ver lo accesible es nuestra combinación de colores al simular el efecto de la luz solar directa, un modo nocturno en un teléfono o pantalla. 27. inspiración de colores: Como diseñadores, siempre buscamos inspiración en todas partes para estar al día con las tendencias del diseño, llegar a nuevas ideas, y así sucesivamente. Estar inspirados es parte de nuestra vida. Es algo muy bueno porque nos ayuda a abrir nuestras mentes y probar cosas nuevas. Podemos obtener inspiración para nuestro diseño de diseño o incluso para crear nuestras paletas de colores. Fuentes inspiradoras están en todas partes. Podríamos inspirarnos en la naturaleza, los colores de tus flores, o incluso en tu artículo personal. Te voy a hacer una pregunta. ¿ Qué armonía de color tenemos aquí? Tienes razón. Complementaria. ¿Qué hay de aquí? Si tu respuesta es monocromática, tienes toda la razón. Tenemos armonía de color monocromática aquí también. También puedes visitar algunos sitios web para inspirarte como Dribble, donde puedes elegir un color y ver cómo otros diseñadores usan esto en sus obras de arte. Puedes consultar otra página web llamada Color Hunt, donde podrás encontrar muchas paletas de colores diferentes para tus proyectos. El siguiente sitio web se llama Muzli. Puedes ir a colors.muz.li, elige tu paleta de colores deseada, y te mostrará cómo se ve realmente tu esquema de color en una interfaz. 28. Herramientas en línea para crear paleta de colores: Hay un montón de herramientas diferentes por ahí que te permiten crear tus armoniosas paletas de colores. En este video, te voy a mostrar alguna paleta de colores útil generando sitios web. ¿ Estás listo? Empecemos. Número 1, Refrigeradores. Como ya mencioné, esta es la herramienta que utilizo para encontrar combinaciones de colores armoniosas para mis proyectos. También puedes darle una oportunidad. Déjame mostrarte cómo funciona. Una vez que abras el sitio web, puedes hacer clic en el botón Generar del menú y aquí está el generador de paletas. Si presiona la barra espaciadora de su teclado, toda esta paleta cambia. Una vez que encuentres un color que te gusta, te puede gustar ese color haciendo clic en el icono de candado. Ahora continúa presionando la barra espaciadora hasta que encuentres un 2do color. Es divertido, ¿no? Debo mencionar que ahora, solo se escogen los mejores colores coincidentes en base a los colores que te gustaron. Debes seguir haciendo este proceso hasta seleccionar todos los colores. Ahora puedes exportar tu paleta de colores y utilizarla en tu software de diseño. Si tienes un color principal específico, solo puedes pegar aquí el código de color hexadecimal, bloquearlo y presionar la barra espaciadora para generar tu paleta de colores. Una vez que tu paleta de colores esté lista, puedes usar otras características geniales de este sitio web. Por ejemplo, puede ajustar los atributos de todos los colores a la vez utilizando la opción ajustar paleta. También puedes comprobar la accesibilidad de tu color usando la opción de daltonismo. Pero, ¿y si quieres crear una paleta de colores usando una armonía de color específica? No te preocupes, tú también puedes hacer eso. Simplemente dirígete al menú Más y haz clic en Generar método. Desde este menú desplegable, puede especificar la armonía de color que desea utilizar para crear paletas de colores. ¿ Quieres ver tus paletas de colores en modo escala de grises? Basta con hacer click en el mapa Ver luminancia. También puedes crear una paleta a partir de una foto. Para ello, haz click en el botón de la cámara y sube tu imagen aquí. Tu paleta de colores está lista. Si estás buscando gradientes, simplemente puedes dirigirte a la sección Explorar gradientes y puedes encontrar un sinnúmero de gradientes para tus proyectos aquí. Hablemos de la 2da herramienta que puedes usar para crear tus propias paletas de colores, MyColor.Space. Es otro gran sitio web que te da todos los colores que necesitas en base a tu color primario. Simplemente elige tu color aquí y haz clic en “Generar”. Como puedes ver, te muestra diferentes categorías de color entre las que puedes elegir en función de tu necesidad. La siguiente herramienta se llama Adobe Color. Se trata de una herramienta avanzada que te permite crear paletas de colores fácilmente eligiendo diferentes armonías de color y ajustándolas en el selector de color, así como esto. También puedes dirigirte a la sección Explorar y navegar por innumerables paletas de colores tomadas de las fotos. Si vas a la sección de tendencias, puedes descubrir tendencias actuales de color en diferentes industrias como moda, diseño gráfico, ilustración, etc. En la pestaña de herramientas de accesibilidad, puedes consultar la accesibilidad de tu colores también. ¿ Te gusta usar inteligencia artificial o IA para crear tus paletas de colores? Si lo haces, tengo buenas noticias para ti. El siguiente sitio web del que vamos a hablar se llama Khroma y utiliza inteligencia artificial para entrenar un algoritmo alimentado por red neuronal para crear paletas de colores personalizadas. Bueno, ¿cómo funciona? En primer lugar, debes elegir tus 50 colores favoritos para entrenar el algoritmo generador. Una vez que escojas tus colores, haz clic en el botón “Iniciar Entrenamiento” para iniciar el proceso de entrenamiento. Una vez hecho, se te presentarán cientos de pares de colores diferentes y paletas de colores. Es tan guay, ¿no? 29. Aplica una paleta de colores a un sitio web: parte 1: Hey todos, bienvenidos de nuevo a otro video de este tutorial. En este video, te voy a mostrar cómo puedes crear una paleta de colores con el fin de aplicar colores a una página de destino. Si no estás seguro de cómo puedes llegar a los colores primarios, secundarios, y los de acento, no te preocupes. Te voy a guiar por todos los pasos requeridos para crear una paleta de colores hermosa y armoniosa. Además, te mostraré cómo puedes aplicarlo a una página de aterrizaje. Para este proyecto, ya diseñé una página de aterrizaje en Figma. Lo que quiero que hagas es descargar el archivo de inicio de la página de aterrizaje de la sección de recursos e importarlo a tu panel de control de Figma. Si no estás familiarizado con Figma, déjame decirte que Figma es una popular aplicación basada en navegador que te permite diseñar interfaces de usuario. Lo vamos a utilizar para aplicar todas las cosas que aprendiste hasta ahora a un proyecto del mundo real. Para importar un archivo de inicio de página de aterrizaje, basta con hacer clic en este botón “Importar” en la esquina superior derecha y elegir el archivo en su computadora. Una vez importada, basta con hacer doble clic sobre él para abrirlo. Déjame acercar. Ahí vamos. Aquí hay un proyecto conceptual que diseñé para este ejercicio. Como puedes ver, preparé esto en modo de color escala de grises a excepción del logo y las imágenes, esas son coloridas. Esta página de aterrizaje es para una empresa imaginaria llamada Draft, y brindan servicios de seguros en línea a empresarios. Todo se va a hacer bajo una aplicación llamada Borrador. Déjame previsualizarlo para que podamos ver toda la página de aterrizaje. En la parte superior, tenemos una barra de navegación ordinaria, y luego aquí está nuestra sección de héroes. En el lado izquierdo tenemos el contenido, el título, el subtítulo, y un Llamado a la Acción, este botón. Por el lado derecho, tenemos algunas tarjetas y también esta marca para arriba. Ahora me voy a desplazar hacia abajo. Aquí está la sección de clientes. Como puedes ver, estos son coloridos porque no vamos a modificar sus colores de todos modos, así que los mantuve coloridos. Déjame desplazarme hacia abajo. Esta es la sección de características. Como puedes ver, tenemos seis cartas diferentes y cada carta representa una característica. El contenido aquí no es real y utilizo textos de Lorem Ipsum aquí. Se pueden modificar, pero para los efectos de este tutorial, no importa porque vamos a enfocarnos en los colores. En la parte inferior, tenemos un botón Explorar todo. Déjame desplazarme hacia abajo. Aquí tenemos una sección testimonial. Una vez más, los logotipos son coloridos. Voy a desplazarme hacia abajo. Aquí, hay otra sección que brinda al usuario los servicios más importantes que pueden obtener de esta empresa. Tenemos algunas imágenes y el contenido del lado derecho. Déjame desplazarme hacia abajo. Esta sección es la sección CTA. Aquí es donde le pedimos al usuario que instale la aplicación en su teléfono. Déjame desplazarme hacia abajo. último, pero no menos importante, tenemos el pie de página. Como puedes ver, tenemos algunas categorías, algunos enlaces, la información de contacto, y también una breve descripción de Borrador. Tenemos un botón Llamar a la Acción aquí también. En la parte inferior, tenemos una renuncia de derechos de autor y los iconos de las redes sociales. Déjame decirte lo que vamos a hacer. En primer lugar, necesitamos crear una paleta de colores, y luego necesitamos aplicar esa paleta de colores a esta página de destino, a los elementos de esta página de destino. Para ello, voy a utilizar el sitio web llamado Coolors que ya te presenté. Déjame seguir adelante y dar click en “Generar”. ¿ Cuál es el primer paso? Tienes razón, necesitamos un color primario o un color base. Pero como esta marca no tiene ningún color primario, nosotros como diseñadores, debemos llegar con el color primario. ¿Qué opinas? ¿ De qué color es más apropiado para una compañía de seguros? ¿ Crees que necesitamos usar colores fríos o colores cálidos? ¿ Qué armonía de color debemos utilizar para crear esta paleta de colores? Estas son las preguntas típicas que debes hacerte cada vez que quieras crear una paleta de colores para tus proyectos. Echemos un vistazo al contenido. En primer lugar, para llegar al color primario, necesitamos pensar en la marca. ¿ Cuál es la idea detrás de él, quién es su público objetivo y qué esperan los usuarios de la marca? En primer lugar, pensemos en las características de esta marca. Se trata de una compañía de seguros y los usuarios deben sentir que están seguros y sus activos están seguros, y también esperan actitudes profesionales de la marca. Ya que estamos hablando de profesionalismo y confianza, creo que el azul es la mejor opción porque el azul es popular entre hombres y mujeres, por lo que no hay obstáculo en ese sentido. Creo que podríamos usar el azul para el color primario. Enfriar. Ahora sigamos adelante y elijamos nuestro color primario. Pero, ¿qué tipo de armonías de color debemos usar? Ya que no tenemos ninguna ilustración y no quiero conseguir colores de alto contraste, creo que la mejor opción sería elegir análogos. Podríamos usar monocromáticos también, pero no creo que el cortesía de cortesía o split fueran buenas opciones. Voy a ir con análogo, que podamos elegir colores que estén al lado del otro en la rueda de color. Voy a seleccionarlo y dejarme presionar la “Barra espaciadora” en mi teclado para obtener un buen color azul. Aquí tenemos diferentes tipos de azul. Voy a seleccionar una de ellas y modificarla manualmente para obtener mi color primario. Creo que esta es una buena opción. Voy a dar click en este código de color y déjame cambiar el modelo de color a HSB. Déjame cambiar un poco el tono para ver si puedo conseguir un mejor color base o no. Este azul es fresco; sin embargo, es demasiado brillante. Entonces voy a disminuir el brillo de 85 a alrededor de 30, tal vez 31. Es buena la saturación. A lo mejor puedo aumentarlo a 84. Perfecto. Es genial. Ahora que nuestro color primario está listo, déjame bloquearlo y lo voy a arrastrar hacia el lado izquierdo, así como así. Ahora voy a seguir presionando la barra espaciadora de mi teclado para obtener otros colores. también me gusta este color azul claro. Yo también lo voy a bloquear y dejarme presionar de nuevo “Barra Espacial”. Este color medio se ve bien también, pero está un poco desaturado, así que voy a modificarlo de alguna manera. En primer lugar, déjame mover ligeramente el deslizador de tonalidad hacia el lado derecho para ver si puedo obtener un mejor color base o no. Creo que 227 es bueno. Como pueden ver, la saturación se establece en 78, y voy a aumentarla para obtener un color saturado. Ochenta y siete luce bien. Pero, ¿qué pasa con el brillo? Está demasiado oscuro. Permítanme aumentar el brillo también. Voy a ponerlo a tal vez 74. Perfecto. Voy a bloquearlo y seguir presionando la barra espaciadora. Ahora, busco un color de acento. Podría ser un color verde o un color morado, ya que estamos usando una armonía de color análoga. Veamos si podemos usar este color verde o no. Creo que se ve bien; sin embargo, necesita ser modificado un poco. Voy a dar click en el código de color hexadecimal aquí. Como puedes ver, está demasiado saturado y sería un problema en términos de contraste de color y accesibilidad. Voy a hacer que se desature un poco. Permítanme ponerlo en 88. Además, voy a cambiar el color base. Ciento sesenta y uno se ve bien; sin embargo, es demasiado oscuro para ser un color de acento. Voy a aumentar un poco el brillo. Creo que 82 se ve bien. A mí me gusta. Déjame bloquearlo y voy a presionar “Espacio” en mi teclado. Ahora, busco dos colores neutros. No me gustan estos colores. Lo que voy a hacer es copiar aquí el código de color primario. Voy a ir al hex. Voy a copiarlo y dejarme pegarlo aquí. Tenemos el color primario. Ahora usando el recolector de color. Puedo crear un tono aquí para obtener mi color neutro deseado. Déjame mover el recolector de color hacia el lado izquierdo para agregar gris a nuestro color base. Es así como creamos un tono, si lo recuerdas, así. Ahora déjame ir a HSB para ver los atributos de mi color. Es buena la saturación; sin embargo, voy a hacerla un poco desaturada. Permítanme disminuir la cantidad de saturación a 20. También, por el brillo, lo voy a aumentar a tal vez 44. Se ve bien. Agradable. Déjame cerrarlo. Ahora voy a añadir un color neutro más, pero uno claro. Si paso el cursor sobre esta sección, puedo hacer clic en este icono de “Añadir color”. Déjame pegar ese código de color aquí, así como eso. Ahora voy a modificar el color. Déjame ir al modelo de color HSB. El matiz va a ser el mismo, pero voy a hacerlo desaturado para crear un tinte de este color. Déjame hacerlo desaturado así. Creo que si lo disminuyo a seis, sería genial. Además, voy a aumentar el brillo a 99. Enfriar. Este es un gran color neutro. Voy a cerrarlo y necesito un color más, y eso va a ser blanco porque vamos a usar eso para nuestras tarjetas. Déjame cambiarlo a blanco. Perfecto. Enfriar. Nuestra paleta de colores está lista. Ahora es el momento de exportarlo. Voy a hacer clic en el botón “Exportar” y podrías usar el formato que quieras, pero prefiero SVG, así que déjame descargarlo. Ahora voy a ir a Figma y dejarme arrastrar y soltar aquí la paleta de colores exportada. Ahí vamos. Yo lo voy a agrandar. Enfriar. Déjame moverlo aquí. Muy bien, chicos, eso es todo para la primera parte de este proyecto. En el siguiente video, comenzaremos a aplicar nuestros colores a nuestro diseño. Nos vemos entonces. 30. Aplica una paleta de colores a un sitio web: parte 2: Ahora que nuestra paleta de colores está lista, necesitamos definir la relación de nuestros colores porque vamos a usar la regla 60-30-10. Déjame seguir adelante y eliminar este texto. ¿ Cuáles colores van a ser nuestros colores primarios en términos de relación? Este azul definitivamente va a ser nuestro color primario. Estos dos colores también van a ser nuestros colores primarios en términos de relación. Se van a aplicar los tres primeros colores al 60 por ciento de nuestro diseño. Estos tres colores son nuestros colores secundarios y se van a aplicar al 30 por ciento de nuestro diseño, y por último pero no menos importante, la pantalla va a actuar como nuestro color de acento, y cubre el 10 por ciento de nuestro diseño. Enfriar. Por lo general, necesitamos crear estilos de color antes de aplicar colores a nuestro proyecto. No obstante, como no es necesario para este tutorial, voy a saltarme ese paso y empezaremos a aplicar nuestros colores a nuestros elementos. Sin más preámbulos, empecemos. En primer lugar, empecemos con los antecedentes. Para el fondo, podemos usar uno de estos tres colores. Creo que este color neutro claro va a ser una buena opción para nuestro color de fondo. Voy a seguir adelante y copiar su código de color hexadecimal, y déjame seleccionar mi tablero de arte y pegarlo para el fondo. También, necesito postularme a otras secciones también. Para la barra de navegación, voy a aplicar aquí, y también para esta sección de clientes, déjame pegarla. Voy a desplazarme hacia abajo. Como pueden ver, para la sección testimonial, necesitamos usar un fondo oscuro. ¿ Por qué? Porque aquí, tenemos un tono oscuro. Entonces, ¿qué color se puede utilizar para esta sección? Creo que uno de nuestros colores secundarios sería una buena opción. Voy a ir con este azul medio, déjame copiar su código de color, y voy a aplicar a este fondo. Enfriar. Como puedes ver, tenemos un buen contraste entre las cartas y nuestro fondo. Enfriar. ¿Qué hay de aquí? Como puedes ver aquí, también necesitamos usar un color oscuro. Para esta sección, voy a utilizar nuestro color primario. Déjame copiar el código de color hexadecimal y voy a aplicarlo, así como así. Ahí vamos. Nuestros colores de fondo se han aplicado con éxito. Ahora es momento de pasar a otras secciones. Empecemos desde arriba. Para estos enlaces, voy a usar mi color secundario, este. Voy a copiar el código de color hexadecimal y dejarme seleccionar todos estos enlaces, y también este icono de flecha, y lo voy a aplicar a todas estas capas de textos. Se ven geniales. Pero que pasa con el contenido de la sección de héroes para estas dos capas de texto, creo que el color primario sería bueno porque vamos a crear una alta relación de contraste entre nuestro fondo y nuestro primer plano así que voy a ir con esto color primario. Déjame copiarlo y seleccionar estas dos capas de texto, y lo voy a pegar. Enfriar. Lo último que necesitamos modificar aquí es el CTA o botón de llamada a la acción. Como saben, para los CTA, solemos usar un color de acento porque necesita llamar la atención del usuario hacia él. Voy a copiar el código de color hexadecimal de nuestro color de acento, y déjame pegarlo aquí. Para el texto, por ahora voy a usar el blanco. No estoy seguro de la relación de contraste, pero por ahora, no necesitamos preocuparnos por ello porque más adelante, validaremos nuestros colores en términos de relación de contraste y accesibilidad de color. Ya que necesitamos ser consistentes a lo largo de nuestro proyecto, también voy a usar el mismo color para este texto. Déjame copiarlo, y lo voy a pegar para estas dos capas de texto. Aquí también. También, vamos a aplicar el mismo color a todas estas capas de textos. Voy a seleccionarlos todos y pegar el color. Ahora veamos qué colores se deben usar para nuestras tarjetas aquí. Las tarjetas van a ser blancas. Como puedes ver aquí tenemos tarjetas blancas, y aquí, también tenemos dos tarjetas blancas, y se ven limpias y sorprendentes. Pero las cosas que necesitamos para modificar nuestros estos iconos, las capas de texto, y también este botón Explorar. Para estos iconos, como se puede ver, tenemos tres tonos diferentes, por lo tanto, necesitamos usar tres colores diferentes. Voy a utilizar nuestros colores secundarios y acentos para estos iconos. Déjame seguir adelante y copiar el código de color del color secundario. Ahora, en lugar de cambiar el color de estos iconos uno por uno, del lado derecho, debajo de los colores de selección, se puede ver que tenemos tres tonos diferentes. Voy a seleccionar el primero y pegar el código de color. Ahí vamos. Aplicamos el primer color. Ahora es el momento de aplicar el segundo color, que es éste. Voy a seguir adelante y copiar el código de color de mi otro color secundario. Voy a seleccionar la lista de características, y el siguiente tono va a ser éste, así que déjame pegarlo. Ahí vamos. Ya se ven increíbles. Para el último color, voy a usar el color de acento. Déjame copiar el código de color, seleccionar las tarjetas, y voy a dar click en ver los cinco colores. Ahí vamos. Voy a pegarlo. Se ven increíbles, ¿no? Como puedes ver, también se ha cambiado el color de nuestro botón Explorar. Porque el mismo tono se ha usado para eso antes por lo que no necesitamos modificarlo. Para el texto, voy a seguir adelante y copiar el color primario y pegarlo aquí. Enfriar. ¿Se puede ver lo hermosa y limpia que es esta sección? El motivo es que utilizamos una armonía de color para llegar a estas paletas de colores, y también utilizamos la regla 60-30-10. Ahora es el momento de modificar nuestro botón Explorar todo aquí. Para este botón, voy a usar nuestro color de acento, que es este verde. Para el texto y este ícono de flecha, por ahora voy a usar el blanco. ¿Qué hay de aquí? Las tarjetas están bien, pero necesitamos modificar el color de estos textos. Voy a seleccionarlos y dejarme aplicar nuestro color primario a todos estos textos. Para este texto, voy a usar el color neutro que creamos antes. Déjame seguir adelante y copiar su código de color. Ahora voy a aplicar los mismos colores a todo este contenido. Permítanme adelantar rápidamente este proceso con el fin de ahorrar su tiempo. Ya está hecho. Ahora, permítanme modificar el color de este gran título. Creo que nuestro color neutro claro sería genial para eso. Déjenme elegir eso. ¿ Y estas comillas? Bueno, obviamente, necesitamos usar nuestro color secundario para ello. Pero el azul claro, éste. Voy a copiar el código de color hexadecimal, y déjame pegarlo aquí. Es demasiado brillante así que voy a disminuir la opacidad al 20 por ciento. Ahora se ve mucho mejor. Esta sección también se hace. Ahora podemos avanzar a otra sección. Aquí, como se puede ver, tenemos tres círculos diferentes detrás de estas fotos y son tintes claros. Deberíamos disminuir la opacidad de nuestros colores aquí también. Para el primero, voy a usar nuestro color primario para ello, y déjame disminuir la opacidad al 20 por ciento. Para el segundo, voy a usar nuestro color secundario azul y voy a disminuir la opacidad al 20 por ciento también. Para el último, voy a usar nuestro color de acento, y también disminuir la opacidad al 20 por ciento. Dado que estos títulos auto, oficina, y casa, corresponden con estas fotos, voy a modificar el color de estos puntos de bala justo antes de estos títulos. El primero va a tener nuestro color primario, pero no necesitamos disminuir la opacidad aquí. El segundo va a tener nuestro color secundario, y el último va a tener nuestro color de acento. Esta sección se ve muy bien también. Espero que te guste. Ahora pasemos a la siguiente sección. A esto se le llama sección CTA. Aquí, necesitamos modificar únicamente el color del texto. Para el texto, voy a usar nuestro color neutro que usamos para nuestro fondo, así como eso. último, pero no menos importante, necesitamos aplicar colores a nuestro pie de página también. Para este texto y estas categorías en la parte superior, voy a usar nuestro color neutro opaco, que es éste, así que déjame elegir eso. Enfriar. Como puedes ver, se ha aplicado a todas estas capas de texto. Para estos botón CTA, voy a usar el color de acento, este, y también para el texto, voy a usar el blanco. Para estos enlaces, voy a usar nuestro color primario, este. ¿ Y este divisor, este descargo de responsabilidad, y también estos iconos de redes sociales? Creo que si usamos nuestro color neutro opaco, sería genial, el que usamos para este texto. Voy a copiarlo y pegarlo para todos estos elementos, y también para estos iconos. Como puedes ver, nos olvidamos de cambiar el color de esta palabra, borrador. Voy a usar nuestro color secundario para ello. Enfriar. Nuestra página de aprendizaje está lista. Creamos con éxito una paleta de colores y aplicamos todos esos colores a nuestro diseño de acuerdo a la regla 60-30-10. Vamos a previsualizarlo. Nuestra sección de héroes se ve bien, la barra de navegación se ve limpia, tenemos la barra CTA usando el color de acento, nuestras tarjetas aquí son de color blanco, estos autos se ven muy bien también, hemos usado el análogo esquema de color para estos iconos, la sección testimonial se ve limpia también. Para esta sección, utilizamos el color primario y algunos tintes de nuestros colores secundarios y acentos. Para esta sección, utilizamos nuestro color primario como fondo y un color neutro para nuestro contenido de primer plano. último, pero no menos importante, utilizamos nuestros colores primarios, secundarios y de acento para el pie de página. Todo se ve genial. No obstante, ahora necesitamos revisar nuestros colores y ver si pasan o no la prueba de relación de contraste. Voy a empezar desde arriba y luego pasar a otras secciones. En primer lugar, permítanme seleccionar uno de estos enlaces, por ejemplo, sobre, y luego voy a hacer clic derecho en eso. Voy a ejecutar el plugin de contraste. Como puedes ver, estos colores pasaron la prueba de relación de contraste para niveles de doble a y triple a, y es fantástico. Pero, ¿qué pasa con estos textos? También pasó todas las pruebas y es genial. Ahora voy a seleccionar estos, haznos empezar el texto. Como puedes ver, aunque se ve muy bien en nuestra interfaz, falló la prueba de relación de contraste. Tenemos que arreglar eso. Tenemos dos opciones. Podemos o modificar nuestro color de acento, lo cual no es buena idea en mi opinión, o podríamos modificar nuestro color de texto. En lugar de blanco, voy a seguir adelante y elegir nuestro color primario para estos textos. Ahora como puedes ver, pasa la prueba de relación de contraste. Puedes ver lo importante que es validar tus colores en cuanto a la relación de contraste. Déjame seguir adelante y modificar todos los demás botones, como aquí, y también aquí. Enfriar. Pero, ¿qué pasa aquí? Si selecciono estos textos, se puede ver que pasa la prueba de relación de contraste. ¿ Y este botón Explorar? También pasó una prueba de relación de contraste. Aquí, como se puede ver más allá de la prueba de relación de contraste. Ya revisamos estos colores contra nuestro fondo por lo que sabemos que pasó la prueba de relación de contraste y para estos textos también. Pero, ¿qué pasa aquí? Déjame seleccionarlo. Como puedes ver, pasa el nivel AA para texto normal y los niveles AA y AAA para texto grande, por lo que no es un problema. Aquí, ya revisamos ese color contra nuestro fondo, y básicamente eso es todo. Ahora que validamos nuestros colores en base a la relación de contraste, es hora de validar nuestros colores en base a las deficiencias de daltonismo. Voy a seleccionar mi mesa de trabajo. Ya no es modo de escala de grises. Entonces voy a ejecutar un plugin llamado filtros de color. Si hago click en escala de grises, podemos ver que tenemos de nuevo un modo de escala de grises. Tenemos diferentes tonos de gris por lo que la jerarquía visual se ve muy bien. Tenemos buena relación de contraste aquí para nuestro contenido y nuestros botones. Todo se ve genial. Ahora tomemos otra deficiencia de color. Voy a deshacer el proceso, Comando+Z o Control+Z, y déjame ejecutar ese plugin una vez más y elegir, por ejemplo, la ciega roja. Tenemos buenos tonos también, por lo que todo se ve limpio a las personas que sufren de esta deficiencia de visión del color. último, pero no menos importante, vamos a comprobarlo por otra deficiencia de color. Por ejemplo, monocromacía de cono azul. Claramente, tenemos tonos grises, por lo que la gente no enfrentará ningún problema al usar este sitio web. Hagamos una vista previa de nuestra página de aprendizaje por última vez. ¿ Se puede ver qué tan limpia está esta página de aprendizaje? Los colores son armoniosos y también accesibles para todos. Muy bien, chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 31. Aplica una paleta de colores a una aplicación: parte 1: Oigan, todos. Bienvenido de nuevo. En este video, vamos a crear otra paleta de colores y aplicarla a una aplicación móvil. Pero lo primero es lo primero, asegúrate de descargar el Mobile App Starter Project desde la sección Recursos e importarlo a tu panel de control de Figma. Puedes arrastrarlo y soltarlo en este entorno o podrías hacer clic en el botón “Importar” en la esquina superior derecha y elegirlo desde tu computadora. Déjame abrirla. Este es el proyecto que ya habíamos preparado para ti. Vamos a crear una paleta de colores paso a paso y aplicarla a nuestro diseño de acuerdo a la regla 60-30 y 10. Si estás listo, empecemos. Como puedes ver aquí, preparé una mesa de trabajo, llamada Colores, para ti con muchas muestras. Por ejemplo, tenemos gráfico semántico primario y neutro y visualización de datos. Tenemos que modificar el color de todas las muestras, pero antes que nada, déjame mostrarte el proyecto. El proyecto en el que vamos a trabajar es una aplicación de finanzas personales y permite a los usuarios gestionar sus finanzas fácilmente. Diseñé todas las páginas en modo de color escala de grises que pudimos distinguir fácilmente los tonos y aplicar nuestros colores a todos estos elementos. Como puedes ver aquí, tenemos tres páginas de inicio de sesión diferentes. Básicamente, el diseño es el mismo, sin embargo, este es el signo principal en la página. El segundo es la página de inicio de sesión, pero tenemos el nombre de usuario, y contraseña, y también un error aquí. En la tercera página, tenemos este ícono de advertencia como puedes ver, déjame acercar que podrías ver claramente eso, y un CTA o llamado a la acción, y algunos enlaces. En la página principal, tenemos un título grande, dos tarjetas de crédito diferentes, y un diálogo que presenta las últimas tres transacciones al usuario. Por último, pero no menos importante, tenemos la página de las finanzas. En esta página, tenemos un gráfico circular en la parte superior. Justo debajo de eso, tenemos alguna información sobre los gastos. También, aquí, tenemos los datos relacionados con este gráfico circular. ¿ Qué tipo de colores necesitamos para este proyecto? En primer lugar, necesitamos llegar a un color primario y, también, podríamos tener colores secundarios, pero no creo que sea necesario. Esta vez, no vamos a usar Coolors ni ningún otro sitio web para llegar a nuestra paleta de colores. Te voy a mostrar cómo puedes hacer eso tú mismo manualmente. Ya que se trata de una app de finanzas y los usuarios necesitan confiar en esta app, de nuevo, vamos a usar el azul como color primario. Pero esta vez, en lugar de usar una armonía de color análoga, voy a usar una armonía de color monocromática. ¿ Estás listo para empezar a crear nuestra paleta de colores? Empecemos. Déjame acercarme aquí. Voy a seleccionar mi primera muestra y dejarme dirigirme a la sección Relleno y dar clic en este color para abrir el selector de color. Como mencioné, voy a usar el azul como color primario. Voy a mover el deslizador a la sección azul. Creo que este azul se ve bien. A lo mejor podría cambiar el tono a 217, algo así. Ahora se ve mucho mejor. Para el color primario, lo voy a hacer un poco desaturado. Permítanme disminuir la saturación de 94 a alrededor de 90 o tal vez 89. Se ve bien. Además, el brillo va a estar alrededor de 70 o tal vez 75. Se ve bonito. Nuestro color primario está listo. Ahora, es hora de pasar a otros colores. Ya que vamos a utilizar una armonía de color monocromática, nuestro color base va a ser el mismo. Voy a seleccionar todas estas muestras. Presiona la tecla Mayús de tu teclado y selecciona todas las muestras, y simplemente cambia su color a nuestro color primario así como así. Ahora, voy a seleccionar la segunda muestra y déjame crear un tono oscuro de nuestro color primario porque vamos a necesitar eso para nuestras capas de textos. En primer lugar, permítanme aumentar la intensidad o saturación de mi color de 90 a 100 así como así. Además, voy a disminuir el brillo para agregar negro a mi color base. Si muevo mi selector de color hacia abajo así, fácilmente puedo agregarle negro. Pero creo que si lo pongo a unos 45 o tal vez 43, sería genial. Se ve bonito. Nuestro segundo color está listo también, pero ¿qué pasa con el último color? Este se va a utilizar como nuestro color de acento por lo que necesita ser vibrante y brillante. Déjame seguir adelante y modificar la saturación y el brillo. Dado que este color es de alguna manera brillante, fácilmente podemos hacerlo más brillante si establecemos la saturación y el brillo al 100 por ciento. Ahora, necesitamos tres colores neutros. Déjame seleccionar esta muestra y luego voy a crear un tono de nuestro color base. Si recuerdas, para crear un tono, necesitamos agregar gris a nuestro color base. Si solo muevo mi selector de color al área gris, puedo crear un tono. Como puedes ver estamos consiguiendo un color opaco, y eso es exactamente lo que queremos, pero déjame hacerlo un poco más brillante al aumentar el brillo. En este momento, el brillo se establece en 43. Déjame ponerlo a tal vez 49. Se ve bien. El segundo color neutro va a ser un tinte de nuestro color base por lo que necesitamos agregar blanco a nuestro color base. Déjame pasar a la sección blanca así como así. Voy a poner la saturación a cinco y el brillo va a ser del 100 por ciento. Como puedes ver, tenemos un gran color neutro. El último color neutro va a ser blanco puro. ¿Por qué necesitamos eso? Porque lo vamos a utilizar como color de primer plano, por ejemplo, para iconos y también para algunos de nuestros textos colores. Te lo mostraré más tarde. Enfriar. Nuestros colores primarios y neutros están listos. Ahora, necesitamos pasar a la siguiente sección, colores semánticos. Como sabes tener colores semánticos en tu paleta de colores es opcional. No obstante, como les mostré, aquí tenemos las páginas de inicio de sesión, y tenemos un error aquí, y también una advertencia aquí. Para estos dos estados, necesitamos tener colores semánticos. Déjame seguir adelante y seleccionar la primera muestra aquí. Voy a ir a la sección Relleno para abrir nuestro recolector de color. Ya que necesitamos un color rojo, asegúrate de establecer la H, o matiz, a cero porque así es como podríamos conseguir un color rojo puro. Pero como pueden ver, es demasiado brillante y vibrante, así que vamos a arreglar eso. Déjame seleccionarlo. Si me dirijo a la sección del selector de color, puedo disminuir fácilmente la intensidad bajando la saturación a tal vez 60, déjame revisar, o tal vez 65. Además, voy a establecer el brillo en 95 para que se vea un poco más oscuro, así como así. Ahora, voy a crear dos tintes de este color. En primer lugar, permítanme seleccionar la segunda muestra. Voy a usar este color, entonces, le voy a agregar blanco. Para el último, lo voy a mover aún más para conseguir un tinte muy claro de nuestro color. En ocasiones si quieres crear una tarjeta o un icono, estos tintes serían muy útiles para crear una buena relación de contraste entre tus elementos de primer plano y fondo. Ahora, pasemos al segundo color semántico que necesitamos. El primero es necesario para el mensaje de error, pero el segundo es necesario para el icono de advertencia. Para advertir, como ustedes saben, necesitamos usar amarillo. Déjame seguir adelante y elegir un amarillo usando el selector de color. Creo que este es un color fresco. Ahora, voy a seleccionar la segunda muestra y conseguir nuestro color amarillo pero esta vez, en lugar de tener dos tintes, voy a crear un tinte y un tono de nuestro color base. Para crear un tono, voy a agregar negro a mi color. Si disminuyo el brillo así, podría crear un gran tono. No obstante, creo que necesita estar un poco desaturado, así que permítanme disminuir la saturación a alrededor de 70 o tal vez 68. Sí, se ve bien. este momento puedes pensar que no es una buena combinación de colores, sin embargo, cuando la empecemos a usar, es posible que veas lo armoniosos que serían estos colores. Para la última muestra, de nuevo, voy a elegir nuestro color base, y esta vez voy a crear un tinte de nuestro color. Déjame agregarle blanco, así como eso. La saturación va a ser de 40 y el brillo va a ser de 100. Perfecto. Nuestros colores semánticos también están listos. Pero como puedes ver, tenemos una sección más que llenar, y eso es gráficos y visualización de datos. ¿ Por qué necesitamos estos colores? Bueno, porque aquí tenemos gráficos y datos. Cuando estás trabajando en una aplicación móvil de finanzas o en una aplicación web de finanzas, es casi inevitable usar estos colores porque necesitamos presentar datos de una manera que sean distinguibles y claros de reconocer. Si recuerdas para la visualización de gráficos y datos, podríamos usar tres esquemas de color diferentes, categóricos, secuenciales y divergentes. Por lo general, cuando queremos presentar datos sin ningún valor numérico como en este gráfico, utilizamos esquema de color categórico. ¿ Por qué? Porque usando el esquema de color categórico, podríamos llegar a colores de alto contraste que los usuarios pudieran distinguir entre ellos fácilmente. Adelante y terminemos también esta sección. En primer lugar, voy a seleccionar mi primera muestra aquí y dejarme seguir adelante y elegir mi primer color. Para el primer color, voy a usar el azul. Podría ser cualquier azul. No necesariamente tiene que ser uno de los azules primarios. No obstante, como este azul se ve bien, voy a copiar el código de color hexadecimal y usarlo también para nuestros gráficos y visualización de datos, así que lo voy a pegar aquí. No obstante, creo que podría modificar eso de alguna manera porque este color está tan saturado. Permítanme disminuir la saturación de 90 a alrededor de 80 o tal vez 82. Se ve bien, y además, voy a aumentar el brillo de 73-78. Enfriar. Pero, ¿qué pasa con el siguiente color? Ten en cuenta que el orden de estos colores importa mucho. ¿ Por qué? Debido a que las personas con deficiencias de visión del color deben procesar fácilmente estos colores cuando se colocan uno al lado del otro. Si no es comprensible en este momento, está totalmente bien. Una vez que nuestra paleta de colores esté lista, te voy a mostrar un ejemplo de que podrías conseguirla perfectamente. Pero por ahora, sigamos adelante y completemos nuestra paleta de colores. Para la segunda, voy a usar un color verde. Déjame ir a la sección verde. Creo que este verde se ve bien. A lo mejor podría disminuir el tono a 150 y ahora déjame disminuir la saturación y el brillo para que este color luzca un poco más oscuro. Enfriar. Se ve bonito. Ahora, déjame seguir adelante y seleccionar mi tercera muestra, y para esta, voy a usar el amarillo. Déjame elegir mi color semántico amarillo, éste, y solo modificar la saturación y el brillo. Para el brillo, creo que 100 está bien. mejor podríamos modificarlo a 99, pero por la saturación, voy a hacer que se desature mucho. Ahora mismo está ajustado a 90, pero voy a hacerlo 60 o tal vez 66. Sí, se ve genial. ¿ Se puede ver el patrón que estoy usando aquí? Para el primer color, como se puede ver, el brillo fue de 77, que es el valor de nuestro color. Para el siguiente, el brillo es de 63, por lo que lo hicimos más oscuro. Para el siguiente, el brillo es de 97, por lo que lo hicimos más ligero. Por eso dije que el orden de estos colores importa porque si alguien con, por ejemplo, visión monocromática quiere procesar estos colores, fácilmente pueden distinguir entre ellos. Déjame seleccionar la siguiente muestra. Para el siguiente, voy a usar mi color semántico rojo, y déjame modificarlo un poco. A lo mejor podríamos simplemente disminuir la saturación a 60 o tal vez 62, algo así. El brillo se ve bien. último pero no menos importante, para este, voy a usar un color azul oscuro. Déjame mover el deslizador de tonalidad a la sección azul. Creo que este color se ve bien. A lo mejor puedo disminuir el matiz a 247, y por la saturación, voy a hacerlo alrededor de 65 o tal vez 61. No obstante, necesita ser demasiado oscuro, así que permítanme disminuir el brillo de 74 a alrededor de 30 o 35. Déjame ver cómo se ve, 36 se ve bien. Enfriar. Nuestro esquema de color de visualización de gráficos y datos también está listo. Ahora, es hora de mostrarte por qué importa el orden de estos colores. En primer lugar, déjame seguir adelante y seleccionar esta mesa de trabajo, y voy a hacer clic aquí para ejecutar un plugin que ya te mostré en videos anteriores, se llama filtros de color. Si voy a las simulaciones daltónicas, puedo elegir la monocromática por ejemplo, y en este momento, se puede ver que el valor de estos colores cambia continuamente y no tenemos dos tonos oscuros uno al lado del otro. Por ejemplo, aquí no tenemos este color porque sería demasiado difícil para el usuario distinguir entre ellos. Por eso el orden de los colores importa aquí. Déjame deshacer el proceso. Eso es todo por la primera parte de este proyecto. Espero que lo hayas disfrutado y te veré en la siguiente parte. 32. Aplica una paleta de colores a una aplicación: parte 2: Ahora es el momento de aplicar nuestros colores a nuestro diseño. Si estás listo, empecemos. En primer lugar, voy a empezar con estas páginas de inicio de sesión. Para el fondo, primero voy a seleccionar esta mesa de trabajo, y del lado derecho debajo de los colores de selección, voy a dar click en ver los nueve colores, así como así. Aquí tenemos nueve tonos diferentes de gris, y necesitamos modificarlos uno por uno. Este es nuestro trasfondo. Para el fondo, voy a usar nuestro color neutro claro. Déjame usar el cuentagotas y elegir nuestro color neutro claro, así como eso. Si no sabes qué colores se corresponden a qué elementos, puedes hacer clic en este icono para encontrar los elementos particulares para los que se utilizan estos colores. Por ejemplo, voy a dar click en eso. Aquí, se puede ver que tenemos una sombra de gota usando estos colores. Ahora déjame seguir adelante y modificar el color de nuestro título. Para el título, como se puede ver, está demasiado oscuro, así que tenemos un tono oscuro. Por lo tanto, necesitamos usar nuestro tono oscuro que creamos aquí. Déjame modificar su color, así como así. Pero, ¿qué pasa con los campos de texto? Los campos de texto van a ser blancos, así que los vamos a dejar como están. No obstante, los elementos aquí como estos iconos y estas capas de texto necesitan ser cambiados. Para estos iconos, voy a usar nuestro color de acento. Déjame seguir adelante y modificar su color así como así. Pero, ¿qué pasa con estas dos capas de texto? Para estas capas de texto nuevamente, necesitamos un tono oscuro. Pero en lugar de usar nuestro color primario, voy a usar nuestro color neutro, este. Déjame seguir adelante y elegir nuestro color neutro, así como eso. Nuestros campos de texto están casi listos. No obstante, como puedes ver, tenemos un trazo a su alrededor y necesitamos modificar también su color. Para el trazo, tenemos un color, pero con 50 por ciento de opacidad. Para este color, voy a usar de nuevo nuestro color neutro. Permítanme disminuir su opacidad al 50 por ciento para este también. Déjame simplemente hacer el mismo proceso. Ahora nuestros campos de texto están listos. Pero hay tres elementos más que necesitamos modificar, este enlace olvidado de contraseña, este CTA, y este enlace. En primer lugar, permítanme seleccionar estos dos enlaces y voy a utilizar nuestro color de acento para ellos. Voy a elegir nuestro color de acento así como así. Pero, ¿qué pasa con nuestro CTA? Como saben, para el CTA, también utilizamos nuestro color de acento. Va a ser tan fácil. Déjame elegir nuestro color de acento. No obstante, recuerda modificar también el color de nuestra sombra, porque no es una buena práctica usar una Sombra de gota negra para elementos coloridos. Voy a elegir la capa de sombras. Déjame elegir el mismo color y disminuir su opacidad al 32 por ciento. Como puedes ver, nuestra primera página de inicio de sesión está lista y se ve bonita y limpia. Espero que te guste también. Ahora necesitamos seguir adelante y aplicar los mismos colores a todas estas páginas de inicio de sesión. Voy a adelantar rápidamente este proceso para ahorrarte algo de tiempo. Nuestras páginas de inicio de sesión están listas. Apliqué los mismos colores a todos esos elementos excepto este mensaje de error y este icono de advertencia, porque lo vamos a hacer juntos. Para este mensaje de error, necesitamos usar un color semántico. Déjame seguir adelante y elegir el color semántico. Voy a copiar el código de color hexadecimal y pegarlo aquí. Se ve bien, pero más adelante necesitamos validar nuestros colores en términos de relación de contraste también. Pero por ahora, lo vamos a dejar como está. Pero, ¿qué pasa con este ícono? Para este icono de advertencia, como puedes ver, tenemos dos colores diferentes. Tenemos un tinte claro y un tono negro. Para este tinte claro, voy a usar nuestro tinte claro que creamos aquí. Voy a copiar el código de color hexadecimal y déjame pegarlo para el círculo. Para estos dos elementos, voy a usar nuestro tono oscuro, éste que creamos antes. Déjame pegarlo aquí y ahí está. Se puede ver lo hermosos y armoniosos que son ahora estos colores? Por eso siempre es buena idea crear diferentes tonos y diferentes tintes de tus colores semánticos. Nuestras páginas de inicio de sesión se completan perfectamente. Ahora podemos pasar a la siguiente página, que es nuestra página de inicio. Aquí tenemos muchos elementos. Tenemos un título, dos tarjetas de crédito, un diálogo, y algunas transacciones. Permítanme empezar con el título. ¿ Qué color se debe usar para ello? Si tu respuesta es el tono negro de nuestro color primario, tienes 100 por ciento en lo correcto. Necesitamos usar colores consistentemente a lo largo de nuestro proyecto. Voy a copiar este color y dejarme pegarlo para este título. Pero, ¿qué tal para el fondo? Para el fondo, voy a usar el mismo color neutro claro, así como eso. Ahora vamos a aplicar colores a nuestras tarjetas de crédito. Para la tarjeta principal, voy a usar mi color de acento, este, pero asegúrate de elegir la capa correcta en la lista de capas. Desde que uso la máscara, se llama rectángulo siete. Yo voy a elegir eso. Déjame usar nuestro color de acento para ello. Ahí vamos. Estos textos van a ser de color blanco y también este logo de MasterCard se va a quedar blanco. Pero, ¿qué pasa con estas líneas? Para este, voy a usar el tono oscuro de nuestro color primario, el que usamos para nuestro título, este. Este va a ser blanco. Se ve genial. Pero, ¿qué pasa con esta tarjeta? Como pueden ver aquí, tenemos un tinte de nuestro color. Es un poco más brillante. El color que vamos a usar va a ser el mismo que nuestro color de acento. No obstante, como pueden ver, es más brillante porque disminuyo la opacidad de la tarjeta principal, aquí MasterCard dos, al 50 por ciento. Si lo incremento al 100 por ciento, se puede ver que no obtenemos una buena jerarquía visual. Dado que aquí no se selecciona la tarjeta principal, es mejor que la haga 50 por ciento. Pero, ¿qué pasa con estas tarjetas? El diálogo en sí va a ser blanco. No obstante, estas tarjetas van a utilizar nuestro color neutro, el que utilizamos para nuestro fondo. Este color ya se ha aplicado a estas tarjetas porque utilizamos la sección de colores de selección, por lo que no necesitamos modificarlas. Pero, ¿qué pasa con este indicador? Para este, voy a usar mi color primario, que es éste, y luego voy a disminuir su opacidad al 15 por ciento. Ahora tenemos que pasar a nuestros elementos. Como puedes ver, estas plazas no tienen un tono muy negro como este tono negro, como puedes ver aquí. Por lo tanto, voy a usar nuestro color de acento para ellos. Si comparas los colores de estos elementos entre sí, puedes ver que todos ellos usan el mismo tono excepto éste. Si solo selecciono mi mesa de trabajo de la página de inicio, puedo elegir fácilmente este color y puedo usar el color de acento así. Todos esos tonos han sido cambiados de inmediato. Pero, ¿qué pasa con estas fechas? Para estas fechas, vamos a usar nuestro color neutro opaco. Voy a seleccionarlos a todos, y déjame seguir adelante y elegir nuestro color neutro oscuro, así como así. Se ven geniales. Ahora tenemos que pasar a nuestra última página, que es la página de las finanzas. Justo en la parte superior, tenemos una barra de navegación. Los Elementos de esta barra de navegación deben usar el mismo color. Voy a seleccionarlos todos, y voy a usar el color primario para ellos, este. Usando el cuentagotas, puedo seleccionar mi color primario. Ahí vamos, el color se ha aplicado a todos ellos. Aquí teníamos un gráfico circular, y para esto los gráficos necesitamos usar un esquema de color de visualización de gráficos y datos. Por lo tanto, ya no nos limitamos a utilizar nuestro esquema de colores monocromáticos. Está bien. Empecemos con estas grandes formas. Yo voy a seleccionar eso, y voy a elegir nuestro color azul aquí. Déjame mover estos colores tablero de arte por aquí, déjame seleccionar este y usando el cuentagotas, voy a seleccionar este color. Fantástico. Pero estas formas también tiene una sombra de gota, por lo que si eliges esta capa azul, la que está bajo nuestra forma principal en la lista de capas, puedes modificar también el color de nuestra sombra de gota, así como así y disminuir la opacidad al 30 por ciento. Ahora, para la siguiente forma, voy a usar verde. Asegúrese de mantener el orden igual, por ejemplo, no use rojo y colóquelo junto a nuestro azul, porque las personas que sufren deficiencias de visión del color pueden enfrentar dificultades en ese caso. Para la siguiente forma, voy a usar verde, y déjame modificar también el color de la sombra de gota. Voy a seleccionar verde y disminuir la opacidad al 30 por ciento y para la siguiente forma, voy a usar esta, amarilla. Ya modifiqué el nombre de las capas que puedes entender fácilmente qué forma debe usar qué color. Ahora permítanme modificar también el color de las sombras de gota, y disminuir la opacidad al 30 por ciento. En la siguiente forma se va a usar nuestro color rojo, también la sombra gota necesita ser roja con una opacidad del 30 por ciento, y por último pero no menos importante, déjame usar nuestro último color y no necesitamos tener una sombra gota aquí. Se ve muy bien, ¿no? Ahora es el momento de aplicar colores a estas capas de texto. Aquí tenemos dos tonos diferentes. Uno es demasiado oscuro, y estos dos son un poco más brillantes. Voy a seleccionar esta capa y esta, y voy a usar nuestro color neutro para ellos así como así. No obstante, para este, necesitamos usar un tono más oscuro, por lo tanto, aquí se ve bien el tono oscuro de nuestro color primario. ¿ Se puede ver lo fácil que es aplicar colores a nuestro diseño cuando ya diseñamos nuestro proyecto en modo escala de grises? Pero, ¿qué pasa con estos datos? Para estos círculos, necesitamos usar los mismos colores que utilizamos para nuestro gráfico. Entonces éste, que es el más grande, va a ser azul. Voy a seleccionar este círculo y sólo usar este azul y esta línea va a usar el mismo azul también. Para el segundo, que es el próximo gran gasto, va a ser amarillo, así que voy a usar este, el mismo amarillo aquí. El siguiente va a ser verde, así que voy a seleccionar estas dos formas al mismo tiempo, y déjame elegir nuestro color verde. Este, las compras en línea van a ser rojas, así que voy a seleccionar el rojo, y por último pero no menos importante, el grupo de los demás necesita usar nuestro tono más oscuro, que es este color. Pero, ¿qué pasa con estas capas de textos? Para los títulos, por ejemplo, renta, abarrotes, restaurantes, etc. Voy a usar nuestro color primario oscuro, el que usamos para esta cantidad, así que déjame usar este. Para estas transacciones y estas cantidades, voy a usar nuestro color neutro opaco. Voy a seleccionarlos todos, mantener pulsada la tecla Mayús y hacer clic en ellos uno por uno, y finalmente, elegir nuestro color neutro. Se ven fantásticos, ¿no? El último es nuestro CTA, el botón Download Statement. Para este, voy a usar nuestro color de acento, que es éste, y también para la sombra gota, voy a usar el mismo color, sin embargo, con una opacidad del 32 por ciento. Agradable. Algo que nos olvidamos de cambiar es el fondo de esta página. Entonces déjame seleccionar el tablero de arte, y solo modificar el color de fondo a nuestro color azul neutro. ¿ Se puede ver lo hermosas que son estas páginas? Espero que te guste. Ahora déjame seguir adelante y previsualizarlos uno por uno. Aquí está nuestra primera página de inicio de sesión, esta es la segunda página de inicio de sesión con estos estado de error. Este tiene un icono de advertencia con nuestros colores semánticos, y aquí utilizamos nuestro esquema de colores monocromáticos para las tarjetas de crédito y todos los demás elementos. último, pero no menos importante, para la pantalla de finanzas, ya que teníamos un gráfico categórico, utilizamos para ellos un esquema de color llamado categórico. Ya casi terminamos. Lo único que tenemos que hacer ahora es validar nuestros colores en base a la relación de contraste de color. Déjame seleccionar el signo en título, por ejemplo, y voy a ejecutar un plugin llamado contraste, el que usamos antes. Así como así, como puedes ver pasó todas las pruebas de relación de contraste para todos los niveles, los niveles doble A y triple A. ¿ Y este texto? Pasó casi todas las pruebas, sin embargo, falló para el nivel triple A para texto normal, pero está totalmente bien porque ya pasó el nivel doble A. ¿ Y este, nuestro color semántico? Como se puede ver, falló para el texto normal, sin embargo, si se echa un vistazo a la relación de contraste, que es de 3. 1:1, se puede ver que no es tan bajo y es aceptable usar este color para esta capa de texto, ¿por qué? Porque para esta capa de texto, utilizamos un peso semi negrita. Si lo cambio a regular, ahora, no es aceptable, pero para texto semi negrita o negrita, este color es aceptable siempre y cuando la relación de contraste no sea inferior a 3. 1:1. ¿ Y éste qué? También pasa la prueba requerida, y ésta, fantástica. Pero, ¿qué pasa aquí? Para el título ya comprobamos eso. Permítanme seleccionar las capas de texto en estas tarjetas. Como puedes ver pasó todas las pruebas. ¿ Qué tal aquí, el color de acento contra este color neutro? Pasó todas las pruebas, y también nuestro color neutro opaco contra nuestro color neutro claro, volvió a pasar toda la prueba. Déjame comprobar el contraste de estos textos también, voy a ejecutar el plugin una vez más. Como se puede ver, pasó todas las pruebas. No vamos a validar otros colores, por ejemplo, estos porque ya los revisamos. Muy bien chicos. Eso es todo por este video, espero que lo hayas disfrutado y te veo en el siguiente video. 33. ¿Qué hacer después?: Bien chicos, eso es todo por este curso. Realmente espero que lo hayas disfrutado y aprendido habilidades útiles para tu viaje de diseño. Ahora, es tu turno de practicar lo que aprendiste y convertirte en un mejor diseñador. Me encantaría escuchar tus comentarios sobre este curso para que sea cada vez mejor para ti. Si deseas recibir notificaciones sobre una actualización del curso o mis nuevos cursos, también puedes seguirme en Skillshare. Si quieres convertirte en diseñador de UI UX y no sabes por dónde empezar, puedes consultar mi curso de Figma sobre Skillshare, donde te enseñaré todo lo que necesitas saber para convertirte en UI Diseñador UX. Si quieres aprender más sobre diseño UI UX y subir de nivel tus habilidades de diseño. Tengo buenas noticias para ti. Tengo un canal de YouTube donde publico toneladas de cosas gratis que te pueden resultar interesantes. Así que asegúrate de suscribirte a mi canal para no perderte mis próximos tutoriales. último, pero no menos importante, me gustaría agradecerles por ver este curso y no puedo esperar a ver sus paletas de colores y obras de arte. Nos vemos y adiós.