El color en la web I: diseño de paletas cohesivas | Geri Coady | Skillshare
Buscar

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

El color en la web I: diseño de paletas cohesivas

teacher avatar Geri Coady, Designer & Illustrator

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Avance

      1:18

    • 2.

      Una cartilla de colores

      4:51

    • 3.

      El proyecto

      3:01

    • 4.

      Directrices de la marca

      1:32

    • 5.

      Mensaje y significado del color

      3:13

    • 6.

      Audiencia objetivo

      2:55

    • 7.

      Investigación de la competencia

      2:04

    • 8.

      Esquemas de color

      2:31

    • 9.

      Contraste de colores

      3:46

    • 10.

      Herramientas de combinación de colores

      6:04

    • 11.

      Uso de fotografías

      4:21

    • 12.

      Consejos y trucos

      2:25

    • 13.

      Construye tu paleta

      2:23

    • 14.

      Explora el diseño en Skillshare

      0:37

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

3070

Estudiantes

87

Proyectos

Acerca de esta clase

Aprende con la práctica: juega con las referencias, la experimentación y tus nuevos conocimientos sobre el color, y crea dos paletas de colores para el sitio web ficticio de Bikebook.

Desarrolla una paleta de colores armoniosa para cualquier sitio web gracias a esta clase de 40 minutos sobre selección, comunicación y diseño con colores de la mano de la diseñadora Geri Coady. Puedes partir del resumen y la maqueta del sitio web ficticio para empezar a trabajar en tu proyecto de inmediato (independientemente de tus conocimientos previos), o puedes basarte en una idea de sitio web propia. Sea como sea, podrás practicar tu flujo de trabajo perfecto para un diseño inteligente y estratégico en cualquier tono.

¿Quieres ver el color en acción? Aprende sobre la accesibilidad, las pruebas y la implementación del color en la segunda clase de Geri Coady, Color en la web II: diseño para la claridad y la conformidad.

Conoce a tu profesor(a)

Teacher Profile Image

Geri Coady

Designer & Illustrator

Profesor(a)

Geri Coady is a color-obsessed freelance designer and illustrator (and occasional photographer) working in St. John's, Newfoundland -- the oldest and most Easterly city in North America.

She's been active in the design industry for over a decade, most recently as an art director at a Canadian advertising agency. She's worked with clients of all sizes in the private and public sector and recently illustrated a book for Scholastic UK.

Geri is the author of Pocket Guide to Colour Accessibility published by Five Simple Steps and speaks about the topic at conferences worldwide. In 2014, she was voted as Net Magazine's Designer of the Year.

She's also a long-time supporter of the Skills Canada organization, where she volunteers as a provincial technical committee ... Ver perfil completo

Habilidades relacionadas

