Share
Todavía recuerdo vívidamente una de mis primeras clases de arte cuando, como un niño pequeño y ansioso, me presentaron una gama de pinturas de colores brillantes. Recuerdo la delicia de ver los colores primarios mezclados en colores secundarios por primera vez, y razoné que si dos colores podían hacer un hermoso color nuevo, todos ¡Los colores juntos deben hacer algo aún mejor! Fue totalmente decepcionante darme cuenta de que no importaba cómo lo hiciera, si utilizaba todos los colores a mi disposición, inevitablemente terminaba con un color Kacky que solo se puede llamar "BLECH"..
Años más tarde, como un diseñador web en ciernes, experimenté de nuevo algo sobre el mismo proceso. Mientras estaba aprendiendo, caí en la inevitable trampa de usar demasiados colores, o combinarlos de manera incorrecta, solo para terminar con algo un poco "BLECH"..
Me propuse aprender a crear esquemas de color para la web y encontré mucha información fascinante sobre la teoría del color. Leo sobre tonalidades, matices, tonalidades, tonos, saturación y brillo, así como esquemas de color análogos, monocromáticos, tríada, complementarios y compuestos..
La paleta de colores RGB básica.Sin embargo, sin un marco práctico para insertar esa información, descubrí que al principio no me acercaba mucho más a la creación de un diseño web bien diseñado. De hecho, solo después de que comencé a crear sólidos esquemas de color por pura prueba y error, toda la teoría del color que había leído comenzó a tener sentido..
En el proceso, recogí algunas "pautas de seguridad" para los esquemas de color del sitio web que desearía haber sabido al principio. Cuando empiezas, la teoría de los colores no es necesariamente lo que necesitas por adelantado. A menudo necesitas hacer rodar la bola con algo un poco menos teórico y un poco más "pintar con números".
En este tutorial compartiré con usted seis pautas seguras de "no puede fallar" que puede seguir para obtener una idea básica sobre cómo trabajar con el color en el diseño web. Estas no son reglas, ya que crearás muchos esquemas de color en tu carrera que irán en una dirección completamente diferente. Más bien, son un punto de partida, una guía de seguridad sobre cómo sobrevivir a sus primeras salidas en el mundo del diseño web sin encontrarse con “BLECH”.
Uno de los principios más fundamentales en el diseño web es que no importa cuánto tiempo inviertas en la creación de un diseño glorioso, su función principal es ser un papel secundario para la verdadera estrella del espectáculo; el contenido. Su combinación de colores nunca debe hacer que el diseño del sitio sea "más fuerte" que el contenido que presenta. Su diseño debe estar en segundo plano, ayudando a empujar el contenido del sitio en primer plano..
El esquema de color sutil permite que las imágenes sean el punto de enfoque
El esquema de color alto distrae de las imágenes. No te rías, esto realmente sucede en la web salvaje..Un proceso muy común en el diseño web es crear el diseño en un aislamiento relativo, a menudo en software como Photoshop o Sketch. Si no tiene ningún contenido de ejemplo en su lugar, puede ser fácil terminar con un diseño que se vea muy bien por sí mismo y que un cliente pueda amar en forma de maqueta, pero que distrae demasiado a los visitantes del sitio en la práctica. De hecho, el proceso de diseño web está tan estrechamente relacionado con el contenido que muchos diseños web de alta calidad parecen casi vacíos sin contenido en su lugar..
Es una buena idea comenzar presentando una muestra del tipo de contenido que espera que aparezca en el sitio, ya sea en el software de diseño o directamente en el código, y luego diseñando a su alrededor. Este es especialmente el caso si se trata de fotos o imágenes de un estilo particular, para que pueda asegurarse de que su diseño fluirá en armonía con ellas. Imagina que el contenido del sitio es un individuo único para el que debes adaptar un traje que se ajuste perfectamente..
Hay un número infinito de combinaciones de colores que puedes elegir para tu fondo principal y base de texto. Sin embargo, mi recomendación es comenzar por dominar la más fácil, y eso es blanco y / o gris claro en el fondo junto con texto gris oscuro..
Si observa cualquier selección de sitios web, plantillas o temas populares, hay una buena apuesta que la mayoría de ellos tendrá la misma base de texto gris oscuro sobre blanco o gris claro, y eso es por una buena razón. Con esta combinación, está virtualmente garantizado para proporcionar legibilidad para los visitantes, y permitir que el contenido basado en texto e imágenes pase a primer plano..
Con algunos ejemplos de contenido en su lugar, realice un diseño básico en escala de grises, por ejemplo:
En general, debes evitar usar el negro azabache para el texto, ya que el gris oscuro es un poco más fácil de leer. Una gama cómoda está en cualquier lugar # 333333 a # 666666.
Para tus colores de fondo, blanco completo. #FFFFFF es la apuesta más segura para fondos inmediatamente detrás de cualquier parte del texto. Para otros elementos de fondo puedes ir desde #FFFFFF hasta alrededor #CCCCCC.
Nuevamente, estas no son reglas para los colores que debe uso, solo las pautas que usted sabe con las que puede comenzar de manera segura.
Los esquemas de color de lugar más comunes que salen mal son cuando se manipulan varios colores diferentes. Cuantos más colores uses, más difícil será mantenerlos a todos bajo control. Para empezar, solo agregue un color adicional sobre su base de escala de grises que se usará con el fin de resaltar elementos como enlaces, algunos titulares, menús, botones, etc. Tu color de luz puede ser azul, verde, rojo o lo que quieras..
Elija su color de resaltado colocando primero un cuadro sobre su base para que pueda medir cómo se ve su color en relación con todos los elementos. Luego, abra su selector de color y haga clic en el centro del cuarto superior derecho del mapa de color.
Mueva la barra deslizante hacia arriba y hacia abajo y elija un color que crea que funcionará bien para su diseño.
En este punto ahora estás trabajando con tres colores básicos; Su fondo, texto y un punto culminante. Puede, y debe, usar más de un color de relieve en el futuro, pero por ahora piense en ello como hacer malabares. Ya estás trabajando con tres pines de malabarismo, así que siéntete cómodo con estos tres y luego agrega más a la rotación cuando estés seguro..
Acabas de aprender a elegir un "matiz". En pocas palabras, un tono es un color base. Cuando mueves la barra deslizante hacia arriba y hacia abajo verás"H"el valor en su selector de color cambia.
"H" significa tono, y una vez que haya elegido su color de resaltado, el número en ese cuadro es su tono.
Si tiene alguna duda sobre qué color de resaltado utilizar, elija azul. Seriamente. El azul es a menudo el color más flexible para trabajar y se ajustará al mayor número de tipos de sitios. Los colores como el púrpura y el amarillo pueden ser muy agradables, pero también pueden volverse llamativos si se usan de manera incorrecta..
Por otro lado, puedes hacer casi cualquier cosa con el azul como color de resaltado y no puedes equivocarte demasiado. Si no está seguro de dónde comenzar a aprender o qué color usar en un proyecto, simplemente vuelva al azul. El azul particular que elijas puede ser desde un azul marino (tono 235) hasta un aqua (tono 190) y estás en un territorio bastante seguro.
Para mi diseño de ejemplo he elegido un tono de 205. Cuando se haya decidido por su color de relieve, continúe y agréguelo a su diseño donde crea que sea necesario. Si está utilizando el color de resaltado en los botones o en cualquier área con texto encima, cambie también el color del texto. En este caso, he cambiado el texto sobre las áreas resaltadas a blanco..
Una vez que haya elegido su color de resaltado, deje la barra deslizante (tono) donde se encuentra a partir de ese punto. Necesitará colores adicionales para su diseño, pero todos serán variaciones de ese color de resaltado que ya ha elegido para mantener las cosas simples..
Para crear variaciones de color, arrastre alrededor del área del mapa del selector de color.
Utilice estos tipos de variaciones de color para cosas como:
La esquina superior derecha del mapa de colores es la tierra de los colores de alto octanaje. Los colores en la esquina superior derecha son como los autos de carreras de Fórmula 1; pueden desempeñarse de manera sorprendente y son muy atractivos, pero generalmente se necesita mucha experiencia para usarlos bien. Sin esa experiencia, pueden causar accidentes, por lo que es mejor cortarte los dientes con colores más atenuados.
Por eso, en la tercera sección de este tutorial, le pedí que haga clic en el mapa de color en el centro de la esquina superior derecha antes de seleccionar su color de resaltado, para asegurarse de que comenzó con un color relativamente tenue..
Para ilustrar, observe lo que sucede si solo cambio el tono de nuestro diseño hasta ahora, sin tocar el mapa de colores.
Todavía se ve muy bien, ¿verdad? Sin embargo, si arrastro el mapa de color hasta la esquina superior derecha, de repente no es tan agradable..
¡¡Ay mis ojos !! Si desea asegurarse de no quemar las retinas de sus visitantes, siga una pauta general de atenuar las cosas manteniéndose fuera de la esquina superior derecha del mapa de color..
En las dos últimas secciones, realmente aprendió a aplicar algunos aspectos diferentes de la teoría del color. Aprendiste a trabajar con:
Cuando arrastre el área del mapa del área del selector de color, verá que los valores de "S" y "B" cambian, lo que significa "Saturación"y"Brillo"respectivamente. También verás que el número de matiz permanece igual. Por lo tanto, estás creando variaciones de color alterando la saturación y el brillo de tu matiz original..
Saturación es cómo vívidamente se expresa su color. Por ejemplo, piense "Mi camisa estaba saturada con vino tinto derramado". En un selector de color típico, la saturación se determina por la cantidad de blanco que se mezcla con el tono base. Cuanto menos blanco, más saturado.
Cuando arrastra hacia la derecha en el mapa de colores, reduce la cantidad de blanco y, por lo tanto, aumenta la saturación para que el valor de "S" suba. Cuando arrastra hacia la izquierda hacia esa esquina blanca, está reduciendo la saturación, por lo que el valor de "S" disminuye..
Saturación en un mapa de selector de color estándarEsta mezcla de blanco con su tono original también se llama crear un "tinte". El término proviene de la mezcla de pintura, donde una pintura blanca se mezcla con una pintura de color.
Brillo es cuanto negro hay mezclado en tu color. Cuanto menos negro, más brillo.
Cuando arrastra hacia arriba en el mapa, reduce la cantidad de negro, aumenta el brillo y aumenta el valor de "B" en el selector de color. Cuando arrastra hacia abajo aumenta el negro y el valor de "B" aumenta..
Mezclar negro con su tono original también se llama crear un "sombra". Esto también viene de la mezcla de pintura, donde una pintura negra se mezcla con una pintura de color.
Cuando mezcla el gris en su color, esto se llama crear un "tono". Cuando te mueves fuera de la esquina superior derecha como lo hicimos anteriormente, estás reduciendo tanto la saturación como el brillo, lo que agrega tanto blanco como negro (gris), creando así un tono. Por lo tanto, en cualquier momento, tanto la saturación como el brillo son menores. 100%, eso es un tono..
Nuevamente, este término proviene de la mezcla de pintura, donde se crea una pintura gris y luego se mezcla con una pintura de color. Aquí es también donde la frase a "atenuar las cosas"viene de. Cool eh?
UNA "monocromo"el esquema de color es donde se toma un tono base y se extiende con tintes, sombras y tonos. Acaba de aprender lo que significan todos estos términos en un entorno práctico. Por lo tanto, al elegir un color de resaltado y crear variaciones en él, creó un esquema de color monocromático..
Siga practicando sus combinaciones de colores monocromáticos en una base de escala de grises hasta que se sienta realmente seguro. Intente crearlos con diferentes tonos como color de resaltado, experimentando para ver cómo cambia la configuración de saturación y brillo que puede usar.
Cuando se sienta cómodo, continúe agregando un color de resaltado adicional. Recomiendo probar naranja y azul en tu primera salida, ya que tienden a ser el dúo más fácil para trabajar. Luego prueba el verde y el azul, que según mi experiencia es el segundo más fácil. Ambos combos suelen ser un éxito entre clientes y clientes..
Lo mejor que puedes hacer para mejorar tu comprensión de los esquemas de color para la web es conseguirte una extensión de navegador de muestreadores de color como Colorzilla y usarla para comenzar a examinar cómo lo hacen los diseñadores experimentados. A medida que navega por Internet, cuando vea una combinación de colores que se ve muy bien, saque la muestra de colores y observe los colores que se usan en la página. Para cada tono que muestree, observe qué niveles de saturación y brillo funcionan mejor con él. También presta atención a qué colores funcionan en combinación con otros.
En caso de duda, siempre puede recurrir a sus pautas de "seguridad primero" y estará a salvo de "BLECH" de aquí en adelante..
Accentsconagua