Construir increíbles esquemas de colores para proyectos diseño web y UI

1. Introducción al curso de la esquema de color: Hola y bienvenidos a mi curso sobre la construcción esquemas de color impresionantes para sus proyectos de diseño de UI para su sitio web y sus paneles de mando. En este curso, voy a cubrir paso desde el principio un poco sobre el color 2-D, ¿cuáles son los colores neutros? ¿ Cuáles son los colores vibrantes? ¿ Cuáles son los colores que atraen la atención? Entonces vamos a cubrir todo eso. Entonces vamos a ir al siguiente paso, que es, “¿Dónde debo comenzar mi esquema de color?” Esta es la pregunta que tienen muchos diseñadores de UI en su mente, o incluso si eres desarrollador o no sabes sobre diseñar mucho, podría estar preocupado de que ¿cómo puedo construir mi esquema de color? Voy a contestar esta pregunta. Vamos a usar un solo color para crear esquema de color impresionante en este curso e incluso agregando más colores a eso. Por lo que vamos a ir de un color y seguir agregando más colores. Entonces paso a paso, el proceso de agregar colores para tus proyectos de diseño de UI. Entonces voy a compartir toneladas de recursos, recursos en línea y recursos que he creado para este curso, que son como 30 esquemas de color diferentes. Puedes arrancar tus diseños de UI usando esos. Puedes usarlos en diseño de tablero, diseño interfaz de usuario, tengo ejemplos junto con ellos. Entonces voy a compartir con ustedes muchos ejemplos, muchos recursos. Una cosa más que es muy importante y muchos diseñadores lo echan de menos, que es la accesibilidad al color. La accesibilidad del color en realidad está diseñando para personas con problemas de color y también usando las relaciones de contraste de color, cuánto es visible el fondo o el primer plano. Este es un tema que muchos diseñadores realmente echan de menos. Entonces vamos a cubrir eso en este curso. ¿ A qué esperas? Deberíamos empezar ahora y crear algunos esquemas de color de aspecto impresionante. 2. Por qué los colores son importantes para la UX y la usabilidad: Hablemos de cuál es la importancia de los colores en el diseño de la interfaz de usuario, en las aplicaciones móviles y el diseño web o en general en todos los diferentes diseños de productos. Siempre que mires cualquier aplicación móvil o cualquier producto digital que vayas a comprar, lo primero es que vas a mirar su apariencia visual. Esto es lo primero que vas a notar. Eso va a hacer alguna percepción y puedes decir el valor de ese producto en tu mente. Esta va a ser tu primera impresión sobre ese producto. Los colores son muy importantes, acuerdo con una investigación de los usuarios de color de CCI solo tardan 90 segundos en hacerse una idea de cualquier producto en línea para evaluarlo, para crear algunas primeras impresiones sobre ese producto, y 62 por ciento a 90 por ciento de eso, decisión sobre la primera impresión que van a hacer se basa únicamente en el esquema de color. Marcas como Facebook y otras grandes marcas, están usando colores en todos sus dispositivos, sus aplicaciones para resaltar su marca. De igual manera, los colores te van a impactar, los usuarios emocionalmente y psicológicamente les van a impactar. Estas van a ser tus primeras impresiones. Para crear primeras impresiones, los colores son esenciales. De igual manera, desde el punto de vista de la experiencia del usuario, los colores van a mejorar la usabilidad de cualquier aplicación. Por ejemplo, si el botón principal de llamada a la acción es muy prominente, va a invitar al usuario a presionarlo. Esto en realidad va a aumentar la usabilidad de tu app. De igual manera, se pueden utilizar los colores para mejorar la navegación. Por ejemplo, has visto en dashboards del lado izquierdo, por ejemplo, usas la bandeja de entrada de Gmail, en el lado izquierdo puedes ver claramente cuál es la carpeta o qué bandeja de entrada o borradores o en lo que estés trabajando en este momento está seleccionado. Colores están ahí para mostrar que has seleccionado esto, hay mensajes de error, hay mensajes de información, hay mensajes de éxito. Todos se muestran mediante el uso de colores. Si quita los colores de cualquier interfaz, no va a tener ningún sentido. Los colores están ahí para ayudarte a darle sentido a cualquier diseño de interfaz, cualquier interfaz de usuario. Van a mejorar la usabilidad y experiencia de usuario de cualquier app. De igual manera, ahora vamos al otro lado, que es influencia psicológica de comprar algún producto. De igual manera, cuando compras algo en línea, tus decisiones se basan en su mayoría en el esquema de color. Siempre que estés haciendo alguna valoración inicial de cualquier compra, el look y la sensación de ese producto te va a ayudar a tomar la decisión que debo comprar este producto o debo tomar este curso. Por eso las imágenes de tus productos, importan mucho. Los colores utilizados en ellos, los fondos utilizados en ellos. Si miras Nike y otros productos que son grandes marcas, usan colores muy intuitivamente, cuidado en sus imágenes, en sus pantalones cortos modelo, con el corto ahí, modelos con algo de futbol o algo así como eso. Utilizan todos los fondos, todo el uniforme, todos los colores, todas las luces. usan con mucho cuidado porque van a potenciar la influencia en la mente del usuario o en la mente de los clientes que debo comprar este producto. Este es un producto premium o algo así. Eso se trata de tu influencia al usar colores y cómo son importantes en el diseño de la experiencia del usuario, en la compra de decisiones de tus clientes. También potenciando la usabilidad de cualquier app. puede decir que es una arquitectura de información, se está mostrando básicamente la información. Se están utilizando colores para contar historias, para mostrar información que tiene sentido, lo que está creando un layout que es legible. legibilidad también es un factor en el color, porque si el contraste de color no es suficiente, que vamos a hablar de accesibilidad del color, los usuarios no pueden leer lo que has escrito en tu página web o en tu aplicación móvil o sea cual sea el artículo que haya escrito. Espero que vayan a disfrutar de todo este estudio sobre esquema de color y cómo los vamos a aplicar a diferentes aplicaciones y diferentes sitios web. Mantente atentos y te veré pronto en el próximo video. 3. RGB vs los modos de color CMYK: Entonces lo primero que vamos a aprender es cuáles son los diferentes modos de color porque cuando estás diseñando para pantalla, necesitas entender los perfiles de color y cuáles son los diferentes modos de color como RGB o CMYK y cómo los vas a usar y qué herramientas las apoyan en realidad. Siempre que estés diseñando comienzas con la herramienta y los ajustes adecuados. Esto es muy importante. Entonces primero voy a empezar con el modo RGB, rojo, verde, azul, que en realidad es el modo de pantallas digitales y se utiliza en todas las diferentes pantallas digitales, y si miras la captura de pantalla de la izquierda, hay modo RGB, que es que se puede ver en este momento que este rojo tiene color rojo a 14 y verde se mezcla en él y es 72 y el azul es 75. Por lo que esto conforma este color rojo a la derecha. En la parte superior se puede ver el color que he seleccionado. Entonces esto está realmente descolorido. Vamos a hablar de CMYK, que se utiliza en su mayoría para la impresión. CMYK significa cian, magenta, amarillo y negro. Entonces k es en realidad negro. No es nada empezando por k, está terminando la última letra en negro y se utiliza sobre todo para el diseño de impresión. Entonces si está planeando diseñar su tarjeta de visita o su logotipo, o su cualquier cosa que se vaya a imprimir para su empresa y material de impresión, debe comenzar con un modo CMYK, y va a seleccionar colores basados en CMYK valor. Entonces el cian será 89 ahora mismo, el magenta es 66. No hay color amarillo ni negro mezclado en este color azul. Entonces un consejo te voy a dar. Hay colores como, puede ver he seleccionado este color azul, color azul particular, y aquí tenemos de los cuatro colores, C, M, Y, y k. Así que en realidad hay cuatro colores mezclados juntos. Solo hemos seleccionado dos colores de ellos. Cian y magenta y estamos mezclando solo color cian y magenta para crear este color azul andt te va a ayudar mucho en la impresión. Se va a ahorrar mucho costo, costos de impresión, y también te va a ahorrar algo de color. Entonces cada vez que estás diseñando para imprimir, estás diseñando un logotipo, estás diseñando una tarjeta de visita, intenta usar dos valores de color, esto es solo un prototipo. Entonces todo esto se trata de CMYK y RGB. En su mayoría vamos a diseñar para pantallas digitales así que no necesitamos preocuparnos por CMYK, pero creo que debes saber cada vez que de alguna manera estás diseñando una tarjeta o puedes decir una tarjeta de visita, no fallas. Un concepto más que es muy importante entender son los perfiles de color. En el modo RGB, tu monitor o tus dispositivos digitales, pueden mostrar 16.7 millones de colores, pero hay más tonos de colores que este. Entonces, ¿cuáles 16.7 millones debería mostrar su monitor? Eso se va a decidir por perfiles de color, o también se les llama espacios de color. Por lo que el espacio de color o el perfil de color en realidad va a decirle tu dispositivo digital que estos tonos de colores van a ser azules o estos van a ser rojos, o estos van a ser amarillos, verdes. Entonces así es como se va a mostrar la gama de colores que se pueden mostrar dentro de un perfil de color. Para el diseño digital, utilizamos sRGB, que se utiliza principalmente para el diseño web, y se utiliza ampliamente en todos los navegadores web. Por lo que va a usar para mostrar imágenes, para mostrar tus iconos, tus diseños en sitios web, y también en los dispositivos digitales, como tus teléfonos móviles. Por lo que en su mayoría vamos a diseñar 99.99 por ciento vamos a usar el modo sRGB y si quieres estudiar más al respecto, hay pocos ejemplos más de perfiles de color más comunes, más populares sobre Adobe RGB 1998 y también hay color perfiles para CMYK. Entonces si estás imprimiendo en Japón o en cualquier otro país, tienen su propio perfil estándar para un color. Entonces CMYK, Japón Versión estándar dos y hay como tal vez 50 perfiles de color diferentes para dispositivos digitales. Por lo que hay que seleccionar sRGB, que va a ser más común, y vamos a estar usando sólo eso. Ahora en el último, voy a hablar de pocas de las herramientas que son específicas del diseño CMYK o RGB. Entonces si estás diseñando para sitios web son aplicaciones móviles. Por lo que me gustaría mostrarles que las aplicaciones de la derecha, en realidad se usan en la industria mucho como figma, sketch, Adobe XD Studio e Invision Studio. Por lo que si estás diseñando aplicaciones móviles o en su mayoría diseñas sitio web, tenderías a usar las herramientas de la derecha. Photoshop es una mezcla que puedes diseñar usando tanto el modo CMYK n modo RGB pero no lo recomendaría para branding o diseño inferior. En el lado izquierdo estás viendo Adobe Illustrator, que es una gran herramienta realmente encantadora para el trabajo CMYK, o trabajo de branding o diseño de impresión. También hay capacidades de illustrator que se puede iniciar un diseño en modo RGB, o se puede diseñar un sitio web en Illustrator también, pero no se lo recomendaría para ese propósito. De igual manera, las herramientas que trabajé realmente recomiendo son Adobe XD, sketch y figma en este momento. Podría haber diferentes herramientas o tal vez diferentes prioridades en el futuro pero Photoshop, Adobe XD, figma, y sketch, estas son las cuatro herramientas que te recomiendo que deberías empezar a aprender o usar ahora mismo en 2019. Entonces eso es todo. Siempre que intentes seleccionar tu herramienta, intenta seleccionarla en función de las herramientas o herramientas del modo RGB que se utilizan específicamente y se hacen específicamente para el diseño web y el diseño de la interfaz de usuario y el diseño de aplicaciones móviles. Entonces eso es todo para este RGB y CMYK, var y comparación. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección. 4. Rula de color 101: Déjame presentarte con rueda de color. Podrían haberlo visto muchas veces, pero aquí vamos a discutir cómo y cuáles son los diferentes colores que van a conformar esta rueda de color, y cómo en realidad está conformada. Veamos algunos de los colores primario y secundario y cómo se mezclan para crear esta hermosa rueda de color. En primer lugar se habla de colores primarios. Nuestros colores primarios son tres, amarillo, azul y rojo. Recuerdo cuando era niño, solíamos mezclar estos colores para crear diferentes colores en nuestras clases de Montessori o nivel de guardería o de jardín de infantes. Estos son los tres colores primarios principales y todos los colores diferentes se van a hacer mezclando esos. Estos son colores primarios entonces los vamos a mezclar para crear nuestros colores secundarios. Ahora puedes ver estos son colores secundarios, naranja, este color violeta o morado, y el color secundario es verde, se hacen mezclando los dos colores primarios. Color primario, amarillo y rojo van a crear naranja, Rojo y azul va a crear color violeta o morado y color primario, azul y amarillo van a crear un color secundario. Vamos a mezclar estos colores secundarios con el siguiente color primario para crear diferentes más colores. Estos van a ser nuestros colores terciarios. Aquí tenemos los colores terciarios y así es como se completa en realidad todo el círculo de esta rueda de color. Tenemos colores primarios luego colores secundarios, luego vamos a mezclar colores primarios y secundarios para crear colores terciarios. Ahora, hablemos de los tonos, tonos y tintes de cualquier color y lo que en realidad es matiz. Este es un concepto muy importante. Si obtienes esto puedes crear cualquier tipo de esquema de color incluso en base a un solo color. En primer lugar, hue. El matiz es en realidad color puro, llamamos matiz, que en realidad es el color y el nombre del color, color puro como el naranja, es el tono y vamos a usar el color puro o [inaudible]. Ahora, tinte. El tinte es en realidad, cuando mezclamos tono con blanco. Si seguimos agregando color blanco a cualquier tonalidad como por ejemplo, tengo color amarillo o naranja y trato de mezclar blanco en él Se va a conseguir más brillante y más claro. Esto va a crear un tinte. Recuerdo cuando era niño solía mezclar y crear diferentes tonos o tintes de colores mezclando el color blanco, bestial en color tal vez verde o azul, para crear diferentes tintes del mismo color azul. De igual manera, tono. El tono es en realidad el mismo tono más gris. Vamos a agregar color gris para crear diferentes tonos. Mucho tiempo En el mundo del diseño, normalmente llamamos a estos tintes e incluso tonos. Nosotros llamamos tonos mayormente tonos o tonos del mismo color y usamos el término indistintamente, pero lo real es que tonificar un color en realidad le está agregando gris. Si tienes algún color, algún color puro como el morado o violeta y le estás agregando gris, en realidad va a crear un tono. Se trata básicamente de un lavado, colores apagados. Si quieres crear un tono opaco de cualquier cosa, realmente estás creando tono y le estás agregando color gris. Necesitas recordar sólo estas tres cosas. Los tonos son grises, los tintes son blancos y los tonos son negros. Se va a crear nuestra rima en tu cabeza. Tonos. En realidad, los tonos están agregando negro. Cuando añadas negro a un tono puro, lo harás mucho más oscuro y se va a crear tonos de ese color. Usando este modelo, matiz, tinte, tono, y tonos podemos crear un esquema de color completo solo basado en un solo color. Si solo tenemos un color como naranja o tal vez azul, tonalidad va a ser que necesitamos por ejemplo, necesitamos cinco colores o seis colores. Podemos hacer eso fácilmente. Podemos crear como dos o tres tonos, uno o dos tintes, agregando blanco y uno o dos tonos del mismo color para crear un esquema de color completo. Ahora, he visto muchas veces que los diseñadores cuando leen un breve de diseño o hablan con un cliente, el cliente tiene algunos problemas específicos de esquema de color como tal vez mi cliente dice que necesito un color cálido o necesito un look acogedor En mi sitio web. Quiero que el usuario se sienta relajado y quiero que sea muy acogedor y emocionante. Entonces me voy a desplazar hacia los colores cálidos. lo que mi cliente me está diciendo en realidad que necesitas usar colores cálidos en tu diseño. Eso es lo que está pidiendo. Necesitas cuidar este problema y debes asegurarte de que conozcas la diferencia entre los colores cálidos y los colores fríos. Se pueden ver los colores que tienen más tono rojo, naranja, y amarillento en ellos son básicamente colores cálidos, y los colores que son verdes y azules, tienen más sombra de azules y verdes en ellos, son en realidad los colores fríos. Siempre que estés seleccionando o basando tu esquema de color, debes tener esto en cuenta que los colores frescos son en realidad tranquilos y son más, puedes decir, tienen más armonía y tienen más intensidad, debes tener esto en cuenta quelos colores frescos son en realidad tranquilos y son más, puedes decir, tienen más armonía y tienen más intensidad, son colores más fuertes y colores estables, y los colores en el lado más cálido de la rueda de color son más emocionantes. Son más, se puede decir divertido. Son más vibrantes. Esta es la diferencia básica. 5. ¿Qué son los colores Neutral: Ahora, he visto mucho tiempo que en clases de diseño o en cualquier lugar donde haya visto un video de YouTube o algo así, no hablan de colores neutros. Siempre que estés diseñando por ejemplo una interfaz, diseño de interfaz de usuario de aplicación móvil, incluso el interior de tus habitaciones, vas a usar muchos colores neutros. Por ejemplo, estoy diseñando para una aplicación móvil y quiero el fondo de esa app sea un amarillo pálido o un azul grisáceo pálido. En realidad lo que estoy haciendo es que en realidad estoy usando un color neutro. ¿ Cuál es el beneficio de ese color neutro? Podrías haber visto que en tus casas en las paredes, su mayoría ves que están pintadas con colores neutros. ¿ Por qué es eso? El motivo es que los colores neutros realmente van a actuar como la base de ustedes pueden decir, extendiéndose de otros colores, por ejemplo, tengo color azul grisáceo pálido en mis paredes. Ahora quiero un color de acento y estos colores neutros van a darle mucho poder a mi color de acento, o puedes decir mi color agudo y vibrante encima de eso. Por lo que los colores neutros son básicamente tonos apagados y claros, y en realidad lo que hacen es que van a actuar como base para colores más vibrantes sobre ellos. Voy a usar la mayoría de ellos como mis fondos o tal vez mis fronteras en mi diseño, o tal vez fondo para una imagen de un modelo, tal vez así. Has visto muchas veces estos colores, pero quizá no los reconozcas porque a veces se usan en un tono muy claro. Así es como en realidad se usan los colores neutros. Déjame mostrarte otra herramienta que puedes usar para conseguir estos colores, y esa es Picular. Aquí tenemos una herramienta que he mostrado. Voy a usar mucho tiempo durante este curso, que es picular.co y lo que hice es, en realidad busqué el término, diseño de interiores. Verás muchos colores nítidos y vibrantes junto con colores neutros. Aquí tenemos estos colores marrones. Estos son ambos colores neutros. Este es un color rojo un poco afilado, es un color de acento o color brillante. Entonces tenemos de nuevo color opaco, C4C4C4. Entonces tenemos de nuevo, color marrón verdoso pálido. Entonces tenemos otra vez por aquí, estos son todos diferentes tonos o tonos de estos colores neutros. Esto es de nuevo neutro y este es de nuevo un color muy bonito, 79767B, un bonito color marrón grisáceo neutro. También puedes usar diferentes tintes o tonos de este color para hacerlo más oscuro o más claro. Es así como puedes ver tenemos diferentes colores de estos colores neutros. De verdad quiero mostrarles el concepto de colores neutros porque he visto muchos diseñadores que simplemente saltan esto. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta, hazme, pasemos a la siguiente lección. 6. Ejemplos de colores de calor, frescos y neutros en el diseño de UI: Permítanme mostrarles algunos de los ejemplos del uso de tonos cálidos y fríos en diferentes diseños de diferentes apps y sitios web. Aquí está el primer ejemplo, aplicación de fitness de Hermes y puedes ver a diferencia de otras apps, tiene un uso de color muy cálido. Puedes ver aquí tenemos amarillos, un poco de colores marrones cremosos, déjame bajar, puedes ver por aquí marrón rojizo. De nuevo, si bajamos aquí tenemos marrón muy oscuro. Todo esto es tema de arte. Está relacionado con tu arte. Entonces este es un gran tema. Se puede ver por aquí tiene tono cálido a todo el diseño. Aquí hay pocas cosas más frías como este temporizador por aquí. Eso es en realidad lo que hacen los diseñadores. En realidad tratan de mezclar cálido y con el blues para conseguir un poco de calmar su diseño. Entonces así es como en realidad lo equilibran. Por lo que esto también sucede cuando diseñas algo para tus interiores. Entonces si estás diseñando tu dormitorio o algo así, podrías pintar tus paredes crema o rojo o algo así. Entonces para tus camas y tus cojines, podrías usar azul punteado grisáceo en gris puedes decir funda para tus cojines. Así es como en realidad tratamos de usar. Pero en general, toda la aplicación o todo el diseño tienen más tendencia hacia un esquema de color. Por ejemplo, si hace calor, entonces será más cálido y menos fresco. Aquí hay un gran ejemplo. Entonces déjame mostrarte otro. Aquí tenemos otra. Tiene aspecto más fresco y tranquilo como si pudieras ver colores cian por aquí. Esto es morado muy claro por aquí. Se puede ver todo el look es muy calmante y todo el tema es un tema un poco enfriado. Este es otro ejemplo. Permítanme mostrarles algunos ejemplos más aquí tenemos otro ejemplo muy bien diseñado, pero todo el tema está basado en tonos cálidos. Se puede ver fondo rojo muy oscuro, muy cremoso por aquí. Entonces este es un gran ejemplo. Se pueden ver hasta las imágenes por aquí, tienen tonos muy oscuros, rojizos o naranjados. Es decir básicamente este diseño está más enfocado en tonos cálidos distintos a los tonos fríos. Entonces aquí lo tenemos. Déjame mostrarte otro. Esta es otra, y aquí tenemos de nuevo, uso de un solo color, en su mayoría verde, verde muy oscuro. Por lo que vuelve a estar un poco del lado calmante y muy grave, un lado un poco serio y calmante, así que no. Por lo que también han utilizado este color crema rojizo o color crema marrón. Por lo que es más en una inclinación más hacia, se puede decir rojo y verde. Entonces tal vez sean en realidad, creo, opuestos. Colores tan complementarios, ambos son opuestos entre sí, pero esto es más inclinado y más orientado hacia tonos cálidos. Entonces éste es otro. En realidad trató de mezclar dos cosas diferentes, como dije antes, cálido y tranquilo. Por lo que están mezclando colores cálidos como fondo, y el color de primer plano es un color calmante que es verde oscuro. De igual manera, si miras este, esto es para hoteles. Lo que quiero mostrarles aquí es su seriedad. Está más inclinado hacia la calma. Temas tranquilos, colores tranquilos. Se puede ver por aquí mayormente el blues y si bajamos. Por lo que mayormente el azul. El azul también es para, se puede decir, el color profesional. Demuestra que esta empresa es seria o de esta empresa tienen organización profesional. Es así como se ha utilizado esto. Entonces aquí tenemos otro ejemplo que es el sistema de entrega de alimentos. Entonces como puedes ver, por la emoción han utilizado este color naranja porque el naranja es un color un poco emocionante y cálido. Si lo miramos por aquí, puede ver también hay colores verdes muy agudos, que son tal vez, creo para orgánicos o tal vez vegetarianos, algo así. Pero el aspecto general o tema de esto es cálido. El diseño siempre se inclinará hacia un lado, ya sea que sea un diseño cálido o podría ser un diseño fresco o podría ser un diseño neutro. Pero sobre todo se inclina hacia un lado. Por lo que este es un diseño un poco cálido. Aquí tenemos otro ejemplo de diseño cool y es app de inversión. Verás que la mayoría de las apps o diseños relacionados con finanzas o negocios o cosas por el estilo. Estarán usando mucho blues y este morado tonifica mucho. Por lo que puedes ver aquí es otro ejemplo. Esto es mayormente hacia el tono calmante. Entonces tenemos otro ejemplo. Esta es una página de aprendizaje y esto también, creo para empresa financiera. Aquí se puede ver de nuevo el color azul es prominente. Entonces tenemos este verde. El verde es básicamente para la seguridad, que esto es seguro para invertir o algo así. Entonces por eso se ha utilizado el color verde por aquí. Entonces aquí hay otro ejemplo. Nuevamente, este diseño web de sitio web es en realidad un diseño cálido. Me encanta cómo este diseñador ha utilizado mucha simplicidad en este diseño, y un muy buen uso del tono cálido con este azul opaco. Creo que es un poco oscuro, color azul opaco, azul grisáceo. Entonces realmente me encanta. Diseño muy sencillo y muy bien hecho. Aquí está mi diseño. Ya puedes ver, podrías haber visto estas herramientas GP. Está más inclinado hacia el lado más frío o tema fresco porque está relacionado con los médicos y los médicos se aparecen en su mayoría con estos colores como este color azulado cian, que en realidad usan la mayor parte del tiempo como cirujanos. Entonces el azul oscuro que he usado es para el negocio o profesionalismo serio, que esta es una app profesional, algo así. Entonces eso es todo. Espero que hayan disfrutado de esta lección de que cómo en su mayoría la mayoría de las aplicaciones se van a inclinar hacia un lado, si va a ser un tema genial o tal vez es un tema oscuro. A lo mejor intentas equilibrarlos usando un poco del otro lado. Por ejemplo, si estás diseñando tema cálido, podrías agregar un poco de color fresco para equilibrarlo. Entonces si tienes alguna pregunta no me hagas, pasemos a la siguiente lección. 7. Teoría de la relación de colores: Ahora, vamos a ver cuáles son los diferentes esquemas de armonía de color y cómo los diferentes colores realmente funcionan juntos, y cuántos tipos diferentes de combinación de colores y esquemas de color que realmente podemos construir. Por lo que hay pocas reglas que puedes seguir para crear un esquema de color armonioso. Antes de saltar a eso, les voy a mostrar que esta es en realidad la herramienta de adobe Color CC. Se trata de una herramienta en línea. Es gratis, puedes usar eso para construir tus esquemas de color. Antes de comenzar tu esquema de color, necesitas un color, que va a ser tu color base. Por lo que color base lo puedes obtener del logo o del branding de la empresa para la que estás diseñando. O tal vez si estás diseñando el logotipo tú mismo, puedes seleccionar el color en función del tema. Por ejemplo, si eres fuerte o divertido o de cualquier color. momento he seleccionado mi color base para ser este, 3E4F87, 266 matiz, 54 saturación, 53 brillo. Ahora mismo está en algún lugar por aquí. El primer color armonía o primer esquema de color que puedes crear, ya lo has creado y que es monocromático. Monocromático significa que vamos a usar un solo color. Vamos a agregar algunos tintes, tonos, y tonos del mismo color, los vamos a usar y crear un esquema de color. Para que ese esquema de color, que se basa en un solo tono, y diferente saturación y brillo, va a ser monocromático. Ahora mismo lo que estás viendo es en realidad monocromático. Entonces si quieres cualquier color por aquí, puedes hacer click en él y puedes usar estos deslizadores. Se puede ver que el tono se mantiene igual, que es la barra superior por aquí, dos inferiores son en realidad la saturación y el brillo. Si quieres mover algo como esto, puedes hacer eso. Se pueden construir esquemas de color como este. Este es en realidad nuestro monocromático y puede funcionar eficazmente en cualquier diseño de interfaz de usuario. Por lo que no necesitas usar demasiados colores o tres o cuatro colores muy vibrantes para mostrar tus diferentes acciones posibles en tus pantallas. Hay una cosa más, también puedes seleccionar tu esquema de color de tu imagen, puedes importar el gráfico o la imagen por aquí. Usemos este. Se va a escoger diferentes colores de aquí puedes ver estos son los colores que se han utilizado en este esquema de color y en esta imagen. Ahora, vamos a volver a nuestra rueda de color y se puede ver así es como en realidad han utilizado el, realidad está espaciado los colores en el mismo espacio, se puede ver un poco de rojo naranja, y naranja, y azul. Por lo que estos son los colores que se han utilizado, rojo rosado. Pasemos a otro esquema de color que sea análogo. Análogos significa que los colores que están más cerca en la rueda de color, puedes combinar uno o dos o tres colores que estén más cerca dentro de tu esquema de color y construir un esquema de color basado en eso. Por lo que van a trabajar armónicamente. Si trato de mover el color base por aquí, se puede ver, por ejemplo, si trato de escoger un color base en los greens o tal vez un poco de amarillo. Tan verdes y naranja, así que mi esquema de color es básicamente análogo y he seleccionado mi color base, que es éste, el verde medio. Tenemos el equilibrio de ambos colores amarillentos, verde amarillento, color naranja, y también los tonos puros verdes. Ahora bien, si quieres ajustarlo, no intentes usar algo como esto. Puedes ajustarlo, puedes moverlo así, por lo que en realidad se está moviendo hacia un tono más gris. Se puede ver esto en realidad está haciendo esto aburrido. Entonces aquí tenemos blanco, luego aquí tenemos gris. También puedes usar este para hacerlo brillante u oscuro así. A lo mejor quiero algo de color oscuro en ella, y quiero algunos tonos claros en ella, unos tonos apagados en ella. Siempre que estés construyendo un esquema de color, hay un consejo que te voy a dar ahora mismo y debes escuchar con atención. Que no usamos todos los colores de la misma nitidez o brillo. Si este color es muy brillante, quiero algo aburrido u oscuro para mi fondo. Porque quiero que esto brote en ese fondo. De igual manera, no voy a usar todos los colores brillantemente, van a hacerlo, podría tener algunos colores aburridos o algo así. Este va a ser mi esquema de color. Aquí hay otra herramienta, que realmente me encanta. Se trata de una herramienta en línea, voy a mostrar la URL por aquí, suministro de color, creo. Se puede ver aquí he seleccionado un esquema de color análogo que comprende de estos. Entonces si trato de moverlo por aquí, se puede ver así es como realmente me estoy moviendo en los colores, diferentes colores. Probemos esto naranja, amarillo y verde. Cuando selecciono este análogo, se puede ver que me va a dar unos pocos más oscuros, mezcla de más oscuros, y algunos tonos y tonos apagados y tintes. Voy a escoger uno que creo que va a funcionar bien, por ejemplo, así. Esto se ve realmente genial. Se puede ver que muestra los ejemplos de uso de este esquema de color, puede ver que es básicamente para el diseño de iconos, pero se puede usar eso en su diseño web o diseño de interfaz de usuario. Ya puedes ver si trato de usar este esquema de colores, este es el look y la sensación que va a venir de la combinación de estos colores. Al igual que puedes ver esto, fondo es un poco aburrido, pero el color amarillo en la parte superior es muy brillante y nítido. Este es el esquema de color análogo. Ahora, pasemos a otra que es tríada. La tríada es en realidad un triángulo perfecto en tu rueda de color. En la parte superior tenemos rojo y se puede ver después de tres colores o tres saltos, en realidad es un siguiente color. Entonces después de cada tres colores, por lo que el espacio será similar en todos ellos. Si trato de usar este, intentemos usar éste. Esto es más vibrante y tienen mucho contraste en todos estos colores porque están separados de mucho ángulo. Si los colores están más cerca uno del otro, tienen menos contraste. Por mucho que se alejen el uno del otro, por ejemplo, si son totalmente opuestos, tienen más contraste. Si tienen como separados por dos saltos por aquí, tienen menos contraste. Así que se adapte a su demanda, lo que quiera en su esquema de color. ¿ Quieres mucho contraste? ¿ O quieres un sutil contraste en tus esquemas de color? Por lo que la tríada es en realidad, se puede ver un triángulo, perfectamente espaciado triángulo en el curvilíneo. Ahora, pasemos a dividir-cortesía. Antes de eso, digamos que uso este complementario. Entonces esquema de color complementario, que creo que deberías usar mayormente, es en realidad totalmente dos colores opuestos en una rueda de color. Tendrán mucho contraste, por ejemplo, este azul y naranja, o este azul y naranja más oscuro. Si trato de seleccionar, vamos a ver, voy a usar este. Por lo que puedes ver así es en realidad como se verán. De verdad me encantaría bajar el tono de un color, así que usemos este. Esto se ve realmente genial. Se puede ver así es como se verán si tratamos de construir iconos en este esquema de color basado en este esquema de color complementario. Complementarios significan que son totalmente opuestos en una rueda de color. Podría ser rojo o verde. Se puede ver en el diseño universal de la interfaz de usuario. El rojo es para borrar o cancelar, y el verde es para el éxito. Son colores totalmente opuestos. De igual manera, azul y naranja, ahí he visto muchos esquemas de color utilizándolos. Entonces tenemos este color verde y magenta. Después tenemos este color amarillo anaranjado y este color azulado siano, tipo azulado algo color. Este esquema de color, realmente me encanta el naranja y el azul se diferencia. Estas son dos en realidad combinaciones una y dos, y realmente me encanta esta. Estos son dos de mis colores favoritos. Este color azulado oscuro, morado, y el color naranja. Todo esto se trata de cortesía. Pasemos al siguiente, que es split-complementario. Todo es igual de cortesía. Por lo que puedes ver esto es de color rojo ahora, es exactamente opuestos debe ser verde. Pero en realidad cambiamos de derecha e izquierda a ese color de cortesía. Va a estar no teniendo mucho contraste, pero aún así tener mucho contraste. Tendrá tres colores, por lo que más variedad en ella. Seleccionemos éste o éste. Para que veas, estoy probando este esquema de color, y vamos a probar este. Entonces éste se ve bien. Ya puedes ver he seleccionado este esquema de color split-complementario. Estos son los iconos que se pueden utilizar o así se puede utilizar diferentes colores en este esquema de color, y no va a tener mucho contraste, pero aún así como los colores complementarios, pero aún así mucho contraste. Además, se puede ver una cosa más que los colores en la parte inferior, están casi más cerca el uno del otro. Por lo que van a actuar más en su mayoría como un esquema de color análogo. Tienen alguna compatibilidad. Este color lo podemos utilizar para el contraste. Ahora, en el último, te voy a mostrar este esquema de color cuadrado o doble complementario a veces gente dice que hay dos colores de cortesía como si hubiera rojo y verde y azul y naranja. Entonces en realidad esto es split- complementario. Vamos a moverlo aquí así. Por lo que puedes ver ahora mismo aquí en la parte inferior, se ve realmente genial porque ahora tenemos cuatro colores con los que jugar. Vamos a seleccionar este, y se puede ver así es como va a producir algunos iconos y mecenas, y así es como se van a utilizar. Si vas a, por ejemplo, construir un dashboard donde tenemos notificaciones, donde tenemos mensajes de error, donde tenemos muchas de estas cosas, entonces nos vamos a quedar con este tipo de esquema de color donde nosotros casi cuatro colores para diferentes cosas y diferentes acciones. Además, puedes actualizarlos y si quieres, puedes usar algo como esto o algo así y usar eso en tu esquema de color también. La mayoría de las veces los diseñadores de iconos o tal vez los ilustradores, necesitan muchos colores, diferentes colores vibrantes, diferentes colores apagados para completar la ilustración. Pero en diseño de interfaz de usuario o diseño web, podemos diseñar fácilmente cualquier interfaz, cosa con solo uno o máximo dos colores. Por lo tanto, ten eso en cuenta. Todo esto se trata de diferentes armonías de color. Te voy a mostrar los ejemplos en la siguiente lección, cómo y dónde puedes usar y dónde se han utilizado estos diferentes esquemas de color. Pasemos a la siguiente lección y veamos algunos ejemplos. 8. Ejemplos de la armonía de color: Ahora déjame mostrarte cómo he creado pocos esquemas de color en el pasado, y este es uno de los ejemplos, déjame mostrarte. Se puede ver esto es una página web y se trata de una señalización digital multimedia y diferentes dispositivos digitales y generadores de caracteres signos digitales en realidad. En realidad, rediseñé este esquema de color total y todo y manteniendo la mayor parte del layout igual. Puedes ver aquí estás viendo este azulado compartido luego el stock, negro, rojo. Entonces estás viendo algunos grandes los antecedentes. Entonces si vas por aquí, puedes ver esto es azul oscuro, esto es un poco azul claro, y si pasas sobre él, estás viendo algún color amarillento. Este es en realidad todo el esquema de color, tiene rojo, azul y amarillo. Déjame mostrarte, he copiado diferentes valores de aquí y te voy a mostrar cómo en realidad diseñé este esquema de color y a qué pertenece en realidad, es a qué método de armonía de esquema de color pertenece. Déjame mostrarte. Estamos de vuelta en Adobe color CC y este es en realidad nuestro color base, este es el color base con el que empecé. Esto es 214U en realidad, y se puede ver que esto está casi más cerca para intentar agregar esquema de color. Es un triángulo perfecto. Esto es rojo, amarillo en el costado y azul en el lateral. Este es en realidad esquema de color de tríada y se puede ver en el medio éste, entonces tenemos otro tono o se puede decir sombra de éste, reduciendo un poco la saturación y aumentando realmente el brillo de la misma. Básicamente es una mancha. Se trata de un color claro básico con algunos menos, se puede decir nitidez o saturación. Entonces tenemos este color rojo, este es un color rojo un poco más oscuro, tal vez por fuerza porque esta es una organización y es una organización muy antigua. Entonces tenemos este amarillo para la emoción, pocos de los enlaces que usé tal vez quería que se pincharan y quería tener algún buen efecto cuando alguien se cierne sobre ellos. Este es el color que seleccioné. Esto es de nuevo, en realidad muy cerca de U a 214, un poco diferente, como 10 o 14 o 16 un poco de cambio. En realidad, así es como he creado todo este esquema y he aplicado. Hay más colores dentro pero son en su mayoría las acciones y tensas fuera de este color azul. El único color que están contrastando son en realidad este rojo y amarillo. Déjame mostrarte. Ahora esta es una rueda de color y este es en realidad el esquema de color de la tríada que estoy usando rojo, azul y amarillo. Rojo, azul, amarillo pero estoy eligiendo diferentes tonos, tintes del mismo esquema de color. No intentes usar los mismos colores puros como éste. Este es un ejemplo. Permítanme mostrarles más ejemplos. Veamos un ejemplo más de esquema de color monocromático. Esto en realidad está usando sólo un solo color, que en realidad es de color amarillo y si miras esto, puedes ver aquí solo tenemos un toque de color rojo. El rojo es en realidad esta organización branding color y este diseñador, en realidad escogió el color amarillo, que es creo que a tres o cuatro paradas de este color rojo y si bajamos, puede ver que está usando sólo amarillo, un poco compartido tono más oscuro de amarillo eso es bueno. Esto sigue siendo monocromático. Nuevamente, un tono o tono opaco de este color amarillento. De igual manera, por aquí, algunos extremos claros de amarillo y un color naranja amarillento y eso es todo. Básicamente es de color rojo, que ya está ahí branding color y amarillo. El amarillo se usa en realidad o entero en este sitio web y una cosa más que quiero mencionar o aire, si nos fijamos en esta porción, amarilla , blanca y negra, tienen mucho contraste. Se puede ver este negro es a tono negro y amarillo y blanco sobre ellos son realmente emocionantes, unos colores muy vibrantes. Esto es en realidad, se puede decir, este diseñador tomó estos colores en base a esto. Se puede ver si miras las relaciones duraderas de los gastos generales, éxito global son relaciones duraderas Tengo algo de emoción a ello, tal vez ellos quieren que sus clientes tengan algo de emoción e interés, algo así, tal vez creativo soluciones. Este es un esquema de color muy bonito, solo usando amarillo. Eso también se puede hacer. Veamos algunos ejemplos más. Aquí hay una muy gran app diseñada por algún diseñador y no recuerdo. De todas formas, lo que quiero mostrarles aquí es que esto es otra vez un esquema de color triádico usando azul, rojo y amarillo. El rojo en realidad se usa aquí para cancelar la convocatoria de estas acciones pero en su mayoría es pesadamente, el color mayormente usado es este color azul, oscuro color púrpura azulado y luego tenemos un tono abajo muy opaco tono grisáceo color azul por aquí. Entonces tenemos esta naranja, que está relacionada con este color rojo por aquí. Aquí puedes ver a la derecha por aquí, si lo arrastro así, puedes ver aquí lo tenemos en este ícono del mapa por aquí. Entonces tenemos amarillo usado por aquí. Se puede ver por aquí en esta zona, estimación justa, $12 y amarillo. Por lo que el color amarillo es muy brillante y el azul es un azul opaco. Este es otro ejemplo de usar colores apagados y apagados, y mezclar los colores brillantes y nítidos con colores apagados. Van a estallar en el aburrido fondo. Otro esquema de color, es de nuevo esquema de color triádico. Ahora permítanme mostrarles un ejemplo de esquema de colores análogos aquí tenemos este sitio web natuur y milieu, sea lo que sea, de todas formas es de Holanda. Se puede ver u oír. Ahora tienen todos los colores que están en verde azulado y sombra Sian o azulado y se puede ver verde, trato, azul y eso es todo. Entonces en realidad el tema es la naturaleza por lo que se han quedado en la naturaleza, que es agua azul y árboles verdes. Todo lo van a esquema de color. Todo es similar a esto. puede ver en la parte superior están usando algunos colores muy claros densos y muy oscuros del mismo tono, mismo color, mismo tono para crear esto, creo que este banner de galletas por aquí. Déjame mostrarte cómo funciona en realidad y cómo un ejemplo más de éste. Este es otro destello de diseño con el nombre de brillo. También está usando esquema de color el cual es monocromático en su mayoría, y solo un color el cual va a ser un color de cortesía. En realidad es la mezcla de esquema de dos colores. ¿ Por qué te estoy mostrando esto? Porque en la mayoría de los diseños que han visto y diseñadores a realmente trataron de mezclar dos esquemas de colores. Trataron de usar monocromático, que es en realidad se puede ver el secreto real detrás de él que intentas escoger un color y tratar de crear diferentes tonos apestos y diferentes, se puede ver diferentes tonos más oscuros, diferentes tonos del mismo color, y agregan diversión o dos colores a eso para el contraste. Se puede ver por aquí, la mayoría de los colores ordenan k, este es el mismo color usado por todo aquí y si hago clic y lo arrastro , ya puedes ver, vamos al fondo. Aquí tenemos color rojo muy oscuro. Se puede ver azul y rojo, y se ven cuadradas. Entonces tenemos este color verde el cual se utiliza sobrecarga muy menor, pero en realidad es por contraste. Si tratan de usar el mismo color por aquí, no va a llamar la atención. Ese color de botón es el mismo. Es consistente como la acción primaria. Vamos a arrastrar sólo este. Se puede ver que los botones son del mismo color, pero han usado algunos trabajadores como puedes ver el color naranja por aquí para las revisiones verificadas. Tan solo para demostrar que este artículo es diferente, queremos tu atención por aquí. Este es un ejemplo muy bonito de usar un esquema de color monocromático y complementario, tener algunos, agregar algo más de color al esquema de color monocromático solo para llamar la atención. Ahora voy a compartir con ustedes un esquema de colores más populares análogos, que es blues y greens. Lo he visto mucho tiempo en diferentes interfaces y les voy a mostrar algunos de los sitios web. En este momento, para que puedas ver este es otro sitio web. Yo creo. Esta es una plataforma de crecimiento empresarial de todos modos brillan. Aquí se puede ver que tienen verde azulado. De todos modos, se trata de esquema de color azul azulado. De verdad me encanta. Muy bonito. Se puede ver el botón verde en realidad se ve bien en este color azulado oscuro por aquí y si voy abajo, se puede ver la mayoría de sus colores. su mayoría son verdes. Vamos a bajar. Nuevamente, se puede ver color púrpura azulado y verde y si volvemos a bajar, el mismo contraste de color es un gradiente muy bonito. Te voy a mostrar dónde en realidad se ha utilizado más, veamos otro ejemplo. Esto es lavado de autos de brillo. Se puede ver nuevo en sus imágenes en realidad están usando sólo un color, este muy afilado, de color verde amarillento, tal vez cuatro ahí. Quieren mostrar ese producto verde o algo así. Pero puedes ver, si miras cerrando la imagen, la siguiente, puedes ver los ojos usando blues o aquí en el fondo en su conjunto en su mayoría blues y greens, azules y verdes. Este es otro contraste. Muchas veces lo he visto blues y greens. Pero ahora mismo lo son. La mayoría del sitio web es en realidad monocromático. Este es el ejemplo que te mostré antes, gleam homepage. Es de Marius. No bromistas y me encanta mucho. Muy sencillo, muy efectivo. Se puede ver esto es de color rosa más oscuro, rojizo usado por aquí. En realidad es, se puede decir que muy tienen mucho contraste en esta zona por aquí. Entonces tenemos esto, un color naranja pálido, pero en blanco se va a ver, voy a tener mucha atención. Eso es todo. La mayoría de las veces monocromáticas de lo que son en este Diseñador Editar vulnerables más colores para tener algún contraste. Esta app ya te he mostrado, esta es de diseñada por Muhammad icono mágico. Se puede ver arriba el amarillo, este azul, y este esquema de color triádico rojo. De verdad me encanta. Muy bien hecho la tarea por la yihad. Tiene, creo, 11,444 vistas. Creo que esto se ve muy limpio. De todas formas, así es como en realidad los ejemplos de diferentes esquemas de color complementarios del viernes. Entonces tenemos analógicos, monocromáticos, todos estos esquemas de color diferentes, esquemas de color complementarios. He visto que en su mayoría son azules y naranjas. Lo he visto muchas veces en este momento. No tengo un ejemplo. A lo mejor si lo tengo, te lo mostraré. Hasta entonces, nos vemos pronto en la siguiente lección. 9. 1.ojo de el proyecto en primer color: Ahora es el momento de tu primera asignación. Aquí está. Tu primera asignación es que vas a seleccionar solo un solo color para cualquier esquema de color. Te voy a dar la tarea en la siguiente diapositiva. ¿ Cuál es tu tarea aquí? Nuevamente, primer color, seleccionando tu primer color y cómo lo vas a hacer. Te voy a dar algunos consejos. Aquí la asignación, Pickup es una empresa de reparto de alimentos y vas a seleccionar tu primer color que funcionará para esta empresa. También me vas a decir la razón por la que has seleccionado este color así que esto es de nuevo, una cuestión de psicología del color. Te voy a mostrar esa herramienta que te ayudará a recoger tu primer color y eso es picular.co. Picular.co puedes ver por aquí esta es la herramienta y vas a seleccionar cualquier color, por ejemplo, comida, camioneta, algo así. Te va a mostrar múltiples colores. Voy a estar esperando tu selección de colores y también te voy a preguntar por qué seleccionaste este color como tu color primario en tu esquema de color. Este va a ser tu color primario. El color mayor es que va a funcionar en tu esquema de color. Disfruté de esta asignación. Estaré esperando tu asignación, que es la primera, escogiendo tu primer color. Empecemos y empecemos a crear nuestros impresionantes esquemas de color. 10. Secretos de crear tonos de tonos: En esta lección, voy a compartir con ustedes mis secretos de crear sombra, tintes y tono de un mismo color y cómo se puede utilizar la misma técnica que uso para crear sus esquemas de color de manera efectiva. El primero que vamos a cubrir son las sombras. El truco para crear tonos de buen aspecto es que vas a mantener el tono mismo y añadir negro. Pero, vas a hacer en realidad dos cosas. Siempre que estés creando un tono, vas a reducir el brillo y aumentar la saturación. Entonces escúchame otra vez. Reducir el brillo y aumentar la saturación. Entonces esto va a crear un tono realmente agradable. Si realmente quieres un color muy opaco, puedes mantener la saturación misma y simplemente reducir el brillo. Ahora, se puede ver en la parte inferior he creado cuatro tonos diferentes de este tono izquierdo que es de 218 grados o 218 y se puede ver a la derecha, tengo 70 por ciento de saturación y 70 por ciento de brillo. Entonces en realidad lo que estoy haciendo es reducir el brillo y aumentar la saturación. De igual manera aumentando la saturación en el siguiente 75 por ciento y 40 por ciento de brillo, lo estoy reduciendo, aumentando el brillo en el color negro. En realidad no es negro, es sombra oscura del mismo azul. La saturación es de 80 por ciento y el brillo es de 25 por ciento. Entonces este es un truco muy limpio para crear tus tonos. Ahora, veamos dónde vas a encontrar estos tonos. Los vas a encontrar en esta sección de tu recolector de color. Por lo que en la parte inferior tenemos más negro agregado al mismo color. A la derecha, tenemos más saturación. A la izquierda tenemos menos saturación. Por lo tanto, ten eso en cuenta. En el medio tenemos algo de saturación media, está en 60 por ciento. Entonces de izquierda a derecha, estoy en este momento al 60 por ciento. Es así como vas a encontrar tus tonos en esta sección de tu recolector de color. Cualquiera que sea la herramienta que utilices, va a ser similar a ésta. Ahora creando tonos. Aquí puedes ver he creado diferentes tonos del mismo tono, que es 218 y azul y se puede ver a la derecha, he creado tres tonos diferentes de la misma, este tono azul. El técnico que he usado es que estoy aumentando la saturación lentamente y estoy disminuyendo mucho el brillo. Por lo que necesitamos un color opaco dentro de algo así como 58 por ciento de brillo, 42 por ciento de brillo y en realidad estoy aumentando la saturación. En realidad, estoy manipulando estos colores y brillo y saturación para crear un tono lavado de gris para este tono azul. Es así como estoy creando mis tonos. Déjame mostrarte el área que vas a encontrar en tu recolector de colores para los tonos. Esta es la sección donde vas a encontrar la mayoría de tus tonos en la zona gris. Así es como en realidad creo mis tonos. Me muevo en esta sección para encontrar el color que más me gusta. Hablemos un poco de tintes con más detalle y cuál es la fórmula que uso para crear diferentes tintes. Tan mismo matiz y vamos a agregar blanco o aumentar el brillo o aumentar la ligereza. Entonces aquí tengo cuatro colores en la parte inferior y se puede ver de izquierda a derecha, en realidad estoy haciendo dos cosas. De nuevo, dos cosas. De nuevo, dos cosas. Es necesario tener eso en cuenta. Lo que estoy haciendo es reducir la saturación y aumentar el brillo. Esto es lo mismo que vas a hacer cuando estás creando tintes. Por lo que la saturación, 60 por ciento, 30 por ciento, 12 por ciento y se puede ver el brillo está en 100 por ciento y está aumentando, 90 por ciento, 100 por ciento, 100 por ciento. Entonces así es como vas a crear algunos tintes efectivos para tu diseño y para tu esquema de color. Ahora, siempre que estés usando algún recolector de color, vas a encontrar tintes en esta zona de tus zonas de color. Así que intenta escanear, muévete en esta sección para encontrar el tinte que te gusta o quieres crear. Se puede ir a la esquina superior izquierda para encontrar los colores que están muy cerca del blanco. En ocasiones necesitamos un color que esté muy cerca del blanco y un poco de gris para nuestros fondos. Por lo que siempre que estoy diseñando un laboratorio móvil o sitios web, normalmente tiendo a usar algún color blanco grisáceo azulado. En realidad lo que hago es que estoy en la esquina superior izquierda y trato de encontrar un color que tenga un poco de azul, un montón de blanco, y un poco de gris. Entonces para crear un color muy bonito que pueda actuar como fondo y no distraer mis ojos ni mis ojos de usuarios. Eso es todo por esta lección. Si tiene alguna pregunta, háganme preguntas. Espero que hayan disfrutado de esta lección. Nos vemos pronto en la siguiente lección. 11. Psicología de color 101: Ahora hablemos de psicología del color. Ahora, he visto a muchos diseñadores que no saben color se le otorga en realidad para qué propósito. Por lo que cada color o cada tema de color que tengas, va a tener algunos efectos psicológicos en tus usuarios o tus espectadores de ese diseño. Entonces vamos a hablar de cuáles son esos diferentes colores y lo que realmente significan y por qué debes seleccionar estos. Entonces, empecemos. El primero, mi blues favorito. Ahora, por qué ves que hay mucho uso del azul en la industria del diseño de UI, has visto muchas aplicaciones móviles, has visto muchos otros sitios web o páginas de aprendizaje que están usando azul porque es el color más seguro. Es del agrado de hombres y mujeres por igual y es justificable, por lo que en realidad desarrolla la confianza. Es fiable, es fuerte, muestra que este es un sitio web profesional o esta es una app profesional. Estos son en realidad los afectos psicológicos del azul. Ahora verde. Verde ya sabes que todos nuestros árboles y toda nuestra vegetación que nos rodea es verde, por lo que está relacionado con el crecimiento y la salud y la prosperidad, la tranquilidad porque el verde es en realidad un color pacífico. Está relacionado con los árboles, el crecimiento, las hojas, así que eso es todo. Si tu equipo está realmente relacionado con medicina o la medicina o algo así o tal vez algún producto orgánico o tal vez algún producto relacionado con la salud, puedes usar el verde como color de tu marca principal o tu color mayor en tu app. Ahora, ya sabes que el amarillo es en realidad un color cálido, por lo que está más relacionado con la calidez, claridad porque el amarillo es el color de tu luz solar. El sol es muy amarillo, ni siquiera podemos mirarlo. Tan amarillo es, en psicología humana, está relacionado con claridad, optimismo, calidez porque el amarillo es nuestro color solar más cálido y está relacionado con el sol. Estas son algunas cosas que están relacionadas con el amarillo. Ten en cuenta que a medida que te mueves a colores cálidos como el naranja y el amarillo, en su mayoría son colores emocionantes. Tienen colores más vibrantes en ellos, así que ten eso en cuenta también. De nuevo, se puede ver por el rojo, nuevo es emocionante porque está en el lado cálido. Rojos, naranjas y amarillos, son colores más emocionantes por eso se utilizan en la industria alimentaria. Ya has visto a McDonald's, solo usan amarillos y rojos. Esa es su decisión, diseñada para ver y para conseguir que estos colores se pongan algo de emoción en los niveles de comida o lo que sea que tengan en mente. También está relacionado con la juventud porque muestra lleno de energía o algo así. Es un color audaz y valiente o audaz algo así. Estas son pocas características de los rasgos de psicología que están relacionados con los colores rojos. Ahora, de color púrpura o violeta, están más relacionados con la creatividad, la sabiduría y la imaginación. Si ves la mayoría de mis sitios web y siempre que diseño mayormente, mis colores, que trato entonces de elegir son algún tono de púrpura, azul y amarillos o naranjas amarillas. Entonces el naranja es para la creatividad, emoción y este azul púrpura en realidad es para confiables y sabiduría y creatividad. En realidad, trato de construir a mi equipo alrededor de eso. Si estás usando algunos colores así, necesitas entender lo que realmente significan para que puedas usarlos correctamente. Siguiente es el color naranja. El naranja es en realidad un color amigable y es alegre y muestra confianza. Podrías haber visto que la mayoría de los sitios web usan el naranja y azul como sus colores principales porque esta es la razón. Es un color acogedor, por lo que puedes ver amigable, por ejemplo, quiero que mi diseño sea amable, quiero algún color acogedor, voy a usar algún botón naranja o llamada a la acción o mi botón principal de página de aterrizaje. Por ejemplo, llámame o descarga este ejemplar, este PDF o algo así. Es un color amistoso, alegre y porque es emocionante, por eso es alegre. En tercer lugar, está relacionado con la confianza, que también está relacionada con un color azul. El azul también es fiable, por lo que todo se trata de color naranja. Ahora, hablemos del color negro. El negro está relacionado en su mayoría con productos de lujo y si miras diferentes marcas de lujo como Apple y todas las demás diferentes, tienen mayormente grises y negros en los logotipos. Se puede ver que el logotipo de Apple se está poniendo negro y también tienen muchos grises. Eso en realidad es mostrar fuerza, seriedad, producto de lujo. Además, muchas marcas de moda, han usado mucho negro en sus sitios web y en su marketing de productos y algo así. En su mayoría va a estar relacionado con el lujo y la imagen de marca. Que esta marca es una marca de lujo o es una marca de primer nivel o algo así. Por lo que se trata de diferentes rasgos pssicológicos que se relacionan con el negro, como la audacia, se ha tirado, después misterio formalidad, tendencias, lujos y seriedad. Si estás diseñando para un producto que quieren algún look muy lujoso o quieren algún look, muy top of the line, entonces vas a usar muchos colores negros oscuros en su sitio web o aplicaciones móviles. El último, vamos a hablar de color blanco. El blanco está relacionado en su mayoría con la paz y la pureza y también está relacionado con la limpieza, inocencia, el confort y la esperanza. Si estás diseñando para una ONG o algo así, puedes usar mucho este color. También en diseño, si estás usando el blanco como fondo, te va a dar mucho espacio. Si quieres usar mucho espacio en blanco, vas a agregar mucho blanco por aquí. En realidad, va a actuar como fondo y te va a dar un aspecto limpio. Se puede ver que ya está relacionado con la limpieza, por lo que si quieres algo de aspecto limpio, vas a usar mucho espacio en blanco alrededor de tu objeto. El color blanco se usa principalmente para tus fondos, si quieres un fondo oscuro y quieres usar el botón blanco en él, puedes hacerlo también. Espero que hayan disfrutado de esta lección, si tienen alguna pregunta, háganme. Pasemos a la siguiente lección. 12. Psicología de color de género: La psicología tiene otra perspectiva ¿cuál es qué color es como por, qué género? Si estás diseñando una página web para hombres, niños o mujeres, necesitas cuidar los colores que estás usando, necesitas saber qué colores les gustan los hombres y qué colores no les gustan las mujeres, cosas así. En primer lugar vamos a hablar de cuáles son los diferentes colores psicológicos que son mortales, agrado de diferentes géneros. Empecemos con los hombres, y a los hombres en su mayoría les gusta este color azul, verde, negro, y rojo en su mayoría les va a gustar colores fuertes, se puede ver azules, verdes, negro, negro es muy audaz, rojo es muy audaz, estos colores son del agrado de los hombres. Los colores más apreciados por las mujeres son el color azul, luego el segundo es morado, verde y rojo. Ten en cuenta que el color son en realidad son de la investigación, los colores que estás viendo y tienen más altura en realidad es que más le gusta la mujer, como se puede decir 40 por ciento mujeres que les gusta el azul, luego 30 por ciento como este, morado a cosas así, hay que tener en cuenta que esto no es solo una presentación gráfica, realidad significa que estos colores son más gustados y estas causas son menos gustadas por las Mujeres. Algo que has visto en común ese color azul, le gusta tanto a hombres como a mujeres, es por eso que se utiliza en diseño de interfaz de usuario o aplicaciones móviles o diseño web como color estándar, esa es la razón detrás de ello. los hombres realmente les gustaron los colores más vibrantes y brillantes que tienen más vibración en ellos, teniendo en cuenta que si estás diseñando algún producto que necesita atención de los hombres van a usar colores vibrantes brillantes, azul, naranja, verde y rojo, verde, rojo, y azul, ambos son como por hombres y mujeres. A diferencia de los hombres, a las mujeres les gustaban en su mayoría los colores suaves, más suaves significa que los colores pastel suaves que en realidad son, se puede decir no muy afilados o muy brillantes, tienen tono muy medio, tipo muy pastel. Mira, puedes ver estos colores que he mostrado a continuación, tienen tacto muy suave y colores suaves, no son muy vibrantes, no son muy brillantes ni muy afilados o muy, tienen demasiada tanta saturación. Es así como vas a diseñar si estás diseñando, particularmente para una aplicación de mujer o mujer NAB o producto de mujer, a diferencia de las mujeres, a los hombres en su mayoría les gusta camisa oscura, están más inclinados hacia camisas oscuras como el blues oscuro, grises oscuros y color naranja oscuro, verde oscuro y rojo fuerte oscuro, o también está más cerca del color granate. Ten eso en cuenta que los hombres se inclinan en su mayoría hacia colores vibrantes y oscuros en lugar de tonos suaves de rosa diferente u otros colores. De igual manera, si estás diseñando para las mujeres, van a inclinarse más hacia el tinte de los colores como si tuvieran más blanco en ellos, no les gusta la ropa muy oscura ni los colores aburridos, si estás diseñando para hombres o mujeres, necesitas tener en cuenta todas estas cosas. Eso se trata de la psicología a escala de hombres y mujeres con gustos de género qué color y si estás diseñando específicamente son para producto mujer, entonces vas a usar colores que más les gusten las mujeres.Si estás diseñando para hombres, van a usar colores que son, que son más atractivos hacia el género, que son los hombres. Eso es todo, si tienes alguna pregunta, hazme. Pasemos a la siguiente lección. 13. Esquema de color de la eficacia de tu diseño: En este video, voy a hablar de cómo los colores van a cambiar el tema o cambiar el aspecto y la sensación de cualquier marca, cualquier sitio web que estés diseñando, cualquier logotipo que estés diseñando o construyendo. Voy a indagar en mi proceso de cuándo trato de seleccionar colores, cómo las diferentes variaciones van a afectar y crear diferentes temas o puedes decir diferentes personalidades de una empresa o firma, o logo o sitio web o aplicación móvil. Sea lo que sea que estés seleccionando tus colores, debes tener mucho cuidado. Pueden cambiar la percepción, pueden cambiar el estado de ánimo, pueden cambiar la personalidad de toda tu app, tu sitio web, y tu marca. Te voy a mostrar mi ilustrador y cómo estoy construyendo en este momento, mi propia pequeña firma para aprender páginas. Vamos a cavar. Aquí como pueden ver, en realidad estoy construyendo, ya he construido esta marca y se puede ver que quería ser una firma de personalidad fuerte. LandRight significa diseño y desarrollo de la página de aterrizaje para su pequeña empresa. Esto es básicamente lo que hace esta empresa. Para las pequeñas empresas, creo que necesitan algunas buenas personas profesionales que tengan buenos conocimientos y comprensión de las cosas. Si miras estas cuatro combinaciones diferentes de la izquierda, que son mi parte superior izquierda, que es mi LandRight favorito, ámbar, color amarillento dorado con este azul oscuro y me encanta mucho. Lo he usado mucho en mi ejercicio de ganar, pero aquí se puede ver que se ve fuerte y profesional, pero tiene mucha vibración debido a este amarillo y se ve y se siente mayormente como una empresa creativa o algo así. De todos modos, si estoy principalmente enfocado en el diseño, creo que voy a optar por esta combinación amarilla y azul. Ahora pasando a este correcto, esto está más enfocado hacia los verdes y el blues, por lo que básicamente está relacionado con el crecimiento y esa puede ser una buena opción. Pero desde el punto de vista de la fuerza, no creo que se pueda decir que tenga demasiada fuerza para mayormente para la parte de branding. Ya he seleccionado estos tipos de caras, por lo que también van con el mismo tema y la misma personalidad. Si has tomado mi curso de tipografía, puedes ver que he seleccionado este comedero este es mi, puedes decir premium por lo he comprado. Ahora moviéndome al fondo dos opciones que realmente me encantan. En la izquierda, es básicamente de color rojo pálido, de color rojo muy pálido, que es de color contrastante para este morado azulado. Estos dos son básicamente colores opuestos y aquí se puede ver lo que estoy tratando de hacer es, básicamente es una combinación moderna de colores. He visto mucho tiempo que estos colores pálidos, neutros se han utilizado con los tonos muy brillantes o muy oscuros para crear algún efecto único. Pasando a la última opción que realmente me encanta, acabo de crear estos ahora mismo, pensé que debería compartirlos con ustedes. Se puede ver este es el que realmente amo, es mayormente con crecimiento y personalidad. Tiene aspecto muy profesional profesional de color azul, morado oscuro con algún color verde marino por aquí para el crecimiento. Se puede ver que este es el color. Si quiero hacerlo más brillante, tal vez algo más cerca de escuchar. Hagamos que su brillo 95 de saturación al 70 por ciento. Creo que deberíamos reducir un poco la saturación, iría con ésta, es, tiene mucho contraste, mucha personalidad, muy oscuro, color muy profesional y creo que solo necesitamos estos dos colores para diseñar todo el tema. Yo intentaría algo como esto, se puede ver por aquí, he seleccionado a mi mecanógrafa este encabezamiento y luego otro texto de párrafo. Entonces tengo este botón con el logo, necesito combinar todos estos para crear o construir todo el tema de mi diseño. Es así como trato de variar diferentes colores. Si te muestro mi proceso antes de esto, puedes ver esto es en realidad donde empecé y esto tiene toneladas de diferentes combinaciones de estas tipografías, básicamente tipografías. También empecé con este este es un embudo como forma. Si tienes alguna idea de S-E-O, optimización de motores de búsqueda, o páginas de aprendizaje, tal vez sepas que este es el embudo. En realidad es en esta dirección. Debería ser de arriba a abajo, pero es así. Este fue el primer logo que probé y luego me cambié a éste, esto son formas más simples. Me encantan las formas simples porque creo que si tu logo es más sencillo, es más fácil de recordar y funcionaría mejor en tallas más pequeñas. Si tengo algo como esto, va a funcionar muchos tamaños agradables y más pequeños en. En segundo lugar, es que está en forma cuadrada. Tiene mucho potencial, para mí, seleccioné esta última para estar en estas dos últimas opciones, realmente estoy deseando estas, tal vez añado algunos colores más. Es así como todo el esquema de color va a afectar la personalidad de tu diseño, de tu sitio web completo o de toda la aplicación móvil. Es así como todo el esquema de color va a definir la personalidad de tu marca, tu sitio web, tu aplicación móvil. Ojalá hayas disfrutado de esta lección si tienes alguna pregunta no me hagas. Pasemos a la siguiente lección. 14. Objetivo de cada color en el diseño de la UI: Hay dos secretos en cualquier diseño de esquema de color. Una que te voy a contar en esta lección, la segunda, te voy a contar. Otra regla que sigo y también debes seguir, que te hará mucho buen diseñador y te ayudará a crear esquemas de color impresionantes. Lo primero es que ¿cuál es el propósito de cada color en tu esquema de color? Si intentas enfocarte en eso, cada color tiene un propósito. Necesitas asignar ese propósito a ese color, y necesitas atenerte a eso. En este esquema de color, puedes ver este es nuestro diseño que ya te mostré antes. Aquí puedes ver los colores de fondo son ya sea oscuros o claros. Los dos colores que se han utilizado como fondo es éste, este color azul púrpura. Entonces tenemos este color muy claro que es, en realidad, vamos a seleccionar este. En realidad es f9, f9, f9. Estos son los dos colores que se han utilizado como fondo. Si cavas en este diseño, ¿ has visto algún otro color que se haya utilizado como fondo? Necesitas arreglar tus colores. Se asigna un color al fondo. Estos dos colores, en realidad están trabajando como fondo de toda esta aplicación. Después llegando a los siguientes colores que van a ser nuestros colores de acción o puedes ver los colores que van a captar la atención del usuario. Estos son en realidad el color amarillo que puedes ver, vamos a acercar. Aquí puedes ver tenemos este color amarillo en este apartado. Creo que una sección más, todos modos, esto es en realidad, han usado este color amarillo y este color rojo por aquí como sus colores de acción. Entonces tenemos al siguiente paso, tenemos nuestros colores de status. Quizás habilitado, deshabilitado, activo, inactivo, o tal vez mostrando algún icono o ubicación o algo así. Estos son algunos colores extra. Están usando esta naranja, este diseñador está usando en realidad naranja o este gris, este gris oscuro. Si miras de cerca esto por aquí, puedes ver cuando la llamada está habilitada, tiene un color azul muy oscuro, el mismo color activado de fondo. Este es en realidad su color principal, color primario, donde realmente comenzaron y cuando está desactivada, tiene este color. Este es un color más oscuro, se puede decir, menos saturado del mismo, este azul y esto se ha utilizado por aquí. De igual manera, si miras este texto, voy a acercar un poco. No va a parecer jaggie. Necesitas notar una cosa el color más oscuro es para el texto que está habilitado o algo así. El resto del texto lo puedes ver es muy opaco, de color grisáceo. Se puede ver la diferencia. Esta es una diferencia muy sutil, pero hay que notar que si quieres ser un buen diseñador. Aquí tienes un resumen, necesitas averiguar qué colores van a ser tus colores de acción o tu, los colores de acción en tu app, si sería un botón o un icono de teléfono o un icono de rechazo o eliminar, botón de borrar o algo por el estilo. Colores de acción van a ser específicos. Colores de fondo, debes considerar tus colores de fondo que quiero un color muy aburrido, color más oscuro para un fondo y color muy claro para otro. Necesitas algunos colores de estado. En su mayoría son necesarios en el diseño de tablero. Cuando estás diseñando un panel, hay diferentes estados, mensajes de error. Tenemos diferentes notificaciones, tenemos diferentes actualizaciones, por lo que necesitamos estos colores de estado. Este es en realidad el propósito de diferente color. Necesitas asignar ese propósito y necesitas apegarte a eso. Una cosa más, si has notado los colores de acción son muy brillantes. Tienen personalidad que llama la atención que los colores de fondo, son opaco, pálido, o se puede decir un aspecto suave y limpio para que podamos mirarlos fácilmente por tiempos más largos. Los colores de estado se mezclan con animación o algún movimiento para captar la atención del usuario. Al igual que puedes ver cuando desliza tu deslizador caída habilitada y desactivada. Eso es en realidad una animación. Por lo que tiene retroalimentación. De hecho, así es como los diseñadores de UI usan colores en sus aplicaciones, en sus sitios web, y en sus logotipos, cualquier cosa que puedas usar los mismos principios. Asignar un color y pegarse a eso y asignarle una función y eso es todo. Nos vemos pronto en la siguiente lección. 15. Sharpe en el color abollado: contraste de los colores: Ahora te voy a contar otro secreto sobre los esquemas de color y cómo puedes construir esquemas de color impresionantes. La regla es que vamos a mezclar colores apagados con colores saturados o agudos. Los colores apagados, van a actuar como fondo o una regla de apoyo para el color afilado que hay encima. Puedes ver aquí en este ejemplo en esta diapositiva, estás viendo un color azul muy nítido, pero el fondo es de un color gris opaco, azulado. Es un tono muy opaco del mismo azul. Tengo hacer un poco gris y lo hacen un poco más brillante, y se puede ver que se ven muy bien. Se puede ver aquí tenemos la saturación del botón superior dulce y agudo. Es 89 por ciento y el brillo es 88 por ciento. El fondo se puede ver la saturación es muy baja, 10 por ciento y mismo color el tono es el mismo y el brillo es 89 por ciento. Esta es la regla que debes tener en cuenta. Aquí hay otro ejemplo de colores apagados que se van a mezclar bien con colores saturados. Ahora aquí tenemos dos colores diferentes, y puedes ver tenemos este color marrón y tenemos este color naranja amarillento muy afilado. Aquí tenemos, de nuevo, la saturación de la parte superior es de 88 por ciento y el brillo es de un 100 por ciento, por lo que está emitiendo mucha luz, lo que es de color muy luminoso y el fondo es un poco opaco, brillo es de apenas 25 por ciento, y la saturación es de seis por ciento. Este es otro ejemplo del mismo esquema de color por lo que he mezclado dos colores, pero uno de ellos es muy brillante y muy saturado y el otro es menos saturado y menos brillante, por lo que van a ir juntos muy bien. Ahora otro truco, que he visto mucho es que he visto con los diseñadores expertos que tienden a mezclar colores pálidos con colores saturados. En sus esquemas de color, tienen colores pálidos. Los colores pálidos significan que el fondo realmente va a tener muy menos saturación y podría tener algún brillo alto. Aquí puedes ver tengo la combinación de dos colores. Este es de color verdoso muy pálido. Realmente me encantó esta combinación en realidad, de todos modos. izquierda se puede ver aquí tenemos el color el cual tiene saturación de 14 por ciento y brillo es de 89 por ciento, por lo que el brillo es bueno, pero el azul superior por aquí tiene saturación media alrededor de 55 por ciento y brillo es de 50 por ciento. En realidad, esto es mucho más saturado, pero no un gran salto desde el fondo, por lo que el fondo es un poco brillante y pálido. Yo lo llamaría brillante y pálido en el sentido de que tiene menos situación, pero es brillante. Se puede ver que el botón en la parte superior tiene una diferencia de saturación de como 40 por ciento más salto en saturación que el fondo pálido. Este es otro contraste que puedes probar. Ahora, pasemos al segundo paso, que es colores brillantes, versus colores apagados. Ellos también van a ir bien juntos. Este es un solo color. He usado el mismo matiz y el brillo del fondo es de 13 por ciento, por lo que es muy opaco, es muy negro. Está muy cerca del color negro. A la izquierda se puede ver el mismo color y el brillo es de un 100 por ciento. Este es otro truco que puedes usar. Estos son los principios si aprendes estos y puedes manipular estos, tienes un buen dominio en estas dos habilidades, puedes crear cualquier esquema de color y que te hará pop tu diseño que se verá genial. Ahora puedes ver estoy usando solo un color, otra vez, por aquí y el brillo de mi botón es del 30 por ciento, es de color muy oscuro y muy saturado y el fondo es muy pálido y muy brillante. Esto es otra vez otro ejemplo del mismo esquema de color. También puedes juzgar mi esquema de color si miras diferentes áreas de texto por aquí, donde tengo algunos tonos medios mezclados en todo este diseño. Espero que traten de notar cómo se han combinado diferentes colores porque esta es en realidad la escala. Si comienzas a notar diferentes esquemas de color a tu alrededor, vas a agarrar el secreto de que cómo podemos mezclarlos juntos. Aquí hay otro ejemplo de fondo brillante y colores oscuros encima de él. Se puede ver he escrito suelo brillante más colores oscuros. Aquí puedes ver, estoy usando un gradiente de azulado oscuro a este color rojo rosado y se puede ver el brillo de ambos colores es menor al 50 por ciento. Creo que necesitas experimentar con ello, pero creo, personalmente ese brillo debe ser menor al 50 por ciento o solo al 50 por ciento. Si intentas aumentar como 60,70,80, entonces necesitas aumentar tu saturación también, porque el botón se va a quedar aburrido. Trata de mantener tu brillo como 50 por ciento, 55 por ciento, no más que eso. Ahora, permítanme mostrarles un ejemplo de usar esos dos principios de fondo opaco más color saturado encima de él, entonces tenemos fondo brillante, pálido y tenemos algo de color oscuro encima. Se puede ver aquí, tengo una muestra. Este va a ser tu ejercicio en realidad. Este es un diseño, Crypto Bank y puedes ver Estoy usando solo un tono, un solo color para crear todo este esquema de color. Déjame mostrarte cómo he creado esto. Trick por aquí es fondo brillante y encima tenemos un color muy nítido. Aquí tenemos este color. Este es nuestro color azul primario y tiene la saturación de 80 por ciento y el brillo es de 60 por ciento. No quiero que vayas por encima del 60 por ciento, supongo. Esto se ve muy bien encima de un fondo blanco brillante, por lo que tenemos mucho contraste. De igual manera, en el botón de aquí, si miramos esta zona de abajo por aquí, que de verdad quiero mostrarles chicos que necesitan entender esto. Aquí tenemos otro color como fondo y la saturación de este color es de siete por ciento y el brillo es de 100 por ciento. Se trata de un color básicamente pálido, brillante, muy menos saturación, y muy alto brillo. Esto es una cosa. Encima de ella tenemos color muy oscuro, brillo es de 60 por ciento y saturación es de 80 por ciento. Este es el truco que quería mostrarte. Si dominas este truco, vas a, gracias después que este truco realmente te ayude mucho. Estos son los dos principios que realmente quería mostrarte que cómo puedes crear uno, usando con un solo color, puedes crear esquemas de color de aspecto impresionante usando este principio. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta que hacerme. Pasemos a la siguiente lección. 16. Cómo construyo mis pasos de Schemes de color: hoy voy a compartir con ustedes mi perspectiva de construir un esquema de color. Podría haber diferentes métodos para construir un esquema de color, pero así es como construyo mis esquemas de color. Entonces voy a compartir este método con ustedes, y en las próximas lecciones vamos a cubrir paso. Voy a compartir y mostrarte mi Adobe XD diferentes pantallas, y cómo en realidad sigo añadiendo diferentes colores. Este es mi método. El número uno es que empiezas con un solo color. Puedes escoger ese color de cualquier color de marca, o puedes escoger ese color en el tema de tu diseño, por ejemplo, si tienes una app de sofá o una app de medios, podrías ir con colores azul oscuro o rojo de todos modos. Entonces selecciona tu primer color, y vamos a crear un esquema monocromático. Se pueden ver diferentes tonos y tintes, diferentes trazas. Estos son todos del mismo color, cambiando la saturación y el brillo. Este siempre es mi primer paso. Así es como en realidad empiezo a crear mi esquema de color. Entonces empecé con este matiz por aquí a la izquierda, luego tengo sombra, tinte, unos tonos más, tres tonos, tinte, y uno más, que es el mismo tono, pero tiene mucha saturación. En realidad, se puede decir color azul que atrapa la atención. Por lo que tiene más saturación, este azul. De verdad me encanta. Esto es en realidad, se puede decir el árbol de mi esquema de color. De hecho, así es como empiezo a experimentar y construir mi esquema de color. Por lo que necesitas experimentar con él, tratar de crear pocos tonos, tonos y tintes. Ahora el tercer paso es que trato de agregar un color contrastante. Por lo que ya hemos construido diferentes tonos y tintes de ese azul, ahora vamos a agregar un color opuesto, que es un color contrastante, y el color opuesto en la rueda de color es en realidad naranja para el azul. Se puede ver que he añadido un color de contraste por aquí. Si miras de cerca, puedes ver una cosa más, que en cada color por aquí, hay diferentes colores que van a funcionar. Por ejemplo, en un color oscuro, va a funcionar un color blanco claro, luego en un color tinte, necesitamos un color oscuro. Por lo que realmente estamos experimentando con estos colores y ver cuál tiene más contraste y cuál se puede leer fácilmente. Trata de usar colores que tengan buen contraste en diferentes fondos. Ahora, mi último paso. Siempre que dejo de construir mi esquema de color, por ejemplo, si estás diseñando una aplicación móvil o nuestro dashboard, necesitas unos cuantos colores más, como puedes ver en el lado derecho, tenemos colores de estado. Por lo que en realidad agrego diferentes colores de estado para información, para error, para mensajes de éxito, puede ser para alguna actualización. Se puede ver que una de ellas es azul. Esto es en realidad, por ejemplo, si tengo alguna actualización, o alguna actualización de software, o tal vez alguna actualización de valor, no quiero que sea algún error o algo así. Yo quiero que sea muy tranquilo, color azul. He usado un tinte por aquí para mostrar mi estado. Nuestro tinte, puedes usar el tinte para el mensaje de estado. Puedes usar un mensaje amarillo, por ejemplo, quiero mostrarle al usuario que este valor, necesitas actualizarlo. Es para hace cinco minutos valor, así que necesitas actualizarlo, así que voy a agarrar este color amarillo y mostrar ese mensaje. De igual manera por error, voy a usar un poco de rojo, y también para el verde, voy a usar para el éxito. El truco es que necesitas crear estos colores y estos amarillos, azules y rojos, y verdes que en realidad van a funcionar y se ven bien en estos colores. Deben combinarse bien. A veces empiezas a elegir color al azar, así que esto no es un truco, no necesitas hacerlo aleatoriamente. Te voy a mostrar cómo en realidad se hace en las próximas lecciones paso a paso, que no tengas que preocuparte por ello. Pasemos a la siguiente lección. Si tienes alguna pregunta sobre construir este método de esquema de color mío, siempre puedes preguntarme. Pasemos a la siguiente lección. 17. Cómo tomar tu primer color: Siempre que comienzas a construir cualquier esquema de color, lo primero es por dónde empezar. He visto muchos diseñadores que son nuevos diseñadores o que no tienen mucha experiencia en diseño. El primer error que hacen es que no saben por dónde empezar sus diseños. puede ver que están un poco confundidos en dónde deberíamos empezar, qué color debemos escoger. Te voy a simplificar esto y te voy a mostrar dos arranques que puedes hacer. El primer inicio es que siempre que estés iniciando algún diseño, busca su marca. Si pertenece a una marca ya acumulada, tal vez tengan un color rojo en su logotipo o tal vez tengan algún color amarillo en su logo como McDonald's. Se puede desde ahí, recoger el color de su marca y empezar desde ahí. La segunda opción es que empieces con tu propio yo. Por ejemplo, si quiero construir algún diseño podría empezar con un color azul porque es seguro, y segundo es que le gusta tanto hombres como mujeres ambos. Por lo que el azul es un color un poco seguro. Es por eso que se ven muchos colores azules incluso se puede ver en esta interfaz de este “Adobe X” el botón de compartir es azul. Este es un color muy seguro. Empieza con azul y ve a partir de ahí. Ahora les voy a mostrar algunos ejemplos de cómo en realidad creé un esquema de color, y vamos a crear un esquema de color monocromático en este momento usando este color azul. En primer lugar les voy a mostrar el ejemplo. Aquí te presentamos 'smart sofa app' de una marca ROM, R-O-M. Se trata de una empresa europea, y tienen oficinas en Reino Unido, Alemania, y en toda Europa. Cuando empecé esta app, no agregué ningún concepto ni idea de su esquema de color. Ya puedes ver estoy usando algún color amarillo anaranjado y azul muy oscuro el cual está cerca del negro y este rojo. También, este verde. Mi color mayor es este azul oscuro, este rojo y este naranja o amarillento, es más de un color amarillo. Además, se verían unos Browns aburridos por aquí, pardos grisáceos muy aburridos por aquí, entonces tenemos marrón muy oscuro en esto. Ver video, leer texto. Este es un switcher. Entonces grifo switcher. Si toco por aquí, cambia entre dos pantallas, entonces podrías ver un poco de verde por aquí que es básicamente nuestro a status colores. De todos modos, si miras de cerca, déjame acercar. Si miras de cerca, estos son de nuevo textos de color marrón oscuro por aquí. Si miras por aquí, este color es en realidad morado azulado oscuro. Entonces tenemos este mini-sofá, sofás meine, realidad es de colores grisáceos, azulados, café opaco. Es menos marrón, más opaco color azul grisáceo. Así es como en realidad creé esto, para que puedas ver esto es dab bar [fonético] y cuando alguien hace clic en él, hay un punto culminante para este ícono. Es de un color azul oscuro. Te voy a mostrar cómo en realidad logré conseguir este esquema de color con esta app y he creado muchas pantallas para esta se pueden ver por aquí. De igual manera, se puede ver que hay pocas opciones por aquí para diferentes más funcionalidades como esta barra deslizante. Tenemos azul oscuro por aquí para el relleno. Este color verdoso para algún estatus, este rojo oscuro, color rojo muy afilado, color rojo maroño-rojo. Vamos a ir a su página web; en realidad elegí estos colores de su marca. De acuerdo, así que aquí está la marca real. Se llama ROM. Si miras de cerca todos los sofás y todo el equipo de sus sesiones fotográficas y pieles de sofás y sus colores, verás similitudes en lo que he usado en mi app. Escogí un color de aquí, este color fuerte, que es su color rojo. Después escogí otros colores de estas imágenes; se puede ver que sus sofás tienen un color azulado muy oscuro. Esto lo he usado en mi esquema de colores. Se pueden ver estos marrones, colores gris parduzco de marrón opaco que he escogido de esta imagen. Esto vuelve a ser grisáceo oscuro, y vemos algunos toques de amarillo y naranja por aquí en la imagen. Creo que estos van a ir bien juntos porque se ven muy bien en este diseño de interiores. También se verán muy bien en la app. Este azul oscuro en realidad va genial con este rojo, es básicamente un esquema de color de tríada, rojo, azul, y amarillo. Se puede ver por aquí los toques de amarillos en esta imagen. Se ven muy bien con este color gris oscuro opaco. Así es como en realidad empecé. Empecé con este color y elegí algunos colores más para el tema, y los usé para diferentes propósitos. 18. Crear tu primer esquema de color con un único color: Ahora la segunda pregunta es, ¿por dónde debo empezar si no tengo marca? Puedes comenzar con cualquier color. Podrías elegir algún color para tu marca. Por ejemplo, si tengo sal del Himalaya. Por ejemplo, quiero iniciar una empresa, o tal vez estoy diseñando para una empresa verde que está etiquetando que esto es un 100 por ciento natural o algo así, podría entrar más en verdes y amarillos. Si estoy diseñando una aplicación en línea o algo que vaya a funcionar en línea para algunos diseñadores o algún otro grupo financiero, podría usar azul. Así que intenta seleccionar el color en el tema de tu app. Por ejemplo, si tengo aplicación muy seria, podría entrar en colores azul real oscuro. Entonces es, hay que considerar. Entonces para este ejemplo, voy a seleccionar este color y lo voy a replicar. Cualquier esquema de color, diría que se crean al menos dos tonos, dos tonos, y dos tintes. Entonces vamos a crear un color muy oscuro por aquí primero. Entonces vamos al relleno y vamos al modo HSB. Aquí tenemos brillo, primero creemos algunos tintes ya de alto brillo. Usemos un poco menos de saturación. Entonces éste se ve muy bien. Vamos a crear unos cuantos más. Vamos a moverlo a un lado un poco más blanquecino. Entonces voy a reducir la saturación. Entonces en realidad también puedes ir por aquí. Se puede ver que el matiz se va a quedar igual. Para que puedas arrastrarte hasta aquí e ir a tu semejanza. A lo mejor quiero un poco de color blanquecino opaco, algo por aquí. Entonces esto se ve genial. Entonces tengo dos tintes por aquí. Para que veas, arrastrémoslos hasta aquí. Ahora voy a tener unos tonos, por lo menos dos. Entonces me voy a ir un poco de oscuridad por aquí y un poco saturado en esta zona. Entonces vamos con este color. Fue 201. Entonces me lo voy a quedar 201. Entonces no son 200, 200 eran 200. Creo que fue 201, supongo. Por lo que 201. Vamos a moverlas a 201 entonces tenemos 201. Eliminemos este. También va a ser 201. Hagámoslo un 100 por ciento esto. Entonces tenemos en este momento cuatro colores, vamos a sumar algunos más. Se puede decir una imagen oscura un poco menos pesada por aquí. Entonces voy a ir por esto por aquí. Entonces déjame decirte la psicología detrás de esto. Entonces en realidad estoy creando dos tonos oscuros, dos tintes, al menos y se puede ver esto puede ser para mi texto normal, texto de párrafo. Esto puede ser para mis encabezados o textos muy audaces que realmente quiero que los usuarios llamen la atención. Para estos, tengo colores claros para que puedan trabajar juntos en estas pantallas oscuras. De igual manera, vamos a tener pocos más. Añadamos uno más por aquí, dos más en realidad. Entonces necesitamos algo en el medio, algo así, tal vez para fronteras o algo así. Añadamos uno más. Por lo que es un poco más oscuro. Eso es 20. Por lo que se puede ver que en realidad tenemos tres niveles. Esto en realidad es nivel medio o tonos. Entonces tenemos colores muy oscuros y muy claros. Por lo que empezamos con este color base, y creamos al menos seis colores a partir de esto. Por lo que este es tu esquema de color real y deben ser al menos estos colores para obtener un gran esquema de color. Por lo que puedes ver aquí es un ejemplo de aplicar estos esquemas de color. Se puede ver cómo en realidad he logrado hacer esto. Este es un color muy oscuro. Este es en realidad un azul afilado. Déjame alejarme. Por lo que es un azul muy afilado. Creo que es casi lo mismo, que es de este color. Entonces puedes ver en este fondo estoy usando color muy oscuro. Entonces esto en realidad es volver a la lección básica donde te dije que tonos muy claros sobre muy oscuros. Por lo que van a conseguir mucho contraste. De igual manera amplia en esto se ve bien. Puedo leerlo fácilmente. Aquí tenemos algunos marrón oscuro, lo siento, no son marrones. En realidad lo son, se puede ver esto es de color muy opaco y está casi expiado. Tono tan grisáceo, déjame mostrarte los iconos de abajo. Por lo que aquí tenemos tono azulado opaco de este mismo color azul. Para lo más destacado estoy usando nuestro azul primario. Entonces este es en realidad nuestro color de acento, o se puede decir el color popping, este. Si quieres hacer unos más nítidos, así que lo vamos a arrastrar por aquí y si quieres un color más nítido, vas a aumentar la saturación por aquí. Por lo que tenemos versión más nítida del mismo color. Entonces si quieres usar algo así, puedes usar este color más nítido como lo he usado por aquí, 961 puntos de bonificación por aquí. Si vamos por aquí, para que veas que hay muchas variedades o muchas cosas que puedes hacer con el mismo esquema de color. Por lo que puedes ver aquí tengo como 1, 2, 3, 4, esquemas de color, dos temas oscuros y dos claros. Estoy usando los mismos colores. Para que veas que estoy usando los mismos colores. Aquí tengo fondo muy oscuro y he invertido el esquema de color a partir de esto, mi fondo claro. Por lo que puedes ver aquí tenemos los últimos pedidos. Es de color grisáceo muy pálido, por lo que no sale. No quiero llamar demasiada atención a este. De igual manera, quiero atención en esta zona, por lo que tengo tonos muy claros y oscuros. De igual manera para este botón, es nuestro botón principal o botón de acción principal en la pantalla. Por lo que está teniendo mucha atención. De igual manera, éste tiene azul primario. Por lo que puedes ver estos azules son en realidad colores que llaman la atención sobre este fondo negro u oscuro. En realidad no es negro, es azul muy oscuro. Entonces te voy a dar este expediente. Si quieres mirarlo, puedes mirarlo pero ya te he mostrado cómo empezar realmente y me vas a agradecer por esto porque te va a hacer la vida muy fácil porque solo puedes crear cualquier esquema de color con un solo color. No necesitas dos, tres o cuatro colores. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, hágamelo. Pasemos a la siguiente lección. 19. 2.º proyecto crea la scheme de colores monocromático: Ahora es el momento de tu otra asignación y que está creando esquema de color monocromático. Me has visto creando un esquema de color monocromático usando solo un solo color azul. Aquí está la asignación. Swish es una aplicación de prototipado para diseñadores. Crear un esquema de color monocromático que funcione para esta empresa. También vas a crear una pantalla de inicio de sesión y aplicar ese esquema de color a esa pantalla de inicio de sesión y vas a enviar ambas. Junto con tu esquema de color y esa pantalla. Te voy a mostrar cómo quiero que se vea. Aquí como pueden ver, aquí hay un ejemplo de lo que realmente quiero de ustedes chicos. Esta es una pantalla de inicio de sesión, olvidé su contraseña o lo que sea, solo puede diseñar una pantalla de aplicación móvil en este momento este es solo mi archivo de recursos. Vas a crear un esquema de color a la izquierda como este, será monocromático. Podría no tener verde y presentármelo así. Esa es tu primera tarea que estoy viendo ansioso por ver tu asignación. Empecemos. 20. Agrega segundo color para el contraste: Ahora, vamos a dar el segundo paso en cualquier esquema de color. El primer paso fue que acabamos de crear un esquema monocromático. Ahora, vamos a añadir un color más a nuestro esquema de colores. Para ello, vamos a seleccionar nuestro color base, y voy a agarrar su valor hexadecimal, comando C, y vamos a utilizar algunas de las herramientas en línea para agarrar nuestro segundo color. Hay muchas herramientas por ahí. Voy a compartir con ustedes tres o cuatro. Ahora, voy a usar este Coolors o Coolors.co. En realidad, haga clic en este “Generador”, y veamos a dónde vamos a dirigirnos. Lo primero que voy a hacer, es que voy a editar esto y copiar esto aquí como mi valor, y lo voy a bloquear. Haga clic en este “Bloqueo”. Yo lo llamé bloquear este color. Vamos a presionar nuestra “Barra espaciadora” para conseguir unos colores más. Aquí como puedes ver, tenemos pocos colores más, y puedes seleccionar cualquier color que quieras de aquí y bloquearlo. Pero en este momento, busco un color más vibrante en lugar de estos colores muy aburridos. Lo que voy a hacer, es que voy a seguir presionando mi “Barra espaciadora”, hasta el momento que consiga el color que quiero. Algunos de color naranja son muy afilados; color naranja que se puede mezclar con este color azul. ¿Por qué es eso? Porque puedes ver, si vamos a esta app de suministro de color, este color azul es en realidad color opuesto y complementario a este naranja, así que busco algunos tonos de estos. O puedo usar azul oscuro y naranja, o puedo usar un poco de azul pálido y naranja afilada, así que esto es lo que busco. Tengo algún color más cercano a éste. En realidad es de color amarillo-anaranjado. Si presiono los “Ajustes” por aquí, puedo aumentar su brillo o puedo moverlo deslizador, por ejemplo, tal vez un querer algo más cerca de esta naranja, y puedo bloquearlo entonces. Entonces voy, de nuevo, a presionar “Barra espaciadora”. Ahora, puedes ver que estoy consiguiendo más colores. Me gusta mucho este color grisáceo, así que en realidad lo bloqueé. A mí me gusta mucho este verde, así que voy a cerrarlo también. Es así como, puedes ver, he creado un esquema de color muy bonito. Tengo algunos tonos oscuros. Tengo algunas tonalidades verdes. Tengo algunos tonos amarillos. El anaranjado amarillento va a funcionar muy bien con el blues. Estos son en realidad dos azules, uno verde, uno, un poco, de color grisáceo, y este amarillo-anaranjado. Es así como creé este esquema de color y puedo exportarlo. Puedes hacer click aquí y puedes hacer click en “PNG” o puedes hacer click en “SVG”, y puedes arrastrar eso a tu software gráfico. Voy a guardarlo algo así. Otra forma es que, en realidad traté de usar esto, Adobe Color CC, y voy a agarrar colores de aquí. Lo que hice es, realmente copié, seleccioné esta corriente base, por lo que en realidad es el color base. Copié el valor hexadecimal por aquí. Se puede ver, este es mi valor hexadecimal para el color base. Seleccioné esquemas de color complementarios y diferentes a partir de aquí. Si quieres probarlo, puedes seleccionar algo así. Ahora mismo, se puede ver que esto es muy básico. Básico significa que estos colores no se ven muy bien entre sí; hay algunos colores apagados, hay algunos colores nítidos. Puedes ajustarlos; mantener el tono mismo, e intentar ajustarlo. Por ejemplo, si quiero algo como esto, de color amarillo, y vamos a mover este amarillo un poco por aquí, y esta naranja. Vamos a mover así de azul. Además, voy a usar un tono un poco más oscuro o opaco por aquí, pero marrón, algo así. Marrón. Este rosa se ve realmente, muy extraño. De todos modos, esta es otra forma de obtener tu segundo color. No me gusta, en realidad, esta aplicación de esquema de color para crear todo el esquema de color porque te va a conseguir un montón de diferentes colores extraños por aquí. Por ejemplo, si quiero entrar en este compuesto, lo que puedes hacer, es que puedes conseguir estos colores base, y puedes crear más colores en los que estás pensando creando diferentes tonos, y tonos, y tintes de la mismo color, así que no intentes usar o copiar los mismos colores que esta rueda de color realmente genera. Una cosa más es, normalmente lo hago, es que en realidad voy a este explore y busco, por ejemplo, si tengo un azul, naranja, algo así, voy a seleccionar por aquí. Ya puedes ver, me gusta mucho este esquema de color. Está muy cerca de lo que busco. Puedo descargarlo, puedo guardarlo. De igual manera, éste se ve realmente genial: azul y naranjas. A mí me gustan estos dos o tres. Los esquemas de color, los voy a descargar todos, y voy a ver qué colores se van a quedar muy bien en mi app. Si buscas verde y naranja, puedes ver que tenemos diferentes esquemas de color. Puedes comenzar tu esquema de color seleccionando cualquier otro esquema de color, e intentar alterar un poco de tonalidades, y sintonizarlo a tus propias necesidades. Así es como, en realidad, selecciono mi segundo color o agrego más colores a mi esquema de color. Ahora, voy a abrir este esquema de colores editores. Se puede ver editor de relleno. Voy a moverlo hacia abajo. Este es otro truco que en realidad uso mucho que guardo el color en la misma posición y me muevo aquí. En esta rueda de color, en realidad fui a este color naranja, y creo que me gusta que ahí se vea genial juntos, así que voy a mantener este color naranja por aquí. Déjame mostrarte un ejemplo de cómo, en realidad, lo usé porque esta va a ser nuestra acción secundaria de color. Se puede ver en esta pantalla, tenemos azul, pero se puede decir por resaltar nuestra barra de pestañas y no por nuestras principales acciones primarias. Hay, en realidad, dos tipos de botones que atraen la atención. Una es primaria que es nuestra acción principal, que queremos que nuestros usuarios tomen en esta pantalla. Acción secundaria que es, en realidad, tal vez alguna resaltada, o elemento seleccionado, o algo así. Se puede ver por aquí y por aquí, estoy usando color naranja para el artículo seleccionado. Para mi acción primaria, estoy usando mi color azul. De igual manera por aquí, esto es de nuevo, lo mismo, y esto es de nuevo, lo mismo. Ya puedes ver, no estoy mezclando ambos colores simultáneamente entre sí. Aquí como pueden ver, en realidad utilicé un color gris azulado oscuro por aquí para mostrar este elemento de la lista por aquí. Así es como, en realidad, intentas agregar un color más o más colores a tu esquema de color. Creo que dos colores son más que suficientes para cualquier tipo de esquema de color para construir cualquier aplicación, cualquier dashboard, o cualquier sitio web. Otros colores que necesitas son los colores de status, que vamos a hablar en la siguiente lección. Ahora mismo, me quedaría con estos dos colores. Un color voy a elegir, y voy a crear diferentes tintes y tonos de ese color. El segundo color será para mi color de acento o acción primaria, y no voy a crear más tonos del mismo. Este va a ser tu, puedes decir, mantra de tus esquemas de color. No intentes crear tonos y tintes de ambos colores. Intenta usar un color y crea tintes y tonos de ese, así es como doy mi segundo paso o selecciono mi segundo esquema de color y color. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, háganme preguntas. Reunámonos en la siguiente lección. 21. Colores de estado en el diseño de UI: Ahora, en el último paso, vamos a hablar de los mensajes de estado. Se trata de una aplicación de billetera digital, que está mostrando tu Bitcoin o el valor total de la moneda. Estas aplicaciones o dashboards donde vemos una gran cantidad de datos o algo así, necesitamos muchos mensajes de estado. Por ejemplo, aquí tenemos la pantalla. El color de la pantalla afirmando que tenemos alguna ganancia o nuestros valores van subiendo. De igual manera en este Bitcoin, su valor se ha incrementado 22.8 por ciento, de igual manera para esto. Tenemos al menos tres mensajes de estado. Uno es el éxito o tal vez algo está aumentando, uno es algo está disminuyendo, y el tercero en realidad es así. Por ejemplo, quiero alguna actualización. Por ejemplo, este valor podría ser de anterior, hace tres minutos o cinco minutos. Quiero que el usuario presione esta actualización ahora para agarrar el último valor. Este en realidad va a ser mi texto informativo. Tres colores, necesitamos más para este esquema de color. Ya hemos hecho este ejercicio. Tenemos construir este esquema de color usando solo un color azul, y ahora todas estas son variaciones diferentes. Si miras de cerca por aquí, puedes ver así es como se han presentado todos estos colores. Este color más oscuro es para el valor más importante. Entonces tenemos este color azulado pálido. Queremos que sea fácilmente legible o legible sobre este fondo azulado pálido. Este fondo pálido muy brillante, azulado, queremos que sea muy fácil de leer. Si miras de cerca en esta pantalla, puedes ver este 1.5 o este color rojo oscuro, es fácilmente legible. Si vas a este valor por aquí, pasemos a este HSB. Es 73 por ciento de saturación, saturación muy alta, y 85 por ciento del brillo. Si quieres un color más oscuro, puedes ir más oscuro, pero creo que es realmente visible en este momento. De igual manera, por aquí, este verde en realidad sobre este fondo de color negro, esta pantalla y esta pantalla es diferente. ¿ Por qué es eso? Porque en un tema claro, necesitamos un poco de color más oscuro y en tonos más oscuros o fondos pálidos o colores oscuros, necesitamos un color que tenga más luminancia, más luz emitiendo de él. Queremos que sea diferente del fondo. Se puede ver este fondo es azul, muy aburrido. Este color es en realidad, déjame mostrarte. Tiene 98 por ciento de saturación y 90 por ciento de brillo, lo que color muy brillante, muy saturado. Si miras por aquí, este color tiene el mismo tono, 148, pero en realidad tiene 98 por ciento de saturación, pero el brillo es de 70 por ciento. Necesitas usar tu cabeza de diseñadores. No necesitas quedarte con los colores que este color va a funcionar bien en cada fondo. Trata de usar la cabeza. Este color por aquí, si lo miras, en realidad es 20 por ciento de saturación y 61 por ciento de brillo. Pero si miras este color, es 7 por ciento saturado y 60 por ciento de brillo. En realidad, estoy usando un color muy grisáceo por aquí porque el fondo ya es muy oscuro. Necesito tener algo diferente. Este esquema de color, a pesar de que parece que es la versión lite de este esquema de color, pero son diferentes. Ahora bien, si miras este color por aquí, parece un poco muy afilado y creo que necesitamos hacerlo un poco más ligero. Pongamos 100 por aquí. Se ve bien. Vamos a reducir el brillo y voy a ir a algún lugar por aquí. Ya lo voy a agregar. También para este. Asegúrate de que estos se puedan ver fácilmente y tengan un buen contraste con el fondo. Vamos a hablar de accesibilidad al color más adelante. Pero ahora mismo quiero agarrar esta sencilla regla, que necesitamos diferente más contraste cuando quieras tener alguna elegibilidad en tus colores. A lo mejor algo por aquí. Es muy afilado o vibrante. Voy a reducirlo por aquí, en algún lugar. A lo mejor en algún lugar. Yo quiero que sea un poco más ligero, tenga más brillo. Voy a tocar la parte superior por aquí. Probemos este color. Se ven muy similares, pero no son similares. Esto se ve genial. Por aquí se puede ver este es un tono muy oscuro del mismo color. Tiene 73 por ciento de saturación y 85 por ciento de brillo. Si quieres oscurecer más, puedes presionar el 80 por ciento por aquí, y también por este, 80 por ciento por aquí. Por qué estoy usando 80 por ciento de brillo, porque, el fondo es totalmente blanco. El fondo es lleno de brillo y es del 100 por ciento, así que estoy usando luz. Diferencia del 20 por ciento, si recuerdas la regla, te mostré que estoy usando 100 por ciento para este. Perdón. Entonces 80 por ciento de brillo para este y éste en realidad es blanco, lo que es 100 por ciento de brillo. realidad, la diferencia de 80 y 100 es de 20 por ciento. Asegúrate de tener buena diferencia entre estos dos. Veamos qué tenemos por aquí. Aquí tenemos 70 por ciento y es 100 por ciento, 70, 100, 70, 100. De igual manera, si miramos aquí, tomemos este trasfondo. Tiene 31 por ciento de brillo, y éste tiene 100 por ciento de brillo. Esto es bueno. Este es en realidad todo el esquema de color. Aquí el esquema de color es un poco diferente porque aquí tenemos fondo claro, tenemos fondo oscuro. Mira este texto de billetera digital. Es un poco más oscuro, tono opaco de azul. Aquí tenemos un poco más ligero, una versión más brillante de esto. Porque tenemos fondos más oscuros. Es necesario tener eso en cuenta. De igual manera, aquí tenemos algunos azules grisáceos, y aquí tenemos azules grisáceos, pero son un poco más ligeros en la naturaleza. No son aburridos así. Siempre que estés construyendo algún esquema de color, necesitas tener algunos mensajes de estado como este. El truco para crear estos es muy fácil. Déjame mostrarte. Agarremos este color por aquí. Muévete afuera, hazlo un poco más grande. Aquí está nuestro color base. Vamos a replicarlo y te voy a mostrar un truco para crear color rojo, por ejemplo. Tenemos este color. Lo que voy a hacer es, voy a entrar en este verde. Ahora, ya tenemos el tono verde. Podemos movernos y tal vez podamos tener algo como esto. El tono es igual, acabo de cambiar la saturación y el brillo. Por lo que tenemos color verde. Añadamos un color más, que va a ser nuestro amarillo. Voy a ir a este color amarillo, pero puedes ver ahora mismo no necesitamos este amarillo, necesitamos un poco más claro, amarillo, tal vez algo por aquí. Ahora mismo, no se ve muy bien porque está sobre un fondo gris. Si lo pones sobre un fondo negro oscuro, podría verse mejor, pero necesitas experimentar con él. Si no te gusta este color, puedes cambiarlo. Añadamos color rojo por aquí. Voy a ir a este rojo, o puede ser esto o esto, cualquiera que sea la coordenada que quieras. Voy a ir con algo de este color rojo rosado. Hagámoslo un poco oscuro. Estoy tratando de cambiar la luminancia de estos colores, estoy tratando de igualarlos. Este color, este color y este color, se ven casi igual. El color azul siempre es más oscuro. Si quiero cambiarlo, puedo cambiarlo así. Este se ve muy bien también. Voy a crear uno más para este amarillo porque no me gusta mucho. Yo quiero que algo sea así. Este me está viendo mejor. Puedes probar estos colores y luego puedes empezar a agregarlos o fijarlos. Ahora mismo, tenemos este amarillo, que es de 50 tonalidad, 27 y 100. Es más hacia un poco de color naranja. momento he seleccionado esta que es 63. Si quieres acercarte más a éste, voy a ir con este 50, 52, y voy a aumentar un poco más mi brillo. Este es el color que vamos a necesitar para nuestros mensajes de estado. Esta es una técnica muy sencilla para crear colores que vamos a seleccionar nuestro color base y mover justo este deslizador en rojo, verde, y amarillo o naranja. Eso va a cuidar todos estos problemas que tenemos cuando estamos creando esquemas de color. Una cosa más que debes considerar es eso, qué rubro va a resaltar y qué ítem está liquidado? Esto es muy importante. Algunas cosas no son importantes, como otros elementos de tu pantalla. Este texto es muy importante. Este mensaje de que está aumentando o disminuyendo. Esto es muy importante. Esto es sólo en información, billetera digital. Nadie lo va a mirar primero. De igual manera, este, queremos que sea un efecto sutil. No queremos que esté agarrando la atención. No intentes usar toda la atención agarrando colores por toda la pantalla. Esto es, se puede decir, desastroso. He visto a muchos diseñadores novatos o principiantes que tienden a usar toda la atención agarrando colores de pantalla por todo el lugar, y esto va a arruinar el propósito del diseño de la información. En realidad, estamos diseñando para que la información se muestre así. Tengan eso en mente y les voy a compartir todos estos archivos. En realidad son archivo Adobe XD, tal vez una, dos escalas. A lo mejor pocos archivos de boceto, voy a incluir eso en mi curso también. Si tienes alguna pregunta que hacerme en esta lección, agregamos los colores de estado que puedes ver por aquí, y eso va a terminar con nuestro esquema de colores. Si tienes alguna pregunta me puedes hacer. Añadiré algunos consejos y trucos más a esta lección y a este curso. Hasta entonces, nos vemos pronto en la siguiente lección. 22. Esquema de colores de la tablón de: En esta lección, voy a hablar sobre el diseño del tablero. Ahora, los colores utilizados en el diseño de dashboard es que puedes ver un poco diferente a tu diseño web normal, o tu diseño normal de logotipo, o diseño de branding. Siempre que estés diseñando dashboard o algunas gráficas o algo así, por lo que siempre que quieras mostrar mucha información en espacio pequeño, necesitas muchos colores. ¿ Por qué? Porque tenemos diferentes actualizaciones, tenemos diferentes mensajes de error, tenemos diferentes mensajes de información, tenemos diferentes iconos de campana, donde tenemos actualizaciones nuevas y próximas o alguna indicación de que algo ha sido cambiado. A lo mejor estoy fuera de línea o en línea así que hay otro estado de que este usuario está en línea o fuera de línea. En realidad hay como cinco o seis estados diferentes. Ahora si estás usando un mensajero o algo así, podrías haber visto que las actualizaciones del lado derecho, esa fecha y hora que envié un mensaje a esta persona, en este momento o si ha visto o no mi mensaje, si ha leído mi mensaje o si está escribiendo o no. Estos son, creo que como cinco o seis mensajes de estado diferentes para cualquier diseño de tablero. Te voy a mostrar cómo puedes usar un esquema de color el cual pueda encontrar todos estos problemas, y además, debes considerar una cosa más que es la accesibilidad o el contraste adecuado de tus colores. Vamos a cavar, así que empecemos. Este es un tablero que diseñé en Adobe XD, y esto es sólo un maquillaje rápido. En realidad copié el diseño de otra persona, así que solo para ilustrar lo que en realidad quiero decir. Se puede ver en el lado izquierdo, tenemos navegación muy oscura donde tenemos todos los elementos de navegación, diferentes secciones de nuestro dashboard “inbox”, “importante”. Después tenemos “canales” luego hay pocas cosas dentro de los canales. Se trata de cuatro canales, diseño de interfaz de usuario, usabilidad, marketing , soporte, y también se puede crear un nuevo canal. Después hemos archivado artículos. Si miras este diseño, puedes ver que tenemos diferentes jerarquías. En el lado izquierdo tenemos diferentes canales, como si tuviéramos cuatro canales. El primer estado que verás por aquí es, vamos a acercar. El primero es este seleccionado, por lo que Estado Seleccionado es que en este momento se ha seleccionado este canal, y en el lado derecho, lo que estás viendo está alertado de esto. Puedes ver por aquí el diseño de la interfaz de usuario del título, por lo que el canal que has seleccionado es el diseño de la interfaz de usuario. Por qué estoy usando este color azulado claro porque el fondo es muy oscuro por lo que tenemos un tono un poco más claro del mismo azul oscuro en el fondo para ser utilizado como mensaje de Actualización de Canal Seleccionado. Quiero mostrarle al usuario que este canal ha sido seleccionado por lo que debe haber una forma clara de mostrar eso por lo que es muy importante. Segunda actualización que puedes ver aquí es que tengo cuatro mensajes nuevos en el canal de marketing. Para eso, he usado un color verde, así que en realidad, todo este esquema de color se basa en azul y verde. Es básicamente esquema de color análogo donde tenemos azul y verde. Están muy cerca el uno del otro, así que en realidad es básicamente verde cianish, por lo que es una mezcla de verde y azul en realidad. Este es un esquema de color análogo, los esquemas de color que los colores que están más cerca uno del otro, van a funcionar bien juntos. Estoy usando el color verdoso Cian y este color azul, y tenemos este tono oscuro de azul luego tenemos azul muy prominente por aquí, que es azul muy afilado para los iconos, entonces este canal es en realidad un poco de color azul opaco, para que conozcas el taladro de que esta es en realidad la misma técnica, contraste opaco u oscuro de oscuro y claro, y pálido, y agudo. Es así como he creado toda esta sección. Ahora puedes ver cada color tiene algún propósito, así que puedes ver por aquí, si nos fijamos en esta sección, puedes ver este nuevo canal, lo siento, este nuevo canal es un botón, por lo que en realidad realiza algunos acciones. Es el color es más nítido que todos estos, lo que todos son blancos y esto es todo azul junto con este ícono. Ahora lleguemos al punto donde tenemos estos dos colores diferentes, que es verde y este rojo. Ya te dije que necesitamos muchos más colores y un diseño de dashboard que en cualquier diseño web o cualquier otro diseño de app porque tenemos que mostrar muchos estados. Aquí tenemos, otra vez verde, es de un color verde muy afilado. Creo que está más cerca de ésta, pero es más específico de esta sección por aquí, que es que estoy en línea o este usuario está en línea. Entonces tenemos este rojo, que es muy común porque ya tenemos a este patrón incorporado en nuestras mentes que este rojo es en realidad la actualización, por lo que la actualización de icono de campana. Vengamos a esta sección por aquí. Aquí necesitamos un tono de color más oscuro por aquí en el título del texto, y luego un poco de color gris oscuro para el texto. Ahora se puede ver que me he atenuado esta vez porque no es tan a menudo importancia en este momento. El mensaje más reciente está en la parte inferior, por lo que se puede decir este momento, en realidad he tratado de reducir su opacidad. Déjame ver si es opacidad. No, no estoy usando la opacidad en realidad, así que en realidad es opacidad. Este es otro truco que te voy a mostrar en otra lección ahora mismo. Tan solo asegúrate de que obtienes los colores y cómo los estoy aplicando y cómo los estoy usando. Sombra más oscura, menos oscura para el texto, más oscura para el título, menos oscura para el texto. De nuevo, se puede ver por aquí fondo claro para este tipo de caja, luz, fondo azulado y muy aburrido si voy a la frontera por aquí. Vayamos a la frontera. Ya puedes ver si miras los colores por aquí, el color de relleno, que está en el medio, es en realidad, déjame mostrarte. Usa la saturación y más brillante a 10 tonalidad, 5 por ciento de saturación y 99 por ciento de brillo. Pero si miras el borde, es casi el mismo matiz pero la saturación es un poco alta, y el brillo es un poco bajo. Es solo un poco de sombra más oscura del mismo “relleno” que estoy usando. Se puede ver que este efecto es muy sutil, pero se nota en cuando se está diseñando algo como este IU, o este Messenger, o chat box, o algo así. De igual manera, el mismo efecto que he aplicado en el botón de envío y este texto es un poco más oscuro porque necesitamos mucho buen contraste con el fondo. Pasemos a este punto por aquí, que es nuestro mensaje por aquí. La parte más difícil donde no pude igualar diferentes colores, tuve que conseguir este color amarillo con mucha lucha. Es básicamente un color naranja amarillento y está en el tono 51, 8, y 100. Si notas que este color de texto de color es en realidad un color marrón, por lo que no es gris, es un color un poco marrón porque marrón, naranja, y amarillo, realidad están más cerca el uno del otro porque el marrón es en realidad el más oscuro versión de este naranja y amarillo es muy claro naranja, blanquecino, de color pálido. Es así como hice la combinación entre ellos. Este es el ícono de aquí. También es de color marrón oscuro. Este texto de aquí también es de color marrón oscuro. A la izquierda, acabo de poner color naranja y un borde de color naranja alrededor, por lo que actúa como una cosa separada por aquí. Si alguien quiere cerrarlo, puede tocar o hacer clic en este ícono y eliminarlo. De igual manera, tenemos búsqueda aquí. Esto está en la función superior por aquí. Sólo hay dos funciones que se pueden hacer, ya sea que se puede escribir por aquí o buscar por aquí. Así es como en realidad está funcionando todo el esquema de color. Color nítido sobre fondo oscuro, y color blanquecino opaco, se trata de cuatro canales que puedes ver por aquí. Entonces tenemos este nuevo canal color azul muy brillante para la acción por aquí, y eso es todo. Traté de crear otra variación. Se puede ver esto es de color azul un poco más claro y también estos nuevos canales de color son diferentes. También probé diferente combinación de verde y azul por aquí, así que aquí el botón de envío es verde en lugar de azul, así que vamos a alejar y déjame mostrarte ambos esquemas de color. Aquí los tenemos. Vamos a acercar. Se puede ver de un vistazo si aprietas los ojos aquello que áreas son muy prominentes. Este botón Enviar es muy prominente cuando lo miras desde lejos. También este mensaje de error o esta información se ve muy importante por aquí. Entonces se pueden ver los colores en ambas actualizaciones, 0-4-0-4, se ven muy prominentes. Una vez que alejes tu diseño, verás lo que son las cosas realmente importan por aquí y qué esquema de color se ve genial. Yo votaría por este esquema de color de izquierda porque se puede ver si se mira el nuevo canal, es muy visible, muy brillante en esta zona por aquí en el esquema de color izquierdo en lugar del correcto. Tu asignación estará llegando en la siguiente sección para crear un dashboard o tal vez te voy a dar este para colorearlo por mí, y esta será tu tarea. Espero que hayan disfrutado de esta lección de que cómo en realidad aplicamos esquema de color para los cuadros y cómo los diferentes esquemas de color en realidad coinciden entre sí en este tipo de cuadros de mando. Si tiene alguna pregunta, hágamelo. Pasemos a la siguiente lección. 23. Fabricación de esquemas de color accesibles: En esta lección, vamos a hablar de Accesibilidad al Color y este es un tema muy importante desde dos perspectivas. Vamos a hablar de la ceguera del color, y vamos a hablar de la relación de contraste de color. Estas son las dos cosas que van a importar cuando estás diseñando con colores y contrastando diferentes colores entre sí. Lo primero es que queremos que la información sea fácilmente vista, reconocible y fácilmente leída por el usuario. El contraste entre el fondo y el primer plano debe ser bueno, por lo que cualquier usuario, se puede decir una persona normal, él o ella puede leer fácilmente ese texto. Pueden juzgar fácilmente lo que está escrito o lo que hace este botón. Aquí, tenemos el esquema de color que previamente diseñamos en lecciones anteriores, y este es un esquema de color monocromático, diferentes tonos de blues, y en realidad estoy mezclando el tono más oscuro con tonos claros y el tonos claros con sombra más oscura. Se pueden ver todos los diferentes colores, el texto escrito por aquí, el texto por aquí que está escrito en estos colores, o sobre estos colores, es básicamente del mismo esquema de color. El color más oscuro y la luz más colores se utilizan para el texto, y los estoy variando en diferentes fondos, y se puede ver que tenemos diferentes relaciones de contraste por aquí así que en este momento estamos hablando de relación de contraste. Una buena relación de contraste está por encima de tres. Ahora mismo si miras la izquierda, la primera combinación, que es de color azul pálido, que es éste, y este azul, nuestro principal azul primario, realidad está fallando, entonces, la relación de contraste no es buena para el texto. En todos los demás del lado derecho, se puede ver que tenemos buen contraste. Podemos usar estas combinaciones de forma segura, pero la primera en realidad está fallando, por lo que necesitamos arreglarlo. Ahora, un poco sobre lo que en realidad son los estándares de relación de contraste de color triple A y doble A. triple A es básicamente para texto más pequeño, por lo que, es muy buen contraste. Si tienes triple contraste A, como tenemos por aquí, 7.57 y 8.01. Este es en realidad muy buen nivel de contraste, y para texto más pequeño, si estás diseñando una aplicación móvil y tienes un mensaje muy pequeño y 14 puntos, o tal vez 12 puntos, texto muy pequeño, quieres que tenga un buen contraste ratio de triple A. Si estás diseñando algo más como un botón muy grande, y tenemos como texto de 18 puntos en él, entonces podemos usar con seguridad doble A estándar también. Esta es la diferencia entre estos dos. También para logotipos y para las cosas que no son importantes. Por ejemplo, si el botón está desactivado, si esa funcionalidad no está presente en tu pantalla o en tu panel, debes considerar que aunque tu relación de contraste falla por eso, no importa, porque siempre puedes usar tres o dos relación de contraste para eso porque eso está deshabilitado. El usuario no va a usar esa funcionalidad. Para cualquier otra cosa, cualquier botón pulsable, cualquier elemento tocable, cualquier navegación desplegable o algo por el estilo, necesitas al menos el doble estándar A. Estas son diferentes relaciones de contraste que vamos a ir en la siguiente lección sobre diferentes herramientas que uso y cómo en realidad uso diferentes herramientas para crear estas relaciones de contraste y comprobarlas. Entonces también vamos a hablar de lo que es una herramienta diferente y sencilla para comprobar tu accesibilidad de color para personas daltónicas, que es el siguiente tema. Aquí tenemos ceguera del color, que es, creo que deuteranopia muy común. El principal problema con esto es que podrían no ser capaces de distinguir entre rojo y verde. Siempre que estés diseñando para la accesibilidad del color, quieres un esquema de color accesible que cualquiera pueda ver lo que está sucediendo. O bien vas a acompañar estos colores con algunos símbolos o iconos, por ejemplo, error, si tienes algún error. Se puede mostrar algún signo de exclamación con icono, algún icono el cual va a mostrar al usuario que esto es un error. Además, con el éxito, se puede mostrar la marca de verificación o marca de verificación para que el usuario pueda ver que este es en realidad el mensaje de éxito. Una cosa más, si nos fijamos en estos dos colores, rojo y verde, verde es un tono un poco opaco o más oscuro y el rojo tienen más saturación, más contraste, más luminoso, más luz emitiendo de él. Trata de diferenciar entre rojo y verde de esta manera. Uno va a ser más dominante, más luminosa, emitiendo más luz, y uno va a ser un poco aburrido. Porque cada vez que vean esto, van a ver algunos colores naranja pálido, amarillento, ambos, y no van a poder distinguir lo que está sucediendo. Entonces o usa iconos con estos o intenta usar diferentes tonos, tal vez puedas decir niveles de saturación, uno va a ser un poco aburrido , color oscuro, uno va a ser un color brillante, rojo, algo así. En la siguiente lección, les voy a mostrar cómo uso diferentes herramientas, herramientas en línea para crear esquema de color accesible que va a funcionar para la mayoría de los usuarios, y no tendrán problema en leerlo todo, juzgando lo que está pasando. Pasemos a la siguiente lección y veamos cómo podemos crear esquemas de color accesibles. 24. Herramientas para la accesibilidad de el esquema de color: Por lo que la primera herramienta que vamos a discutir sobre accesibilidad al color es contrast-ratio.com. Voy a compartir todos los enlaces para estos diferentes sitios web o herramientas que uso. Lo que hacemos aquí es que vamos a pegar nuestros colores siempre que necesitemos comprobar la relación de contraste, vamos a comprobar pegando nuestros colores por aquí. Vamos a ir a Photoshop, por ejemplo, tengo este color. Voy a copiar su valor hexadecimal y pasemos a, otra vez por aquí. Quitémoslo y peguémoslo aquí. Ahora mismo con color blanco, tiene una relación de contraste de 1.31, que está fallando el estándar así que cambiemos eso. Vamos a usar este color encima. Voy a agarrar su valor hexadecimal, copiarlo. Puedes usar eso en Sketch o cualquier software que estés usando en este momento, es factible para mí usar Photoshop. Tenemos la relación de 7.57, y aquí está en realidad está mostrando cómo se verá, en este fondo. De igual manera, podemos intercambiar colores para ver ambos efectos. Se puede ver, esto se ve genial 7.57 es un triple A, que también va a funcionar para textos pequeños. De igual manera, también me encanta esta herramienta que es, colorable.jxnblk.com y no sé, de todos modos. Vamos a usar esto de la manera similar, y aquí vamos a hacerlo, realidad estoy usando el mismo esquema de color, que en realidad mejoramos por aquí. Déjame mostrarte la siguiente diapositiva. Se puede ver por aquí este color en realidad mejoré, y lo que hice es aumentar el brillo y también la saturación de este color, y en realidad traté de usar un tono más oscuro de éste. Usé tono de color más oscuro. Creo que fueron 25, algo así. Vamos a copiar esto y lo vamos a pegar por aquí, como nuestro fondo, y vamos a utilizar este color como nuestro color de texto. Usemos este. Tenemos 4.7, así que lo que hice es dejarme mostrarles aquí con estos deslizadores. Lo que hice es que en realidad quería hacer este color de texto un poco más oscuro. Lo que hice es aumentar un poco de saturación, y vamos a reducir la ligereza a por aquí, 0.22 así. En realidad está disminuyendo el brillo así que si quieres, puedes ver cada vez que estoy tratando de disminuir el brillo, en realidad está teniendo más contraste. Si quiero mucho contraste como AAA, puedes ver que necesito reducir el más brillante, y este en realidad va a ser el valor por aquí. También puedes ver que cuando trato de disminuir la saturación, tal vez no quiero un color muy saturado como este. Yo quiero que sea por aquí en algún lugar así. Es así como puedes jugar con él, puedes arreglar los colores. Si quieres más contraste entre ellos, puedes jugar con saturación y ligereza. Se puede ver si trato de aumentar la ligereza, es AA. Cuando voy a ir por debajo de tres, va a fallar, ¿de acuerdo? Esta es otra herramienta. Tercera herramienta, que realmente me encanta es que simplemente pasa a conseguirla por aquí, contrast-grid.eightshapes.com. Esta herramienta es realmente genial. Déjame mostrarte. Lo que en realidad están haciendo por aquí, es que estos son todos los diferentes colores para mi esquema de color. Tengo naranja, tengo azul oscuro, tengo azul medio, tengo color azul grisáceo oscuro para texto. Esto es de nuevo para los textos. Estos son pocos colores claros más, hojas claras y se puede ver a la izquierda por aquí, filas y columnas. Lo que estoy haciendo aquí es la primera columna y fila es para F, que es de color blanco. Entonces tenemos el siguiente color el cual va a ser F0, F6, FC, por lo que este es de nuevo un color azulado pálido. puede ver lo que realmente hace es en realidad, es cruzar ambos colores y probar todos los colores de texto diferentes encima de diferentes fondos. Todos estos colores se prueban en todos estos colores en realidad. Comprobación cruzada todas estas. Se puede ver, por ejemplo, si vas por aquí en este bloque, este color está en realidad en este fondo por aquí, F0, F6, FC, por lo que es una buena combinación y está mostrando problema de contraste 5.9. Significa que si trato de mezclar 546067 con F0, F6, FC, van a ir bien, pero no para texto más pequeño. Si quiero ir por texto más pequeño, puedes ver necesito considerar esta combinación que es, 15303F con este F0, F6 FC. Significa que necesitamos tener algo más de contraste. Esta combinación tiene AAA. Esto está fallando, esto está fallando. DNP significa fallar. Está mostrando, no pasa. Significa que no pasa el estándar AA o AAA. De igual manera, por aquí se puede ver que esta naranja está casi fallando en todos los fondos. El único más grande que va a pasar es en realidad éste, este tono más oscuro de negro azulado. También por aquí, que es de color azul AAA, AAA, entonces otra vez, este azul afilado AA. Esta es en realidad una combinación de cuadrícula completa de tus colores accesibles que estos colores realmente van a trabajar juntos. Aquí está el índice, solo necesitas pegar el color en cada fila diferente y con la coma, puedes usar el nombre del color. Si quieres, por ejemplo, si yo tuviera esto, puedes ver que tengo carbón y todo esto. Una cosa más es que también puedes copiar HTML de cuadrícula, y CSS si quieres mostrarlo en algún lugar. También puedes aumentar el tamaño del bloque si quieres gustarte este. Se puede ver claramente qué texto está funcionando en realidad, y cuál no está funcionando. Por lo que AAA es cualquier cosa por encima de siete, AA es 4.5 más, o a veces AA18 que es para texto más grande, en realidad es tres más. Entonces si ves u oyes, AA18 significa que puedes usar este esquema de color pero con un texto grande. Por lo que debe estar por encima de los 18 puntos, algo así. Si quieres leer al respecto, puedes ver aquí es en realidad, el estándar WCAG20 para Contraste Mínimo. Tienen mucho texto que leer si quieres leerlo, adelante. En el último, voy a hablar de la herramienta que utilicé para personas ciegas de color o con problemas de color que tienen dificultad para juzgar de qué color es. Puedes descargar este Color Oracle.org y descargar la app para sus Windows, Mac o Linux. Permítanme mostrarles un ejemplo. Entonces aquí tengo este diseño. Ahora, ya estoy ejecutando esta app así que puedes ir por aquí. Voy a hacer clic derecho, y voy a mostrar esta deuteranopia más común, este deterioro del color. Voy a seleccionar esto, y ver cómo van a quedar mis colores. En este momento, se puede ver su vista o su versión de ver todos estos colores. Puedes ver si te ves correctamente en este color amarillo y este rojo, no hay tanta diferencia, este naranja o este color rojo. Necesitan tener alguna separación. Entonces esto es un poco más oscuro, esto es un poco más claro. Trata de asegurarte de que algo así suceda. De igual manera por aquí, solo están viendo la mayoría de los colores que son tonos más oscuros y claros. No pueden distinguir entre estos colores, así que si hago clic aquí, esta es de nuevo la vista. Tratemos de cambiarlo por otra cosa. Probemos un poco de color rosa por aquí. Usemos un poco de blanco por aquí. Veamos cómo se ve cuando enciendo esto. El mismo, creo, el punto principal detrás de todo esto es que hay que tener algo que distinguir entre diferentes niveles de color. Un color es un poco más oscuro, el otro es un poco más claro. Esto les va a ayudar. De lo contrario, en su mayoría ven la mayoría de los colores que van a mezclar juntos. Por ejemplo, esto en su mayoría es rojo y naranja y amarillo, o verde. Esto va a ser un montón de problemas para ellos. Seleccionemos otras discapacidades como, protanopia, es raro pero tiene algunos problemas. Se puede ver ahora esto es casi similar a eso, pero esta pantalla les está luciendo muy amarilla. Seleccionemos otra, que es la tritanopia. Esto es diferente, y se puede ver que en realidad están viendo este color naranja como el color rosa y el color rojo es visible. Todos los demás colores son visibles, pero el verde tiene algunos problemas. puede ver que se muestra como un color azul. Entonces, esto es todo. Trata de revisar tus colores en una escala de grises y puedes ver que tenemos diferentes niveles. Trata de ver que tu diseño debe tener diferentes niveles de escala de grises. Escala de grises significa que algo es más brillante y ligero que el otro. Uno es oscuro, el otro es claro, otro es oscuro, el otro es claro. Esto realmente va a funcionar para estas personas. Segunda cosa, déjame mostrarte otro ejemplo. Entonces aquí hay otro ejemplo de una app. Se puede ver aquí tenemos diferentes Bitcoins, como 22 por ciento de incremento o disminución. Déjame mostrarte cuál es el problema en realidad en este diseño. Entonces si voy a este deterioro de visión más común, se puede ver este símbolo más y menos es lo único que está diferenciando entre estos. Entonces si puedes mirar 1.5 flecha hacia abajo, esto les va a ayudar que esto en realidad está disminuyendo. En este caso, no pueden decir con el vidrio que esto está disminuyendo o aumentando. Si miras esta zona, uno es un poco aburrido, y uno es un color un poco agudo. Déjame mostrarte, esto es un poco diferente. Entonces cuando miran por aquí, se puede ver más amarillo brillante y esto es aburrido. Esto les está mostrando claramente que esto tiene algún incremento, algún beneficio, y esto tiene alguna pérdida por aquí. Pero por aquí, es un poco diferente. Si miras de cerca, puedes ver, déjame mostrarte. Hay una diferencia de, se puede decir oscuridad y ligereza en ambos colores, rojo y verde. Trata de usar eso para diferenciar. Además, intenta acompañar con diferentes iconos. Podemos usar esta flecha abajo y flecha arriba para mostrar a estas personas o a estos usuarios que, esto en realidad significa esto. Porque, todo lo demás está bajando a la exposición a la información. En realidad nos estamos comunicando con nuestros diseños. En realidad estamos mostrando al usuario que este color significa esto. Nos estamos comunicando mediante el uso de colores, por alineación, por diferentes iconos. Esto es en realidad lo que hace un diseñador. Se comunican y muestran información de manera visual, de mejor manera, y la presentan al usuario para que él o ella la pueda entender. Estos son pocos problemas que quería mostrarles respecto a este deterioro y a las herramientas que estoy usando. Para comprobar diferentes relaciones de contraste y todas esas cosas. Trata de crear todos estos esquemas de color como este, y estarás en buenas manos. Asegúrate de que tus colores tengan buena relación de contraste y no llenen el contraste principal que he visto a muchos diseñadores que no conocen de este tema, y en su mayoría están creando muchos shorts de regate o [inaudibles] cartera. Están creando aplicaciones móviles que en realidad tienen ratios de contraste fallidos. Entonces si tienes alguna pregunta que hacerme, te veo en la siguiente lección. 25. Plugin de Stark para la accesibilidad del color: Hoy voy a compartir contigo un plugin muy bonito el cual puedes usar para comprobar tu accesibilidad de color, relaciones de contraste de color, y daltonismo. A muchos diseñadores, he visto que no saben o no les importa mucho la accesibilidad del color o el ni siquiera se molestan en probar sus fondos de color y relaciones de primer plano que este color sobre este fondo, si debe ser un buen contraste, si será visible o legible en diferentes tamaños de pantalla o pantallas diferentes. Te voy a mostrar un plugin muy bonito el cual está disponible para aplicaciones Adobe XD y Sketch. Puedes usarlos y vamos a ver qué es eso. Aquí tenemos esto, este es Stark y este es un gran plug-in. Puedes usar eso para Adobe XD y para Sketch y en realidad prueba diferentes estándares de relaciones de contraste como AA, AAA. AAA es para texto pequeño y esta es para texto grande, 4.5. Este es en realidad el punto dulce, AA tu texto debe estar al menos más allá de este estándar. Para texto muy pequeño, necesitas pasar esta AAA. Además, cuenta con simulaciones daltónicas, por lo que puedes probar color para personas daltónicas o usuarios. Hay algunas características más que vienen como sugerencias de color y exportación sin fisuras. Veamos y probemos en Adobe XD, entonces voy a cambiar a mi Sketch en mi Mac y vamos a ver eso desde ahí. Ahora, ahora mismo estoy en Adobe XD y puedes ver si vas a este menú, estoy encendido en este momento en Windows, puedes ir a Plug-ins. Puedes hacer click en Discover plugins, y puedes buscar Stark por aquí y ya está instalado. Si no está instalado, basta con dar click aquí y se instalará. Una vez instalada, puedes ver aquí tengo dos botones, déjame acercar. Este color es bastante visible para mí en este fondo pero si lo selecciono, ambos y voy a Plug-ins y Stark y Check Contrast, puedes ver que está fallando por aquí. El ratio de contraste es de casi 3:1, 3.34 que es muy bajo para mí. Ahora, vamos a probar el segundo. Voy a seleccionar ambos y de nuevo voy a ir a Plug-ins y Stark, Check Contrast, y ahora se puede ver que está pasando texto casi normal 4.5 ratio, lo cual es bueno, para textos grandes está pasando ambos. Creo que esto son bastante buenas combinaciones de colores, así que si voy a ir con mis botones, voy a usar estos dos colores en lugar de estos dos. Trata de asegurarte de que estás usando colores que tengan buenas relaciones de contraste y que superen todos los estándares de color. Probemos la otra herramienta que tiene. Seleccionemos estos y voy a probar la simulación daltónica. Aquí tenemos simulación daltónica, vamos a mantenerla así y voy a usar esta. Creo que este es el más popular, 4-5 por ciento las personas tienen esta deuteronopía. Lo que pasó en realidad, para que puedan ver este color azul. Se puede ver que este color es un poco diferente, pero este color también es diferente, es casi morado. Veamos otra, tritanopia, esto se ha vuelto verde. Es así como lo usas en Adobe XD. Ahora voy a cambiar a mi herramienta Sketch y te voy a mostrar la pantalla y cómo funciona este plug-in en Sketch. Ahora puedes ver que estoy ahora mismo en mi iMac, y este es mi Sketch, y ya he descargado e instalado ese plug-in Stark. Por lo que sólo vamos a ir a Plug-ins y Stark y Show Stark. Esta es en realidad la pantalla que obtenemos. A ver, vamos a usar este iPhone 8. Déjame que lo haga un poco más grande así. momento está en este modo de daltonismo. Se está simulando este, deuteranopia y también se puede probar otro. También puedes exportar esta vista por lo que hay pocas funcionalidades más disponibles en esta. Si quieres probar las relaciones de contraste de color, puedes ver aquí tenemos contraste de color. Seleccionemos este y comprobemos el contraste, haga clic aquí, seleccione dos capas que contengan [inaudible]. Necesitamos dos capas. ¿ Qué está pasando? Voy a seleccionar éste y éste, vamos a comprobar el contraste. Esto en realidad son estas dos capas y se puede ver que me está mostrando que la relación de contraste es de 7.06, por lo que está pasando todas las relaciones de contraste diferentes. Ahora mismo como puedes ver estos colores no son los mismos, que te mostré en mi Adobe XD, estos son colores un poco diferentes. Si pruebo lo mismo para estos dos, tomemos estos dos y comprobemos el contraste. Va a fallar a la mayoría de ellos. Es sólo bueno para texto grande, que es, creo que en realidad más de 18 o 19 píxeles, o 18 puntos, supongo. Este es el 3.34, creo que es muy bajo, al menos debería pasar éste. Así es como usas Stark plug-in en tu Sketch, por lo que todo se trata de usar el plug-in Stark en el software Sketch. Espero que hayan aprendido algo valioso en este video, nos vemos pronto, en el siguiente video. 26. Esquema de color del proyecto con propósito: Aquí hay otra asignación y se trata de crear un esquema de color basado en un tema de color. tema del color es básicamente lo que hace la empresa y cómo la empresa ha utilizado algunas palabras clave que te van a ayudar a definir lo que esa empresa realmente [inaudible] con su esquema de color. Aquí está su asignación. SecureDot es una firma de seguridad en línea, construye un esquema de color profesional y fuerte que refleje lo que hacen. Lo primero es que son empresa de seguridad, están en línea. Aquí las palabras clave son seguridad, profesional, y fuerte. Intenta usar picular.co o cualquier otro esquema de color. Lo que quiero que hagas es, vas a presentar este esquema de colores junto con esta pantalla. ¿ A qué esperas? Empieza a crear esta asignación ahora. 27. Magia de las diferencias de colores sutiles: En esta lección, vamos a hablar de un secreto muy simple del diseño de la interfaz de usuario, que son diferencias sutiles. Ahora te voy a mostrar cómo puedes manejar tus diferencias sutiles, diferencias muy ligeras en tus colores y formas para crear una gran interfaz de usuario. Aquí como pueden ver tengo este mensaje muy sencillo. Acabo de crearlo en tan solo 10 minutos. Yo lo estaba creando justo ahora. Aquí como puedes ver, hay algunos problemas con esta pantalla. Una es que si miras esta zona por aquí, esta frontera, se ve muy fea. Lo que vamos a hacer es, se puede ver que hay un fondo muy pálido, este color relleno en la parte posterior, que también es este color muy brillante y pálido de este casi mismo tono. Lo que vamos a hacer es, necesitamos este color, vamos a empezar con este color como el borde. Lo que voy a hacer es, voy a empezar con el mismo color que tiene para el fondo, para la frontera así y luego lo que vamos a hacer es que vamos a reducir nuestro brillo al 90 por ciento. Si quieres este efecto, puedes ver borde muy asentado y si te alejas puedes ver que no te lo vas a meter en los ojos. Esto no te va a lastimar los ojos en realidad. Selecciona esto, hagámoslo más 80 por ciento. Ahora creo que se ve mejor al 80 por ciento, así que me voy a quedar con esto. Si lo desea, puede aumentar la saturación. Probemos 25 por ciento y hagámoslo 90 por ciento, algo así. Esto se ve bien. Voy a ir con este color. Redujamos un poco la saturación, 20 por ciento. De acuerdo, así que voy a añadir este color a mi esquema de color también, ¿de acuerdo? Esta es la magia de las diferencias sutiles. Acabo de crear un bonito look con diferenciador, con un poco de diferencia entre los colores. De igual manera, si miras estos textos, son del mismo color, el mismo negro. Lo que voy a hacer es, voy a seleccionar este color. Perdón, este textual aquí. Hay dos trucos para ello. Una, puedes usar esta opacidad e ir alrededor del 60 por ciento de sobrecarga, o como el 70 por ciento, por lo que el 70 por ciento se ve bien. Este es un truco muy sencillo. Muchos desarrolladores pueden usarlo, que pueden reducir la opacidad del mismo color al 70 por ciento. De igual manera, estos dos minutos atrás, no queremos que sea tan brillante, por lo que también lo vamos a reducir al 50 por ciento, algo así, o tal vez al 60 por ciento. Así es como en realidad la magia de las diferencias sutiles realmente funciona en nuestros esquemas de color o en nuestro texto. Esta es en realidad una versión un poco más mejorada de la misma. De acuerdo, entonces si quieres un efecto más, puedes agregar por aquí, puedes agregar el borde. Lo que podemos hacer aquí es, vamos a empezar lo mismo con el mismo color. Vamos a disminuir este brillo a 90 por ciento y saturación 80 por ciento. Hagámoslo 88 por ciento. Algo así. De acuerdo, entonces esto es interesante. Hagámoslo un poco más visible. Voy a hacerlo 85 por ciento, 82 por ciento. Esto se ve bien. Esta es otra forma de aumentar tu simpleza de tu interfaz de usuario y no quieres tirarla a los ojos de tus usuarios, ¿de acuerdo? Este es un truco muy sencillo que quería mostrarles chicos. Yo he visto a muchos diseñadores, ellos no saben esto o tienen alguna idea al respecto. Siempre que estés haciendo algo así, no intentes usar el mismo color para todo. Trata de reducir el brillo, así que ajústalo para crear IU de gran aspecto. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta que hacerme, nos vemos en la siguiente lección. 28. ¿Qué son las escalas de color?: En las lecciones anteriores, en los videos anteriores, me has visto creando diferentes tonos de un solo color. Los usamos principalmente en el tablero u otro diseño de interfaz de usuario. En su mayoría necesitamos, creo, tres o cuatro, dos carpas y dos tonos, al menos cuatro o cinco escalas diferentes de ese mismo color. Ahora, el tema es la escala. Te voy a mostrar y compartir contigo las herramientas en línea donde puedes generar. Puedes poner solo un color y crear muchos colores diferentes que pueden ir con eso, junto con diferentes tonos y carpas. Lo vamos a llamar simplemente la escala, la escala de color. Empecemos con este sitio web. Esta es una muy antigua. Lo he usado como hace tal vez cinco, seis años. Seguí usándolo. Simplemente ingresas un color, por ejemplo, éste. va a mostrar dónde está este color. Está por aquí. Aquí tenemos todos los tonos claros. Si bajas, puedes ver que se pone más oscuro, más oscuro y más oscuro. Siempre que estés diseñando algo, por ejemplo, algún dashboard si quieres conseguir todos los diferentes tonos y diferentes carpas del mismo color. Por ejemplo, quiero algún color más claro para mi fondo, o tal vez algo así. Me voy a mover como cuatro o cinco pasos o seis pasos, como tal vez este, voy a copiarlo y pegarlo y probar este junto con este color. Esta es una herramienta muy útil, 0to255.com. Entonces voy a pasar a algunas herramientas modernas. Este es creado por algún tipo creo Hihayk. Esta es una de las grandes herramientas que veo en línea. Aquí tenemos este color de inicio, este es color de inicio. Si quieres empezar desde otro color, deja que empieces desde otro color. Vámonos con éste. Añadamos un poco de azul por aquí. Yo le he dado este valor. Hagas lo que hagas, intentas poner algún valor por aquí, valor hexadecimal o usa estos deslizadores si quieres. Empecemos con este color. Vamos a mover un poco de rojo de aquí para hacerlo más azul. Esto se ve genial. De todas formas. Este es el punto de partida. Simplemente pega tu color por aquí. Déjame mostrarte lo que esto realmente está haciendo. En realidad está usando algunos ángulos y algún cálculo diferente para obtener otros colores. Estos son en su mayoría colores análogos del esquema de color para que coincida con este azul. Este medio es en realidad tu color, por aquí. Está usando cuatro pasos en el lado izquierdo, lado más oscuro y uno, dos, tres, cuatro, cinco, seis en el lado más claro. En realidad está generando 10 colores. Si quieres cambiar algunos valores, si quiero quizá siete. Nueve tonos claros. No 70. Yo quiero siete. Vamos a sumar nueve por aquí. Ahora, tenemos nueve tonos claros por aquí. Si quiero tal vez 10, puedes ver tengo 10 tonos diferentes por aquí. De igual manera, si quiero más valores oscuros, tal vez quiero seis valores oscuros. Voy a sumar seis por aquí. Ahora bien, este es el paso en realidad. Cincuenta por ciento, si quieres cambiarlo. Déjame cambiarlo al 15 por ciento. Se puede ver así es como está cambiando. De igual manera, si voy a este, pongo aquí 20 por ciento, puede ver que en realidad está haciéndolo ligero 20 por ciento cada vez. No necesitamos eso porque necesitamos muy bonito color brillante. Voy a usar 50 o tal vez 65 por ciento, algo así. A lo mejor quiero aumentarlo 85, usemos 85. Esta se ve genial. De igual manera para el más oscuro, voy a usar el 30 por ciento. No, 50 por ciento se ve bien. Aquí tenemos pasos. Entonces tenemos la ligereza y la oscuridad. Esto es básicamente control de brillo. Entonces tenemos el ángulo de tonalidad en tu rueda de color si recuerdas. No recuerdo de qué color hay por ahí. Pero lo que voy a hacer, realidad está variando tu esquema de color. A partir de éste, en realidad va menos siete grados en ángulos oscuros. Simplemente está cambiando un poco el color, el ángulo de tu tono un poco. De igual manera en este lado, está cambiando el ángulo a más 67 por ciento. Si quieres reducirlo, puedes ver ahora este es el color morado, que estaba muy cerca del tono azul sobre ruedas de color. Si sigues iterando, si quieres algún esquema de color por aquí, por ejemplo, puedes ver que este es un esquema de color totalmente diferente. He movido mi ángulo al 189 por ciento, usemos el 90 por ciento. El noventa por ciento es en realidad totalmente, se puede decir en un solo paso de allá. Diferencia del noventa por ciento. Usemos 180. Es así como puedes usar este ángulo de tonalidad de color claro para crear diferentes esquemas de color. Al igual que puedes ver, éste es en realidad análogo, colores muy cercanos, verde y blues. De verdad me gusta. Yo me voy a quedar con este. Colores más oscuros, me gusta esto menos siete grados, así que no voy a cambiarlo. De igual manera, la última parada es la saturación. Si quieres colores oscuros muy saturados, si recuerdas, te dije que siempre que vayas a hacer tu esquema de color más oscuro, lo vas a saturar. Más saturación y más oscuridad. De igual manera para los colores claros, voy a reducir su saturación. Voy a usar el 10 por ciento por aquí. Así es como mi esquema de color realmente está funcionando. Si quieres más saturación, puedes ver, puedes probar más saturación como ésta por ejemplo. Quiero un tema muy donde quiero un look muy verde o un look muy fresco, así que voy a aumentar la saturación por aquí. Usemos el brillo a 90 y la saturación es de 80 por ciento. Así es como está creando todo mi esquema de color. De verdad me encanta. Tiene seis colores oscuros y 10 colores claros. Puedes usar solo este para crear todo el esquema de color. No necesitas más colores. A lo mejor un poco de pastoreo. Esto en realidad se llama escala de color. A continuación se presenta esta herramienta de lift design color box. Esto también es similar a éste, pero aquí tenemos más control y creo que este control se ve mejor. En el lado derecho, se puede ver que me está mostrando paleta de colores junto con las relaciones de contraste de color. Se puede ver 1.56, 2.23. Tres se ve genial. Entonces tenemos cuatro contrastes, 4.06w, y así sucesivamente y demás. Aquí podemos controlar los pasos. Por ejemplo, quiero 15 pasos por aquí, y este es mi tono inicial. Por ejemplo, quiero empezar con un poco de azul por aquí, y quiero terminar con algún morado rojizo por aquí, algo así. Esto es en realidad, se puede ver que estos son los pasos y subir en dirección diferente, lo que significa que el tono está cambiando en realidad. Se puede ver 195, 197, 199. Estos son los valores de tonalidad, supongo que déjame ver. Estos son los valores de tonalidad en la parte inferior y en la parte superior estos son en realidad el valor de escala 0,10, 20, 30. Estos son en realidad mis pasos de escala. Aquí tenemos la curva. Si quieres cambiarlo, puedes cambiarlo como este EaseInout. En realidad es diferente usando diferente combinación del método EaseIn para ser aplicado en este por ejemplo, uso algo como esto. Se puede ver a la derecha, está generando el esquema de color. Si quieres agarrar todo el esquema de color, puedes usar esta captura de pantalla de página completa. Puedes capturar esto, o puedes usar esta, esta herramienta, realmente me encanta. Esto es getfireshort. Déjame mostrarte cómo funciona en realidad. Voy a capturar la parte visible o capturar mi selección. Voy a seleccionar esta zona por aquí para obtener mi esquema de color completo. Eso es todo. Voy a guardarlo como esquema de color. Podría estar preguntándose, ¿cómo podemos copiar todo esto? De todas formas. Aquí, tenemos diferentes curvas, y luego tenemos la saturación. Se puede ver cuánto saturados estarán tus colores iniciales, ¿qué menos saturados estarán? Al final, tenemos muchas situaciones, podemos controlarlo por aquí. De igual manera, tenemos la curva, cambiemos la tasa. Esto va en contra de la saturación. ¿ Cuánta saturación necesitamos? Este se ve bien. Entonces esto es de nuevo por la saturación, supongo. Es por la saturación. Estos se ven geniales. Entonces tenemos la luminosidad. Luminosidad es la cantidad de luz que debe estar emitiendo de tus colores. Mi inicio serán colores más claros, por lo que más luminosidad y se tendrán menos colores oscuros. Oscuro, se puede ver menos luminosidad así. Cualquiera que sea la configuración de matiz que quieras, entonces de nuevo, tenemos esta curva. No estoy seguro de colores de bloqueo. ¿ Qué significa el color de la cerradura? Creo que quizá a partir de aquí, valor hexadecimal. A lo mejor quiero bloquear este color. Déjame ver. Este realmente está bloqueando este color. Entonces puedes compartirlo y realmente compartirlo por colores URL, RGB, JSON. Si eres programador, creo que puedes usar ese JSON hexadecimal. También puedes copiar estos valores hexadecimales si lo deseas y utilizarlos en tu software o software de diseño. Esta es en realidad la escala. Tenemos pasos 0,10, 20. Esto en realidad también es utilizado por Google Material Design. Si lo recuerdas, entonces la última herramienta es ésta. Esto en realidad es para datos. Si quieres presentar una gran cantidad de datos o información o gráficas muy grandes donde tenemos una gran cantidad de datos. Puedes usar esto. Estos son diferentes modos de color en el lado izquierdo, normalmente uso ligereza de tono, y puedes recoger el color. Por ejemplo, quiero escoger algún color por aquí empezando y aquí tengo la luz de color final. Usemos este. Aquí, puedes agregar diferentes pasos si lo deseas. Por ejemplo, uno, dos, tres, cuatro, cinco, seis, siete pasos, sumemos ocho, nueve, y 10. Yo he creado toda la escala aquí. También puedes visualizarlo. Si haces click en visualizado, puedes ver cómo este color va a mostrar el mapa de USA. Es así como se puede ver. En la parte inferior derecha, dice desempleo de EU 2018. Es el tono amarillo, el tono muy brillante es el alto desempleo. Se puede ver, si me cierto sobre él, me va a mostrar los valores. Si te gusta el diseño de la información, puedes usar algún recolector de color como este y puedes copiar todos estos y crear tu esquema de color para tus visualizaciones. Eso es todo sobre escala y cómo se puede generar escala usando estas cuatro herramientas en línea, podría haber otras, pero en este momento, me parecen muy interesantes. Espero que hayan disfrutado de este video. Si tiene alguna pregunta, hágamelo. Pasemos a la siguiente lección. 29. Cuarto proyecto: esquema de color con escalas: Ahora, el momento es para otra asignación y esa va a ser un poco difícil porque quiero que creéis un esquema de color que se va a encajar con todas estas diferentes acciones. Se puede ver por aquí, este campo es el campo oscuro, que es dirección de correo electrónico, está activo en este momento. El segundo, la contraseña uno, está vacío y está en el estado predeterminado, no está lleno, estado inactivo. Después tenemos el botón Crear cuenta, que es más convincente o el botón principal Llamar a la acción o CTA, que lo llamamos en la pantalla, que tiene el foco principal de esta pantalla. Entonces ya tenemos una cuenta y login aquí, que es una acción secundaria. Vas a colorear llenar esta pantalla así. Te voy a mostrar lo que he hecho aquí. Se puede ver, así que aquí está mi esquema de colores para este más seguro y se puede ver por aquí, he usado diferentes colores para diferentes estados. Como puedes ver, nuestro principal color primario es este color azul oscuro, azul real y luego tenemos muy claro azulado, azul cielo para el inicio de sesión aquí. Vas a enviar esta versión de color schemed junto con tu versión en escala de grises, y junto con este esquema de color. Al menos muéstrame tu esquema de color y también el esquema de color que estás usando y puedes decir, cuáles son las diferentes funciones que estás asignando a cada color, por ejemplo, este es nuestro color primario, este es nuestro secundario acción. Esta es acción primaria, estos son colores de marca, este es extra, entonces tenemos color de campo de texto inactivo, que es el borde alrededor de él, campo de texto inactivo. Entonces tenemos texto de entrada inactivo, que es la contraseña escrita en su interior. Esto es para texto oscuro. Tenemos texto claro, texto oscuro, campo de texto activo, el borde alrededor del campo de texto activo. Entonces tenemos este trasfondo. No es blanco, es de color muy blanquecino de 204 tonalidad, que es, creo que nuestro color azul marca. Entonces tenemos el color secundario. Quiero que me muestres tu esquema de color y cuáles son las funcionalidades o funciones que cada color ha sido asignado. Qué está haciendo este color, qué está haciendo este color, y qué está haciendo este color. Esa será tu tarea. Espero que lo presente pronto. Se puede utilizar cualquier software o en realidad, Adobe Photoshop o Sketch. Empecemos. 30. 12 Siempre diseño en escala gris: hoy les voy a mostrar el tercer secreto de cualquier diseño de esquema de color. Siempre que empieces tu diseño, vas a diseñar algún marco de palabras, como puedes ver aquí a la izquierda. Se puede ver, he usado diferentes valores o diferentes tonos de color gris, de oscuro a claro para representar mi marco de palabras para que veas que este es un campo activo. Tiene más borde oscuro que éste. Esto en realidad es campo inactivo sin rellenar, campo de texto. De igual manera por aquí ya que puedes ver este color de texto, y este color de texto es el mismo. Este logo, tiene color muy oscuro, y también se puede ver he separado este color O, de este punto con un poco de gris. Tan solo para demostrar que este va a ser de un color diferente. De igual manera, se puede ver aquí he demostrado que este botón, esta es la parte más importante, por lo que se destaca en esta pantalla. De igual manera en la parte inferior puedes ver he usado login aquí, en todas las gorras y también tiene color oscuro. Ya tienes cuenta. Este texto es claro y el botón Login, que es una acción, es oscuro. Se puede ver solo de un vistazo, se puede mirar esta pantalla, y se puede decir que estas cosas son importantes, o resaltadas, o su estado es diferente del otro, por lo que estas son las cosas que se necesitan para tomar cuidado siempre que estés iniciando cualquiera de tu diseño, sitio web o cualquier cosa. El truco aquí es siempre, siempre y siempre empezar tu diseño en escala de grises. Nunca intentes empezar a diseñar algo así, y elegir colores al azar, y simplemente seguir diseñando cosas al azar. Intenta esbozar, trata de enmarcar la palabra tu aplicación, o sitio web, o lo que sea que estés diseñando, y luego recoge algún color. Por ejemplo, como aquí, he recogido este color primario, que es azul oscuro. Entonces estos son en realidad dos colores de marca, y este verde es extra, veces me va a ayudar. Entonces puedes ver todos estos colores son en realidad los tonos del mismo color, que es éste. Este color, y tienen diferentes tonalidades. Este está usando para textos. Éste es de nuevo para texto, textos oscuros, texto claro. Este va a ser nuestro antecedente. Esto no es blanco, tiene algún tinte mezclado en él, este color supongo. Entonces estoy usando este color. Esto es por mi acción secundaria. Puedes ver por aquí colores primarios, color secundario, así que si estás pensando que realmente necesitas un color muy contrastante para tu acción secundaria, te equivocas. Aquí se puede ver este azul es muy claro y muy, se puede decir, un color muy brillante en lugar de este color oscuro. Es totalmente opuesto a éste, pero no es tan contrastante como éste. Este botón 'Crear cuenta', tiene más contraste, y es más vibrante, y está captando la atención más que este inicio de sesión. Tu próxima asignación será crear algo como esto, y también muéstrame tu esquema de color, cuántos tonos necesitabas para completar toda la pantalla, puedes ver por aquí, hay diferentes colores utilizados para esto campo activo, este especificado. Esto por aquí luego este botón. Otro botón que es la acción secundaria, y este texto es diferente. Este texto es un poco más oscuro, este es un poco ligero, así que así es como realmente diseñas algo así. También el fondo tienen algo de color por aquí. Estos están a la izquierda. Ya puedes ver he agregado los colores en mi panel de activos. Esto es [inaudible]. Si quieres usar sketch o cualquier otra aplicación, está bien. Puedes seguir adelante y usar cualquier herramienta. Figma o lo que quieras. Sólo muéstrame tus pantallas y eso es todo. En la siguiente lección, vas a crear la tarea, pero ahora mismo si tienes alguna pregunta, házmelo saber, pregúntame en la discusión, o si tienes alguna sugerencia, avísame. Espero que hayan disfrutado de esta lección y aprendan el secreto de diseñar buenas interfaces o buenos esquemas de color. Es decir, siempre comienza tu diseño con escala de grises. Nos vemos pronto en la siguiente lección. 31. Cómo hacer un nombre de tus colores correctamente: En este video te voy a mostrar los trucos y consejos sobre cómo manejar tus colores. Si bien estás gestionando tus colores, lo primero es cómo los vas a nombrar. Ahora mismo estoy en boceto. Ya puedes ver por aquí, voy a compartir este archivo contigo. Se puede ver por aquí, tengo como 20 colores diferentes. Por aquí tengo diferentes tonalidades de blues, diferente saturación, diferente ligereza para el Gris. Se puede ver tengo como 10 gris diferente y nueve o 10 gris diferente, entonces tenemos tonalidades de verde, naranjas, rojos, morado, y cian. Esto en realidad te va a ayudar a construir cuando estás diseñando algún dashboard. ¿ Cómo vas a nombrar tus colores? Lo primero es que cuántos colores son, cuántos sombra necesitas. Si no estás construyendo un sistema más grande, te sugiero que al menos construyas cinco tonos diferentes del mismo color. Si tienes rojo oscuro, rojo más oscuro, rojo más oscuro entonces tenemos rojo medio, entonces tenemos este rojo claro, entonces este es el rojo más claro. Es así como les vas a nombrar. oscuro, más claro, más ligero, medio, algo así. Este esquema de nomenclatura se puede utilizar hasta cinco colores. Pero si tienes como, tengo estos colores Gris, como si fueran nueve colores diferentes. ¿ Cómo voy a nombrarlos? Voy a usar otra técnica que se llama, he visto muchos diseñadores e incluso creo que Google Material Design la está usando. Los vamos a nombrar; Gris 20, Gris cero,10, 20, 30, 40, 50, 60. Siempre que te muevas como Grey 60 o 70, o 80 o 100, van a ser el color más oscuro. Al bajar como cero, 10, 20, son tonos más claros. Esto va a ayudar a tus desarrolladores o a cualquier equipo con el que estés trabajando, que sea más fácil transmitir los colores que estás usando. Siempre que estés tratando de construir algo así, quiero que llames así a tus colores. Gris 20, Gris cero, Gris 10, Gris 20, 30, 40, 50, 60, 70, 80, y 100. O puedes al menos ir a 90 para tener como 10 tonos diferentes. Creo que 10 será suficiente, más que suficiente. Es así como vas a nombrar a tus colores. En la siguiente lección, te voy a mostrar cómo realmente los vas a guardar o crear una guía de estilo o estilos en Adobe sketch. Pasemos a la siguiente lección. 32. Uso de el complemento de estilo en el generador del boceto: En este video, voy a hablar de cómo vas a generar estilos de boceto para tus colores. Por ejemplo, tengo como 30 colores, no quiero crear un solo estilo una y otra vez, así que quiero crear todos los estilos. Para eso, necesitas un plugin llamado Sketch Styles Generator, adelante y descárgalo e instálalo haciendo doble clic en él. Entonces vamos a ir a Sketch. Déjame ir a “Create New File”, “New Art Board”, vamos a crear cualquier tablero de arte. Vamos a crear este. Voy a recoger unos rectángulos por aquí. Aquí tenemos un rectángulo. Empecemos con algo de color por aquí como tengo este color azul. Replicarlo dos, tres, y cuatro. Voy a ir con algún otro color, tal vez así. Vamos a añadir un poco de gris por aquí, vamos a añadir un poco de color cian azulado, oscuro para el fondo tal vez, tengo algo así. Tengo en este momento cuatro colores, así que lo que voy a hacer es primero, voy a renombrarlos. Se puede utilizar un plugin llamado “Renombrarlo”. En realidad no los he organizado, así que vamos a organizarlos así. Hagámoslo más ligero, así que sólo vamos con el color más claro de todos estos. Algo así. Aquí tenemos el rectángulo uno, dos, tres, cuatro. Top uno es el, en la parte superior. Siguiente Voy a mover esta capa hacia abajo. Éste debe estar aquí, y éste está en la posición correcta. Ahora voy a seleccionarlos todos y voy a ejecutar otro plugin para renombrarlos, “Renombrar capas seleccionadas”, y vamos a usar “Nombre de capa” con alguna “Secuencia numérica”. Vamos a renombrarlos así. Esto es azul slash azul uno, dos, tres, cuatro. Tenemos algo como esto. También podemos usar el número de asignación, como azul uno, dos, tres, cuatro. Vamos a renombrarlos. Esto van a ser cuatro, este es el más oscuro, entonces tenemos azul tres, dos, uno. Esta es una forma de renombrarlos. Ahora los vamos a seleccionar todos y vamos a ir a “Plug-in” y vamos a usar “Generador de estilo” por aquí, haga clic aquí, y se han generado todos los estilos. Si vamos por aquí, se puede ver dentro de azul, estamos viendo azul uno, dos, tres, cuatro. Es así como vas a y sabes crear tus estilos y generar tus estilos, que puedas reutilizarlos en Sketch. Es así como vas a organizar tus colores. Si estás usando Zeplin o Third Party Tool para mostrárselo a tus desarrolladores, entonces vas a construir tu esquema de color por ahí. Eso es todo. Espero que hayan disfrutado de esta lección y sí trate de descargar este plug-in Style Generator. Déjame mostrarte. También vas a generar estilos para tus colores de texto. Si hago clic aquí, se puede ver esto es algo llamado estilos, encabezados, negro. Tengo algo como esto, botón, blanco, azul, forma, texto de forma de texto, relleno activo, inactivo. Vas a crear todos estos diferentes estilos y colores para tu herramienta de párrafos. Se puede ver por aquí este texto por aquí, que es párrafo, es diferente al encabezado y tiene diferente color. Vas a crear todos los estilos diferentes, generar todos los estilos diferentes usando este Generador de estilos, y podrás utilizarlos en tus diseños más adelante. Se trata de la reusabilidad y cómo vas a gestionar tus estilos en Sketch. En el siguiente video, te voy a mostrar el mismo proceso que puedes hacer en Adobe XD. Pasemos a la siguiente lección. 33. Gocar los colores en Adobe XD: Ahora, ahora mismo, estoy en Adobe XD y te voy a mostrar cómo vas a agregar tus colores a tus activos, que son tus estilos y colores y estilos de rallador. Lo que realmente hago es si has diseñado todos tus colores y aplicado tus colores a tu pantalla, solo vas a seleccionar todo, haz clic derecho. Y añadir colores a los activos. Es así de sencillo en Adobe XD. Ahora puedes ir en estos colores y puedes arreglar estos. Por ejemplo, este es el color más oscuro, así que voy a moverlo hacia arriba, después éste, luego éste, y luego tenemos éste, algo así. Entonces tenemos este gris, que es el más oscuro de todos estos. Entonces tenemos este color primario en la parte superior, vamos a moverlo en la parte superior, luego tenemos estos dos colores de marca.Vamos a mover éste hacia arriba, y eso es todo. Además, creo que había un color para usar para el fondo, que es éste; FAFD y algo así. Podemos agregar este color desde aquí, haga clic con el botón derecho en Agregar activos, y se ha agregado por aquí. Lo que estoy haciendo aquí es que en realidad los estoy arreglando así y también puedes renombrarlos, por ejemplo, este es mi azul primario, algo así, entonces puedes volver a usar la misma técnica, gris 60 y cosas así, que les he dicho en la última Lección 350. Es así como los vamos a nombrar. También puedes nombrarlos así, por ejemplo, este es este color y podemos añadirlo a tal vez color de fondo, algo así. Puedes nombrarlos en función de su funcionalidad, también puedes nombrarlos así, también puedes nombrarlos por ejemplo, color del texto, color del texto oscuro, color del texto claro, cosas así. Es así como vas a administrar tus colores en Adobe XD. Si desea agregar sus estilos grexer junto con los colores, puede hacer clic derecho y agregar un estilo grexer a los activos. Esto va a agregar el color y el tamaño de la fuente, todo por aquí. De igual manera, para otros, por ejemplo, este es tu otro estilo, puedes agregar estos sílice para que puedas seguir añadiendo esto. Es así como vas a construir tus activos y colores de guía de estilo en estilos grexer en Adobe XD. Es así como vas a administrar tus colores en Adobe XD, espero que hayas disfrutado de esta lección. También puedes cambiar para crear vista. Se puede ver por aquí esto es bonito, pero no está mostrando el nombramiento prestado por delante. También puedes buscar color, por ejemplo, si trato de usar un nombre, por ejemplo, primario, me va a mostrar el color. También puedo hacer clic derecho y resaltarlo en el Canvas donde se ha utilizado en diferentes lienzos, por lo que estas son muchas características geniales y espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección. 34. Gocar los colores en Photoshop: En este video voy a hablar de cómo vas a organizar y guardar tus paletas de colores y colores en Photoshop, Adobe Photoshop. Se puede ver en el lado derecho tengo panel de muestras. Si no lo ves, puedes ir a “Windows” y aquí puedes hacer clic en “Muestres”. En el panel de muestras se puede ver tenemos este menú a la derecha. Si haces click aquí, tenemos diferentes opciones, miniaturas diminutas, miniaturas pequeñas, miniaturas grandes, lista pequeña. Si has nombrado correctamente tus colores como azul primario, primario oscuro, secundario activo, link blue, algo así, realmente necesitas cambiar a esta vista, lista pequeña. O también puedes cambiar a esta gran lista, puedes ver fácilmente puedo encontrar los colores. Ya puedes ver, los colores de fondo no los he nombrado, así que puedes ver es difícil tocarlos o usarlos. Entonces lo primero es siempre tratar de nombrar tus muestras. Segundo, es que si tienes algo como lo puedes ver por aquí, ya tengo muchos colores en mi paleta de colores, y quiero empezar un nuevo proyecto, y ahora quiero un esquema de color totalmente separado. No quiero que se sumen por aquí o por aquí. Entonces lo que voy a hacer es, voy a ir a mi “Reemplazar Muestres”. ¿ De acuerdo? Para que puedas restablecer tus muestras, puedes cargar nuevas muestras de color, puedes guardar muestras. Puedes reemplazar muestras. Entonces tengo un archivo, así que primero los voy a guardar. Déjame guardarlos en el escritorio. Mi muestra actual, 2019. Está bien. Entonces he guardado mi muestra y ahora lo que voy a hacer es tener un archivo. Déjame mostrarte dónde está. Entonces tengo un archivo llamado muestras vacías y voy a dar click en “reemplazar muestras” e ir a buscar eso. Acabo de pegarlo en mi escritorio “interruptores vacíos”, y lo voy a cargar. Vas a ver qué pasa. han ido todos los colores, así que sólo tenemos un color negro. Ahora lo que voy a hacer es que voy a añadir mis colores ahora. Acabo de coger este color, me voy a por aquí, y seleccionador de color y voy a añadir dos muestras. Entonces ahora voy a nombrar un pegamento primario o tal vez dash, voy a usar dash, algo así. También puedes agregarlas a tu biblioteca actual. Por ejemplo, si hago clic aquí, lo voy a agregar a mi biblioteca actual, y luego puedo usarlo en Adobe XD, Adobe Illustrator, Adobe Photoshop, CC Live Softwares que están usando biblioteca. Entonces ahora mismo lo voy a sumar por aquí. Voy a escoger el siguiente, y voy a volver a dar click en “Swatch”. Este es mi, llamémoslo amarillo secundario. Entonces voy a dar clic aquí y en cuanto a esto va a ser mi fondo blanco o algo así, fondo blanco. Este es otra vez otro color, tal vez medio o algo así. Entonces vamos a mantenerlo como Cyan. Entonces aquí estoy agregando sólo cuatro colores. También puedes agregar más, por ejemplo, como denso y tonos, diferentes de este color azul por aquí, por ejemplo. Ahora lo voy a agregar a como azul, diez, algo así. Entonces voy de nuevo a ir a este 20 azul, algo así. Entonces voy a repasar este, azul 30, algo así. Entonces creo que ahora mismo tengo colores más que suficientes. Entonces si quieres eliminar algún color, solo puedes recogerlo, agarrarlo, y dejarlo en ese delete y se va a eliminar. También puedes hacer clic derecho e ir al administrador preestablecido y aquí puedes moverlos si quieres. Por ejemplo, quiero que esté por aquí, y luego quiero que esté por aquí así. Para que los pueda mover por ahí hecho, y verás que han sido arreglados. Por lo que hay muchas cosas que puedes hacer con ellos. Entonces vamos a moverlas a lista grande, y aquí tenemos todos los colores listados correctamente. Es así como vas a utilizar diferentes paletas de colores, organiza tus colores en Adobe Photoshop. Si tiene alguna pregunta que hacerme. Pasemos a la siguiente lección. Antes de eso, te voy a decir que puedes descargar este archivo de muestras vacías. Te voy a mostrar, te lo voy a dar. Simplemente puedes reemplazar tus muestras usando ese archivo vacío.aco o paleta de muestras de color, y tus colores se habrán ido. Entonces volvamos a mis colores. Entonces quiero que sean mi muestra actual, así que la voy a cargar así en las miniaturas pequeñas. Está bien. Entonces eso es todo. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 35. Extensiones de navegador para encontrar colores: En este video, voy a compartir contigo mi top color picking y esquema de color generando plugins o extensiones que puedes agregar a tu navegador Chrome y a tu navegador Firefox. Empecemos. Primero me voy a ir con algunas extensiones de Chrome porque son realmente bonitas y realmente geniales. Déjame mostrarte cómo funcionan en realidad. Aquí tengo uno de ellos. En realidad es paleta de sitio. Si hago click en él, puedes ver tengo sitio de rayas en este momento. Se va a generar una paleta muy bonita al igual que una guía de estilo. Aquí tengo todos los colores. Los tengo de una manera muy agradable. Al final se puede ver plantilla de boceto, muestra de Adobe, abierta en la paleta de Google, abierta en Coolers. Esto es realmente genial. Puedo descargarlos. Este es el, creo, mejor plugin que he visto. Puedes ver aquí tenemos todas las diferentes opciones de descarga. Entonces me voy a pasar a la siguiente, que es Colorzilla, se puede ver por aquí. Esto es muy viejo. Lo estoy usando de mucho como pienso a dos o tres años de los últimos tres años. Solo tienes que hacer clic aquí y comienzas a escoger color desde aquí. No estoy seguro de por qué no está funcionando. Necesito ir a este sitio en realidad. Aquí lo tenemos. Ya puedes ver cada vez que me mude aquí, por ejemplo quiero escoger este color verde, voy a dar click aquí. Se va a recoger el valor hexadecimal y también lo va a copiar. Si quiero pegar ese color en Photoshop, Sketch o cualquier otro solo necesito controlar o mandar V para pegar este color. Este es Colorzilla. El primero que te mostré es Site Palette, éste. Entonces éste es Colorzilla. Al siguiente que es éste, Snatchr. Se va a volver a agarrar todos los colores de esta página web. Se puede ver por aquí, colores de texto. Estos son los colores de fondo. Cuenta con dos secciones, texto y colores de fondo. puede ver cómo han utilizado diferentes tonos de blues grisáceos por aquí en el texto. También se va a agarrar los estilos de tipografía. El alcanfor se ha utilizado por aquí mayormente en toda la página web. No hay opción para descargar estos. Diré que si quieres conseguir este, es bueno que los colores hayan sido separados en colores de fondo y texto pero nada mucho que puedas hacer. Entonces tenemos uno siguiente que es este Palettab. Déjame mostrarte. Aquí está ésta, Palettab. También está disponible para Firefox. Está disponible para Firefox y Chrome. Siempre que abras una nueva pestaña, puedes ver aquí tenemos una bonita Paleta o un bonito esquema de colores. Cada vez que hagas esto, vas a conseguir un nuevo esquema de color. Siempre que abro una nueva pestaña, pocos de mis alumnos, siguen preguntándome, cuál era esa extensión que estás usando, que estaban creando estos esquemas de color junto con estas fuentes de Google. Esta es en realidad paleta de colores. Perdón, Palettab, éste. Se puede descargar en sólido. También está disponible para Firefox. Sólo dos extensiones están disponibles para Firefox y Chrome ambos y que es Palettab y Colorzilla. Estas son muy, se puede decir extensiones muy antiguas. Entonces el último que te voy a mostrar es éste, CSS Peeper. Déjame mostrarte lo que puede hacer. Cerremos este. Aquí lo tenemos. Aquí está el Peeper CSS. Si haces clic aquí, puedes ver que te va a mostrar el nombre del sitio, luego las fuentes utilizadas por aquí sobre el tiempo de carga del archivo CSS. Si te mueves a estos colores por aquí, puedes ver que ha enumerado todos los diferentes tonos que se han utilizado en este color. Incluso la opacidad, junto con la opacidad. Por ejemplo, éste se ha utilizado 0 por ciento de opacidad, 8 por ciento de opacidad y todo eso. Simplemente puedes copiar desde aquí solo color pero no puedes descargar toda la paleta. Si vas a este activo, muestra todos los activos, diferentes PNG y SVG, supongo. Esta es la pestaña que estamos buscando para que puedas copiar cualquier color que te guste. A lo mejor te gusta un solo color y quieres empezar tu esquema de color con este. Se trata de cinco plugins diferentes que puedes descargar e instalar en tu navegador Chrome y Firefox. Déjame mostrarte. Este es el Palettab en Firefox, puedes ver que está cargando lo mismo. Entonces tenemos a esta Colorzilla por aquí. También puedes instalar Colorzilla. Hay uno más te voy a mostrar cuál es Style Guide Generator. No funciona con todos los sitios web, pero si haces clic aquí, puedes verlo está generando guía de estilo, similar a Site Palette supongo. No estoy seguro de que puedas descargar nada ni ninguno. No se puede descargar ninguna Paleta de Swatch o color para abrirse en Photoshop o Sketch o Adobe XD o lo que sea. Esta es otra herramienta, Style Guide Generator, Palettab y Colorzilla. Tenemos pocas extensiones en Firefox que son buenas para la generación de esquemas de color pero por otro lado, en Chrome, tenemos muchas buenas opciones por aquí. Ahora mismo el ganador de hoy para mí es la Paleta del Sitio. Esta es una de las mejores herramientas que creo. Se puede ver que se puede descargar la plantilla de boceto y Photoshop para abrirse en tu herramienta de diseño favorita. Además, este es muy práctico. A veces solo necesito escoger un color así que uso este. Simplemente elijo Colorzilla y escojo ese color y empiezo a partir de ahí. Estas son todas las diferentes extensiones y plugins que uso. Si tienes alguna recomendación más o usas algo más, intenta mostrarme en la discusión de comandos. Espero que hayan disfrutado de este video. Vamos a seguir adelante. Nos vemos pronto en el siguiente video. 36. Herramientas en línea para los esquemas de color que utilizo que: La mayoría de los nuevos diseñadores tienen tendencia a meterse en problemas que, “¿De qué color debo escoger? O “¿Desde dónde debo comenzar mi esquema de color?” Por ejemplo, si estás construyendo tu propia startup o algo así, podrías estar preguntándote : “¿De dónde debo sacar mis colores?” Voy a compartir con ustedes algunas de mis herramientas, sólo cinco de ellas, que pueden usar. Se pueden utilizar para generar colores a partir de una imagen o imagen. Si quieres tener una imagen de playa o algo así, puedes recoger colores de ahí también. Entonces si sabes cuál es tu tema, por ejemplo, mi tema es la alimentación o la agricultura o algo así. Puedo tomar una foto de algún entorno y puedo empezar a construir mi esquema de color. De igual manera, les voy a mostrar dos herramientas que normalmente exploro. Los esquemas de color ya están construidos y también podemos empezar desde ahí. Vamos a cavar. La primera herramienta que te voy a mostrar es color.adobe.com y vas a dar click en este “explorar”. Una vez que haga clic en esta exploración, verá muchos esquemas de colores frescos con los que desea empezar. Hay, creo, tal vez, más de miles de esquemas de color por aquí. Aquí tenemos los más populares, los más utilizados al azar todos los tiempos de esta semana, algo así. Se puede ver aquí tenemos a la izquierda, este esquema de color, este es un esquema de color muy claro para tal vez perfume de damas o tal vez algo así. En su mayoría está relacionado con la frescura y un poco de toque femenino por lo que, se puede ver este. Si quieres descargarlo, puedes dar click en descargar. También puedes guardarlo. Puedes abrirlo o editarlo si quieres. Se puede ver por aquí azul y naranjas y verdes. Este es otro. Esto está más relacionado con la naturaleza, supongo. Entonces tenemos diferentes tonos de blues me encanta mucho. Entonces tenemos este azul y naranja, que son de azul púrpura, que son mis colores favoritos. Entonces tenemos éste, muy simple verde y naranja y amarillo. Estos son todos los diferentes esquemas de color. Lo que quieres hacer aquí es, por ejemplo, quiero algo tal vez en azul y naranja, voy a teclear aquí azul y naranja y verás que habrá muchos esquemas de color diferentes que he estado usando azul y naranjas. Este me gusta mucho, creo que fácilmente podemos usar éste de aquí. Empecemos por aquí, intentemos editarlo. Aquí tenemos éste. puede ver que se ha abierto por aquí. De igual manera, si volvemos, veamos si podemos guardarlo o descargarlo. Demos click en “Descargar”. Tenemos que iniciar sesión en nuestro Adopte CC. De todos modos, vamos a dar click en “Guardar”. También puedes crear tu propia identificación. Puedes crear tu DNI por aquí. También puedes descargar Adobe XD, que es un software gratuito. Si quiero dar click en la info, puedes ver esto es toda la pantalla. Podría tratar de agarrar la captura de pantalla por aquí. Para eso uso esta herramienta Jing. Si no tienes a Jing, creo que deberías descargarlo. Es una herramienta gratuita y me encanta cómo funciona realmente. A veces es muy útil para mí. También puedes usar este plug-in de captura de pantalla corta de archivos aquí en Firefox y Google Chrome. Entonces lo que hago es normalmente agarrar algo así y voy a empezar con este esquema de color. Estos serán mis colores principales, este azul y esta naranja. Este es un azul más oscuro, este es blanco, y esto es un poco de color pálido por aquí. Cerremos esto. Es así como voy a empezar con Adobe Color CC. Ahora veamos otro sitio donde normalmente voy a explorar diferentes esquemas de color y diferentes paletas de colores. Aquí está el Explorador, intenta hacer click en él y verás toneladas de diferentes esquemas de color. Por aquí se puede ver que hay muchos. También puedes filtrarlos. Por ejemplo, quiero azul y amarillo. Veamos cuáles son los esquemas de color por aquí. Se está llevando algún tiempo. Esto en realidad lleva mucho tiempo. Creo que su motor de búsqueda es lento, pero he escrito ahora azul y naranja y se puede ver por aquí naranja y azul. Todos los temas que han sido etiquetados con naranja y azul, están aquí. Creo que su búsqueda es un poco lenta y lenta. No voy a hacer algo así. Se va a llevar mucho tiempo por aquí. Para que pueda ir “Siguiente”, “Siguiente”. Aquí tengo pocos buenos naranjos y azules. Azul, naranja, verde. Azul, naranja, verde. Azul, naranja, lima, y muchos otros esquemas. También puedes crear y guardar tus propios esquemas de color. Si vas a mi perfil, te voy a mostrar mi cuenta y perfil donde he creado, creo como 10 o 15 esquemas de color diferentes y paletas de colores. Voy a compartir estos contigo para que, no te preocupes, puedes descargarlos y utilizarlos en cualquiera de tu app o software. Se puede ver aquí tengo una dieta saludable. Todo esto es verde, marrón y amarillo. Azul, verde, amarillo, se puede ver por aquí, esquema de color muy popular. Esto es naranja-coco, y esto también son marrones y naranjas y amarillos. Después tenemos gun-metal, verde, azul, y pocos más verde y azul, diferentes versiones. Rojo, azul, verde. Esto es seguro. Puedes usar eso en cualquier app. De igual manera, pocos más. Estos son pocos tonos diferentes de blues, azul y cian. Lo he usado en algunos de mis cursos. Se pueden ver pocos proyectos más orgánicos. Esto es en realidad esquema de color analógico, verdes y azules, proyecto V2. Estos son 14 esquemas de color. Yo también los voy a compartir con ustedes. No te preocupes puedes descargarlos fácilmente. El siguiente es que, si tienes alguna imagen o un esquema de color, por ejemplo, quiero construir mi esquema de color basado en alguna imagen. Voy a subir esta imagen. Esto es de canva.com. Seleccionemos alguna imagen. Puedes seleccionar cualquier imagen si quieres. Seleccionemos esta imagen de mi estudio. Creo que va a tomar algún tiempo, así que vamos a seleccionar alguna imagen de mis fotos. Esto se ve bien. Voy a dar click a esta imagen por aquí y vamos a ver qué esquema de color me va a mostrar. Aquí tengo una foto de un interior de dormitorio y se puede ver estos son colores diferentes. Me ha mostrado azul claro, pizarra oscuro, gris pizarra claro, y estos pocos colores. De igual manera, esta es otra herramienta que también puedes usar. Simplemente toma una imagen, por ejemplo, voy a agarrar esta. También me gusta este porque muestra muchas variedades diferentes de colores. Se puede ver por aquí. En realidad, creo que hay algo por aquí que no soy capaz de entender. ¿ Es de cortesía colores o tríada? Sea lo que sea, creo que está tratando de generar alguna paleta de colores basada en estas armonías de diferentes triángulos de color, tríada de cortesía. Esto en realidad es muy útil. Hay muchos colores diferentes para elegir. Entonces otra herramienta, que es ésta, palettgenerator.com. Subiremos una imagen por aquí. Aquí lo tenemos. Se puede ver que me está mostrando muy menos colores, todos los marrones. Llevémoslo a diez colores dominantes. Aquí en realidad hay algunos colores más. A mí me gusta de alguna manera porque muestra todos los diferentes tonos, fortalezas, y tonos de los colores como por aquí. Además, este es el trasfondo. Usa colores sobre los fondos de aquí. Todavía faltan algunos colores. Nuevamente, uno más, colormind.io. También puedes subir una imagen por aquí. Empecemos con este. Se va a construir algún esquema de color basado en esa imagen. Ahora también puedes hacer click en “Generar”, y te va a mostrar unos tonos más. Se puede ver un bonito esquema de colores. En realidad está creando los tonos a partir de la misma imagen que acabamos de subir. Estas son algunas herramientas que puedes usar. Estos dos Adobe Color CC y coolers.io, Explora las paletas de colores, generan paletas de colores a partir de las imágenes. Estas son cuatro herramientas, y eso es todo. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 37. Encuentra inspiraciones de color en línea: En este video, te voy a mostrar algunas herramientas más que uso y algunas cosas más que debes tener en cuenta como, cuáles son los colores predeterminados para el sistema operativo iOS o Android o Windows. Por lo que siempre que estés diseñando para una app para iPhone o una app para Android Material Design, necesitas saber cuáles son sus colores de sistema. Te voy a mostrar también algunas de las cuentas de generación de esquemas de color de Instagram donde esas personas tratan de crear mucho esquema de color fresco para que puedas recoger desde ahí. Empecemos. Este es el primer sitio, creo que lo usé muchas veces. Creo que ésta debería ser una de las mejores herramientas para encontrar el tema de tu negocio. Por ejemplo, quiero un serio, algo. Veamos cuáles son los colores que hay, estos colores son mayormente marrón anaranjado, se puede ver el blues, así que así es como voy a empezar con mi equipo de mis esquemas de color. Segundo, te voy a mostrar cuáles son los colores predeterminados de Windows, iOS y Android. Este es un artículo de icons8.com, y puedes ver que han mostrado todos los diferentes tiradores. Esta es la paleta de diseño de Windows 10. Puedes conseguirlo desde aquí, la guía oficial de estilo. A continuación aquí tenemos los valores por defecto del sistema operativo iOS 10 o iPhone. Aquí se puede ver que tenemos rojo. Estos son valores diferentes para los colores que se ha utilizado, que se ha utilizado en iPhones o sistema operativo iOS. Entonces tenemos este diseño de Material para Android, se puede ver que tienen una gran cantidad de palets de color escalados. Contamos con diferentes escalas de colores. 50-900. [inaudible] del mismo color y tienen muchos colores que puedes escoger de ahí. Este es un gran artículo voy a compartir contigo todos los enlaces, para que no tengas que preocuparte por ello. Aquí tenemos de nuevo, estos son los colores de realidad las pautas de interfaz humana de Apple.com. Entonces ahora te voy a mostrar algunos de los sitios web inspiradores. Aquí tengo esto de como hace dos o tres años, lo he guardado, thedaycolor.com. Se puede ver que hay toneladas de esquemas de colores geniales, muy modernos, muy únicos. Se puede ver que tenemos por aquí y aquí tenemos morado azulado muy oscuro y naranja en él. No estoy seguro de que puedas ver. Este es otro, puedes usarlo en cualquier diseño de interfaz, azul, rojo, verde y amarillo. Tienen todos los colores, colores de status, todo. Se puede empezar con algo como esto. Aquí tenemos algunos seguidores de Instagram e Instagram se puede decir, no estoy seguro de qué son las cuentas. Me estoy cayendo este color impresionante. Y este chico o niña o quien sea o ella sea, la parte. Mucho genial, Puedes ver esquemas de color por aquí. Creo que tienen toneladas de esquemas de color y se puede, si se quiere empezar o aquí, por ejemplo, este morado y verde se ve muy bien. También tengo aquí color púrpura y cian, muy bonito esquema de color. Aquí hay toneladas de grandes esquemas de color. Tenemos de nuevo, naranja y azul, muy popular, me encanta. Entonces el otro es Colors Cafe, colores.cafe, este es otro y también tiene muchos esquemas de color, puedes ver. También muestra cómo en realidad él o ella le está agregando más colores. Me gusta mucho cómo se muestra en diferentes fondos, oscuros y claros. Aquí tenemos luz y oscuridad. Esto es colores.cafe. Puedes empezar con cualquier esquema de color como este este se ve muy bien. Este es un gran esquema de color, naranja y azul. Se puede ver el secreto detrás de estos es, se puede ver si se ven los cinco colores completos, esa luminancia es, no es muy diferente el uno del otro. Todos los colores son, tienen la misma emisora de luz, por lo que son como colores medianos apagados, colores muy decentes. Podrás llamarlos colores decentes. No son muy afiladas, no son muy divertidas o no son muy, se puede decir, te estoy dando una vibra. Si miras por aquí, déjame mostrarte lo que estoy diseñando. Se puede ver estos dos colores son muy afilados, tienen mucho contraste, esto en realidad es muy oscuro, azul púrpura. Déjame mostrarte. En realidad, este es mi esquema de color que estoy construyendo en este momento. Otro esquema de color, esta experimentación en Adobe Illustrator, puedes hacerlo en cualquier lugar. Se puede ver aquí que tengo, este es mi color primario real y este. Yo estoy usando ya sea éste oscuro. Yo lo estoy extendiendo con se pueden ver algunos colores pálidos, algunos tonos claros de amarillo, algunos azules. Esto es, creo mi otro color que estoy tratando de agregar a mi esquema de color, pero ahora mismo, sólo voy a ir con estos dos. Se trata de color azul púrpura oscuro y amarillo anaranjado u dorado. Así es ahora mismo como estoy trabajando. He usado diferentes herramientas en línea para generar esto por lo que no puedes decir que yo, solo usas, utilizo pick los primeros dos colores yo mismo y luego lo extendí usando algunas herramientas en línea como si estuvieras viendo colores por aquí, yo lo consiguió de coolers.co También pocos colores por aquí también son de coolers.co. Estas sacarosa, creo que recogí de otro lugar. De todos modos, así es como realmente construyo mi esquema de color. Estas son todas las inspiraciones que también puedes buscar a tu alrededor en la naturaleza, en los diferentes anuncios, en las carteleras, todo. Espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, discutamos y pasemos a la siguiente lección. 38. Herramienta en línea para degradados de color: A partir de los años anteriores, los gradientes se han utilizado mucho en tu diseño web, diseños de aplicaciones móviles de diferentes diseñadores, diseñadores de UI y diseñadores web, estaban en mucha tendencia y todavía lo son, así que estoy ir a compartir contigo cinco o seis diferentes recursos y sitios web que puedes utilizar para obtener un gradientes lineales y otros gradientes que puedes utilizarlos en tu diseño. El primero que te voy a mostrar es web gradients.com, y lo genial al respecto es que puedes descargar archivo de boceto y archivo PST. Hay creo 180 gradientes diferentes y puedes usarlos en botones o lo que quieras. Realmente me encanta esto porque también puedes copiar el CSS. Si eres desarrollador Web, puedes copiar CSS. Puedes descargar sketch o PST, también puedes abrir este archivo de boceto en Adobe XD si lo deseas. Este es, creo, el cielo para gradientes web. Si haces click aquí en el boceto y necesitas descargarlo, te va a mostrar esta pantalla, boceto de WebGradients, gumroad.com, y la mayoría de mis alumnos, no estoy seguro por qué tienen problemas al descargarlo. Dice 0 dólares. Si quieres donarlo, puedes donarlo. De lo contrario sólo tienes que presionar cero por aquí y dar click en, Quiero Esto, y puedes descargarlo. De igual manera, tenemos otro sitio web, grabient.com y también puedes descargar sketch, puedes ver en la parte superior por aquí hay, creo que estos son como 20 o 30 gradientes diferentes. Entonces tenemos este gradients.cssgears.com. Aquí tenemos nuevamente diferentes gradientes. Estos no son demasiado grandes, pero lo genial al respecto es que si haces clic en cualquiera de esto, puedes hacer clic en este icono HTML5, Adobe XD o boceto para descargar el archivo al instante. He intentado descargar este. Por lo que si hace clic aquí, se va a descargar el archivo XD para este gradiente. Una herramienta más que he usado en el pasado es mezclar dos colores con gracia. Entonces lo que normalmente hago es seleccionar un color de aquí, por ejemplo, éste y éste. Si hago clic en blend, puedes ver cómo se mezcla muy bien. De igual manera, si puedes cambiar algunos ajustes por aquí, también puedes copiar el código, el diseño o el código del sitio web. En realidad, es código CSS para gradientes de fondo. Este es otro sitio web, herramienta de mezcla colinkeany.com. Aquí hay otra, uigradients.com. No me gusta demasiado, pero creo que es genial que desde aquí puedas descargar y obtener el archivo JPEG y también el CSS. Si eres desarrollador web, puedes hacerlo. Aquí tenemos diferentes gradientes y si vas por aquí, puedes mostrar pocos más. Por ejemplo, quiero algo por aquí. Entonces no demasiado útil, pero creo que se puede conseguir algo de aquí, algo de inspiración. Entonces tenemos gradients.io. De nuevo hay gradientes de diferentes colores y son solo gradientes, no se pueden descargar ni nada. De nuevo, tenemos una herramienta más la cual es colorspark y va a generar diferentes colores dependiendo sólo de variar cosas diferentes como esa. También puedes copiar es CSS. También hay una herramienta de color para este por lo que si quieres, puedes cambiar a la herramienta de color y se va a generar algunos. Este color se ve bonito, así que si necesito algunos colores rápidos, puedo hacer eso. De igual manera, también tiene un plugin de boceto. Se puede ver por aquí colores chispas sketch plugin. Puedes descargarlo y podrás meter colores con Control Shift y C o Control Shift C para conseguirlos en tus diseños al instante, algo así. Estas son todas las diferentes herramientas que quería mostrarte. De verdad me encanta este, gradientes web. Haz un vistazo a este, descárguelo, e intenta construir tus activos de colores y usar colores a partir de ahí. Espero que hayan disfrutado de este video. No empieces una discusión o dame algunos comentarios al respecto si tienes alguna pregunta hazme. Nos vemos pronto en otro video. 39. Trucos para crear los gradientes: En este video, voy a compartir con ustedes algunos de los trucos para crear gradientes de aspecto fresco y cómo se pueden utilizar en el diseño de su interfaz de usuario. Ahora, a la derecha se puede ver por aquí, no voy a crear nada por aquí. Este será otro tutorial donde te mostraré cómo crear esto en figma. Pero ahora mismo estamos más interesados en esto. Hay muchas técnicas diferentes. Como pueden ver, he escrito por aquí oscuro y claro. Ahora la primera técnica que uso es, déjame abrir todo. Primera técnica que utilizo es que, voy a entrar a este gradiente lineal. Se puede ver por aquí, lo primero es el ángulo, por lo que es en esta dirección. Ángulo realmente importa. Este gradiente, si aplicas en este gráfico circular, podría no funcionar porque el ángulo es diferente. primer truco es que, hay que seleccionar un color que va a ser el mismo matiz 205. Será una versión más ligera. Entonces tenemos otra que será un poco más oscura. Ahora lo que trato de hacer es, trato de cambiar un poco de matiz, se puede ver por aquí, de 205 salté a 216. Este es otro truco que te he enseñado en mi curso de esquema de color. Ahora, puedes ver que puedes cambiar el ángulo por aquí, si quieres simplemente arrastrar así y donde creas que es cómodo, puedes dejarlo caer así. Mantendré aquí la luz en esta dirección y oscura por aquí. El primer truco es oscuro y claro. Tenemos sombra muy oscura en un lado y color muy claro en el otro lado y son casi el mismo tono. Son del mismo color. Ahora bien, si vas a este, entonces éste se llama en realidad colores análogos. Análogos color significa que, vamos a usar colores que están muy cerca uno del otro en la rueda de color. Ahora déjame mostrarte la rueda de color. Aquí tenemos la rueda de color. Si vamos a análogo, se puede ver estos son los colores en análogo. Siempre que muevas uno de ellos, se van a mover juntos. Tenemos verde, de cian, de azul luego tenemos de verde y azul, de naranja y verde, después tenemos ámbar amarillento con naranja, luego tenemos rosa y morado, rojo y rosa. Todos estos son colores análogos. Están muy cerca el uno del otro en la rueda de color. Este es el segundo truco. Lo que necesito es, utilizo este color azul y verde. Se puede ver este esquema de colores análogos. Tenemos azules y tenemos verdes. Por un lado uso este color azul. Segundo, del otro lado usé color verde. A esto se le llama el segundo truco para crear colores análogos. Aquí tenemos otro gradiente, y se hace mediante el uso de colores análogos. El siguiente es usar colores complementarios. El azul es opuesto a este color amarillento o púrpura. Utilicé colores complementarios en rueda de color. Déjame mostrarte cuáles son en realidad los colores de cortesía. Déjame ver si tengo la rueda de color. Aquí tenemos el de cortesía. Si trato de seleccionar un color por aquí, vamos a seleccionar este. Si voy a cortesía, se va a entrar en naranja. Si trato de seleccionar este color, mueva este color por aquí, puede ver que se está moviendo dentro de esta sección amarilla o naranja por aquí. Están totalmente opuestos entre sí en la rueda de color. Este es otro truco. Si estás creando un degradado, puedes usar colores de cortesía a. El siguiente es, estoy usando tres colores. Estos son de nuevo colores complementarios, pero en realidad estoy inspirado en una escena, por ejemplo, puesta de sol con muchas nubes oscuras. También puedes recoger esos colores de una imagen, por lo que este es un truco muy sencillo. A muchos diseñadores, no lo saben, por eso lo guardé con el nombre de los colores de la nube del atardecer. Si voy por aquí, puedes ver que tiene tres colores por aquí. Este es el naranja o el sol detrás de las nubes. Esta es la nube oscura por aquí, y este es el otro color de nube que es un poco azul más claro. O tú como puedes verlo dice que es el aligeramiento dentro de la nube. Esto depende de ti. Este es en realidad ese gradiente de aquí, uno, dos, tres. Puedes mover las paradas donde quieras que esté. Puedes mover esto por aquí si quieres. Mueve esto por aquí, cualquiera que sea el color que quieras más. A mí me gusta de esta manera, así que este es otro truco. Se pueden crear degradados basados en esquemas de color a partir de diferentes imágenes, de diferentes escenas, escenas de la naturaleza. Son geniales para crear estos colores y gradientes. Ahora ese último truco es que, vamos a usar el mismo color de color monocromático. Déjame mostrarte. Tenemos esta naranja por aquí, que es 18 por aquí. Entonces esto es 43 hue. Pero en realidad es, si nos movemos por aquí, se puede ver que traté de mover el color en esta zona por aquí, que es un poco de blanco grisáceo. Lo que hice es, déjame mostrarte. Vamos a moverlo por aquí. Mantengámoslo 18. Estoy usando el mismo color en ambas paradas. Estos se llaman básicamente paradas. Una parada del 100 por ciento, 0 por ciento se detiene. De aquí, 0 a un 100 por ciento. Puedo moverlo así. Si quiero mover este, puedo usar eso. Este es otro truco. Se puede utilizar de un solo color con dos paradas. Uno estará un poco en el lado gris, tal vez como este blanco grisáceo. El otro está por aquí. De igual manera, puedes usarlo así, y el otro va a estar en esta sección más oscura por aquí. Esto va a ser gris más color o blanco más color, o esto es en realidad esquema de color monocromático. Un solo color. Aquí, en realidad usamos el solo color, pero cambiamos un poco el tono. Déjame mostrarte, si no te acuerdas. Este es 205, pero el más oscuro tenía 216. Pero aquí estamos usando el mismo tono para las dos paradas. Este más ligero tiene 18 y la práctica de saturación es diferente. Vamos a moverlo aquí así. Ya puedes ver esto va a terminar esta lección, si quiero mostrarte cómo puedes usarlos en la interfaz de usuario. Estos son dos ejemplos. Se puede ver esto es de claro a oscuro con alguna variación como esta. Entonces tenemos éste que tiene el esquema de color inspirado en la puesta de sol o la naturaleza, donde tenemos dos colores opuestos. En realidad se están utilizando tres colores por aquí, púrpura, azul y naranja. Es así como realmente aplicas tus gradientes en esquema de color y en tus IU, en tus sitios web. Algunos de los gradientes, van a funcionar muy bien en fondos. Algunos de ellos van a trabajar en [inaudible], porque como éste, este es un muy oscuro y claro. Esto no va a funcionar en todo fondo porque tenemos que poner algo de texto y otras cosas sobre el fondo. Ten en cuenta que siempre que utilices algo como esto, tienes que usar un fondo más claro. Gradientes, por ejemplo, como este, éste se puede utilizar como fondo. Pero estos oscuros y muy claros tienen mucho contraste. Donde tienes mucho contraste en el gradiente, paradas, no puedes usarlas como fondo. Pasemos por aquí y permítanme compartir con ustedes algunos de los gradientes en línea. Puedes ver aquí es un fabricante de gradientes de coolors.co. Puedes elegir colores, cualquiera que sea el color que quieras usar. También puedes copiar el código CSS desde aquí. De igual manera, ahí tenemos otro, gradient.com. Este es otro sitio web, tiene muchos gradientes. De igual manera, tenemos cssgradient.io. Tenemos muchos sitios web diferentes por aquí, UIGradients, Grabient, Gradient Hunt, Mesh Gradients y WebGradients. De todas formas se está llevando algún tiempo cargar. Aquí te presentamos algunos generadores más, generadores de color CSS, generadores de gradiente, donde puedes recoger el color y puedes generar el gradiente. Este es el gradiente. Se puede ver que esto se ve realmente bonito en un fondo. Si trato de cambiar el color aquí a éste, esto se ve realmente genial, es aburrido pero se ve realmente genial. Es así como se crean diferentes gradientes y estas son técnicas diferentes que se pueden utilizar. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta, siempre puedes preguntarme. Pasemos a la siguiente lección. 40. Lección de los colores en el esquema de la color NUEVA lección: En este video, voy a hablar de un tema muy importante relacionado con los esquemas de color que es la luminancia de color. Ahora bien, la luminancia del color es en realidad parte de dos cosas. Un factor es el tono, qué tono has seleccionado. Algunos de los tonos como se puede ver por aquí amarillo, el es verde, este azul claro, este azul yanish, los colores por aquí, estos naturalmente tienen más luminancia, tienen más vibrancia en ellos. Siempre que estás seleccionando colores, hay dos factores que debes considerar. Uno es lo que es la saturación de ese color porque la saturación realmente va a amplificar la luminancia. Luminancia es solo que se puede ver que algunos colores son muy nítidos, muy vibrantes, se puede decir que están emitiendo más luz de ellos que de otros. Esto es lo que realmente es luminancia y luminancia tiene dos cosas que considerar, una es saturación, alta saturación significa alta luminancia. También si has seleccionado algún matiz de por aquí de esta zona amarilla o verde o de esta sección por aquí, puedes ver a la izquierda tenemos luminancia 94, 83, 80 por ciento, 82 por ciento, 87 por ciento. Esta es luminancia naturalmente ocurriendo de manera similar, este color por aquí, tiene 70 por ciento, este color púrpura rosado es muy vibrante. Te voy a mostrar una técnica muy sencilla tienes que ajustar algunos de los colores. Al igual que si tu esquema de color tiene este amarillo o verde o este color o este color, tienes que ajustar tu saturación y brillo para hacerlos igual de bien o trabajar con tus otros colores. Permítanme mostrarles un ejemplo. Ahora, se puede ver a la izquierda he seleccionado top, este azul, verde, amarillo, este morado y este rojo. Ahora se puede ver este amarillo es muy vibrante, este verde también es de la misma sección, aquí se puede ver 83 por ciento, estos son los factores de luminancia. Aquí otra vez, rojo y luego tenemos este morado. Esto nuevamente tienen más vibración. Ahora, puedes ver todos estos colores que he seleccionado tienen 100 por ciento de saturación y 100 por ciento de brillo. Se puede ver naturalmente verde y amarillo y este rosa, me parecen más vibrantes. Ahora, muchos diseñadores he visto que cometen errores cuando seleccionan sus colores. Ahora, lo que tienes que hacer cada vez que estás usando estos colores lisos, estás usando mucha saturación. Tienes que equilibrarlo, tienes que reducir el factor de luminancia. Tienes que trabajar con eso se puede ver en la parte inferior he ajustado estos colores. Por ejemplo, éste, si te muestro, puedes ver esto, brillo es 88 por ciento, la saturación es 87. Si quiero tonificarlo, puedo reducir la saturación por aquí y puedo aumentar el brillo. Aquí me gusta más aquí, 91 por ciento. Ahora puedes ver este color si hacemos zoom es mucho mejor que mirar este. No puedes seguir mirando este color por más tiempo de duración. De igual manera para este verde tienes que ajustarlo a tu esquema de color, tienes que tonificarlo. Tienes que tonificar su saturación, su brillo, su vibrancia, su luminancia. Ahora puedes ver todos estos colores por aquí, este amarillo, este azul, este verde, están casi más cerca uno del otro en el factor de luminancia. puede ver que parecen que se pertenecen el uno del otro en lugar de que se puede ver por aquí, algunos son un poco menos luminosos o menos vibrantes. Algunos son muy vibrantes, no van a funcionar bien juntos. También para los humanos, no pueden mantener los ojos en estos colores que tienen una saturación muy alta o tienen una luminancia muy alta. Tienes que ajustar manualmente tus colores, como puedes ver por aquí, este azul, puedo ir por aquí. Tengo que bajarlo un poco. Voy a moverme por aquí, me alejaré de esta zona porque esto es muy vibrante, esto es alta saturación. Esto también es alta saturación y oscuridad, por lo que voy a mantener mi, se puede ver color por aquí, selección por aquí. De igual manera, este rojo se puede ver lo tengo tonificarlo y del 100 por ciento he reducido su saturación al 75 por ciento y el brillo es del 85 por ciento. Ahora puedes ver es más fácil de mirar aunque quieras moverlo a algún lugar por aquí así, lo que esto se ve mejor. De igual manera este color, este sigue siendo muy agudo y vibrante para mí así que voy a tonificarlo un poco por aquí. El gris, voy a tratar de hacer algo gris por aquí, un poco oscuro. Ahora se han ajustado a mi ojo. Ahora, siempre que estés creando una combinación de colores, no intentes usar colores como estos. Asegurarse de que su luminancia, su saturación sea tono hacia abajo, es más fácil para los ojos humanos mirar. He visto a algunos de mis alumnos que intentan usar este tipo de colores, este es el gran error que muchos diseñadores principiantes o diseñadores nerviosos cometen. Así que ten en cuenta que tienes que ajustar la saturación y también si estás en estos tonos como este amarillo y este greens o éste o éste, son naturalmente más vibrantes. Son naturalmente más luminosos. Van a emitir más luz. El amarillo está muy cerca del blanco, por lo que tiene el factor más luminoso como se puede ver, 94 por ciento por lo que está apenas seis por ciento por debajo del color blanco. Espero que tengas el concepto de luminancia ahora y cómo usarlo en tus esquemas de color. Ahora bien, si tienes alguna pregunta o no entendiste nada, siempre puedes preguntarme. Hasta entonces, nos encontraremos en otra lección Cuídate y adiós. 41. ¿Qué sigue?: Ahora, muchas gracias por estar conmigo junto con toda esta duración de tiempo y aprender junto a mí. Espero que hayan aprendido algo útil. Si no puedes entender algo o tener algunas preguntas, siempre puedes ponerte en contacto conmigo a través de esta plataforma. Siempre puedes ponerte en contacto conmigo a través de mi página web learnuxid.com. Puedes ponerte en contacto conmigo, puedes enviarme un correo electrónico. Puedes unirte a mí en redes sociales y hacerme preguntas o cualquier cosa, cualquier pregunta que tengas respecto al diseño de experiencia de usuario, diseño de interfaz de usuario o freelancing en general. Hasta entonces te vamos a ver dentro de otro curso. No echa un vistazo a mis otras clases y cursos sobre diseño, sobre tipografía, diseño de maquetación, esquemas de color y todas esas cosas diferentes. Trata de dejar una crítica honesta, escribe algunos comentarios sobre lo que hayas aprendido dentro de este curso. Hasta entonces nos vemos pronto dentro de otra clase o curso. Hasta entonces, cuídate y adiós.