 No está mal pero por ahí este sector mal, este sector mal, aunque salguéis esta noche y cerréis el 3.65 en el turno, voy a recordar que mañana tenemos una actividad 10.45, súper chula que va a ayudar a organizar a Ángel y mucha gente más, vamos a hacer stream networking y con alguna sorpresa, alguna actividad incorporada y luego tapas, no puedo, no puedo hacer un spoiler, entonces animo a que venga y aunque sea re sacoso perdido, por favor venid que nos va a pasar muy bien y es muy sencillo, no hay que pensar mucho. Y ahora empieza el momento más divertido de la workah, que es el drag de enseño en frente de usuarios, después de comer, muy bien. ¿A esto no lo sé? No, no, no. ¿Y café? ¿Fatitarios? Estamos como Mónica Martín, que viene de mi bau y targamos colores por la tarde. Ella ha diseñado la gráfica, aunque ahora se dedica más a enseñar a la oncencia. Bueno, llevándose al mundo de enseño mucho, mucho tiempo. Empezó como yo con la muerte de Clas, con golpes, empezó a toquear un poco golpes. Mirá, nos viene a hablar de color y te pongo con ella. Gracias. No puedo estar. Este cagado de los fosoreados lo sé mucho, se está dando a dibujar el fondo con lo que estaba viendo en el diseño. Soy tu fan number one. Sí, a todos los fosoreados. Gracias por venir, a todos los fosoreados. No te he oído. No te entendió bien. Luego, luego, luego. No, lo voy a arrancar, porque no me da tiempo contaros todo lo que os quiero contar, estoy un poco preocupado con el tiempo. Tengo por ahí a mi pesadilla, que me voy a colocar carteles. Así que voy a dejar de decir, carteles, lo voy a arrancar. Vale, voy a hablar de color. El color es una de las variables que tener en cuenta en el diseño gráfico. El diseño gráfico es eso que utilizamos para generar comunicación visual. La comunicación visual es eso que hacemos online en nuestras páginas para hablar sin textos con nuestros usuarios. O sea, tú llegas a una página, salís esto de 6 segundos, se toma la decisión de si te quedas y te vas y... pues nadie ha leído nada en ese tiempo, simplemente la comunicación visual. Muy importante tenerla en cuenta. Vale, voy a hablar de lo que tengo. Antes de nada, ¿cuántas sois diseñadoras gráficas aquí? ¿Cuántas? ¿Cuántas? ¿Cuántas? ¿Cuántas? ¿Cuántas personas diseñan gráficamente aquí? ¿Cuántas personas se dedican al desarrollo? Yo se interesa, claro. Una web en WordPress Chispas. Nadie, nadie está en ese punto de... Ahí, ahí, esos solineses. Esta es mi segunda charla. La primera fue mi pueblo. La primera fue mi pueblo. Sí, pero bueno, granadas como casitas. Vale, pues voy, voy, voy. Vale, ¿cómo utilizar el color? Vale, estamos aquí porque WordPress nos ha reunido y WordPress es una... Bueno, una vida, ya lo sabemos, ¿no? Para generar una página con cuatro clics y tener un bag, un front, todo funciona, la base de datos. Es increíble, tengo un administrador, y va solo. Entonces, ¿qué pasa con esto que va solo? Pues que en la parte de front, en la parte de diseño, lo que tenemos son los temas. Entonces, no. Entonces, ahora ya hemos desfistado. Entonces, tenemos los temas. ¿Qué pasa con los temas? Que son plantillas. Están predeterminados. Y si yo me limito a elegir una plantilla y tirar mi web, pues es muy probable que haya 50.000 páginas en internet. Exactamente igual es que lo es bien. Que la mía. No vale cambiarse el logotipo, y además hay que personalizar para qué, para dirigirnos a nuestro... a nuestro usuario, el usuario que vamos a tener en nuestra página. Da igual que seamos del mismo sector. Y... Claro, es que lo que pasa al final es que si cogemos la misma plantilla por el mismo tipo de necesidad, al final todo el sector tiene la misma página. Me tengo que diferenciar. Entonces, la falta de estrategia y diseño hace que las páginas parezcan poco profesionales. Y esto es lo primero que retina en la retina de nuestros usuarios. Una de las arras más comunes es la decisión número de colores o como lo hacemos poco afortunadas. Vale, esto es lo que pasa cuando no tengo los signos de diseño gráfico. Todo es súper importante. Entonces, por antes, pon esto también, fuxia, porque es muy importante. El fondo es súper importante. Todo es muy importante. ¿Qué pasa que no veo nada? Ay, me gusta. Vale, me paso un poco... ¡Tú miletias! Pasan por puesto. Nuestros usuarios llegan como así. Entonces, ¿qué necesitamos? Gerarquía visual. ¿Qué significa la gerarquía visual? Significa organizar variables de diseño gráfico, como el tamaño, el peso, el color, la textura, la tipografía, la orientación, el espacio... Orientar todo eso hacia el objetivo. ¿Cuál es el objetivo? Será el objetivo de marketing, seguro. ¿Qué quiero comunicar a mis usuarios? Que tengo una tienda, tengo un blog de... ¿Qué es lo que tengo? ¿Cuál es el objetivo de mi página? ¿Cómo organizo la gerarquía visual para hacerse objetivo? Entonces... ¿Cuál es la grava de todo esto? Satisfacer al usuario. Que el usuario venga a mi página y lo se quiera ir. Vale, que esté a gusto que encuentre lo que venía a buscar de la forma más práctica posible y demás. Conseguimos la satisfacción, ¿vale? Entonces, vamos a poner color. ¿Qué nos aporta el color? ¿De qué hará la experiencia al usuario? ¿Mejorar la legibilidad de la información? Sí. Mejorar los espantos a los opuestos al principio. No se leía nada, ¿no? Si no hay mucho contraste entre el fondo y texto, no se lee bien. Antes alguien le ha puesto un ejemplo de un fondo rojo y los textos en amarillo. No se lee. Vale, hay que tener cuidado con eso y mejorar la legibilidad a través del color. Aumentar la usabilidad. La página es más cómoda. Se va rápidamente a dónde quiero ir, a dónde tengo que ir. Reforzar la llamada de Coy Tuáxion los botones. Quiero que rellenes el formulario. Quiero que esto se envias a alguien. Quiero que te suscribas a mi newsletter. Quiero, quiero, quiero, quiero. Utilizar la grabación. Estimular las interacciones intuitivas. Ahora vamos a ver cómo. Hola. Satisfacer las necesidades estéticas. Bueno, todo esto como lo vais a colgar a vosotros o a alguien. Alguien lo va a colgar online. Pues lo veis más espacio. Dentro de mi página en qué elementos puedes aplicar el color. No es que haya que aplicar en todos, por favor. Qué elementos pico para poder aplicar. Tengo el grupo de texto, los encabezados, los enlaces, los enlaces, los botones y los eventos son algo que me ayuda a facilitar la usabilidad y la navegación intuitiva. Que el usuario al final se maneje bien y no es este volviendo loco. Sepa dónde puede encontrar lo que ha venido a buscar. Bordes, fondos, imágenes y demás. Vale, paletas de color en acción. Este es un ejemplo de cómo hacer usabilidad. Hay una tendencia a pensar que tenemos que usar pocos colores y es cierto, pero dentro de esos pocos colores hay que crear una jerarquía. Vale, hay que hacer gradaciones en función de la importancia del elemento. Por ejemplo, aquí tengo el fondo blanco. Esto está en negro, esto está en gris, no son un carajo. Esto está en gris y por aquí no se ve pero hay otro gris más clases. Twitter y este tipo de bueno, Facebook y demás. Sabes que hay gradaciones de grises. No está todo en negro. Y es más, el texto no se suele poner en negro porque en negro sobre el blanco es el máximo contraste y hace un poquito de daño. Se suele suavizar. Se suele poner un gris muy oscuro. Una armadilla 2-2-2, una armadilla 3-3-4, esa decimal o algo así. Vale, aquí clarísimamente así a golpe de vista. Sé que tengo dos elementos principales. Tengo una especie de menú o algo allí. Y luego tengo el cuerpo de texto que parece que hay interacciones de usuarios. Vale, entonces es ese diferencia utilizando un color primario. Ahora vemos. Y ahí también hay gradaciones. Todo esto no va en blanco. Utilizan diferentes azules. Y este le contrasto más porque es el elemento de geréticamente de más importancia. Entonces, avanzo. Fuente. Ay, me cargó la fuente. Ah, vale. Esto lo corregiré. Me cargó la fuente como el postador y cerrar cosas. La fuente de dónde saca esta imagen porque es un artículo está en inglés pero es súper interesante como desgrosa el uso del color en la web. Este tipo que ha escrito este artículo lo pondré, vale. Lo subiremos bien para que podáis enlazar y leer el artículo completo. Vale, básicamente aquí es lo que estoy trabajando. Estoy trabajando los conceptos que se manejan en diseño que son la... bueno, en diseño le va al marketing porque en diseño si no está en el marketing el diseño responde a la función y normalmente tiene que ver en este tipo de ámbitos tiene que ver con el marketing. Bueno, todos. Entonces, ¿qué pasa con la unidad y el interés? Por una parte tuve que crear páginas o interfaces visuales que tengan una unidad que todo este... todo tenga que ver, ¿no? Que yo llegaría y digo, ah, vale, calme el páginas, ah, vale, estoy en el mismo universo. Eso es la unidad y el interés es ah, bien. Ah, sí, ah, vale. No, las llamadas atención. Entonces, tiene que haber una combinación de las dos cosas. Tiene que haber una unidad y elegir jeráticamente qué elementos quiero destacar y esos darles interés. Eso es lo que llamamos veas artes. Este veas artes. Trabajamos con el concepto de armonía y de contraste. Armonía va a ser esa relación de colores en este caso. Pero se maneja también los tamaños, las tipografías y otros elementos de diseño, ¿vale? La armonía diger con cosas que tienen que ver que están cerquitas y el contraste pues es todo lo opuesto. Vale. Colores, vale. ¿Estás poniendo loca? ¿Qué color es cojo para mí? Bueno, pues seguro que vas a tener que usar blancos, negros, grises. Vale, seguro. Para el texto mínimo y seguramente para los fondos, formularios, contenidos neutros. Por otra parte tienes el color principal que normalmente vas a ser corporativo bien he dado por el logotipo. Si tienes un logotipo que es un festival de color pues igual, tienes que ver como manejas este tema. Vale, pero normalmente vamos a tener un color corporativo que será el color base. No tenemos un color de acem pero es que se sigue en el color. Me va a generar el contraste. Vale, hasta ahí todos los armonías pero la color negro es mi color corporativo. Si no meto contraste me aburro, está todo igual. Vale, entonces un color de acem y ahora vemos por el... Y normalmente lo vamos a utilizar por elementos que quiero destacar, botones, con tu acción, etc. Y lo más importante son los colores semánticos que psicologicamente ya nos están enviando mensajes. Es como el tema de los semáforos. Es el tema de los semáforos. De hecho, el rojo se utiliza para errores, pelindros, alertas y demás. El verde y el amarillo. Claro puedo cambiar esto porque todos los sabrías se van al carajo. Si, si yo voy a valer un formular y lo pongo el rojo, ¿no? Si tu formular es enviado y lo ponen el rojo parece que has hecho algo mal. Que no se ha enviado, ¿no? Esto no podemos ignorar. Vale, tenemos que seguir estos códigos y el azul solo está regalada en formación. Eso es. Y ¿cómo elijo mi color? Pues, lo que estaba diciendo, el básico, ¿vale? El color básico normalmente va a llegar a la identidad corporativa. Se utiliza la competencia e intentar diferenciaros. Hay mucho de color del sector, ¿no? El sector servicio es azul. El servicio de... Las casas corales son verdes o marrones. No hay como un color del sector. Bueno, pues, está bien, pero hay que intentar diferenciarse un poco más que tiene. Hay que tener en cuenta qué tiene en la cabeza ligada a sus colores mi público objetivo y eso está ligado a la psicología del color. Vale, esto que he puesto aquí tenía seis días positivas los he tenido que quitar ya ves como una moto y... Psicología del color, si se interesa el tema hay, moviendo información online y básicamente es que como personas humanas tenemos en los colores asociados las sensaciones. Vale, de si estoy utilizando un verde estoy dando la sensación de cosas saludables, natural, GFC, tranquila y demás, como un rojo es todo lo contrario es la chispa de la vida es coacola, ¿no? etcétera, etcétera y aquí en este gráfico como lo suelen las marcas como han ido a utilizarlo coaculativamente con los colores y no me extiendo. Vale, y el poder del blanco es súper importante. Vale, como aquí no hay nada pues es muy... el ojo se va ahí directamente súper rápido pero para que eso funcione y eso tenga la fuerza que tiene aquí tiene que no haber nada. Vale, porque otra cosa que nos pasa en la diapositiva está horrosa del principio espero el vídeo es pronto era que no había un horro de blanco o sea, todo... estaba saturadísimo había un horro de blanco y ahí no hay que dejar espacio en blanco, por favor para que sobre todo alrededor de los elementos que quiero destacar compra, vale, pues el espacio blanco vale, el color voy a por teoría del color voy a explicar un poquito de teoría del color muy rápido no, cinco minutos no puedo explicar hace muy rápido vale, esto es teoría del color esto es lo que llamamos circuito cromático que no es más que una forma de organizar el color para poder entenderlo buscar relaciones y demás lo que estamos viendo es el cifro arcoíne es la gradación de color de un toro a otro no es puro tono solamente el tono ¿qué pasa con esto? voy a... con la de cosas que te voy a enseñar alguna vez muy, muy, los voy a enseñar con mis orgullos que nervios aquí, vale esto es una radiocon que está muy bien hay muchísimas más luego se van a hacer unas diapos con un montón de recursos y aquí lo que estoy viendo lo que me está permitiendo es crear sacar los colores para utilizar mi paleta de colores de una forma rápida y demás lo que hago es elegir el color primario que sería este de aquí el color base que es el que tiene la estrellita ésta y opa como que lupa no sé bueno, no me voy a enrollar ahora no lo haré a cero no sé, no se que he hecho lo he roto bueno lo que tengo aquí vamos a quedarnos con el rojo, vale lo que tengo aquí son relaciones entre los colores yo puedo decidir que en mi página lo que voy a utilizar es el rojo-smith el coca-cola es mi color corporativo y voy a trabajar a partir de análogos que serían dentro del propio encircolo cromático los que están cerca eso genera armonía contraste armonía tonal que esto es de tono, vale monocromáticos pues dentro de un solo tono tiene la luminosidad que ahora explico lo que son vale la triadazo el triángulo esto ya es más peligroso porque hay un contraste muchísimo mayor hay que controlar que es lo que voy a hacer para no matará a nadie vale, y luego por aquí están los complementarios que esto podría ser que yo decida utilizar directamente como color de acento el complementario pero también puedo decir va pues este complementario aquí me parece un poquito excesivo lo voy a suavizar voy a utilizar vale, que esté ese tono verde pero que sea más oscuro o que sea más claro o X aquí abajo adue color además de dejarme seleccionar los colorines me ponen las escalas de color tengo el color en hexadecimal tengo el hsb hues saturación y brillo todos los saturación y brillo y el rgb red green and blue en modo de color de pantalla y bueno tiene más juguetitos esto al final por cierto no es más que una red social color entonces tú tienes tu sesión abres tu usuario y puedes guardar tus paletas de color y si todavía no es tan frik y no tienes paletas de color puedes explorar a los frikis y decir bueno yo no tengo ni idea pero voy a intentar buscar algo que me pueda funcionar y aquí hay muchísimas paletas de color que puedo buscar por ejemplo por pues quiero algo que tenga que ver con los dulces voy a buscar en inglés que sabes que siempre es más da más resultados y ahí me dan algunas propuestas de pantalla vale aquí ya véis que al nivel total hay cosas que tienen más que ver esto tendría más armonía ahí hay más contraste en rojo una manera en azul no esta paleta sería más armonica y aquí hay más contrastada dos minutos vale entonces aparte de lo que es el tono que es lo que me da el círculo cromático voy a extender esto tenemos las tres cualidades o variables del color el color además de tener tono tiene luminosidad pues es más oscuro claro y tienes saturación puedes ser más puro o estar más gastado más sucio más pero más apagado vale bueno más feo bueno para lo entendáis un poco entonces con esto y con esto voy a jugar para crear paletas de color que tengan sentido y que creen esa sensación de armonía que hablábamos y a la vez es el contraste que necesito vale cuando genero contraste voy a si genero contraste en tono si pongo un verde un verde y un rojo debería intentar jugar la luminosidad y la saturación que la tengan parecida vale para que no porque si en las tres variables están opuestos esto es cuando empieza a pasar esto lo que pasa en la diapositiva aquí ya vale entonces si voy a jugar con contraste de tono armonía luminosidad armonía de saturación si voy a jugar con el mismo tono diferencia pues un rojo oscuro un rojo claro un rojo vale contraste de armonía vale estos quería enseñar aquí inspeccionado que era el adoritor pero el rojo solamente es fondo blanco eh blanco que no es blanco tampoco blanco sucio un blanco rato un blanco este de novia eh el test en negro y luego utilizan solo el rojo vale para los enlaces para los encabezados para las imágenes no sé si ya parecía bien pero las imágenes están rojas vale están ahí tratadas están como rojitas no digo que tengamos que hacer siempre como con la cola pero bueno tener en cuenta que si con la cola lo hacen hay algo ahí ¿no? eh tenía como ejemplo también la página de Nike y en Nike tienen una curva sinetra entonces se suena con un fondo blanco entonces el blanco y negro que han hecho con las imágenes las han desaturado están super poco vivas de color están como muy grises vale porque al final el blanco y negro y de esa forma creas esa armonía tonal la composibilidad esta página de aquí me parece que es un tratamiento del color super interesante fondo negro textos en blanco que lo mismo no se suele usar el blanco puro y el negro puro porque generan demasiado contraste derecho antes y lo en base a los azules y a los verdes y a los azules verdosos es que no puedo ver la página hacen y con los fidesos y demás va a generar nuestras relaciones de jerarquía visual vale que es más importante que es menos importante ves que hay bastante variedad de color pero a la vez haya armonía y es muy agradable es muy no cómoda traer porque porque es una página de cosas de niños y los niños son el arcoídis entonces que han hecho para que esto no sea un caos visual pues todo está en azul justo este pantallazo no se ve mucho pero todos los elementos de la página están en azul los títulos el menú y demás y luego lo que hacen es que a una de las secciones que hay arriba es con un color de arcoídis rojo, naranja el morado y tal entonces ya le están dando esa variedad pero a la vez fondo blanco y solamente el azul para buscar la armonía porque se empieza a mezclar por todos lados festival este proyecto es súper interesante está en awards.com y es un fric maravilloso que se dedicó metió un bicho de estos digitales como lo llamáis un puto un monstruo que trae en la página y bajo la información de las webs que había en awards.com que es una página que se dedica a destacar diseños interesantes y se acaba la información de los píxeles y entonces se acaba estos quesos con qué uso de color se hacían en esas páginas para estos son páginas awards y estos son las conjuntas de color que son en esas páginas me parecía interesante sobre todo que veamos que normalmente se utilizaba bastante el negro con los grises y los colores más flúor y además se utilizan bastante menos y luego el todo tipo de combinaciones hay combinaciones de solamente dos colores hay combinaciones de tres vale cuanto más complejo es mirar ese verde naranja rosa eso me gustaría mirarlo como lo han hecho en la página porque es peligroso vale cuanto más color tengo pues más tener controlarlo lo que hago fin, fin, fin vale herramientas ya está aquí os dejo unas herramientas que inspiran que son páginas en las que puedes entrar y ver un montón de proyectos esto lo colgaremos pero es hay cien mismas he hecho una selección pero hay millones de cosas en internet es un mundo muy loco no sé si hay eso de hablar de ahí entonces aquí puedes entrar a ver proyectos por color podéis hacer búsquedas por color vale tres enviados y decís quiero ver cosas verdes y te salmo viendo webs y de proyectos verdes te dejan hacer selección de color y ver proyectos vale a partir de una imagen es que tengo un logo o tengo mi cliente me ha pedido que esta imagen tiene que ir a la portada sí o sí bueno pues igual a partir puedo hacer en la paleta de colores a partir de una imagen estas herramientas os ayuda subís la imagen y os genero una paleta automática que será horrible tendréis que tocarla vale no es algo que me ha dado la máquina esta y ya está no es una aproximación bastante interesante ya acabo como crear paletas de color herramientas para crear esas paletas de color vale normalmente primario uno de acento y las gradaciones vale no sé si acabo claro a ver qué tal haces el examen juguetes esta es mi parte favorita hay un un test de cosita intelectual cromático que sacó pantone hace poco muy divertido un juego de rgb que tienes que dinar que lo ponen ahí tienes que saber cuál es no sé juguetes al final un creador de gradados para hacer paletas de color juguetes de color muy divertidos que os recomiendo mucho fisgar vale volvemos a WordPress como os aplicáis todo pues a día de hoy que todavía no es un día de hoy que me acostumáis del personalizador que dependiendo del tema más de unas opciones otras o bien a través de uno de estos dos flujes porque no he encontrado más y son un poco tremendos pero pero bueno eso si si no encontró los CSS si no lo has arruido en mis temas encontró los CSS ya sabéis como lo hacéis y este es el código de Gutenberg que se me ha sacado el chico aquí antes veréis que está mal vale el método es el item dinar content support pero digamos que este parámetro está bien pero ahí me faltaría declarar un Array premito a él que es José José el vídeo había quedado una charla maravillosa y habla bastante de color también y que tiene un Twitter que tengo por aquí y ahí está el código exacto para Gutenberg bien escrito porque yo no tengo Array y esto me ha escrito y con esto en mi cocho