Advertisement
  1. Web Design
  2. Color Theory
Webdesign

Principiantes 6 "seguridad primero" guías de Color para la Web

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web Design Theory.
Unity in Web Design

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Recuerdo aún vívidamente una de mis primeras clases de arte cuando, como un chiquillo impaciente, me presenté con una gama de pinturas de colores brillantes. Recuerdo el placer de ver como los colores primarios se mezclaban para transformarse en secundarios por primera vez, y razonaba que si dos colores podían crear un nuevo y hermoso color, ¡el conjunto de todos los colores existentes podrían hacer algo aun mejor! Fue totalmente decepcionante darme cuenta que no importaba cómo lo hiciese, si usaba todos los colores que tenía a mi disposición inevitablemente terminaba con un color caqui que sólo se podría denominar como "BLECH".

Años más tarde, como un diseñador novato, experimenté algo parecido a ese mismo proceso de nuevo. Como todavía estaba aprendiendo caí en la inevitable trampa de usar demasiados colores, o combinaciones incorrectas, obteniendo al final algo un poco "BLECH".

Me decidí a aprender a crear esquemas de color para la web, y encontré gran cantidad de información fascinante sobre la teoría del color. He leído sobre tonos, matices, tonos, tonos, saturación y brillo, así como sobre esquemas de color análogos, monocromático, tríada, complementarios y compuesto.

La paleta de color básica RGB

Sin embargo sin un marco práctico para que la información en la ranura, me encontré con que al principio no hacerme todo eso mucho más cerca de crear bien color diseño web. De hecho fue sólo después de que empecé a crear esquemas de color sólido a través de puro ensayo y error que toda la teoría del color que había leído comenzó a tener sentido.

En el proceso, recogí algunas "normas de seguridad" para los esquemas de color de páginas web que hubiese deseado conocer desde el principio. Cuando estás empezando, una teoría del color completa no está necesariamente una de tus prioridades. A menudo necesitas ir funcionando con algo un poco menos teórico sino con algo más parecido "pintar con números".

En este tutorial que voy a compartir contigo seis seguro que surgen, pautas "no puede salir mal" que puedes seguir para obtener una comprensión básica sobre la manera de trabajar con colores en el diseño web. No se trata de normas, ya que crearás muchos esquemas de color en tu carrera que irán en una dirección completamente diferente. Por el contrario, son un punto de partida, una guía de seguridad para saber cómo sobrevivir a sus primeras salidas en el mundo del diseño web sin correr siempre en "BLECH".

1. Los Esquemas de Color son el Lienzo, No Pintura

Uno de los principios más fundamentales en el diseño web es que no importa cuánto tiempo te pasas creando un diseño glorioso, su papel último en la función es tocar el violín secundario para la verdadera estrella del espectáculo; el contenido. Tu esquema de colore no debería hacer nunca el diseño de la web "más estridente" que el contenido que presenta. Tu diseño debe permanecer en un segundo plano, como fondo, ayudando a empujar el contenido del sitio a un primero plano.

Un esquema de colores sutil permite que el punto de atención sean las imágenes
Los esquemas de color fuertes distraen la atención de las imágenes. No te rías, esto sucede realmente ahí afuera en la salvaje web.

Un proceso muy común en el diseño web es crear el diseño en sí mismo de forma relativamente aislada, a menudo en programas como Photoshop o Sketch. Si no tienes ubicado ningún contenido a modo de ejemplo en el sitio es fácil terminar con un diseño que puede parecer estupendo por sí mismo, y a partir del cual el cliente quiera posiblemente crear la maqueta, pero que sea, en la práctica, demasiado distractor para los usuarios del sitio. De hecho, el proceso del diseño web está tan fuertemente vinculado con el contenido que muchos diseños web de alta calidad parecen casi vacíos cuando aún no se ha colocado su contenido.

Es una muy buena idea comenzar trazando una muestra del tipo de contenido que aparecerá finalmente en el sitio, ya sea a través de software de diseño o directamente en el código, y luego diseñar centrándonos en él. Esto es especialmente útil y cierto si el contenido lo forman principalmente fotos o imágenes de un estilo particular, de forma que te puedas asegurar de que tu diseño fluirá armónicamente con ellos. Imagina que el contenido del sitio es un individuo único para quien debes confeccionar un traje que se adapte perfectamente.

2. Comienza Con una Sencilla Base con una Escala de Gris

Hay un número infinito de combinaciones de colores que puedes elegir para tu fondo y textos principales. Sin embargo, mi recomendación es empezar por aquello más fácil de dominar, y en eso consiste exactamente el color blanco o gris claro de fondo con un texto gris oscuro.

