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, ¡la mezcla de todos los colores existentes podrían dar un resultado aún 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 horroroso.
Años más tarde, como diseñador novato, experimenté de nuevo algo parecido a ese proceso. Como todavía estaba aprendiendo caí en la inevitable trampa de usar demasiados colores, o combinaciones incorrectas, obteniendo al final algo confuso y horrible.
De manera que 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, saturación y brillo, así como sobre esquemas de color análogos, monocromático, tríadas, complementarios y compuestos.
Sin embargo sin un marco práctico en el que aplicar la información, no me acercaba a mi objetivo, crear un diseño web con una adecuada paleta de colores. De hecho, sólo entendí verdaderamente toda la teoría del color que había leído tras empezar a crear esquemas de color y experimentar mediante el método de ensayo-error.
Durante este proceso, fuí recopilando algunas «normas de seguridad» para los esquemas de color de sitios web que me habría encantado conocer desde el principio. Cuando estás empezando, no necesitas conocer necesaria ni exhaustivamente toda la teoría del color.A menudo necesitas ir funcionando con algo un poco menos teórico, y que se parezca más a «pintar con números».
En este tutorial que voy a compartir contigo seis pautas «infalibles» que puedes seguir para comprender los fundamentos básicos que necesitas para empezar a trabajar con colores en el diseño web. No se trata de reglas fijas, ya que posiblemente a lo largo de tu carrera crearás muchos esquemas de color que sigan una dirección completamente distinta. Por el contrario, son un punto de partida, una guía de seguridad para saber cómo sobrevivir durante tus inicios en el mundo del diseño web sin acabar con algo «ruinoso».
1. Los esquemas de color son el lienzo, no la 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, ya que en último término jugará un papel secundario, la verdadera estrella del espectáculo es el contenido. Tu esquema de color nunca debería hacer que el diseño de la web «destaque excesivamente» arrebatando el protagonismo al contenido que nos presenta. Tu diseño debe permanecer en un segundo plano, como fondo, ayudando a empujar el contenido del sitio a un primero plano.
Un proceso muy común en el diseño web es crear el diseño en sí de forma relativamente independiente, a menudo en programas como Photoshop o Sketch. Si durante el desarrollo de estos diseños no cuentas con contenido a modo de ejemplo, es fácil terminar con un diseño que pueda parecer estupendo, y que al cliente le guste la maqueta, pero que llevado a la práctica con el contenido real, perturbe demasiado la atención de los usuarios del sitio sobre el contenido. 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 introducido su contenido.
Es una muy buena idea comenzar ubicando muestras del tipo de contenido que aparecerá en el sitio final, ya sea mediante programas de diseño o directamente en el código, para así poder diseñar posteriormente centrándonos en él. Esto es especialmente útil y cierto si el contenido definitivo va a estar formado principalmente por fotografías o imágenes con un estilo particular, si sigues este consejo te asegurarás de que tu diseño se integrará armónicamente con ellas.Imagina que el contenido del sitio es una persona para la que debes confeccionar un traje a medida que se adapte perfectamente a su cuerpo.
2. Comienza con una sencilla base de escala de grises
El número de combinaciones de colores que puedes elegir para tu fondo y textos principales es infinito. Sin embargo, mi recomendación es que empieces con aquello que puedas dominar fácilmente, y esto se traduce exactamente en el color blanco o un gris claro para el fondo acompañado de texto en gris oscuro.
Si nos fijamos en cualquier selección de reconocidos sitios web, plantillas o temas, la gran porcentaje de ellos tendrán este mismo esquema base, texto gris oscuro sobre un fondo gris claro o blanco, y es así por buenos motivos. Esta combinación te garantiza proporcionar en la práctica una legibilidad idónea a los usuarios y permitirá que el contenido, texto e imágenes, ocupe el primero plano.
Coloca contenido de muestra mientras elaboras el diseño básico en escala de grises, como en el siguiente ejemplo:
En general, evita el uso del negro puro para el texto ya que un gris oscuro es un poco más confortable para la vista al leer. Una gama apta para cualquier situación estaría situada entre #333333 y #666666.
Para los colores de fondo, el blanco puro #FFFFFF es la apuesta más segura cuando el fondo va inmediatamente detrás del texto principal. Para otros elementos del fondo puedes usar cualquier gama, partiendo del blanco #FFFFFF hasta #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 estás empezando con una base segura.
3. Elige un color para destacar ciertas áreas
En lo que se suele fallar habitualmente es al utilizar esquemas de color en los que se disputan el protagonismo varios colores distintos. Cuantos más colores utilices, más complicado será mantenerlos bajo control. Así que para empezar, añade sólo un color adicional a tu escala de base en grises que será usado para destacar elementos como enlaces, algunos titulares, menús, botones, etcétera. Tu color de resaltado podría ser un azul, un verde, rojo o lo que quieras.
Elige el color destacado colocando primero un rectángulo sobre tu color base, de manera que puedas medir cómo se ve en relación con el resto de 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 estás trabajando con tres colores básicos; uno para tu fondo, otro para el texto y un tercero para destacar elementos. Más adelante puedes, y deberías, usar más de un color de resaltado, pero pensar ahora en ello es como hacer malabares. Ya estás trabajando con los tres colores distintos, así que diseña con ellos hasta sentirte cómodo, y después, cuando te sientas seguro añadiremos más a nuestra paleta.
Lo que has aprendido:
Acabas de aprender a elegir un «tono«. En pocas palabras, un tono es el color base, lo que solemos entendemos por color. 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, verás su equivalencia numérica en este campo.
4. En caso de dudas, usa el azul
Si tienes cualquier duda sobre qué color usar para los destacados, selecciona un color azul. En serio. El azul es el color más flexible con para trabajar y es adecuado para casi cualquier tipo de sitio web.Colores como el morado y el amarillo pueden ser muy agradables, pero también podrían resultar siendo demasiado chillones si utilizan de forma incorrecta.
Además, puedes resaltar cualquier cosa en azul sin acabar cometiendo graves errores cromático desde el punto de vista del diseño. Si no estás seguro de por dónde empezar o qué color usar en un proyecto, elige un color azul. El tono de azul concreto que elijas puede ser desde un azul marino (hue 235) hasta un turquesa (hue 190), estarás dentro de una gama bastante segura.
Para diseñar mi ejemplo, he elegido el tono de azul 205. Una vez hayas escogido en el color que usarás para resaltar ciertos elementos, avanza y aplícalo en tu diseño allí donde creas que sea necesario.Si estás utilizando el color de resaltado en botones o cualquier área que tenga texto encima, cambiar el color de dicho texto. En este caso he cambiado color del texto sobre las áreas destacadas en azul a blanco.
5. Añadir variaciones al color de destacado
Una vez que hayas elegido tu color para las áreas destacadas, mantén la barra deslizante de la tonalidad en su punto correspondiente (el mío es el 205).Vas a necesitar colores adicionales para tu diseño, pero todos serán variaciones sobre ese color que habías elegido con el objetivo de mantener la simplicidad.
Para crear las variaciones de color arrastra el puntero circular por el área cuadrada del selector de color.
Utiliza este tipo de variaciones de color para cosas como estas:
Efectos de hover
Bordes de marcos
Resaltar un texto de forma más sutil que con el color de resaltado
Degradados
Efectos de luz y sombra
Lo que te queda por leer:
-
6. Mantente lejos de la esquina superior derecha
-
Saturación y brillo.
-
Saturación y color
-
Brillo y tonalidad
-
Tono
-
Esquemas de Color Monocromáticos
-
-
¿Qué viene después?
Deja una respuesta