Color en la web II: diseño para la claridad y la conformidad

1. Avance: En la segunda parte de esta serie de Color en la Web, aprenderemos a agregar color de manera efectiva a un diseño de Sitio Web. Estaremos trabajando para una empresa ficticia llamada Bike Book, una empresa de alquiler de bicicletas con un giro. En primer lugar, aprenderemos todo sobre la daltonismo. ¿ Qué es? ¿A qué se ve? ¿ Y cómo diseñar para ello? Después, saltaremos y aplicaremos la paleta de colores que diseñamos en Clase Uno a la maqueta del sitio web de Bike Book. Debido a que nos estaremos centrando únicamente en el color, el diseño se proporcionará para ti. Por último, aprenderemos a agregar nuestras opciones de color a una guía de estilo para hacer que entregar trabajo a los desarrolladores sea muy simple. Todo lo que necesitas es una copia de Photoshop o Illustrator para seguir junto con las lecciones. Esta clase está dirigida a principiantes que quieran mejorar sus habilidades de color y diseñadores con experiencia que quieran perfeccionar su flujo de trabajo de color. Al final de la clase, tendrás una maqueta de color para compartir con la comunidad de Skillshare junto con una sólida comprensión de cómo elegir y aplicar color a tu propio trabajo en el futuro. Empecemos. 2. Introducción: Hola chicos, bienvenidos a mi segunda clase de Skillshare sobre flujo de trabajo de color. Entonces, si acabas de terminar mi primera clase y presentaste tu proyecto, deberías tener un solo piloto elegido antes de pasar a estas lecciones. En esta clase, vamos a implementar nuestra paleta de colores, pero no antes de aprender un poco sobre otro tema importante. Entonces, aquí hay una cita que realmente me encanta de Josef Albers, “En la percepción visual, un color casi nunca se ve como realmente es... Este hecho hace que el color sea el medio más relativo en el arte”. Albers fue pintor abstracto y profesor de Alemania, y publicó un curso muy influyente sobre teoría del color en 1963. Tenía toda la razón. El color es muy relativo, no sólo en la forma en que aparece de manera diferente a través de diferentes dispositivos y pantallas, sino que también podría ser visto de manera diferente por diferentes personas. Y eso es algo de lo que realmente necesitamos estar más atentos a la hora de diseñar. Cuando piensas en los tipos de discapacidades que pueden afectar la forma en que las personas usan la tecnología, las primeras cosas que podrían venir a tu mente son probablemente más extremos. Entonces, podrías pensar en que una persona es totalmente ciega, o podrías pensar en alguien que tiene una discapacidad grave y sólo son capaces de usar un teclado, o un ratón. Probablemente sea aún más probable que piense en personas mayores y considere tamaños de fuente apropiados para las personas que tienen problemas para leer texto pequeño en las pantallas. Pero la ceguera del color, también es un tipo de discapacidad que afecta a un porcentaje sorprendentemente grande de la población. En realidad no se habla tan a menudo. Entonces, la ceguera del color muy raramente significa que no se puede ver ningún color en absoluto. No quiere decir que la gente vea las cosas en escala de grises. En realidad es una disminución de la capacidad de ver el color, o una disminución de la capacidad de diferenciar los colores entre sí. ceguera del color es un rasgo ligado al sexo, y es mucho más común en los hombres que en las mujeres. En general, se presenta en ocho por ciento de los varones, pero sólo 0.5 por ciento de las hembras. Tan solo piénsalo un segundo. Eso es casi el cinco por ciento de la población en general. No podemos ignorar que mucha gente está en nuestro trabajo. Hablaré más de por qué en la siguiente lección. 3. Cómo afecta a las personas: Tengo mucha suerte de tener buena visión del color, pero no voy a mentir. Al igual que cualquier otra persona con buena visión del color, definitivamente es algo que di por sentado. Nunca consideré realmente los efectos de daltonismo hasta que conocí a alguien que aprendió a convivir con ella. Creo que la primera persona que conocí que habló abiertamente de ser daltónico fue mi instructor de fotografía universitaria, y hace un par de años, me volví a poner en contacto con él y me contó cómo descubrió que lo tenía. Mi profesor de diseño, John Solowski me lo señaló un mi primer año y la Universidad Ryerson. De verdad fui bastante inútil como impresora a color. Supongo que por eso la fotografía en blanco y negro me atrajo tanto. Entonces, para mi instructor, esto significó que decidió trabajar menos en fotografía a color y más en blanco y negro. Pero para otras personas, puede tener consecuencias mucho más devastadoras. En realidad muchas industrias realizan pruebas de cribado para carreras donde la visión del color es un requisito absoluto. Entonces, personas que esperaban convertirse en pilotos, electricistas, ingenieros y técnicos de laboratorio, suelen tener que completar una prueba antes de ser contratados, y a veces, es después de que gastan mucho dinero y mucho tiempo en su educación. Muchas de estas personas sienten que enfrentan discriminación tras fallar las pruebas de revisión cuando, en realidad, no tienen absolutamente ningún problema para realizar alguna de las tareas en su trabajo. Entonces, una vez leí una historia personal de un hombre que recibió un título asociado en ciencias de laboratorio médico. Cuando fue evaluado por un trabajo potencial, falló la prueba de color y el médico realmente le dijo que era hora de encontrar una nueva carrera. Entonces, a pesar de que era más que capaz de realizar los deberes y anotó puntuaciones realmente altas en sus clínicas, se le consideraba un pasivo ante el hospital en papel. Algunos de ustedes podrían estar pensando, “Bueno, sólo estamos diseñando sitios web, ¿verdad? ¿ Qué tiene que ver esto con nosotros?” Bueno, la respuesta simple es que todos debemos esforzarnos por hacer nuestro trabajo lo más accesible posible por respeto a nuestros lectores, y creo que es lo correcto. Pero si aún no estás convencido, también hace que sea un práctico caso de negocios. Entonces, si a una persona le resulta imposible o un dolor total navegar por tu sitio web por un problema de color, solo van a encontrar una alternativa. Si recuerdas que el cinco por ciento de la población en general se ve afectada, es bastante fácil ver cómo este tipo de problemas se puede traducir en lectores y ventas perdidos, y nadie quiere que eso le pase a su negocio. En una nota más seria, los problemas de accesibilidad pueden aterrizar en alguna agua bastante caliente en el mundo legal. En 2011, tres mujeres ciegas de California y Kansas recibieron permiso de un juez para presentar una demanda colectiva. Se presentó en contra de la Walt Disney Company por tener un sitio web que era inaccesible para aplicaciones de lector de pantalla, y las mujeres realmente ganaron. En realidad llegaron a un acuerdo extrajudicial con Disney antes de ir a juicio. No quiero asustarlos, chicos, pero sólo piénsalo. Estarías realmente preparado para enfrentar las consecuencias si te pasara este tipo de cosas? Probablemente no. Pero afortunadamente, la daltonomía no es difícil de entender y no es difícil de diseñar, por lo que no hay absolutamente ninguna razón por la que no puedas hacer que esta parte de cada flujo de trabajo. 4. ¿Qué aspecto tiene?: Entonces, hablemos un poco de cómo sucede realmente la daltonismo. Vamos a mirar dentro del ojo humano para ver cómo funciona. Entonces, esta es una ilustración de sección transversal del interior de la típica retina humana. interior hay dos tipos de células receptoras; varillas y conos. Las varillas son las células que nos permiten ver oscuro y claro, y forma y movimiento. Los conos son las células que nos permiten percibir el color. Hay tres tipos de conos; cada uno es responsable de absorber longitudes de onda azules, rojas y verdes en el espectro. Los problemas con la visión del color ocurren cuando uno o más de este tipo de conos están defectuosos o ausentes por completo. Estos defectos pueden heredarse a través genética o adquirirse realmente a través de cosas como trauma, exposición a la luz ultravioleta, degeneración con la edad y diabetes efectiva u otros factores diversos. Mencioné antes sobre el Dr. Jay Neitz, el investigador de la visión del color del Medical College de Washington, y aunque dijo que una persona con visión de color completamente funcional puede distinguir hasta un millón de colores diferentes, una persona que falta un tipo de cono se limita a tan sólo 10 mil colores. Entonces, con este tipo de defectos, es mucho más probable que una persona que falta un tipo de cono esté completamente al tanto de su condición. Entonces, hay tres tipos principales de daltonismo. Voy a mostrar imágenes simuladas de las versiones más severas. Las personas con los tipos más comunes de daltonismo como la protanopía y la deuteranopia tienen dificultad para discriminar los tonos rojos y verdes. Entonces, una imagen de una rueda de color podría verse así, a alguien con ceguera de color tipo protanopia y podría parecerse así a alguien con deuteranopia. Si bien, los temas de color rojo-verde son los más comunes, también existen formas de ceguera del color como la tritanopia, que afectan los tonos azul y amarillo. Significa que nuestra rueda de color podría verse algo así. En las próximas lecciones, hablaremos de algunos sencillos pasos que puedes hacer para crear diseños más accesibles sin sacrificar la estética. 5. Nombres de los colores: Entonces, aunque ciertas combinaciones de colores deben evitarse siempre que sea posible, como el rojo y el verde. No debemos pasar todo el tiempo preocupándonos por lograr la paleta perfecta. Hay toneladas de otros consejos y trucos que podemos usar para mejorar la experiencia de un usuario daltónico. Entonces, lo primero a tener en cuenta es asegurarse de que incluya etiquetas de nombre de color, junto a cualquier muestra de color que utilice en un sitio web. Entonces, aquí hay algunos chicos vistiendo unos trajes azules realmente elegantes. ¿ Verdad? No, eso es justo lo que podría ver una persona con protanopía severa. Entonces, en una situación más práctica, digamos que tienes un sitio web que vende Camisetas, si solo muestras una foto de la Camiseta puede ser imposible que una persona diga qué color de la camisa realmente es. Por lo tanto, para ayudar a evitar cualquier confusión, asegúrese de hacer referencia al nombre del color en la descripción del producto. Trabajadores de United Pixel venden Camisetas en línea, y hacen un muy buen trabajo de seguir esta regla en su página web. Entonces, soy de San Juan y esta son nuestras camisetas y la paleta de colores está basada en nuestra bandera local, que es una bandera no oficial rosa, blanca y verde. Esa es una combinación de colores que me imagino a unas cuantas personas no siendo demasiado aficionadas. Pero la descripción es clara, hay una rosa Cabot Tower en una camisa Kelly Green. Eso significa que no debe haber sorpresas si una persona daltónica ve esto. Al igual que los chicos del traje rosa, aquí hay una diferencia bastante enorme. A lo mejor andar en bicicleta rosa no es una gran cosa, pero también hay que tener cuidado al elegir los nombres de color. Si el color es morado, en realidad llámalo morado en lugar de algo así como uva. Si lo piensas, las uvas pueden ser verdes o amarillas, hay uvas rojas claras, rojas oscuras, y si el color es gris, en realidad llámalo gris claro en lugar de humo. El humo puede ser prácticamente de cualquier color marrón, negro, azul o lo que sea. Se adhieren con pocos nombres tanto como sea posible. Hay una mayor probabilidad de que el espectador realmente entienda que una camisa morada es morada, en lugar de cualquier otro número de colores, y no les obligará a pedir a otra persona que les aclare. Entonces, aquí en nuestro sitio web de Bike Book, notarás que la opción de color para elegir tu bicicleta es verde claro en lugar de menta o azulado o espuma de mar o como sea el color que quieras llamarla. Este es definitivamente el camino a seguir. En la siguiente lección, hablaremos de instrucciones específicas para el color, y cómo evitar usarlas en tu trabajo. 6. Instrucciones específicas para el color: Entonces, de lo siguiente de lo que voy a hablar son nuestras instrucciones específicas de color. Entonces, lo que quiero decir con eso es, no le digas a una persona que haga cosas como hacer clic en el botón verde para comprar un producto o haga clic en el botón rojo para cancelar su pedido. Porque las personas daltónicas probablemente van a tener problemas, en realidad encontrando ese botón en tu página. Les mostraré algunos ejemplos chicos. Este es un buen ejemplo de lo que no se debe hacer al diseñar formularios. Evite etiquetar campos obligatorios únicamente con texto coloreado. Si eres una persona daltónica, más probable es que no vayas a poder decir qué etiquetas están resaltadas. Todos se van a quedar negros. Es más seguro usar un símbolo q como un asterisco, que es independiente del Color. Pero también debes tener en cuenta que, algunos lectores de pantalla utilizados por personas con discapacidad en realidad no leerán asterisco en voz alta. Entonces, una solución aún mejor es usar una referencia de texto derecha en la etiqueta de foros. No importa qué daltonismo tenga una persona, ya sabes que van a poder leerlo.Otro tema que se le ocurre color InDesign es en infografías y gráficos. Entonces, estamos utilizando cualquier información o gráfico en la página web del libro de bicicletas. Pero sigue siendo realmente importante entender cómo esto puede ser un gran problema para una persona con discapacidad visual. Echa un vistazo a este gráfico. Si no puedes etiquetar directamente tus regiones de datos, no confíes solo en la codificación de color como esta lo hace. Deberías intentar usar una combinación de color con textura o un patrón junto con etiquetas precisas y reflejar eso en la clave, como la de aquí en la parte superior. Cuando combine el fondo con un patrón único, siempre le dará al usuario dos piezas de información con las que trabajar. Lo mismo aplica con los gráficos de líneas. Los gráficos de líneas pueden ser bastante difíciles de leer si contenían ruta de intersección. A la derecha, se puede ver cómo los caminos mezclan por completo para una persona con Deuteraopia. Entonces, en este caso, puedes intentar aumentar el grosor de una línea y darle un estilo diferente. Aquí se puede ver que este ejemplo es mucho más obvio y más fácil de leer. Aquí tienes un ejemplo de un gráfico bien diseñado de Google Analytics. En el lado izquierdo está la clave, y en el lado derecho está el gráfico circular con cada rebanada etiquetada directamente. Entonces, incluso en esta simulación daltónica, aún puedes darle sentido a la información. Desafortunadamente, los gráficos no son realmente consistentes. En otra área del mismo tamaño, el gráfico está en etiquetas y puede parecer bastante confuso, sobre todo cuando las porciones del gráfico son de tamaño similar. Los mapas pueden ser otro gran tema. Utilizo este ejemplo un lavado, del sistema de metro de Londres. Desafortunadamente, el diseño del mapa subterráneo tiene muchos colores en él que son básicamente indistinguibles entre sí a una persona con un problema de visión, como en esta imagen estimulada. Esto es cierto no sólo para el metro de Londres, sino también para cualquier otro sistema de búsqueda de caminos que se base en la codificación de color como la única clave en una leyenda. En realidad hay una versión imprimible del mismo mapa disponible en el sitio web de Transport for London en blanco y negro. Este utiliza patrones y sombras en las líneas, pero el punto es que no habría necesidad de ese tipo de mapa en absoluto si se diseñara teniendo en cuenta la accesibilidad desde el principio. Entonces, recuerda, combina color con patrón o textura, etiqueta tus campos, y tu información será mucho más fácil de leer para todos. 7. Cumplimiento y pruebas: Por lo tanto, hay muchas herramientas por ahí para simular diferentes tipos de daltonismo, y es realmente importante revisar tu diseño para captar cualquier problema potencial por adelantado. No olvides que no todas las personas daltónicas verán colores igual que aparecen en el simulador de color, porque los simuladores solo están destinados a imitar la visión de las personas más afectadas. Entonces, mi herramienta favorita absoluta para probar la ceguera del color está disponible en macOS, Windows y Linux, y se llama Color Oracle, y es gratis. Quiero que ustedes descarguen esto de inmediato y lo comprueben en colororacle.org. Esta app simula los tipos más comunes de daltonismo a medida que usas aplicaciones en tu propia pantalla. Entonces, básicamente es un filtro de pantalla completa que funciona en todo el sistema operativo y no importa qué aplicación uses. También puedes probar los dos tipos más comunes de daltonismo justo en Photoshop o Illustrator mientras estás diseñando, y puedes encontrar esta opción en el menú Ver y Configuración de prueba. El contraste de color también es increíblemente importante para probar, y eso puede infectar a cualquiera, no solo a personas con daltonismo. Creo que muchos de nosotros diseñadores, realmente podemos ser culpables de bajo contraste diseñado con demasiada frecuencia. Lo que podríamos pensar como un efecto sutil y hermoso, en realidad podría ser imposible para, digamos, ver a tu abuela. Algunos de ustedes podrían estar familiarizados con el W3C. Se trata de una organización internacional y desarrollan estándares para que la web ayude a alcanzar todo su potencial. En realidad, el W3C desarrolló pautas de accesibilidad al contenido web, que son recomendaciones para hacer que el contenido en la web sea más accesible para los usuarios con discapacidad. Se tienen tres niveles de conformidad. A siendo la más baja, AA siendo la segunda mejor, y AAA siendo la más alta y más estricta. El ratio mínimo de contraste de color en el nivel AA para texto e imágenes de texto debe ser de 4.5 a 1. En otras palabras, el color de la letra en un par debe tener cuatro veces y media tanta luminancia como el color más oscuro. El cumplimiento del nivel AAA requiere una relación de contraste de siete a uno. Echa un vistazo al texto en el pie de página en este sitio web. Incluso para una persona con buena visión, es increíblemente sutil y difícil de leer. El ratio de contraste en realidad resulta ser 2.36, que es inaceptablemente bajo y no cumple ninguno de los niveles de cumplimiento. Personalmente, recomendaría que todo el texto del cuerpo sea compatible con AAA, con titulares más grandes y copia menos importante que cumpla con el cumplimiento de AA. Estos tipos deberían apuntar a hacer el contraste de ese pie de página al menos 4.5. Entonces, el desarrollador Leaver Rue se le ocurrió esta gran herramienta, donde puedes ingresar un código de color para texto y un código de color para un fondo y te dirá si la relación de contraste de color es suficiente. Me encanta esta herramienta porque soporta cualquier color CSS que soporta el navegador, no solo códigos hex. También soporta transparencias que realmente pueden ser útiles. Entonces, podemos teclear prácticamente cualquier color aquí y la relación de contraste se actualizará sobre la marcha. También puedes copiar la URL, marcarla y enviarla a otra persona para que la vea. Entonces, si tienes un color que no pasa la prueba, posible que quieras echar un vistazo a esta herramienta antes de regresar y retocar tu paleta. Esto sólo lo descubrí hace un par de semanas. Se llama el Tanaguru Contrast-Finder. Entonces, voy a echar un vistazo a la paleta que hice para byte book. Entonces, sólo voy a entrar aquí a Illustrator y voy a probar la pantalla. Entonces, imaginé que este color podría ser bueno para un color de fondo para un botón. Entonces, voy a tomar el código hexadecimal aquí y visitar este sitio web. Entonces, aquí voy a pop en el color de primer plano. Entonces, si va a ser texto blanco, sólo voy a hacer eso blanquecino, y luego tomaré el código de fondo, y ahí está. Entonces si necesita ser editado, puedo cambiar el componente para editar aquí. Entonces, quería editar el color de fondo, obviamente, y la relación mínima debería ser 4.5. Entonces, aquí tienes dos opciones y voy a dejar esta en una gama de colores válidos solo para ver lo que está disponible para nosotros. Entonces nos desplazamos hacia abajo, y aquí realmente mostraremos que la relación ahora mismo de este texto blanco sobre ese color es 2.8, que es bastante baja y todos estos colores debajo, todos están aprobados y tienen ratios por encima de 4.5. Entonces, solo puedo desplazarme hacia abajo y seleccionar qué color creo que es el mejor partido. Por supuesto, muchos de estos lucen bastante diferencia y algunos de ellos no van a nada como lo que elegí, pero el más cercano a la parte superior en realidad no está tan mal. Entonces, puedo ir aquí, y seleccionar ese nuevo color, y volver a poner eso en Illustrator. Voy a hacer una nueva muestra aunque porque puedo mantener ese viejo color para ilustraciones y cosas que no son importantes o cosas que no necesitan texto sobre ellas. Entonces, ese puede ser mi nuevo color y una nueva adición a la paleta. Ahora, quiero que ustedes sigan adelante y prueben su paleta para cualquier problema de contraste potencial. Si encuentras alguno de los mayores, mira si puedes ajustarlos hasta que encuentres la relación de contraste correcta. Después de eso, vamos a estar listos para implementarlos en nuestro diseño. 8. Comienzo: Entonces, ustedes han llegado hasta aquí y estoy muy contenta de que se hayan quedado con él. Probablemente ya te hayas dado cuenta de cuánto trabajo de cimentación realmente pasa a elegir esquemas de color efectivos. Entonces, toda la información que has aprendido sobre teoría del color y el mensaje y el significado y la accesibilidad, podría parecer completamente abrumadora al principio, pero cuanto más lo hagas, más fácil se pone, y eventualmente podrás mezclarlo en tu flujo de trabajo de manera bastante natural. Sé la primera vez que empecé a aprender sobre daltonismo, siempre pruebo absolutamente todo lo que hice pero eventualmente se acaba de convertir en segunda naturaleza y ahora tengo un ojo mucho mejor para manchar temas por adelantado en lugar de encontrándolos al final, y llegarás allí también. Ahora, es hora de entrar en la parte realmente divertida y acetato nuestra paleta y de hecho implementarla en el sitio web de BikeBook. En realidad implementar tu paleta en un diseño en realidad puede ser la parte más dura para muchos diseñadores, pero como siempre, hay trucos que podemos usar. Uno de los trucos más fáciles de usar es la regla de los 60, 30, 10 la cual es utilizada por muchos diseñadores de interiores y puedes hacer que esto funcione también en el diseño web e incluso funciona en armar atuendos. Entonces, si no eres el mejor en vestirte, ya no tendrás ninguna excusa. Entonces, te voy a mostrar un diseño de página sin color aplicado similar a nuestra maqueta de BikeBook de escala gris y mi paleta ahí a la derecha. En primer lugar, se agrega el 60 por ciento del color a las paredes o en nuestro caso el fondo de la página. Esto también podría incluir el blanco o el negro si así quieres que luzca tu página. treinta por ciento del color se suma a las cortinas y cubiertas de piso. Entonces, en nuestro caso ese sería el banner de la página y el pie de página. diez por ciento del color se da a los accesorios y obras de arte y para nosotros eso significa botones, enlaces y otros colores de acento. Voy a demostrar esto más allá usando mi paleta y el sitio web de BikeBook. Entonces como antes, voy a usar Illustrator ya que como con lo que me siento cómodo y es con lo que prefiero mostrar a los desarrolladores para dirección si estoy diseñando wireframes pero también he incluido un archivo de Photoshop si quieres para trabajar con eso en su lugar. Entonces, voy a abrir Illustrator y mis wireframes de BikeBook. Ahora, quiero mostrarles esto primero, si miran la paleta de capas, notarán que todas las capas para cada sección de la página están aquí. Por lo tanto, puedes profundizar en el interior de estos para ver cualquier objeto o forma que te gustaría cambiar el color de. Entonces, me aseguraré de que mi paleta de muestras esté abierta aquí. Lo que he hecho es que he colocado mi paleta final arriba aquí arriba. Entonces, lo que voy a hacer es seleccionar todos mis colores, venir a la paleta de muestras, al menú desplegable y hacer un nuevo grupo de colores. Lo mantendré como Arte Seleccionado, Convertir Proceso a Global y lo voy a llamar BikeBook. Eso nos permite tener todos estos colores como parte de nuestras muestras. Podemos eliminar estos y simplemente seguir adelante y empezar a aplicar color. Entonces, desarrollé esta paleta a partir de la fotografía de la carretera. Entonces voy a seguir adelante y colocar esa foto en mis alambres. Lo recortaré y puedo posicionarlo como quiera. Entonces, siéntete libre de mover este texto si lo necesitas, si sientes que no funciona con tu fotografía. Entonces, empezaré con aplicar el morado más oscuro a algunos de estos paneles de la página y el primero siga la foto ayudará a establecer el tono para el esquema de color para el resto de la página. En realidad es uno de los primeros colores que un usuario va a ver cuando visite un sitio. Entonces, va a causar una gran impresión. Realmente no quieres enterrar tus principales colores de branding demasiado abajo de la página. Entonces, he hecho mi texto blanco para asegurarme de que tengo buen contraste y ahora nos desplazaremos hacia abajo y haremos lo mismo a esta como panel. Romper el color te ayudará a sacar el ojo de cada sección a la siguiente y evitar que parezca demasiado aburrido. Entonces, obviamente no te preocupes demasiado por ninguno de los elementos grises en la parte superior todavía. Queremos sentar las bases y dejar que todo caiga en su lugar al final, y si no lo hace, siempre podemos modificarlo más tarde hasta que estemos contentos. Nuevamente, voy a saltarme esta sección con los formularios. Creo que los quiero en blanco. Entonces, volveré a aplicar ese morado a este panel de ubicación. Entonces básicamente, tenemos tres secciones principales con el mismo morado. Tenemos lo que es, cómo funciona y dónde lo puedes encontrar. Por lo que a continuación, voy a aplicar el 30 por ciento de mi color al encabezado de página y al pie de página. Entonces, en este caso, nuestro encabezado va a ser la barra de navegación. Es decir el encabezado incluye también la foto pero como ya tiene en color necesito algo para que esa navegación destaque. Entonces, un truco que me gusta probar es agregar un peso visual al encabezado y pie de página eligiendo un color más oscuro. Ayuda a actuar como ancla para que la navegación destaque sin mirar fuera del lugar. Entonces, solo voy a escoger el morado más oscuro de mi paleta que es casi negro. Creo que el negro puro será demasiado duro en mi página, por lo que ese púrpura más oscuro realmente funciona bastante bien. Entonces me desplazaré hasta el pie de página y haré lo mismo. Entonces, en este punto, deberíamos tener nuestros dos primeros colores de paleta en su lugar. Como mencioné antes, no te preocupes demasiado si aún no estuviste contenta con ello, llegarás ahí. Todavía tenemos nuestros colores de acento por agregar, que discutiremos más en la siguiente lección. 9. Cómo mantener la coherencia: Entonces, algo importante a recordar cuando estás implementando colores en tu diseño es mantener tu color consistente. Básicamente, lo que eso significa es que no te vuelvas demasiado loco con tu paleta y haz de cada botón y enlace de la página un color diferente. Cuando un espectador ve un cambio de color , puede interpretarlo como también un cambio en el mensaje o significado. Entonces, una buena regla de oro es que si tienes propiedades compartidas, usa un color similar y si tus elementos de diseño tienen ideas diferentes, tal vez use diferentes colores. Es lo mismo que la codificación de color. Mantén tu mensaje de error de color consistente. Mantén los enlaces de su propio color y si tienes algo que realmente debería destacar en una página como un botón de llamada a la acción, uno que diga cómpralo ahora o regístrate ahora, quizá quieras considerar hacer de ese color todo propio. Voy a manifestarme en nuestro sitio. Entonces, para nuestros enlaces de texto, intentemos elegir un color y seguir con él. Voy a probar aquí nuestro morado medio. No hay demasiados enlaces en esta página, justo aquí en el banner de Instagram. Voy a mantener mis enlaces subrayados para ayudarlos a sobresalir así no habrá ningún error de que se trate de enlaces. A continuación, voy a trabajar en los titulares de la página. Entonces, voy a elegir un morado más oscuro y aplicarlo a cualquier cosa que creo que debería actuar como titular siempre y cuando esté sobre un fondo blanco. También voy a hacer estos pasos del mismo color. Ayudará al lector a lo largo y a romper la ubicación y les dará pasos claros. Es una diferencia sutil pero quieres mantenerla consistente. A continuación, voy a trabajar en probablemente lo más aburrido en el diseño web y eso son las formas. Definitivamente las formas no son las más divertidas del mundo pero creo que darles un poco de TLC extra realmente puede marcar una diferencia masiva en el aspecto general de su sitio web. Entonces, voy a tirar de algo de mi morado aquí pero lo voy a hacer realmente sutil. Entonces, voy a usar el último morado que tengo y voy a añadir un poco de morado más oscuro para el borde y voy a repetir eso para el resto de los elementos de forma. Voy a desvanecer todos estos textos de calendario también y voy a agitar las áreas de cabecera de nuestro calendario al mismo morado oscuro que usamos en nuestra navegación. Está bien. Entonces como puedes ver, he mantenido todo bastante consistente pero todo se ve bastante morado. Cambié estos a morado y también he dado algunos detalles morados aquí abajo. Entonces, volvamos a desplazarnos hasta la parte superior de la página y echemos un vistazo a nuestro botón de llamada a la acción. Entonces, de verdad quiero que esto destaque. Cuando un cliente potencial aterriza en esta página, queremos que lo vean enseguida sobre todo si ya saben que quieren reservar una bicicleta y solo quieren hacerlo. Entonces, voy a añadir mi azulado más oscuro aquí y voy a hacer mi texto blanco, cual creo que se ve muy bien encima de esta foto y vamos a bajar la página. Habrán notado que he estado saltando más allá de estas ilustraciones y vamos a hacer estas últimas. Entonces, aquí en el calendario, hagamos este selector de rango de fechas también azulado. Definitivamente necesita destacarse ya que necesita tener claro qué fechas está eligiendo el usuario. Seguimos adelante de nuevo y ahora cambiaremos nuestro botón libro ahora. Por último, el último botón de enviar mensaje. Otro consejo aquí a tener en cuenta es si tienes un sitio web con muchas páginas diferentes, trata de no cambiar todo el color de la página, el fondo de página a página como si tu fondo es rojo en una página y luego azul y luego otra página púrpura. He visto muchos sitios web hacer esto y sólo unos pocos lo han conseguido realmente. Creo que la mayoría de las veces sólo puede debilitar las impresiones de los espectadores de su marca. Si eres una empresa realmente establecida, posible que puedas salirte con la tuya pero si solo estás trabajando en un sitio para una startup y cada página es de un color diferente, te estás quitando una cosa más que tus espectadores te recordarán por. Es como revistas que oscurecen tanto el logotipo fuera del modelo de portada que ni siquiera lo puedes leer más. Creo que pueden darse el lujo de hacer eso porque sus lectores ya saben lo que buscan. Entonces, solo recuerda tratar de mantenerlo consistente. 10. El color de los iconos: Entonces chicos, ya casi estamos ahí. El último que hay que terminar en nuestra página es el cómo ilustrar un íconos. Entonces, voy a editar mis colores aquí mismo en la plantilla de página completa, pero he creado archivos separados de Illustrator y Photoshop para estos si prefieres trabajar en ellos uno en uno. A mí me gusta editar el mío contra el fondo real en el que se van a utilizar solo para ver cómo funciona todo en conjunto, pero realmente depende de ti. Entonces, voy a asegurarme de que mi muestra se abra de nuevo, y voy a aplicar el color de formas similares antes. Pero esta vez, creo que voy a empezar con el azulado en su lugar. Realmente no tenemos mucho en nuestra página ahora mismo, y creo que esta es una buena excusa para empezar a usar algunos. Me gusta asegurarme de tener al menos una instancia de cada color en mi paleta en mis iconos si puedo. Encuentro que realmente ayuda a atar todo junto con el esquema de color si puedes reflejarlo aquí en los iconos, también. También es genial porque solo piensa en el potencial de las ilustraciones por el camino, retrocediendo, o en planes para expandirse. Todas estas ilustraciones podrían sacarse aquí y usarse en publicidad o un póster o lo que sea, y ya van a tener ahí todos los colores de la marca. Entonces, aquí está mi diseño terminado. He hecho algunos pequeños retoques según sea necesario. He añadido un poco de destaque aquí para mostrar en qué sección estamos. He añadido un sutil borde negro alrededor estas ilustraciones solo para que se destaque del fondo un poco más. También he sacado atrás el contraste de texto de un 100 por ciento negro a alrededor de 80 por ciento negro, como mencioné antes en primera clase, solo para que sea un poco menos tenso en los ojos. Todavía va a tener una buena relación de contraste que es la parte más importante. Todo es consistente y todo está terminado. Recuerda que puede que tengas que hacer pruebas de color de archivo en el navegador. Esencialmente estamos haciendo una maqueta para que los desarrolladores u otros diseñadores sigan, y solo se puede hacer tanto en programa destinado al diseño de impresión como Illustrator o Photoshop. Entonces, revisa todos tus colores, especialmente los colores de texto en el prototipo de trabajo en el navegador solo para estar seguros. Yo quiero que ustedes revisen su diseño, hagan una comprobación final con oráculo de color para ver la ceguera del color, y revisen cualquier área que piensen que pueda tener un problema potencial de contraste de color. Cuando estés todo listo, sube una versión final del sitio web del libro de byte para su revisión. Absolutamente no pueden esperar a ver lo que se les ocurrirá a ustedes chicos. 11. Guías de estilo: Entonces, chicos, ustedes han entregado su proyecto, pero aún tenemos un par de cosas de las que hablar. Lo que le pasa a tu paleta después de terminar tu diseño puede ser tan importante como lo que sucede antes y durante tu toma de decisiones. Entonces, ¿cuántos de ustedes han trabajado con otro diseñador o desarrollador y acaban de entregarles una maqueta terminada, y regresan dos semanas después y todas sus opciones de color están completamente equivocadas? Te suena familiar? Creo que todos hemos estado ahí en un momento u otro, pero hay algunas maneras en que puedes ayudar a evitar que este tipo de cosas sucedan. El más importante es crear una guía de estilo para que otras personas involucradas en tu proyecto sigan. Una guía de estilo tradicional suele ser producida por una agencia de publicidad y está destinada a cubrir las reglas y pautas de cómo debe usarse toda su sucursal. Eso puede incluir cualquier cosa, desde el tamaño del logotipo hasta la colocación del logotipo, cómo usar la fotografía, qué tipo de tipos de letra debes usar y cómo se debe usar el color. Por lo general, esos documentos terminan siendo una pila masiva de papel. Una vez conseguí una guía de estilo de 50 páginas en mi escritorio para una sola marca. Las guías de estilo se están volviendo mucho más comunes en el diseño web en estos días, pero generalmente son bastante diferentes de las guías tradicionales para impresión. Muchas guías de estilo tienen cosas como módulos reutilizables, fragmentos de código y patrones a los que los desarrolladores pueden referirse, para usar en todo un sitio web. Este es uno realmente famoso de Starbucks que salió hace unos años. Podría hablar de guías de estilo en detalle para siempre, pero eso probablemente ocupará toda una nueva clase de Skillshare. Entonces, si alguno de ustedes está realmente en serio con el diseño web, recomiendo encarecidamente leer un libro de Anna Debenham llamado la Guía de Bolsillo para Guías de Estilo Front-End. Es un librito increíble. Ella te enseña casi todo lo que quieras saber sobre la creación de guías de estilo para la web. Pero, para esta clase, solo vamos a hablar de cómo preparar tus opciones de color para otros desarrolladores y diseñadores. Entonces, aquí hay un archivo muy básico que me burlé de que podría mandar a un desarrollador. No es demasiado detallado, pero puede ser suficiente si estás trabajando en un sitio pequeño como BikeBook. Me gusta incluir valores RGB y códigos hex para cada muestra. Si sabes que tus colores se van a usar en impresiones y no necesitas tintas especiales como las tintas Pantone, puedes incluir aquí los valores de color CMYK también. También me gusta etiquetar los colores si tienen funciones muy específicas. Entonces, éste se va a utilizar para los elementos de navegación. Este se usa para estados hover, y cualquier otra cosa que necesites. También puedes exportar tu muestra como un archivo ASE y enviarla junto con tu maqueta para que otros diseñadores y desarrolladores lo descarguen. Entonces, puedes abrir tu paleta de muestras aquí en Illustrator. Si seleccionas esta carpeta de tus muestras y vas a la Biblioteca de muestras guardada como ASE, puedes llamarla Bikebook.ase, y puedes agregar un enlace a ese archivo en tu guía de estilo, puedes enviarlo a otros diseñadores o lo que quieras. Si no tienes un simulacro, puedes usar el sitio web de color de Adobe para exportar tu paleta en su lugar. Ten en cuenta aunque que los desarrolladores realmente, realmente lo aprecian si solo les das los números de valor de color. Hará las cosas mucho más rápidas para ellos, para que no tengan que entrar en Photoshop, o Illustrator, o cualquier aplicación que usaste y obtener los números de color por sí mismos. Spectrum realmente puede manejar esto para ti también. Intenta exportar tu paleta y guardarla como un archivo CSS. Aquí hay diferentes opciones para CSS, para Sass, PNG. Arrastramos este archivo a nuestro editor de texto. Se puede ver que todos los colores están listos para usar. Además, si conoces HTML y CSS básicos, solo puedes construir tu propia guía de estilo funcional, que es la mejor opción. Podrás colaborar en la guía con otros desarrolladores y mantenerla actualizada cada vez que algo cambie o se agreguen nuevos colores de marca. Me gusta mucho esta guía básica de MailChimp, que han hecho pública en su página web. Es sencillo, pero se hace el trabajo. Todos los colores están listados. Puedes copiar el código de color o puedes descargar la ASE para cargar en Illustrator o Photoshop. Entonces, ojalá, por ahora ustedes ya han aprendido una tonelada sobre el color, y no solo por la web, sino por el trabajo de diseño e ilustración que podrían estar haciendo también. Una de las cosas más grandes que puedo recalcar como después de hacer esta clase es que, elegir el color es más un arte que una ciencia. A menos que ya tengas un ojo increíble para elegir paletas que simplemente van juntas, va a necesitar mucha práctica para mejorar, al igual que cualquier otra cosa en diseño. Joseph Álvarez también fue un gran creyente en esto. Solía hacer que sus alumnos aprendieran haciéndolo realmente. En realidad poniendo colores uno al lado del otro y viendo cómo interactuaron. En realidad no es suficiente simplemente aprender la ciencia y la teoría detrás de ella. Sólo tienes que hacerlo. Si no tienes la oportunidad de trabajar con color que a menudo, intenta ajustarlo a tu día de otras maneras, aunque signifique pensar extra duro en lanzar un atuendo juntos. Piénsalo cuando estés haciendo renovaciones de casa, o decorando tus apartamentos, o cuando vayas a una tienda. Piénsalo todo el tiempo. Empieza un poco tablero de Pinterest de inspiración de color. Simplemente toma fotos de esquemas de color que realmente te gusten, y luego échale un vistazo y trata de entender por qué se ve bien juntos. No olvides que está totalmente bien usar herramientas para ayudarte. Es para lo que están ahí. Si no estás contento con tu proyecto, vuelve a él en una fecha posterior. Vuelve a ello en una semana, o un mes, y míralo de nuevo con la mente clara. Es posible que veas exactamente por qué cierto color te estaba molestando, y es posible que puedas arreglarlo de inmediato. Todo eso es parte del proceso creativo. Entonces, espero que te diviertas con tus nuevas habilidades de color, y gracias por seguir. 12. Explora el diseño en Skillshare: manera.