Si nos fijamos en cualquier selección de webs, plantillas o sitios web populares, un gran porcentaje de ellos tendrán esta misma base exacta de texto gris oscuro sobre un fondo gris claro o blanco, y esto tiene una buena razón. Esta combinación garantiza prácticamente proporcionar una adecuada legibilidad a los visitantes y permite que el contenido basado en texto e imagen ocupen un primero plano.

Colocas contenido de muestra mientras elaboras un diseño básico en escala de grises, como en el siguiente ejemplo:

En general debes evitar el uso del negro puro para el texto ya que un gris oscuro es un poco más cómodo para leer. Una gama cómoda para cualquier situación estaría situada entre #333333 y #666666.

Para los colores de fondo, el blanco absoluto #FFFFFF es la apuesta más segura para los fondos inmediatamente detrás de cualquier texto que forme parte del cuerpo principal. Para otros elementos del fondo puedes usar cualquier variedad partiendo del blanco #FFFFFF hacia abajo, alrededor de #CCCCCC.

Una vez más, no se trata de normas estrictas sobre los colores que debes usar, son simplemente directrices con las que sabrás que puedes empezar de forma segura.

3. Elige un Color para los Destacados

En lo que se suelen cometer habitualmente fallos es cuando se utilizan esquemas de color en las que varios colores distintos se disputan el protagonismo. Cuantos más colores utilices, más complicado será mantenerlos bajo control. Así que para empezar, añade sólo un color extra sobre la base de tu escala de grises que será usado para destacar elementos como enlaces, algunos encabezados, menús, botones, etcétera. Tu color de resaltado podría ser un azul, un verde, rojo o lo que quieras.

Elegir el color de resaltado colocando primero un caja sobre tu color base, de manera que puedas medir cómo se ve en relación con el resto de los elementos. Después abre el selector de color y haz clic en el centro del cuarto superior derecho del mapa de color.

Mueve la barra deslizante hacia arriba y hacia abajo y escoge un color que creas que funciona bien en tu diseño.

En este momento estarás trabajando con tres colores básicos; uno para tu fondo, otro para el texto y un tercero para destacar elementos. Puede y debe, usar más de un color de resaltado en el futuro, pero por ahora pensar en ello como malabares. Ya está trabajando con los tres pernos de malabares, así que con estos tres y añadimos más a la rotación cuando estés seguro.

Lo Que Has Aprendido:

Acabas de aprender a elegir una "tonalidad". En pocas palabras, un tono es el color base. Cuando muevas el selector de la barra deslizante hacia arriba y hacia abajo, verás cambiar el valor "H" en tu selector de color.

La «H» proviene de "hue", tono en inglés, y una vez que hayas elegido tu color para las zonas a destacar, el número mostrado este campo será su tonalidad.

4. Si dudas, usa el azul

Si usted tiene cualquier duda sobre que resalte el color que desea utilizar, seleccione azul. En serio. Azul es el color más flexible para trabajar con y quepan el mayor número de tipos de sitio. Colores como el morado y amarillo pueden ser muy agradables, pero pueden también convertirse chillones si utiliza de forma incorrecta.

Por otra parte usted puede hacer cualquier cosa con el azul como un color de resaltado y te puedes equivocar demasiado lejos. If you’re not sure where to begin learning or what color to use in a project, just fall back on blue. El azul particular que elija puede ser en cualquier lugar de un azul marino (tonalidad 235) a través de un aqua (tonalidad 190) y estás en territorio bastante seguro.

Para mi diseño del ejemplo que he elegido un tono de 205. Cuando usted se asentaron en el color de resaltado seguir adelante y añadir a su diseño donde crees que se requiere. Si está utilizando el color de resaltado en botones o cualquier zona con texto en la parte superior, cambiar el color del texto. En este caso he cambiado texto sobre áreas resaltadas en blanco.

5. Añadir Variaciones Al Color para los Destacados

Una vez que hayas elegido tu licencia de color de resalte la barra deslizante (tonalidad) que es desde ese punto de. Vas a necesitar colores adicionales para su diseño, pero todos van a ser las variaciones de ese color de uno que ya haya elegido con el fin de mantener las cosas simples.

Para crear el color variaciones arrastre alrededor en el área del mapa del selector de color.

Utiliza este tipo de variaciones de color para cosas como estas:

Efectos de Hover

Bordes de Marcos

Obtener un Texto Más Sutil al del Color de Resaltado

Gradientes

Efectos de Luz y Sombra

6. Mantenerse Lejos de las Equina Superior Derecha

La esquina superior derecha del selector de color es el área con colores de alto octanaje. Los colores en la parte superior derecha son como los coches de fórmula 1; puede funcionar fantásticamente y son muy atractivos, pero generalmente se necesita mucha experiencia para usarlos bien. Sin esa experiencia pueden causar accidentes, por lo que es mejor cortar los dientes en los colores que más atenuados.

