Conceptos básicos para el diseño de UI y UX

1. Introducción a la clase: El color es una de las partes más esenciales del diseño de Eric porque el color determina el estado de ánimo de tus espectadores. Determina la dirección que van a tomar, y también determina los valores de la marca y la fortaleza de la marca. Entonces, por lo tanto, tus espectadores van a conectar esos colores con esa marca en particular. Hay muchas formas diferentes de trabajar con colores en el diseño UX de la interfaz de usuario. Pero en esta clase sólo nos vamos a centrar en las cosas más importantes. Porque de lo contrario esta clase podría tardar hasta 12 o 13 horas o algo así. Hey diseñador y mi nombre es Alex. Y en esta clase vamos a hablar de color en diseño UX de UI. El fundador de donut web, recreamos o 500 productos de diseño. También soy profesor y hasta ahora he creado o 30 cursos diferentes que van desde UI, diseño UX, todo el camino hasta redes sociales y diseño. En esta clase de Skillshare, vamos a cubrir por qué el color es importante, qué colores existen y cómo arreglas los colores y cómo eliges tus columnas amine, secundarias y terciarias. Vamos a hablar de diferentes combinaciones de colores, ¿ qué combinaciones de colores existen y cómo las usas en tus diseños? Y luego después de eso, te voy a mostrar algunas increíbles herramientas de selección de colores que puedes encontrar en línea, cuales te van a ayudar masivamente con elección de colores para tus proyectos de diseño UX de UI. Por último, te voy a mostrar cómo crear guías de estilo impresionantes para desarrolladores que usan Adobe XD y cómo presentar esas guías de estilo a tus clientes y desarrolladores para su uso posterior. Tu proyecto de clase para esta clase es crear tu combinación de colores ideal utilizando la herramienta que te gusta. Yo sugeriría que va a estar emocionado porque ahí está la herramienta que estoy usando, pero puedes usar cualquier herramienta que quieras. Y más detalles están en el video del proyecto de clase. Al lado de la tipografía, el espaciado y el color del ritmo es una de las cosas más importantes en el diseño a considerar. Y en esta clase vamos a cubrir algunas cosas importantes en las que debes enfocarte cuando estés trabajando como diseñador UX de UI. Así que esperamos verte en clase y vamos a crear algunas combinaciones de colores impresionantes. 2. Por Por qué el color es importante: Aparte de la tipografía, el ritmo, las rejillas, y muchos de estos otros elementos, color es uno de los elementos más importantes en cada diseño. Sin color, los usuarios no sabrán a dónde ir. No sabrán qué hacer. Y no sería capaz de distinguir elementos entre sí porque todos los elementos simplemente se verían iguales en blanco y negro. Entonces en este video, vamos a discutir por qué el color es importante y en qué deberías estar pensando cuando estás eligiendo colores para tus proyectos de diseño UX de UI. Establece el tono de tu proyecto. Entonces estoy hablando de la manera más orientada a los negocios a tus espectadores, entonces vas a usar diferentes colores. Entonces si estás hablando de un tipo juguetón de manera amistosa. Por lo que siempre hay que pensar en eso. Asegúrate de hablar con tus clientes, asegúrate de comprenderlos profundamente, entender su industria, entender el nicho, y por lo tanto, cuando elijas colores para ese cliente en particular, asegúrate de establecer el tono. Si el tono es de negocios, y luego usa el negocio no lo hagas, pero asegúrate de seguir ese tono a lo largo de tu diseño. Entonces es agradable y coherencia. Para que tus usuarios siempre sepan cuál es el tono de tu diseño dondequiera que estén en tu diseño, determina el modo de espectadores. A lo que me refiero con eso es que si los colores son demasiado oscuros, entonces los espectadores van a estar de cierto humor. Si los colores son demasiado ligeros, entonces van a estar de un estado de ánimo diferente. Si los colores son demasiado fuertes, tal vez van a ser fuertes en sus ojos. Por lo que van a estar de diferentes estados de ánimo. Así que asegúrate de prestarle atención a todo y asegúrate entender cuál es el tipo de estado de ánimo que quieres crear para tus espectadores? Una vez más, ¿es el juguetón? ¿ Es el negocio? ¿ Es el aprendizaje? ¿ Es el estado de ánimo de enfoque? De todas estas diferentes métricas hay que aprender sobre su estado de ánimo. Entonces, por lo tanto, cuando estás eligiendo colores, tienes que tener ese estado de ánimo en mente. Entonces, por ejemplo, si quiero que estén tranquilos y relajados, voy a usar algunos colores de la naturaleza, por ejemplo, blanco y verde y marrón y algo así. Si queremos mantenerlos bombeados, si quiero que subiendo energía y mantenerla alta, entonces quizá quiera usar algunos colores fuertes como el rojo, como el azul oscuro, como el verde, y algo así. Así que asegúrate de prestar atención al estado de ánimo de tus espectadores porque es extremadamente importante en cualquier diseño. Enfatiza las acciones. Entonces por ejemplo, si quieres que hagan clic en un botón, elegirías el color de ese botón para destacar porque quieres que vean ese botón y luego que tomen acción, así que haga clic en él. O si quieres que envíen un formulario, si quieres que dejen tu correo electrónico, usarás el color para enfatizar aquellas áreas en las que quieres que hagan clic o que tomen medidas. Y por supuesto, dependiendo de la acción que quieras que tome, dependiendo de la industria en la que se encuentre tu cliente, vas a elegir algunos colores diferentes y diferentes tonos de esos colores, simplemente guiando a tus espectadores los ojos a eso acción particular que quieras que tomen. Ayuda con la legibilidad en esto es increíblemente importante porque la vista está realmente deteriorada durante casi dos décadas porque todos tenemos estos dispositivos con pantallas y la mayoría de las personas por ahí tiene algunos problemas con su vista. Así que asegúrate de que cuando estés planeando, especialmente para párrafo, es especialmente para texto. Asegúrate de usar los colores que no se van a deteriorar en los ojos de tus espectadores. A lo que me refiero con eso es que no son demasiado fuertes, pero también al mismo tiempo que no están demasiado débiles porque si su vista es día de semana bueno ahora no van a poder leerlo si los colores son demasiado débiles y al revés . Por lo que hay que encontrar ese feliz medio suelo. Por lo tanto, tu legibilidad va a ser mucho mejor y tu tasa de rebote va a ser mucho menor porque se van a pegar en la página por mucho más tiempo y van a leer el texto y la información que pones en tu diseño. Y por último, guía los ojos del usuario. A lo que quiero decir con eso es que si quieres que miren de izquierda a derecha, puedes posicionar estratégicamente tus colores en esa dirección para que puedas guiarlos a través de tu diseño. Podrás arreglar que tu experiencia, cómo quieres que sean. Y luego cuando se ven de izquierda a derecha, pueden buscar, por ejemplo, colores más brillantes o colores más oscuros o algo así. Eres el encargado de su experiencia de usuario. Por lo tanto, convierte su experiencia de usuario a una mejor usando colores y navegándolos a través de tu diseño usando color. Existen muchas teorías y técnicas diferentes para elegir los colores que son importantes para tu diseño. Entonces estos son solo pocos que encontré a lo largo de los años funcionan mejor para mí y para mis clientes. Así que asegúrate de navegar por Internet para obtener algunos consejos y trucos adicionales y mezcla para entender cuando estás diseñando para tener todas estas cosas en mente. Y solo para crear la mejor experiencia de usuario posible para tus usuarios mediante el uso del color. En la siguiente lección, vamos a hablar de qué colores existen. Entonces te veré ahí. 3. Qué colores existen: Hay muchos colores diferentes por ahí, pero cuando estás eligiendo colores para un diseño UX de la interfaz de usuario, tienes que pensar básicamente en tres colores, que es el color principal, los colores secundarios y los colores terciarios. color principal es el color, que es el color general de tu diseño. El color secundario se utiliza para, por ejemplo, botones o cuatro enlaces de texto, hipervínculos y algo así. Y el color terciario es básicamente el color de acento. Ahora esto no es cierto para todos los proyectos. A veces solo vas a elegir dos colores, por ejemplo, y vamos a hablar de eso un poco más tarde en esta clase. Pero lo importante a tener en cuenta como diseñador UX de UI es que no vas a usar el color CMYK en la mayoría de los casos. Lo que eso significa es cian, magenta, amarillo, y clave. El motivo de eso es que esos colores son utilizados mayoritariamente para el diseño gráfico y para un trabajo de impresión. Porque estamos haciendo trabajo de pantalla, no vamos a usar esos colores porque no se traducen bien para cribar los colores que vas a usar. En la mayoría de los casos para sus proyectos de diseño UX de UI son códigos hexadecimales y color RGB. Los códigos hexadecimales es algo que es abreviado de hexadecimal. Básicamente significa en el 16, no te molestes demasiado por ello. Es solo el recuento de píxeles dentro del color, pero solo recuerda, los colores hexagonales sí tienen todos esos códigos diferentes. Vas a usar ese código hexadecimal en la mayoría de los casos. Y en algunos casos también vas a usar color RGB. Rb es sinónimo de rojo, verde y azul. Y también hay algunos otros colores como HSL, que es para saturación de matiz y ligereza. Pero dependiendo el desarrollador es dependiendo del proyecto, dependiendo de si el cliente ya tiene sus combinaciones de colores y un color ya creado para ellos, vas a usar sus colores y los colores en ese código de color en particular que mencionaron en su teoría. Entonces básicamente en este video, solo te voy a mostrar cómo funciona todo eso y cómo puedes encontrar esos colores. Entonces aquí estamos en los sitios web de Apple y la mayoría de ustedes saben de Apple. Básicamente crean estos dispositivos tecnológicos en gadgets, y también tienen su sistema operativo para sus dispositivos móviles y dispositivos de escritorio. Todo eso no importa. Lo que importa, es que puedes hacer clic con el botón derecho en tu navegador y puedes instalar este plugin llamado pico col, sobre todo si eres usuario de Google Chrome en grupo, como yo soy. Al hacer clic ahí, te va a mostrar todos estos diferentes colores que se utilizan a lo largo de esta página en particular. Ahora estos no son todos los colores de la marca. No va a tirar de colores de cada página de ese sitio web en particular. Pero si echas un vistazo aquí mismo, puedes ver todos estos colores. que se pueda ver este color rosa púrpura, por ejemplo, de este reloj y los textos a su alrededor, se puede ver este color azul. A lo mejor es este de aquí. Y si me desplaza hacia abajo, quizá podamos encontrar esta columna. Aquí está. Y si nos desplazamos más, se puede ver que este color oscuro para el texto es, por ejemplo, éste y éste. Por lo que puedes entender con bastante facilidad qué colores usó la marca en esta página en particular. Una vez más, menciono esta página en particular porque si cambiamos a la página de Mac, por ejemplo, aquí están usando colores completamente diferentes. Entonces volvamos a la página principal y vayamos a aquí. Una vez más, llámalo grande es completamente gratis. Lo vincularé en un PDF y podrás acceder a él. Simplemente puedes instalarlo en tu navegador. Y por qué esto importa es que simplemente puedes probar colores como te mostré. Así que simplemente haz clic con el botón derecho en Color, grandes estilos de portada. Se va a tomar estos colores de esta página en particular y luego mostrarte todos estos colores aquí mismo. Pero se puede ver es valores RGB para cada color en particular. Puedes quitar este color si quieres terminar, no quieres verlo aquí. Entonces si hacemos click en esta esquina de aquí, puedes ver que tenemos colores HEX. Entonces si cambio a hex, se puede ver cómo funciona esto. Entonces si un interruptor entre RGB y hex, se puede ver claramente la diferencia. Ahora, los colores hexadecimales son estos colores y este es el código de color. Voy a mostrar eso un poco más tarde dentro de Adobe XD. Ahora, cada herramienta que hay por ahí tiene estos códigos hexadecimales. Entonces si estás usando Photoshop, XD, sketch, Figma, no importa. Todos ellos los tienen, y todos suelen tener RGB y algunos de ellos también tienen HSL. Si cambiamos a HSL, que es saturación de matiz y ligereza, puedes ver cómo se ve esto. Entonces básicamente, puedes copiar esto, especialmente con códigos hexadecimales. Por lo tanto, selecciona esta copia con el botón derecho del ratón o controla C, controla V, y pégala en una herramienta favorita de elección. Y luego puedes tener este color y trabajar a partir de este color. Esto es especialmente importante si estás trabajando con clientes que ya tienen sus sitios web terminados. Si tienen sus aplicaciones completadas o algo por el estilo, y no sabían qué colores usan, entonces simplemente puedes tirar del sitio web como debería simplemente mostrarte, haz clic con el botón derecho en pico de color de los estilos de página y luego simplemente puedes entender qué colores han utilizado en su diseño. Esto es importante porque si quieren cambiar su paleta de colores, por ejemplo, más abajo de la línea, o si necesitas tener un color específico, entonces puedes usar este enfoque, copiar ese color en particular y luego úsalo en tu diseño. El otro modo de hacerlo es hacer una captura de pantalla de su diseño anterior. Arrástrelo a su herramienta favorita de elección, en mi caso, Adobe XD, y luego simplemente muestrea ese color de su diseño. Este no va a ser un buen enfoque de deuda porque vas a perder algunos píxeles cuando hagas estas capturas de pantalla. Y por lo tanto, esos colores van a ser sólo un poco diferentes a si utilizas este enfoque porque esto es tirar de los estilos de página. Entonces si lo retrocedemos una vez más, aquí mismo, si hago clic derecho en la página y voy a inspeccionar, se puede ver que si pasamos por el código, si vamos justo aquí, se puede ver uno, d1, d1, f Así que vamos a aquí, E1, D1, D1, F. Así que puedes ver de inmediato, está tirando de estilos de página, por lo que está tirando de colores directamente del código. Por lo que no hay lugar para el error ahí porque está tirando directamente de la cotización. Ahora podrías estar pensando, sí, pero ¿qué pasa con estas imágenes? Entonces tomemos esta imagen por ejemplo. Haga clic derecho en Inspeccionar. Aquí estamos y aquí tenemos los descoloridos. Por lo que si hacemos click en él, lo puedes ver aquí mismo. Te podría estar preguntando qué pasa si mi cliente no tiene ningún sitio web existente donde vas a formar la paleta de colores en base a lo que hablamos anteriormente, en base a lo que vamos a hablar en un futuro lecciones en este clase. Y principalmente desde el nicho en la industria en el que se encuentran. Por ejemplo, si están en un sector bancario, si están en el sector de TI, las posibilidades dependen de quién sea el público objetivo, que el sitio web o la aplicación móvil vaya a hablar con. Lo más probable es que vayan a elegir colores específicos en esos casos y asegurarse de explorar la competencia, asegure de ver lo que están haciendo, y asegúrese de formar sus colores basados en el nicho en el que se encuentra su cliente, basado en la competencia, y en función del modo de visor en el que quieras ponerlos. Entonces sí quieren que compren algo, sí quieren que disfruten del contenido y se queden por más tiempo. Si quieres ser serio, sí quieres ser juguetón. De todas estas cosas, vas a determinar el color que vas a elegir en tu diseño. Por último, como dije, asegúrate de usar color grande porque es realmente bastante simple. Simplemente haz clic derecho en cualquier página, te va a mostrar todos estos colores. Y básicamente puedes seleccionar este auto, golpear copia y pegarlo en tu diseño. En el siguiente video de esta clase, vamos a hablar de combinaciones de colores, por qué son importantes en qué combinaciones de colores existen, y cómo seleccionar, uh, cuál, cuál es la adecuada para ti. Entonces te veré ahí. 4. Combinaciones de colores: Hay muchas maneras diferentes en las que puedes combinar color para tus proyectos de diseño UX de UI. Pero en esta clase y en esta lección, voy a hablar de sólo cuatro de los cuales son la forma de cuatro principales y los cuatro que se utilizan en su mayoría en el diseño, más uno adicional, que es una especie de bono en este lección. Aquellos para nuestro monocromático, análogo, gratuito y triádico. Entonces, exploremos todos estos y veamos qué son. Esquema de color monocromático es lo que sugiere el nombre. Simplemente vas a tomar un color y elegir diferentes hojas de ese color en particular. Entonces, por ejemplo, estás eligiendo el color azul, que es realmente oscuro, y luego vas a elegir diferentes tonos de ese color azul para corresponder mejor con el color azul oscuro principal de la deuda. Entonces, por lo tanto, vas a usar esos tonos más claros , por ejemplo, para tus botones o al revés, puedes usar los tonos más claros para el texto o los tonos más oscuros para los botones para los enlaces y cosas así. Colores análogos son colores que están uno al lado del otro en la rueda de color, vas a elegir tres colores que están realmente cerca uno del otro. Entonces cuando tomas la rueda de color y luego puedes elegir diferentes tonos de esos colores que están justo al lado del otro. Lo que esto te va a permitir hacer es que tu diseño va a ser mucho más coherente porque va a parecer que pertenece el uno al otro. Tus elementos van a ser de colores similares, de énfasis similar con esos colores porque no vas a elegir diferentes tonos de tus colores, solo los colores que están uno al lado del otro en la rueda de color. Colores de cortesía es lo que el nombre sugiere. Vas a tomar dos colores los cuales están en la escala completa opuesta de la rueda de color. Y luego los vas a combinar. Puedes elegir tu color principal de esa rueda de color. Y luego desde tu color principal, puedes posicionar tu rueda de color de esa manera para encontrar tu color de cortesía en el lado opuesto completo de la rueda de color. Puedes usar diferentes tonos de esos colores, así que color medio y de cortesía. Pero siempre te sugeriré que elijas tu color principal y esto es lo más fácil de hacer si tu cliente ya tiene algo como un logo, tu tarjeta de visita, o el color que les gusta. Y entonces simplemente puedes poner ese color en tu color. Escogeremos el color de cortesía, y por lo tanto, puedes elegir diferentes tonos de esos colores. Y puedes saber qué color es el color de cortesía para ese color. Y por último, tenemos colores triádicos. Ahora, los colores triádicos son básicamente solo tres colores espaciados uniformemente en tu rueda de color. Por lo que solo puedes imaginarlo como un triángulo, y puedes rotar su triángulo para elegir el color principal y los colores complementarios que están en el lado opuesto formando un triángulo, puedes elegir tu color principal, y por lo tanto puedes seleccionar los otros dos colores que están en los lados pares de ese triángulo. Y el enfoque de aguinaldo es de 60, 30, 10. Ahora este enfoque requiere de tres colores diferentes los cuales puedes elegir como quieras. Pero asegúrate de elegir tu color principal, que va a comprender el 60% de tu diseño. 60 por ciento es la cantidad que vas a usar tu color principal, 30 por ciento es tu color secundario o de cortesía, y luego esos 10% son tu color de acento. Este es un enfoque que se usa comúnmente en la interfaz de usuario, diseño de UX e InDesign en general. Entonces básicamente puedes usar cualquiera de estos métodos los cuales solo se mencionan para seleccionar esos tres colores que quieras. Y puedes usar el triádico si quieres, solo para ver en el rectángulo cómo van a quedar esos tres colores. Pero asegúrate de formar esos colores de tal manera que no se estén abrumando entre sí. Si tu color principal es del 60 por ciento, entonces solo asegúrate de usar ese color para el 60 por ciento de tu diseño y luego 30 por ciento y luego 10 por ciento que comprende el 100% de tus colores. No utilices ningún otro color. Solo asegúrate de que si estás usando este enfoque en este método para usar solo esos tres colores. Por lo que estas son solo algunas de las principales combinaciones de colores. Como mencioné, hay muchas, muchas, muchas otras combinaciones de colores diferentes, pero estas cuatro es lo que encontré trabajo para mí mejor a lo largo de los años. Y he encontrado a la mayoría de los diseñadores en el uso de la industria. En el siguiente video, te voy a mostrar algunas herramientas las cuales te van a ayudar a seleccionar estos colores. Entonces te veré ahí. 5. Herramientas de selección de color: En este video, te voy a mostrar algunas herramientas de selección de color que he estado usando en los últimos años. Y descubrí que la mayoría de estos, sobre todo uno de Adobe, es lo que la mayoría de los diseñadores por ahí usan. Porque una vez que conozcas la herramienta, una vez que estés familiarizado con dos, te vas a quedar atascado con ella y vas a volver a usarla todo porque si no está rota, no la arregles. Entonces como dije en este video, voy a dar sólo unos ejemplos. Si no te gusta ninguno de estos, simplemente puedes navegar por Internet para encontrar el que funcione para ti. Entonces aquí está la primera que se llama Peloton. Y se puede ver desde el diseño en la página web es realmente bastante viejo. Ahora cómo se ve todo esto puedes hacer click aquí mismo para seleccionar el monocromático. Entonces un solo color, como acabamos de hablar, colores adyacentes, o tres colores, se pueden ver colores triádicos. Tan tríada de tres colores, tetradas, así para los colores. Y por último, freestyle cuatro colores y puedes seleccionar dos colores, tres colores como quieras. Entonces, como mencioné en el video anterior, dependiendo de lo que quieras crear aquí mismo, vas a seleccionar los colores monocromáticos, por ejemplo, o adyacentes, o cuáles son colores de cortesía o algo así. Entonces vamos por tríada en este caso. Para que se pueda ver cuando empiezo a girar esto, se puede ver el color. Entonces digamos que este es mi color principal. Y se puede ver que están espaciados uniformemente en este triángulo y me está mostrando todas las hojas de mi color principal. Y puedes mantener presionada la tecla Mayús para mover los tonos de forma individual. Entonces si lo sostengo, y si selecciono esta forma, por ejemplo, si selecciono esta, se puede ver que estamos consiguiendo colores completamente diferentes aquí mismo. Entonces si lo giro hasta aquí, se puede ver que ahora tenemos esta paleta de igualar. Ahora, puedes ir a Preajustes y puedes elegir diferentes presets para este color triádico, lo cual es realmente útil si no tienes tiempo suficiente. Y a partir de los colores que has elegido, te está mostrando estos presets. Entonces si volvemos a los colores, si lo rotamos para aquí, por ejemplo, volver a los presets. Se puede ver que ahora son completamente diferentes. Para que puedas elegir estos colores, puedes hacer lo que quieras con ellos. Y si nos escondemos desde aquí, se pueden ver las tablas de exportación. Si hago click justo ahí, puedes ver, puedes exportarlos como HTML, CSS, Menos sass, ACML, y como textos, puedes exportar muestras de color y puedes exportar estas combinaciones de colores para las que creamos, que creo que es realmente importante y realmente útil porque esta herramienta es gratuita. Y por cierto, voy a enlazar todas estas herramientas que están mencionando en este video dentro del PDF. Así que asegúrate de abrirlo, asegúrate de hacer click en esos enlaces si quieres acceder a estos sitios web y a todos los recursos y consejos que están mencionando a lo largo de esta clase. Entonces básicamente ese es el pelotón para ti. Se puede aleatorizar, se puede restablecer, volver a los colores originales. Entonces aquí mismo, y como dije, puedes elegir el que sea, el estilo que quieras. A continuación, tenemos Color Hunt. Para que puedas ver una vez más, ahora tenemos algunas selecciones diferentes aquí mismo porque estas son preseleccionadas. Para que puedas golpear al azar, va a mostrar solo colores aleatorios. Puedes ir con el mes popular, el año, la antigüedad, o puedes elegir por estos. Entonces si golpeo colores pastel, si esos son los colores que quieres para tu proyecto en particular, tienes retro vintage claro, oscuro, sobre todo oscuro es importante y popular en día y la edad de hoy donde tenemos modo oscuro para el diseño UX UI. Entonces si estás diseñando para el modo oscuro, asegúrate de comprobarlo. Entonces se pueden ver tonos de piel, especialmente importantes para las marcas de belleza, por ejemplo. Una vez más, volviendo a ese estado de ánimo de tus espectadores, vamos a volver a ese nicho. Vamos a volver con ese cliente. Entonces, cuando coleccionas todos esos puntos, cuando los conectes, vas a entender qué tipo de combinaciones de color y color realmente necesitas para tu proyecto en particular? Entonces si nos desplazamos todo el camino hacia abajo, se puede ver que no tenemos esos. Entonces si volvemos a aquí, no tenemos tríada de colores adyacentes monocromáticos, pero sí tenemos estos. Entonces estos son los estados de ánimo, estos son los proyectos. Estas son las, por ejemplo, no sé, digamos industrias en las que se encuentra tu cliente. Entonces vayamos con oscuro por ejemplo. Y se pueden ver todos estos. Te pueden gustar si quieres. puede ver que está publicado hace 13 horas. Entonces Escojamos éste. Y si rondo, puedes ver que tengo el código hexadecimal ahí mismo. Para cada uno de estos colores. Te puede gustar esta paleta. Puedes descargarlo como imagen. Y tienes todos estos colores aquí mismo como códigos hex y como RGB, que es lo que mencioné anteriormente, mayoría de los diseñadores UX de UI están usando códigos hex y en algunos casos, colores RGB porque son fáciles para tus desarrolladores integrar. En cita, por eso los están usando. Y también colores HSL a veces porque pueden usar porcentajes. Así que asegúrate de hablar con tus desarrolladores si solo estás empezando con estos colores, MY debería hablar con ellos. Es el código hexadecimal adecuado para ellos, o es el RGB o HSL, dependiendo de esos valores en esa información de datos que vas a obtener de tus desarrolladores. Vas a elegir tus colores para este proyecto en particular. Entonces, una vez más, tienes más paleta oscura para adultos justo aquí. Y si crees que este color no funciona, por ejemplo, puedes elegir los verdes para que puedas jugar con estos autos. A continuación tenemos colors.com, para que puedas empezar a generarlo. Una vez más, voy a enlazar todos estos sitios web en un PDF. Y lo que tenemos aquí mismo es esta suma. Tenemos todos estos diferentes colores que puedes explorar, puedes ver, puedes ver, puedes ajustarlo. Se puede ver por daltonismo cómo se ve. Para que puedas elegir todos estos. Y si lo cerramos. Se puede crear un collage y se puede crear una paleta a partir de la foto. Entonces si tu cliente te está enviando ese logo o el color que le gusta, puedes subir esa foto aquí mismo. Se va a generar la paleta de colores a partir de ese color en particular. Ahora, puedes ver que estás recibiendo los nombres aquí mismo, lo cual es genial si quieres usar estos nombres más adelante dentro de tu diseño como tokens, por ejemplo, cuando estás configurando tus colores a tus desarrolladores. Y luego van a entender fácilmente de qué color mencionaste porque pueden ponerlo dentro del código. Entonces por ejemplo, este lobo maderero, alabastro y cultivado, pueden poner todas estas palabras dentro del código, conectándolas en la base de datos principal. Y por lo tanto, la base de datos principal va a tirar de los nombres de estos colores los va a representar como un sitio web o una aplicación móvil. Entonces, ¿cómo se trabaja realmente con esto? Bueno, tenemos todas estas opciones aquí mismo para que puedas quitar el color, puedes ver las hojas. Entonces digamos que quiero usar este. Ahora ten esa. Puedes guardar color a favorito, puedes arrastrarlo. Entonces posiciónate aquí mismo para cambiar el aspecto de tu paleta de colores. Puedes copiar el código hexadecimal y puedes bloquearlo. Para que puedas elegir cualquiera de estos diferentes colores. Podrás arreglarlos. Entonces si lo encierro, y digamos que quiero posicionar esto aquí mismo se va a quedar este color y no va a cambiar a cómo se exporta desde aquí. Tienes esta sólida di que me gusta esta paleta de colores, pero déjame realmente mostrarte tan viewsheds y ver esta, pero no estoy realmente seguro. Puedo dar click ahí mismo. Entonces justo aquí. Elige defectos o cualquiera de estos. Déjame ir al recolector y déjame seleccionar, por ejemplo, este tono oscuro aquí mismo. A mí me gusta y puedo cerrarlo. Y por lo tanto, puedo explorar mis colores más lejos de este color en particular o simplemente dejarlo como está. Y por último, si quiero exportarlo, puedes usar Control IEP. Puedes copiar, estás fuera a enviarlo a los desarrolladores. Se puede exportar como PDF, lo cual es genial como imagen. Puedes obtener los colores CSS, lo cual es increíble para tus desarrolladores. Obviamente, AAC, SVG, que también es genial, y puedes conseguir el abrigo si tus desarrolladores quieren en el código también. Por último, puedes incrustar el código para estos colores en particular si querías guardarlos de esa manera a tus clientes no son desarrolladores. A continuación tenemos Adobe Color, que es uno de los más antiguos del negocio. Pero en mi opinión, quizá sea uno de los mejores porque está integrado con Adobe XD, con productos de Adobe, puedes abrirlos en una aplicación de Creative Cloud muerte si eres un usuario de Creative Cloud, y por lo tanto simplemente puedes acceder a estos colores y abrirlos en el software de tu elección. que puedas crear, puedes explorar, tienes tendencias y finalmente tienes bibliotecas. Por lo que dentro de las bibliotecas, puedes crear tu biblioteca y luego puedes abrir la biblioteca en Adobe XD, por ejemplo. Simplemente puedes copiar esos colores, pegarlos dentro de tu XD. Es realmente así de simple. Si tu usuario de Adobe, también hay una integración de Photoshop, integración de Illustrator. Entonces, no importa qué herramienta estés usando de la familia de Adobe, vas a tener esa integración. Por lo que tenemos equipo de extracción, extraer herramientas de accesibilidad de gradiente, lo cual también es genial. Entonces si hago clic ahí mismo, se puede ver la relación de contraste, se puede ver la puntuación. Se pueden ver algunos, se puede comprobar la sal para fallar 17 Puntos y por debajo. Entonces tenemos que ajustar este color. Pase por 18 puntos en adelante, pasados cuatro iconos y gráficos accionables si está utilizando estos colores. Entonces básicamente lo que necesitamos cambiar es el color del texto. En este caso particular que adobe nos da m. Aquí a la izquierda tienes todos los que mencioné. Por lo que actualmente está en la costumbre, pero si cambio a análoga, haga clic en ella, se puede ver que sólo podemos elegir este color. Si vamos con monocromático, se puede ver cómo se ve eso como triádico. Entonces básicamente tres colores. Y se puede ver ese triángulo que mencionamos. Entonces este es nuestro color principal, estos son nuestros colores secundarios y terciarios. Se puede tener de cortesía. Por lo que en los lados opuestos, en el color rueda dividida de cortesía. Entonces básicamente esto, y luego puedes elegir por cerca o lejos que quieras que esté esto. Y puedes dividirlos, puedes moverlos. Puedes mover estos diferentes tonos para obtener la mejor paleta de colores posible. Y haga doble clic en split de cortesía. Entonces básicamente lo mismo pero el doble del color. Tienes el cuadrado, compuesto y tonos. Entonces dependiendo de lo que quieras, que mencioné a lo largo de este curso, siempre puedes llamar con Custom y puedes ajustarlo como quieras. Entonces, por ejemplo, si elegimos de cortesía y si voy con la costumbre y quiero ajustarlos, Vamos a usar éste o simplemente al azar. Vamos con esto. Y también puedes ajustar los tonos aquí mismo de este color en particular. Entonces si selecciono este color, puedo ajustar los tonos para ese color en particular como este. Puedo ajustar todas estas cosas. Puedo copiar rápidamente este código hexadecimal si quiero. Y por último, puedes guardarlo como mi equipo de color, por ejemplo, puedo nombrarlo yo y todo mi proyecto de sitio web. A ver. Y puedes ver los códigos que vas a conseguir ahí mismo. Entonces estas son etiquetas. Se puede revisar una vez más la accesibilidad, solo para ver si eso es lo suficientemente bueno. El equipo es seguro a ciegas de color, lo cual es genial. Por lo que puedes guardarlo si quieres. Va a aparecer en tus bibliotecas XD o Photoshop. Por último, se puede extraer el equipo. Para que puedas extraer el color de la imagen y guardarlo como una paleta de colores. Se puede extraer un gradiente o lo mismo. Una vez más, herramientas de accesibilidad, que mencionamos previamente y tenemos rueda de color, lo cual es genial. Entonces, por último, si estás usando esto, asegúrate de guardarlo, va a aparecer en tu herramienta de elección. También tienes estos juegos de color. Has cambiado de equipo para que puedas elegirlo. Tienes Explorer, por lo que podrás explorar diferentes combinaciones de colores. Qué es tendencia, qué no. Entonces si cambian a tendencias, se puede ver lo que eso me va a dar. Entonces por ejemplo, me va a dar un montón de imágenes que son tendencia. Y se pueden ver los colores que se toman de estas imágenes en particular. Entonces si te gustan estos colores, puedes descargar o JPEG o agregar a biblioteca una vez más va a aparecer en tu XD o Photoshop Illustrator o lo que sea que estés usando. Y por último, pico de color, que mencionamos anteriormente. Una vez más, es genial. Voy a dejar los enlaces a todo lo que mencioné en el PDF. Pero de verdad te recomendaría que te pongas el color rosa porque te va a hacer mucho más fácil la vida. Este es el Spotify, por lo que tienes estos colores de Spotify. Y por supuesto puedes ir al sitio web de tu elección si quieres escoger los colores de ese sitio web en particular. Y te va a mostrar aquí mismo dentro del pico de color. Ahí vamos. Estos son los colores, estas son las herramientas son realmente espero que las encuentres útiles. Una vez más, les voy a dar todos estos enlaces en el PDF. Abre el PDF, haz click en el enlace, quieres acceder a él y asegúrate de empezar a explorar estos colores. Asegúrate de explorar estas herramientas para ver cuál funciona mejor para ti. Y una vez que encuentres esa misión, para explorarla más profundamente , asegúrate, como viste en la misión de Adobe Color, explorar las tendencias, asegúrate de subir imágenes, asegúrate de explorarla, y solo para ver y entender cómo elegir los colores para tus proyectos de la mejor manera para ti. En el siguiente video, te voy a mostrar cómo crear unas guías de estilo de exportación para los desarrolladores de Adobe XD. Entonces te veré ahí. 6. Guías de estilo para desarrolladores: Guía de estilo es parte realmente importante de tus diseños UX de UI porque en ella vas a presentar todos los colores, iconos, imágenes, y todos los demás elementos que usaste en tus diseños UX de UI. las vas a mostrar a tus clientes y lo más importante a tus desarrolladores. Porque a partir de esa guía de estilo, pueden sacar información importante como el color para usar en tu presupuesto. Entonces les voy a mostrar un proyecto que hice previamente para una de mis gafas maestras. Y voy a explorar qué es la guía de estilo y a mostrarte algunos consejos y trucos. Entonces aquí estamos en Adobe XD, y este es el nuevo proyecto de sitio web del banco. Y como dije, esto es de mi masterclass Adobe XD. Voy a vincularlo en el PDF. Puedes comprobarlo si te interesa. Y aquí partimos de la arquitectura del sitio web, trasladamos a wireframes en papel, trasladamos a wireframes en Adobe XD, más al diseño de sitios web, diseño de dashboard. Y luego finalmente hizo el diseño responsive y el diseño responsive dashboard. También hicimos presentación de proyectos y finalmente, guía de estilo. Entonces si cambiamos de capas a aquí, que es de documentos ácidos, se pueden ver todos los colores y códigos de color que se utilizan. Entonces básicamente estos son fichas de colores. Cuando se cierne, se puede ver que el blanco liso es FFF. Si pasas el cursor aquí mismo, puedes ver así valores RGB de capacidad 100. Entonces si acercamos realmente de cerca, puedes ver que tenemos guía de estilo del proyecto aquí mismo. Entonces lo que te recomendaría que hagas es cuando estés creando estas guías de estilo de proyectos, asegúrate de incluir siempre los códigos hex si esos son los que tus desarrolladores requieren, o los códigos RGB. Si una vez más, esos son los que requiere un desarrollador. También lo que se puede ver aquí mismo es que tenemos blanco liso, que es este color. Y también incluí el código hexadecimal para que los desarrolladores puedan seleccionar fácilmente este código hexadecimal si quieren. Y moviéndose más allá, se pueden ver todos estos otros colores. Lo que puedes hacer es darles este archivo XD. Entonces pueden simplemente tomar esto. Entonces voy aquí mismo, puedo copiar este color. Entonces haga clic derecho y copie. Puedo ir aquí mismo, copiar este color, por ejemplo, pegado en mi editor de código. Y por lo tanto puedo tenerlo en mi código o puedo seleccionarlo desde aquí y copiarlo. O aún mejor, simplemente puedes Controlar o Comando E en tu teclado para exportar esto como PDF. Cuando golpeas Exportar, se va a exportar como PDF. Y luego cuando los abran más tarde, simplemente pueden seleccionar este código hexadecimal del PDF, copiarlo, y pegarlo dentro. También para la tipografía, se puede ver para la iconografía. Por lo que todos los iconos fueron utilizados en ese proyecto en particular. Y todas las ilustraciones y elementos adicionales que usaste puedes poner justo aquí, pero también puedes hacer es justo aquí, ¿dónde está tu color? Siempre se puede poner, por ejemplo, fondo muestra desdibujos o basicidad, unas cubiertas y todos estos otros elementos aquí mismo porque en interiores también contribuyen como color, porque todos esos fondos, sombras y desenfoques también tienen color en ellas. Por lo que otra cosa que puedes hacer con esta guía de estilo es compartirla. Entonces si solo selecciono esta pizarra de arte, ve a Compartir. puede ver que es solo uno seleccionado. Entonces si me desacerco, se puede ver nada más está seleccionado porque acabo de seleccionar este aeropuerto en particular. Entonces lo que puede hacer es compartirlo. Puedo crear el enlace, pero en lugar de Design Review, voy a usar el desarrollo para poder crear un enlace. Y mientras está creando, lo que quiero mostrarles aquí es que los desarrolladores pueden obtener este enlace. Pueden sacar todos estos colores de este vínculo en particular. Y también puedes elegir esta cuota para el desarrollo para cualquier otro tablero de arte que tengas en tu diseño. Por ejemplo, tenemos diseño de sitios web aquí mismo, y tenemos muchos de estos tableros de arte, por lo que puedes seleccionarlos todos. Podrás compartirlos para el desarrollo. Y por lo tanto, tus desarrolladores van a tener ese color. Pueden elegirlo. Entonces si hago clic aquí para nuestra guía de estilo, los va a abrir en mi navegador, y va a mostrar en mi navegador cómo se ve todo esto. Entonces si te mostramos aquí mismo mientras está abriendo, así que tenemos guía de estilo del proyecto. Entonces dependiendo de cómo nombraste a tu mesa de trabajo, se va a mostrar de esa manera. Por lo que una vez más, tenemos todos estos diferentes colores. Entonces si selecciono uno de ellos, por ejemplo, mezcla este, y si cambio al código aquí mismo, se pueden ver todos los colores y todos los tonos de mis colores, que se tira de aquí. Entonces si selecciono este, se puede ver que se llama Peligro leer en seguida tenemos propiedades CSS. Algunos, tenemos ancho y alto de arriba a la izquierda, tenemos fondo, tenemos fondo aquí. Entonces este código hex, y tenemos obesidad de 100. Entonces básicamente lo que pueden hacer desde aquí es que pueden seleccionar para copiar desde aquí. Pueden hacer clic en este color. Aquí. Color copiado ordenar. Déjame esconderme sólo para que puedas verlo. Entonces si selecciono este color, haga clic en él, se puede ver el color copiado, por lo que es herramienta copiada. Y pueden pegarlo más tarde dentro del código. También podemos cambiar a aquí. Por lo que puedes ver raíz para todos estos colores. Por lo que una vez más, blanco liso, gris claro , gris oscuro, verde principal, todos los colores que nombré familias extranjeras. Por lo que tenemos familias de fuentes, que también es genial para desarrolladores, todas ubicadas justo aquí dentro de nuestra guía de estilo. Y por último. Por este carácter estilo nueve. Entonces si nos desplazamos todo el camino hacia abajo, que es éste. Entonces si selecciono solo eso y vuelvo al código. Entonces déjame seleccionarlo una vez más. Se pueden ver todos los estados que creé para este diseño en particular. Por lo que tenemos Visa, Blanco y Negro debe tener otorgamiento MasterCard blanco y negro. Entonces simplemente cambiando todos estos logotipos en. Básicamente si hago doble clic en el interior y voy con la apariencia, sí, si elegimos Control y click, se puede ver un gradiente lineal. Por lo que todos los colores desde un gradiente lineal, se puede ver la dirección del gradiente, la obesidad y la sombra de gota. Esta es la que mencioné anteriormente. Por lo que la sombra de gota se ha descolorido y tiene estos valores. Entonces, básicamente, tus desarrolladores pueden sacar estos valores directamente desde aquí. Tienen el código CSS justo aquí una vez más. Y por último, si cambian a escuchar, pueden seleccionar esto. Y luego pueden ver dentro de la raíz CSS todas las cosas de aquí. Entonces, básicamente, solo tienen que encontrar esta tarjeta aquí mismo y pueden copiar el código CSS desde ahí. Entonces si selecciono éste por ejemplo, y se puede ver el estado predeterminado casi negro. Por lo que si sostengo mi Control y hago clic en el interior, se puede ver gris claro. Si selecciono y hago clic dentro. Para que se pueda ver este color, que es el color de su piel. Y si acercamos sólo un poco más aquí. Entonces vamos con 100, por ejemplo. Si hacemos zoom y hacemos click en este color verde, por ejemplo, puedes ver el color para que puedan hacer click, pueden copiar al portapapeles y básicamente en base a lo que quieran. Por último, pueden hacer clic aquí mismo en los comentarios y pueden jalar este giro, por ejemplo aquí. Y puedes decir algo así como ¿Te gustan estos iconos, o deberían ser blancos y negros? Si dicen que sí, por ejemplo, entonces lo que puedes hacer es hacer clic en este ícono. Se puede volver al código, localizar uno de estos. Entonces, por ejemplo, digamos éste. Y si solo tienes estado predeterminado para ello, y por ejemplo, puedes crear diferentes estados para estos iconos. Por ejemplo, tenemos default, tenemos hover. Por lo que puedes ver que cambia el color para el estado por defecto y para el hover. Entonces dependiendo de lo que hayas hecho con tus colores, va a reaccionar de esa manera en particular. Entonces iconografía, colores, lo mismo, misma historia. Entonces cuando el selecto que van a obtener CSS, simplemente pueden hacer clic para copiar al portapapeles y pueden basar esto en su código. Entonces básicamente así de fácil es trabajar con Adobe XD con colores, qué guías de estilo. Y yo siempre recomendaría que exporte esto como PDF porque sus desarrolladores y podrían estar en movimiento. En ocasiones podrían discutir esto con tu cliente. Así que asegúrate de enviarles el enlace de la propia guía de estilo, para no confundirlos demasiado y asegurarte de enviarles enlaces separados. A menudo diseño de tramas alámbricas, de papel, alámbricas, lo que sea que estés haciendo, porque de esa manera pueden inspeccionar fácilmente todos estos colores. Porque si los pones a todos en un solo enlace, que puedes hacer, simplemente los vas a confundir. Y encontré que este enfoque funciona mejor con mis desarrolladores. Pero asegúrate de hablar siempre con tus desarrolladores primero antes de empezar a trabajar. Asegúrate de mencionar la mezcla de colores hex o RGB para ver si son buenos con algunos de esos colores. Y finalmente, que algo que no te mostré. Si selecciono este color, por ejemplo, puedo hacer clic aquí. Déjame esconderme. Por lo que puedes ver tenemos color sólido, gradiente lineal, gradiente radial, y gradiente angular en XD, tenemos obesidad para el color, tenemos diferentes tonos de colores aquí mismo. Tenemos la sierra de obesidad para el canal Alfa, para el color mismo. Y finalmente tenemos el hex, RGB, y HSB. Por lo que dependiendo de lo que quieran tus clientes y desarrolladores, puedes elegirlo desde aquí. Entonces básicamente eso es todo. Es por eso que estos proyectos guías de estilo son realmente importantes porque en un solo lugar, tienes todos estos elementos que usaste en tu diseño. Y cuando estés trabajando en tus proyectos, asegúrate de crear siempre las guías de estilo en paralelo con lo que estás haciendo porque después va a ser mucho más fácil exportarlo para que tus desarrolladores echen un vistazo. Entonces básicamente eso es todo. Creo que Hume vio lo importantes que son las guías de estilo para los desarrolladores. No hay tan importantes para ti, pero podrían ser importantes para los otros diseñadores que podrían trabajar en este diseño en particular después de ti. Porque en la mayoría de los casos, puede que no te interese seguir trabajando en este proyecto en particular. A lo mejor algunos otros diseñadores fueron a pisar tus zapatos y seguir trabajando en este proyecto. Por lo que tener algo así como una guía de estilo, siempre va a ser mucho más fácil para diseñador de deudas seguir donde lo dejaste con el mismo estilo. Y por supuesto va a ser mucho más fácil para los desarrolladores trabajar con guía de estilo, porque en un lugar singular, tienen toda la información que necesitan para empezar a codificar este proyecto. 7. Tu proyecto de clase: Tu proyecto de clase para esta clase es crear ya sea la guía de estilo o la combinación de colores de tu elección. Asegúrate de usar la marca que realmente te guste. Puedes usar el pico de color, que te mostré. Puedes seleccionar esos colores y luego usar tu herramienta favorita de elección, ya sea Photoshop, fig, mi boceto XD, lo que sea, asegúrate de crearlo y subirlo como imagen a nuestros proyectos de clase. Pero también puedes hacer es lo que te muestro aquí mismo dentro de la guía de estilo del proyecto. puedas crear algo que sea complejo como este, o simplemente puedes acercarte aquí y simplemente usar los colores. Asegúrate de usar los códigos hexagonales porque estoy realmente intrigado e interesado en ver el código hexadecimal que usaste y también asegúrate de nombrar tus colores. Y sólo pon este pequeño texto aquí. Yo lo hice. Tan solo para que pueda ver tu proceso de pensamiento y para ver cómo tu nombre, tus colores, puedes usar una de esas herramientas, que viste en una de las lecciones anteriores. Y esas herramientas te están dando los nombres de color. Para que puedas usar esos nombres o puedes usar tus propios nombres, haz lo que quieras. Tan solo asegúrate de crear la combinación de colores. No necesitas tantos colores. Puedes usar tres colores. Por ejemplo, la deuda va a ser abundante. Simplemente asegúrate de combinarlos, asegúrate de usar códigos hex y los nombres que aparecen a continuación y sube eso como una imagen a tus proyectos de clase. Tengo muchas ganas de ver lo que ustedes pueden crear. Y realmente espero interactuar con ustedes en la sección de proyectos de clase. 8. Conclusión: Ahí vas. Has llegado al final de esta clase. Es sólo una clase corta, como mencioné en la intro y al inicio de esta clase, el color es una asignatura realmente compleja y lo están enseñando en escuelas cuatro semestres, incluso cuatro años. Entonces es realmente complejo si quisieras serlo, pero no tiene que ser esa mezcla compleja para seguir algunos de estos pasos que mencioné, asegúrate de explorar por tu cuenta. Deja que esta clase sea solo tu punto de partida en la exploración del mundo del color. Asegúrate de elegir tu herramienta favorita y explorarla más lejos de ahí, y asegúrate de consultar el PDF. Porque como sigo mencionando en esta clase, todos los enlaces que mencioné y todos los recursos que mencioné se encuentran en ese PDF. Asegúrate de hacer clic en los enlaces para acceder rápidamente a él y luego comienza a explorar e inicia tu viaje universitario. Una vez más, gracias por ver esta clase. Espero de verdad que lo encontraras perspicaz y servicial. Y una vez más, si quieres un conocimiento más profundo sobre el color, asegúrate de usar cualquiera de los cursos en línea que son realmente largos e ir en profundidad sobre todas las materias que nosotros, que mencionamos en esta clase. O para leer libros sobre colores. Porque como sigo mencionando, color es uno de los temas más complejos en diseño porque abarca todas estas diferentes variedades. Entonces, por lo tanto, hace una toma realmente, un tiempo realmente largo para ser bueno con los colores, selección de colores, y la teoría del color. Por lo que una vez más, muchas gracias por ver y realmente espero verte en algunas de mis otras clases. Cuídate.