Diseño Diseño UX/UI
Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Avance: En la primera parte de esta serie sobre color en la web, estaremos aprendiendo los primeros pasos para crear una paleta armoniosa para un sitio web. Empezarás con el breve del cliente para seguir igual que un proyecto real. Estaremos trabajando para una empresa ficticia llamada Bike Book. Una empresa de alquiler de bicicletas con un giro. Debido a que nos estaremos centrando únicamente en el color, se le proporcionará el mark-up del sitio web. Todo lo que necesitas es una copia de Photoshop o Illustrator para seguir junto con las lecciones. Revisaremos términos básicos de color, aprenderemos consejos de investigación, hablaremos sobre el mensaje de color y el significado, y entenderemos cómo elegir colores apropiados para su audiencia. Entonces, saltaremos y crearemos nuestras paletas basadas en las habilidades fundacionales que aprendimos. Esta clase está dirigida tanto a principiantes que quieran mejorar sus habilidades de color, como a diseñadores con experiencia que quieran perfeccionar su flujo de trabajo de color. Al final de la clase, tendrás dos pellets armoniosos para tu proyecto, y estarás listo para pasar a la clase dos, donde aprenderemos sobre accesibilidad de color, pruebas, guías de estilo, y cómo implementar nuestra paleta en la Bicicleta Reservar página web. 2. Una cartilla de colores: Oigan chicos. Gracias por suscribirse a mi Skillshare. Esta es en realidad una serie de dos clases, sobre el flujo de trabajo de color en el diseño web. Entonces, la primera clase se va a enfocar en desarrollar una paleta de colores para un sitio web y la segunda clase, que espero que también lo hagan, se va a centrar en implementar realmente su paleta en un diseño de sitio web. Entonces, la buena noticia es que el diseño ya está hecho para ti. Entonces, para estas clases, sólo nos vamos a centrar en el color. Creo que una de las razones por las que muchos diseñadores luchan con el color, es porque tienden a simplemente maquillarlo sobre la marcha mientras están trabajando en el diseño o tratando de recoger fotos o buscando la tipografía perfecta. Ya sabes cómo es. Simplemente estás tentado a tirar color en todo el camino sin mucha planeación por adelantado. Sólo tienes que saber que definitivamente no estás solo en tu lucha. Es totalmente normal y espero que encuentres estas clases útiles en tus proyectos. Al finalizar esta clase, tendrás dos paletas de color de trabajo, y al final de la segunda clase tomarás una de esas paletas e implementarla en el diseño. Entonces, antes de saltar, quiero revisar algunos términos básicos de color con los que todos ustedes deberían estar familiarizados. Muchos de ustedes van a conocer estos ya y eso está completamente guay, pero una rápida revisión no va a doler sobre todo ya que voy a estar usando estos a lo largo del curso. Entonces, los colores realmente creados a través de longitudes de onda variables de luz. Cuando esas longitudes de onda se reflejan fuera de una superficie o se emiten como luz, nuestro sistema óptico las interpreta como color. Las longitudes de onda más largas son los rojos, las longitudes de onda más cortas son las violetas y todas las demás longitudes de onda maquillan los colores en el medio. La capacidad de discriminar entre colores se basa en tres atributos; matiz, saturación y ligereza. Entonces, el tono es una propiedad de color y es a lo que nos referimos cuando decimos que algo se ve rojo, amarillo, verde, azul o morado especie de como los colores lo que describiríamos en un arco iris. saturación se refiere a la fuerza de un matiz, donde el tono más saturado es el color más puro y el menos saturado aparece gris. La ligereza también se llama valor y eso se refiere a la ligereza u oscuridad del color y se logra agregando blanco o negro. El tono se logra agregando negro para aumentar la oscuridad y se logra un tinte agregando blanco para aumentar el brillo. Entonces, colores como el marrón, en realidad son tonos más oscuros de naranjas y amarillos y colores como el rosa son en realidad tintes más claros de rojo. Entonces, piensa de nuevo a cuando eras niño en la escuela y probablemente aprendiste que el rojo y el azul y el amarillo, eran los colores que conformaban todos los demás colores. ¿ Verdad? Bueno, en realidad es un poco más específico que eso. Son lo que llamamos cian, magenta y amarillo. No son del todo lo mismo. Estos colores con la adición de negro, conforman el modelo de color sustractivo que es base de tinta. Entonces, se llama sustractiva porque la tinta en realidad resta la cantidad de luz reflejada de una hoja impresa. Se utiliza ampliamente en la impresión offset y no vamos a profundizar en eso hoy porque como diseñadores web, nuestro trabajo vive en el modelo de color aditivo. El modelo de color aditivo es a base de luz y que consiste en colores primarios rojo, verde y azul y se mezclan para crear el espectro completo. Entonces, pantallas de computadora, televisores, proyectores, escáneres de tabletas, cámaras digitales estos son todos dispositivos RGB. Entonces, aquí hay un hecho bastante asombroso del Dr. Jay Knights, quien es investigador de la visión del color en la Universidad de Washington. Hace unos años afirmó que la persona promedio puede distinguir alrededor de 1 millón de tonos diferentes y algunas personas pueden distinguir incluso más que eso. Me gusta pensar que es por eso que el color puede ser una parte tan difícil del diseño para tantos de nosotros y es difícil saber por dónde empezar a veces. Entonces, en la siguiente lección te voy a enseñar cómo reducir realmente tus opciones para hacer que las cosas sean mucho menos aterradoras. 3. El proyecto: Entonces, hablemos del proyecto en el que ustedes van a estar trabajando. Vamos a estar desarrollando una paleta de colores para una startup ficticia llamada Bike Book. Por lo tanto, el objetivo de Bike Book es lanzar un servicio de alquiler de bicicletas a partir de Nueva York, San Francisco y Portland, y expandirse a otras ciudades más adelante. Bike Book es un poco diferente a la tienda promedio de alquiler de bicicletas. No lleva una amplia variedad de bicicletas, solo unas que son elegantes, sencillas y se ven bien cuando las estás montando. Están apuntando al tipo de ciclistas urbanos más jóvenes conscientes de la moda, en lugar de turistas casuales que solo buscan una forma de ver la ciudad. Algunas de las bicicletas que rentan son de la Mission Bicycle Company, BIKES PUBLICAS, y también tienen algunas bicicletas vintage restauradas. Por lo tanto, los clientes pueden pre-reservar una bicicleta en una ciudad de su elección en su página web en bikebook.me, que en realidad no es una url real. Después, podrían recoger la bicicleta de la tienda y devolverla al final del periodo de alquiler. Entonces, quiero que ustedes sigan adelante y lean el breve ustedes mismos. Puedes descargarlo en la página de la lección junto con las otras plantillas que vamos a necesitar para este proyecto. Entonces, podrías pensar que leer el breve no es realmente necesario, pero lo es, y debería ser el primer paso en cualquier proyecto que hagas. Puede ser realmente tentador simplemente saltar a una computadora de inmediato y comenzar a experimentar, pero si realmente lees primero el breve, obtendrás una mejor idea de lo que busca tu cliente. Incluso recomendaría leer el breve y hacer su investigación en un día y luego, espere hasta el día siguiente después de que haya tenido tiempo para que esa información se hunda antes de meterse en las cosas divertidas. Si hay algo en el breve de lo que no estás seguro, ahora es el momento de pedir aclaraciones al cliente. Hacer preguntas, entender el proyecto lo mejor que puedas en esta etapa definitivamente ayudará a evitar cualquier malentendido en las etapas posteriores. Te verás más preparado y más seguro si tienes una justificación sólida detrás de tus decisiones. Apuesto a que muchos de ustedes han estado ahí con un cliente y quieren cambiar ese hermoso azul que ustedes escogen por algo así como rojo brillante porque es su color favorito o algo así. Pero, si realmente eres capaz de explicar la razón específica por la que elegiste ese azul, vas a tener un tiempo mucho más fácil convenciendo a ese cliente de que realmente confíe en tu experiencia. Entonces, de lo contrario, solo va a ser tu color favorito versus su color favorito y van a ganar cada vez. Entonces, adelante y lee el breve y echa un vistazo al diseño del sitio web incluido y echa un vistazo al logotipo cuando hayas terminado. 4. Directrices de la marca: Entonces, lo primero que debes hacer cada vez que inicies un nuevo proyecto es comprobar si hay alguna pauta de marca existente que el cliente pudiera tener. Las pautas de branding a veces tienen nombres diferentes. La mayoría de los diseñadores y desarrolladores web los llamarán guías de estilo, y si vienes de un fondo de impresión como yo, podrías usar el término manual de estándares gráficos. Por lo tanto, estos manuales en realidad pueden ir desde ser súper simples y simplemente definir cómo y dónde se puede usar un logotipo, pero otros manuales pueden ser mucho más detallados. Entonces, vamos a hablar más de los de segunda clase. Este es un ejemplo de Skype. Tienen los colores de sus marcas claramente definidos, así que si eres un diseñador trabajando para Skype, vas a necesitar un argumento bastante fuerte para introducir nuevos colores si no son parte de esta guía. Entonces, en nuestro caso, todo lo que tenemos es el logo del bikebook en escala de grises, y si lees el breve, aprenderás que el logo no necesita usar negro ni gris. Puedes usarlo de cualquier manera que consideres la más apropiada, siempre y cuando no edites la estructura del propio logotipo. Entonces, esta situación hace que nuestra elección de color un poco más difícil ya que no tenemos ninguna dirección para trabajar. Pero les voy a mostrar cómo encontrar un punto de partida en la siguiente lección. 5. Mensaje y significado del color: Entonces, es importante recordar que el color es un método de comunicación increíblemente poderoso. Y yo diría que la mayoría de la gente realmente no se da cuenta de los efectos psicológicos que podría tener en ellos. Entonces, podría haber escuchado historias sobre los trucos que los diseñadores de interiores y arquitectos pueden hacer para afectar la forma en que las personas se comportan dentro de un espacio o una tienda. Por lo tanto, los restaurantes de comida rápida a veces usan naranjas y rojos y amarillos en su interior para realmente hacer que el ambiente se sienta un poco más incómodo, y ayuda a mantener a la gente en movimiento para hacer espacio para nuevos clientes. Entonces, me gusta mucho esta cita de Manet. 'El color es cuestión de gusto y de sensibilidad', y es cierto. El color lleva todo tipo de mensajes y a veces incluso se contradicen por completo. Pero hay momentos en que ciertas paletas van a ser más apropiadas de usar que otras. El azul es un color que podríamos asociar con sentirnos tristes o deprimidos y vemos rojo cuando estamos enojados y podemos ser verdes con envidia cuando estamos celosos. Pero al mismo tiempo, el azul suele asociarse a la tecnología y la comunicación o las industrias profesionales corporativas y el rojo es el color del amor y la pasión. Y el verde puede representar actitudes positivas, naturaleza, y buena salud. Entonces, necesitamos descifrar el mensaje que necesitamos transmitir en este proyecto. ¿ Cómo quieres que se sienta el público? ¿ Qué tipo de adjetivos describen en realidad ese sentimiento? Entonces, vas a encontrar la mayoría de las respuestas en la sección de tono del breve. Entonces, tengo una copia del breve aquí y necesito que ustedes tomen nota de que es un poco diferente a la suya. Entonces, quiero que ustedes hagan su trabajo en base a su información en el breve. Entonces, deberíamos terminar con algunos resultados bastante diferentes al final de la clase. Por eso no puedo recalcar lo suficiente que es importante que ustedes lo lean. Entonces, aquí está la sección de tono en mi breve. BikeBook se ven a sí mismos como relajados, cómodos y geniales. Piensa en paseos de fin de semana perezosos para almorzar y pasar el rato en parques. Montar en bicicleta desde BikeBook debe sentir como ser miembro de un club exclusivo. A mí me gusta buscar palabras clave en el breve y anotarlas en mi cuaderno de bocetos o subrayarlas. Entonces, tenemos cosas como relajado, cómodo, y cool, perezoso, tal vez relajado podría ser una palabra mejor ahí, exclusiva. Esa es una muy buena. Seguiré recorriendo las otras secciones en el breve y sumaré más a mi lista y quiero que ustedes hagan lo mismo antes de seguir adelante. 6. Audiencia objetivo: Ahora, es hora de hablar de nuestro público objetivo, que es un grupo muy específico de personas que será blanco de la publicidad del cliente. Un público objetivo suele estar conformado por demografías como la edad, el género, lenguaje cultural, los empleos, la situación financiera y mucho más. Entonces, solo recuerda cuando estés considerando al público objetivo en tu proyecto no pintar a todo el mundo con el mismo pincel. Probablemente no sea una gran idea leer que el público objetivo son las adolescentes o algo así y automáticamente hacer que todas tus cosas sean rosas. De verdad hay que tener cuidado con eso. Entonces, con eso en mente, podemos hablar de cómo el color realmente puede afectar a tu audiencia. La edad es realmente grande. Entonces, si estás diseñando algo para niños o pre-adolescentes. Tu esquema de color probablemente va a verse mucho diferente a algo que diseñarías para la tercera edad. Probablemente vas a querer mostrar algo un poco más llamativo. No necesariamente súper loco pero solo más emocionante y llamativo que si estuvieras diseñando algo para las personas mayores. Las diferencias culturales también son algo en lo que pensar. El púrpura es un ejemplo realmente bueno aquí. Entonces, el púrpura a los ojos de las culturas occidentales podría estar asociado con la realeza, pero también tiene algunas connotaciones fuertes con la muerte y el duelo y algunas culturas católicas europeas. McDonald's es un gran ejemplo de una empresa que ajusta su estrategia de marketing y diseño para diferentes países. Aquí hay tres esquemas de color diferentes de los sitios web actuales de McDonald's, Canadá, Japón y Francia. El francés es definitivamente una salida enorme. También debes pensar en los ingresos y la situación laboral de tu público. ¿ Es un producto que estamos diseñando para un artículo de lujo o un servicio de lujo? O es asequible para todo el mundo pero aún necesita parecer un poco caro. Puede ser totalmente apropiado hacer que eso se vea barato si ese es el objetivo previsto, eso no quiere decir que tenga que parecer feo. Entonces, solo piensa en empresas como Target. Creo que Target hace un muy buen trabajo de parecer una tienda asequible sin embargo todavía tienen un buen diseño y por supuesto IKEA es de la misma manera. Entonces, voy a echar un vistazo a mi breve otra vez y leer la sección de público objetivo y otra vez tomar nota de unas palabras clave que creo que son útiles. Yo quiero que ustedes hagan lo mismo antes de seguir adelante. 7. Investigación de la competencia: Entonces, estás construyendo tu lista de palabras e inspiración para tu paleta y quizás ya tengas algunos colores en mente que crees que te gustaría probar en tu proyecto. Pero antes de llegar a ese paso sin embargo, echemos un vistazo a nuestros competidores. Entonces, una de las peores cosas que pueden pasar es terminar con una paleta increíblemente similar a un competidor directo y que puede meter en problemas al cliente y a ti como diseñador. Algunas empresas en realidad va tan lejos como el color de copyright, Tiffany, la joyería Company en realidad tiene su marca de color azul en Estados Unidos. Es un número Pantone real, número 1837 pero no está impreso en ningún libro de muestra Pantone. Lo cual creo que es bastante loco. Cadbury púrpura también tiene marca registrada, UPS marrón, T-Mobile rosa, y por supuesto Coca-Cola pero eso no es realmente una gran sorpresa. Afortunadamente, nuestro cliente ha hecho la mayor parte de la investigación por nosotros y han enumerado algunos competidores en el breve. Entonces, voy a echar un vistazo a sólo uno por ahora, un competidor neoyorquino llamado RentBike NYC. Entonces, primera impresión de este sitio web es obviamente muy verde. Voy a echar un vistazo rápido por ahí, definitivamente mucho verde. Probablemente no mucho más pasando aquí en color en realidad. Entonces, tendré que tener eso en cuenta probablemente no estaré eligiendo este tono de verde de mi color primario por lo menos. Entonces, quiero que ustedes revisen a algunos otros competidores en el breve. Toma algunas notas antes de pasar a la parte divertida que en realidad está construyendo nuestra paleta. 8. Esquemas de color: Entonces, espero que ustedes hayan terminado su investigación y hayan dejado que se hunda un poco antes de seguir adelante. Ahora, vamos a cavar y en realidad aprender a elegir nuestra paleta de colores. Entonces, lo que me gusta hacer aquí es agarrar mi cuaderno de bocetos y echar un vistazo a la información que he reunido sobre mi público objetivo y sobre el mensaje que necesito transmitir. El primer paso que me gusta dar a la hora de elegir mi paleta es considerar si el diseño debe ser más brillante audaz o más suave y más subyugado. Entonces, en mis notas, tengo palabras como relajado, cómodo, cool, premium, con estilo. Entonces, ese tipo de ayuda me ayuda a decidir que el color debe ser un poco más suave y más tenue. Entonces, no creo que vaya a estar usando muchos colores saturados súper brillantes aquí. Entonces, eso ayuda a reducir bastante mis opciones, pero recuerda que puedes tener palabras ligeramente diferentes en tu diferente breve especialmente en la sección de tonos. Entonces, asegúrate de tomar notas. A partir de aquí, podemos empezar a elegir tonos apropiados y construir una paleta armoniosa. Entonces, aquí es donde puede ponerse un poco desalentador, pero no te preocupes, hay trucos y herramientas por ahí para ayudarte. Entonces, voy a hablar de tres tipos comunes de esquemas de color que puedes usar como punto de partida; analagous, tríada, y split complimentary. Las combinaciones análogas implican seleccionar un color primario y los dos colores adyacentes en una rueda de color. Este tipo de colores reflejan longitudes de onda similares de luz y suelen ser armoniosas. Los esquemas de tríada implican seleccionar tres tonos, espaciados equidistantes entre sí en la rueda de color creando un triángulo. Los esquemas de cortesía divididos implican elegir un matiz primario y dos tonos secundarios que están adyacentes al complemento de tonos en la rueda de color. No te preocupes si esto aún no tiene sentido para ti. Te mostraré algunos trucos para ayudarte a poner estos esquemas a usar después de la siguiente lección sobre contraste de color. 9. Contraste de colores: Entonces, si alguno de ustedes son ilustradores o artistas, probablemente sabrán que una de las claves más importantes para una buena pintura es el uso efectivo del contraste. contraste puede crear enfoque en la jerarquía, y puede llamar la atención hacia las partes más importantes de una pintura o diseño. El contraste es también uno de los factores más importantes para aumentar la legibilidad de una persona con discapacidad visual. Hablaremos más de las deficiencias visuales en la segunda clase de esta serie. Entonces, no te preocupes demasiado por esto ahora mismo. El contraste de color se puede lograr de algunas maneras diferentes, siendo algunas más efectivas que otras. Entonces, les voy a mostrar algunos ejemplos chicos. El contraste entre los colores claros y oscuros es el atributo más importante a la hora de crear contraste efectivo. Trata de no usar colores que tengan una ligereza similar uno al lado del otro en un diseño. Aquí se puede ver que los colores rojo y verde de la izquierda comparten una ligereza similar, y no proporcionan suficiente contraste por sí solos sin hacer algunos ajustes. El versión de la derecha es mucho más efectivo. contraste también se puede lograr eligiendo colores de cortesía que estén opuestos entre sí en la rueda de color, pero una excepción es, por supuesto, rojo y el verde, lo que puede causar problemas a las personas con ceguera del color. Como aprenderás en la segunda parte, lo mejor es evitarlos siempre que sea posible. pares de colores complementarios suelen proporcionar mejor contraste que elegir tonos adyacentes en la rueda. También existe contraste entre los colores fríos y cálidos en la rueda de color. Entonces, si tomamos esta rueda de color y la dividimos en colores fríos como azules, morados y verdes, para luego compararlos los colores cálidos como rojos, naranjas y amarillos. Elegir un tono oscuro de un color fresco emparejado con un tinte claro de un color cálido proporcionará mejor contraste que dos colores cálidos o dos colores fríos. El contraste de saturación ocurre cuando se coloca un color opaco junto a un color más intensamente saturado. Pero, esta técnica no es tan efectiva como el contraste claro y oscuro, por lo que no recomendaría confiar en ella para información importante como copiar o elementos de navegación. Entonces, si ustedes echaron un vistazo a los archivos del proyecto, probablemente notarán que todos están en escala de grises. Entonces, uno de los trucos más fáciles para lograr un buen contraste es trabajar realmente en escala de grises antes de introducir cualquier color en absoluto, aunque ya tengas en mente tu paladar. Si puedes hacer que tu diseño se vea bien en escala de grises, lo más probable es que funcione cuando introduzcas color, y tendrá una mejor oportunidad de retener ese contraste que necesita un público más amplio. Entonces, este es un concepto para un sitio web que hice, y sabía que mi paladar iba a usar rojo, negro, y blanco en mi cabeza, pero no tuve que colgarme demasiado en las colocaciones y donde todos esos colores iban a ir mientras yo estaba trabajando en el diseño, y realmente agializó mi flujo de trabajo al final. Ustedes miran el juicio de este método de agregar color a una maqueta en escala de grises en la segunda clase de la serie. Pero ahora mismo, estamos listos para saltar a unas manos en el trabajo. 10. Herramientas de combinación de colores: Entonces, me di cuenta de que les dejé caer mucho conocimiento en la primera parte de esta clase, y está totalmente bien si no lo entienden todo de inmediato. El color es definitivamente un tema complicado y todos podemos usar un poco de ayuda para elegir nuestros esquemas de color. Entonces, no hay absolutamente ninguna vergüenza en usar herramientas de orientación y sé que uso esto todo el tiempo. Hay bastantes herramientas por ahí que puedes usar para ayudar a minimizar las conjeturas que se van a elegir un palé. Algunos tienes que pagar y otros son gratis. Entonces, una app que te voy a mostrar se llama Spectrum y es una app de pago disponible para macOS. También te voy a mostrar uno llamado Adobe Kuler, que está disponible en línea en el navegador. Entonces, voy a abrir Spectrum aquí y mostrarles los alrededores. Voy a construir un esquema de color basado en la información que he reunido en mi versión del breve. Entonces, quiero algo un poco tranquilo, relajante, fresco pero aun así un poco de aspecto premium. No quiero que esto parezca una página web de estilo torus llamativa. Entonces, este es el panel principal donde puedes editar tus colores y aquí te dejamos una pestaña donde podrás ver todas las paletas que has guardado. Spectrum también viene con algunas de estas paletas preestablecidas con las que puedes jugar. Entonces, voy a hacer una nueva paleta aquí y llamarla BikeBook. Daré clic en Editar para volver a la pantalla. Ahora, esto hace un extraño esquema de color por defecto, pero te mostraré cómo podemos arreglar esto rápidamente y hacer que se vea mucho mejor. Entonces, aquí en la parte inferior de la pantalla se pueden ver ejemplos de diferentes esquemas de color que se pueden utilizar para guías. Entonces, voy a empezar con algo más sencillo y escoger análoga. Voy a eliminar algunas de estas muestras sólo para que sea un poco más fácil de usar en este momento. Entonces, cada una de estas tres muestras está mapeada a uno de estos puntos en la rueda. Si arrastras estos puntos alrededor, los colores van a cambiar. Cuanto más los saques, más saturados se ponen, y se ven un poco incómodos. Pero cuanto más hacia el centro te vas, se ponen un poco menos saturados y ya puedes ver los colores luciendo mucho más prometedores. Entonces, si sacas este nodo, ampliará esa selección y luego incluirá una mayor gama de colores. Entonces, creo que quiero algo un poco terroso, tal vez algo así. A mí me gusta esto. Creo que es suave y relajante y fácil en los ojos, pero no estoy seguro si estoy contento con este marrón así que puedo hacer clic en esto y realmente puedo usar estos deslizadores aquí para hacer esto un poco más marrón si me gusta, un poco más rojizo y cambiar la saturación. Puedo cambiar el valor. Entonces, si vuelvo a mi ficha aquí, puedo ver que está hecha mi paleta. Puedo duplicarlo si quiero. Vuelve a editar este entonces sabemos que siempre tenemos respaldo con el que trabajar. Entonces, si quiero hacer tonalidades y tensas de cada uno de estos colores, lo que haré es duplicar cada uno y hacer tres de cada color. Entonces puedo empezar a negociar y a hacer un tinte de cada color hasta que esté feliz. Obviamente, vas a pasar más tiempo en esto de lo que estoy haciendo para esta demostración pero te das la idea. Si cometes un error, siempre puedes cambiar tu color y eso es todo. Si no tienes un Mac, también puedes usar Adobe Kuler que se deletrea K-U-L-E-R. Entonces, solo puedes ir a kuler.adobe.com. Tendrás que hacer una cuenta si quieres guardar alguno de tus paladares, pero solo puedes jugar con ella si quieres. Entonces, notarás que funciona de manera muy similar a Spectrum. Puedo escoger mi esquema de color o regla de color como lo llaman y puedo arrastrar el nodo resaltado en el medio alrededor de la rueda para cambiar mi paleta. Entonces, una cosa del color es en realidad puedes copiar esta URL o marcarla y volver a ella más tarde. Por ahora quiero que ustedes jueguen con una o ambas de estas herramientas y creen una paleta que ustedes consideren apropiada para la página web de BikeBook. 11. Uso de fotografías: Ahora que tienes un palé diseñado, vamos a hacer una segunda opción usando una fotografía como inspiración. Entonces, la clave aquí es elegir fotografías que tengan un esquema de color obvio propio. Entonces, si la foto está increíblemente ocupada con todo tipo de locos colores sobresaturados brillantes, probablemente tu palatte se vea de la misma manera, y no va a ser muy bonita. Entonces, voy a abrir aquí la carpeta de fotografía proporcionada, que también estará en sus archivos. Voy a elegir una foto que creo que sea apropiada para mi esquema de color. De nuevo, quiero que mi esquema se vea un poco sobrio, un poco calmante. Entonces, solo veamos lo que tenemos aquí. Entonces, realmente me gusta este. Creo que los colores se ven diferentes. Creo que muchos de estos suaves tonos morados y marrones naturales en 10 colores podrían funcionar muy bien. Algunas de estas otras fotos podrían ser más apropiadas para tu versión del proyecto o quizás quieras despojar el color por completo. Podría estar pensando que un solo monótono fotos en color más apropiado. Tienes la libertad aquí para elegir lo que quieras o editar las fotos como quieras, siempre y cuando creas que es apropiado para el cliente. Entonces, voy a abrir Illustrator para esto. Puedes usar Photoshop si lo deseas o incluso puedes usar un Selector de color y pop el rayo de códigos en una hoja de estilo. Pero voy a usar Illustrator. Entonces, tengo mi foto colocada aquí con algunas muestras negras debajo. Voy a dividir estos nueve colores en tres colores base de nuevo: un primario, un secundario, y luego un tercer color para acentos. Entonces, voy a seleccionar las tres primeras muestras. Simplemente voy a usar mi herramienta cuentagotas y empezar a tomar muestras de mi color primario, que creo que ahora mismo va a ser morado. Algo a tener en cuenta cuando estás tomando muestras de colores a partir de fotos, algunos de estos píxeles por sí solos pueden parecer un poco fangosos. Entonces, tendrás que mirar a tu alrededor y hacer un poco de ajuste para conseguir realmente ese color que necesitas. Entonces, creo que está bien. Elige mi color secundario de la misma manera. Simplemente explora un poco alrededor de la foto. En realidad se ve bastante bien. Entonces para mi color de acento, no pasa mucho en el resto de la foto en cuanto a un tercer tono. Entonces, voy a elegir un verde para nuestro color de acento. Entonces, sólo voy a cambiar aquí y buscar un verde que creo que sería apropiado. Ahora, podemos volver de nuevo y hacer lo mismo por cada uno. Hacer una sombra. Hacer un tinte más ligero hasta que tengamos exactamente lo que necesitamos. Ahora, les voy a decir chicos que también pueden hacer trampa con esta técnica y usar espectro o color para cargar una fotografía, y extraerá la paleta para ustedes. Entonces, sigue adelante y juega con estas técnicas y construye una segunda opción de paleta que creas que es apropiada para tu proyecto. 12. Consejos y trucos: Ahora es un buen momento para darles algunos consejos y cosas extra a considerar a la hora de elegir el color. El primero es algo que he aprendido largo de los años mientras estudiaba pintura e ilustración. Lo mismo aplica en el diseño. Las sombras no son negras. Está bien usar una sombra gris o negra si tienes un fondo gris o blanco. Eso se ve totalmente bien. Pero tan pronto como añades una sombra sobre un fondo coloreado, debes probar el color del fondo y mezclarlo con tu negro, haciendo un nuevo color personalizado para tu paleta. Entonces, esto es lo que podría ser tentado a hacer cuando estás escogiendo tonos en Photoshop o el seleccionador de color de Illustrator. Podrías elegir un color y elegir esos tonos más oscuros siguiendo una línea vertical recta hacia arriba y hacia abajo. Pero en realidad, los reflejos y las sombras se ven mucho más naturales si los eliges en el recolector de color en una curva gradual hacia el negro. Otra cosa en la que debes pensar es en añadir una nueva muestra para texto corporal en tu paleta. Entonces, en lugar de hacer que tu texto corporal sea 100 por ciento negro, intenta hacerlo 80 por ciento negro o 90 por ciento negro, para que sea un poco menos duro a los ojos. Hablaremos más del contraste en la segunda clase, pero un consejo como este es bueno pensar en por anticipado. Por último, piensa en tomar tu selección de color totalmente fuera de línea. Muchos de ustedes podrían no tener acceso a una muestra pantone, lo cual está bien porque la mayoría de ellos están destinados a ser utilizados para el diseño de impresión de todos modos. Pero si ustedes hacen mucha lluvia de ideas grupales, o tal vez juntan muchos tableros de humor durante su investigación, vayan a recoger algunos chips de pintura en la tienda de pintura. No quiero decir llévalos a todos, pero si hay unos cuantos que te gusten, llévalos de vuelta al estudio de oficiales y córtalos y simplemente empieza a jugar con ellos. Pasar por registros, revistas, salir a una tienda de telas. Tantos estampados de tela en patrones son geniales para la inspiración del color. Nunca se sabe lo que se podría llegar si tan solo se puede romper con el equipo. 13. Construye tu paleta: Entonces, solía mostrar mis conceptos de color a los clientes poniendo los colores en la maqueta real del diseño del sitio en el principio mismo que aprendí rápidamente era una idea terrible. Aquí hay tantas cosas que pueden salir mal. Si le muestras a tu cliente dos o tres diseños de sitios diferentes, y cada diseño tiene un esquema de color diferente, puedes prácticamente garantizar que el cliente va a elegir el diseño del sitio con el color que más les guste, aunque el otro los sitios tienen un mejor diseño en general. Entonces, por eso me gusta mostrar a mis clientes mis ideas iniciales de color por delante. Mucho antes de que vean algún diseño. Se quiere que el cliente se centre en el color sólo sin ser influenciado por nada más como la fotografía, falta de contenido, no entender qué es lorem ipsum, ni nada más. Eso es lo que ustedes ahora van a hacer por mí. Para tu proyecto final en esta clase, quiero que te lleves tus dos paletas, dos diferentes, las que has elegido investigando y experimentando, y las publicas en la comunidad de habilidades compartir para retroalimentación. Cuando los publiques quiero que realmente expliques por qué elegiste cada esquema de color. Tampoco tengas miedo de presumir tu proceso. Puedes mostrar cualquier cosa que uses como inspiración, puedes mostrar tus libros de boceto, lo que sea. Pero, no muestres las paletas en el diseño del bikebook. Eso va a ser parte de la clase dos. Siéntase libre de mostrar sus opciones de color de la manera que desee. Pero si no estás seguro de cómo, echa un vistazo a esta hoja de trabajo de paleta que he incluido para ti. Entonces, me gusta mostrar cómo podría verse el logotipo, y cómo podría verse en reversa, en un color claro sobre un fondo más oscuro, y por supuesto me gustaría mostrar ejemplos de cada muestra, y el tenso en tonos de cada uno. Al final del proceso de retroalimentación, debes tener una paleta de colores con la que estés contento antes de seguir adelante. Definitivamente espero que ustedes se vayan a unir a mí en la clase dos. 14. Explora el diseño en Skillshare: manera.