Es por eso en la tercera sección de este tutorial que le hacer clic en el mapa de color en el centro de la parte superior derecha antes de seleccionar el color del punto culminante, para asegurarse de que usted comenzó con un color relativamente tenue.

Para ilustrar, qué pasa si acabo de ver cambiar el matiz de diseño hasta el momento, sin tocar el mapa de color.

¿Todavía se ve bonito, correcto? Sin embargo si arrastra el mapa de color hasta esquina superior derecha, de repente no es tan agradable.

¡Uf, mis ojos!! Si usted quiere asegurarse de que no quemar las retinas de los visitantes, seguir una pauta general de tonificación las cosas permaneciendo fuera de la esquina superior derecha del mapa de color.

Acabas de Aprender:

En las dos últimas secciones has aprendido a aplicar algunos aspectos diferentes de la teoría del color. Has aprendido a trabajar con:

Saturación y Brillo.

Cuando te deslizas sobre áreas del selector de color verás como cambian los valores de "S" y de "B", que hacen referencia respectivamente a la "Saturación" y al "Brillo" . También verás que el número de hue permanece igual. De esta forma estás creando variaciones de color mediante la alteración de la saturación y el brillo de su tono original.

Saturación y Color

La saturación hace referencia a cuán vívidamente se expresa el color, su pureza. Por ejemplo, piensa en "Mi camisa estaba saturada con manchas vino tinto derramado". En un selector de saturación de color típico viene determinado por la cantidad o porcentaje de blanco que se mezcla con tu tono base. A menos cantidad de blanco, más saturación.

Conforme te muevas hacia la derecha en el mapa de color reducirás la cantidad de blanco y por lo tanto aumentarás la saturación, subiendo por tanto el valor de "S". Conforme arrastres hacia la izquierda, hacia la esquina en blanco, reducirás la saturación, por lo que el valor de "S" irá disminuyendo.

La saturación en selector mapa de color estándar

A la acción de mezclar blanco con tu color original también se le denomina crear un "matiz". El término proviene de la mezcla de pinturas, en donde se mezcla una pintura blanca con una pintura de color.

Brillo y Tonalidad

El brillo se refiere al porcentaje de negro que mezclas en tu color. Cuanto menos negro, más brillante será el color.

Al arrastrar hacia arriba en el mapa reduces la cantidad de negro, aumentando el brillo y el valor "B" en del selector de color. Cuando arrastres hacia abajo aumentarás el porcentaje de negro y el valor de "B" subirá.

Mezclar negro con tu color original también se denomina crear una "tonalidad". Esto también viene de mezcla, donde se mezcla una pintura negra con pintura de colores de pintura.

Tono

Cuando usted mezcla gris en su color esto se llama crear un "tono". Cuando se mueve fuera de la esquina superior derecha como lo hicimos anteriormente está bajando su saturación y el brillo que aporta blanco y negro (gris), por lo tanto creando un tono. Así que básicamente cualquier momento su saturación y el brillo son menos de 100%, que es un tono.

Otra vez, este término viene de mezcla, donde una pintura gris se crea y luego se mezcla con pintura de colores de pintura. De aquí viene la frase "baja el tono". Curioso ¿no?

Esquemas de Color Monocromáticos

Un esquema de colores "monocromáticos" es cuando escoges un tono base y extiendes los tintes, el matiz y tonos. Acabas de aprender qué significan todos estos términos significan de forma práctica. Así que escogiendo un color de resaltado y crear variaciones en él, que realmente creó un esquema de color monocromático.

¿Qué Viene Después?

Seguir practicando tus esquemas de color monocromática sobre una base de escala de grises hasta que se sienta realmente seguro. Trate de crearlos con diferentes tonalidades como el color del punto culminante, experimentando para ver cómo cambia la saturación y ajustes de brillo que son capaces de utilizar.

Cuando se sienta cómodo, pasar a añadir un color de resaltado extra. Te recomiendo tratar de color naranja y azul en su primera salida ya que tienden a ser el dúo más fácil trabajar con. Entonces trate de verde y azul, que en mi experiencia es el segundo más fácil. Ambos de estos combos tienden a ser un éxito con los clientes y los clientes.

Absoluto lo mejor que puede hacer para impulsar la comprensión de esquemas de color para la web es que tome usted una extensión de navegador color sampler como Colorzilla y usarlo para empezar a examinar cómo los diseñadores hacen. Como estas viendo en el internet, cuando veas un esquema de color que parece salir de la muestra de color y echa un vistazo a los colores utilizados en la página. Para cada tono que muestra, echar un vistazo de lo que los niveles de saturación y brillo funcionan mejor con él. También preste atención a que colores trabajan en combinación con otros.

Si tienes dudas, siempre podrías recurrir a tus directrices "la seguridad primero" y te asegurarás de la "BLECH" desde aquí en.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.