Cómo obtener un aspecto profesional con color
¿Qué hace que un diseño se vea coordinado, planificado y profesional? La respuesta es: 'color' .
No todos los proyectos necesitan un azul corporativo suave para parecer profesionales. El color de planificación significa crear un marco que describa qué colores usar y cómo usarlos.
El color es el elemento de diseño más resbaladizo. El color "bueno" está tan estrechamente ligado a cosas esquivas como el gusto personal y la intuición, así como consideraciones técnicas como el contraste y la calibración del monitor.
Pero el color es vital para el contenido . Si considera que un sitio web es lo suficientemente importante como para dedicar tiempo a la depuración, es probable que los lectores lo consideren lo suficientemente importante como para pasar el tiempo leyendo. Las buenas elecciones de color hacen que eso suceda.
En este artículo, repasaremos algunas técnicas para lograr hermosos colores palletes para sus diseños web.
La mejor manera de hacer que un sitio web parezca no planeado es elegir sus colores al azar.
Incluso cuando los visitantes visitan la página de inicio de un sitio web por primera vez, los colores influyen en su actitud hacia el contenido . ¿Este sitio web es emocionante? ¿Tranquilizador? ¿Atrevido? ¿Amable? ¿Político? ¿Formal?
El color afecta la forma en que las personas interpretan lo que ven tanto como la tipografía.
Encontrar los colores correctos no es fácil, pero el proceso puede ser sistemático.
Una buena estrategia de diseño implica un esquema de color (es decir, una gama de colores seleccionados para comunicar un estado de ánimo o mensaje) y una disposición de ese esquema.
Digamos que le han pedido que diseñe un sitio web profesional. (Y esto podría convertirse en un juego de beber: haga una toma cada vez que el cliente use la palabra "profesional", "limpio" o "moderno". Dos disparos para "Me gusta este otro sitio web. Cópienlo").
El esquema de color dependerá de la naturaleza particular del sitio web. Por ejemplo, tanto los bancos como los floristas pueden tener sitios web de aspecto profesional.
Pero las personas pueden estar menos inclinadas a comprar flores en un sitio web corporativo azul y gris océano. E imagina el sitio web de Bank of America en lila y amarillo-verde.
Un diseño "profesional" les dice a los visitantes que han encontrado un sitio web que toma su tema en serio, incluso si ese tema es alegre. Cualesquiera que sean los matices y los valores, "profesional" significa coordinado, planificado y pensado .
Ir en escala de grises
La mejor manera de trabajar con el color es comenzar con ninguno.
Eliminar el color de un diseño revela problemas fundamentales que deben abordarse antes de preocuparse por qué tono de chartreuse funciona mejor. Si el diseño no se siente bien en blanco y negro, entonces es hora de hacer cambios.
¿Tiene cada página un propósito claro? ¿El diseño guía a los lectores a través del contenido? ¿El contenido es convincente, inspirador o informativo? ¿Están claros los encabezados? ¿Los enlaces contrastan con el otro texto? El color mejora estos efectos, pero los problemas de diseño, tipo y organización no se pueden resolver solo con el color .
Para hacer un rediseño, primero chupa el color. El simple acto de eliminar primarios saturados muestra realmente dónde se encuentra un sitio web. (En realidad, realmente debería comenzar un rediseño mediante la reevaluación de sus objetivos y contenido, pero esa es otra historia).
A veces, eliminar el color es una solución en sí misma .
Una vez trabajé con una empresa de diseño web para rediseñar su propio sitio web. Los propietarios fueron personales sobre el proyecto y quisieron hacerlo bien. Pero si cree que diseñar es difícil, intente hacerlo por comité. Al final, los tres nos quedamos mirando una captura de pantalla del noveno borrador después de horas con unos tragos.
Abruptamente, aplané las capas de Photoshop y presioné "Desaturar", convirtiendo el vibrante diseño de cobre y azul marino en tonos de gris. Para sorpresa de todos, funcionó.
Al final de la semana, teníamos un diseño gris "cálido" con detalles en rojo. Sabíamos que teníamos un ganador cuando los clientes anteriores los felicitaban por la nueva apariencia y recibían más llamadas de posibles clientes.
Analice su combinación de colores con la prueba de "estrabismo" de Photoshop :
- Tome capturas de pantalla de al menos tres páginas de su sitio web. Ábrelos en Photoshop.
- Duplique la capa de fondo en cada captura de pantalla ( Capa → Capa duplicada , o Comando + J en una Mac, o Control + J en Windows).
- Aplica un desenfoque gaussiano de unos 10 píxeles a las nuevas capas.
- Vaya a Imagen → Ajustes → Posterizar . Use 8 a 12 niveles o vaya a Filtro → Pixellate → Mosaico . Use de 15 a 30 píxeles.
Esto muestra qué colores son realmente dominantes. Cuanto más dominantes sean los colores, más fuertemente se imprimirá el esquema en la mente del visitante.
Una vez que el diseño y la organización del sitio web funcionen sin color, es hora de elegir una paleta. ¿Pero cual? ¿Y cuánto usar?
Alinee sus tonalidades
El color tiene tres propiedades: tono, saturación y valor (a veces llamado luminosidad).
La saturación es lo rica que es una tonalidad: los colores de neón están muy saturados, mientras que los pasteles están menos saturados.
El valor indica qué tan brillante (es decir, qué tan cerca de blanco o negro) es un color.
El matiz se refiere a la parte del arcoiris a la que pertenece un color, como rojo o verde; es propiedad de la gente.
Nada mata a un esquema de color como tonos discordantes. Un diseño puede tener cientos de tonos de un tono, desde el pastel hasta el neón, y aún se ve planificado. Pero si los matices se mezclan de forma incorrecta, el esquema se desmorona.
Una forma de evitar los choques es separarlos con un tercer color. Un búfer de negro, gris o blanco es más seguro, porque la escala de grises es de color neutro: puede coordinar cualquier parte del arco iris con negro, blanco y gris.
Una segunda solución es usar los tonos en diferentes proporciones . Si un esquema de color tiene, por ejemplo, violeta y marrón, entonces el diseño puede tener muchos tonos de marrón con algunos reflejos violetas brillantes.
Otra opción es variar los valores. El azul puro y el cian brillante crean una combinación regular, pero el azul oscuro (azul marino) y el cian claro (azul celeste) contrastan lo suficiente para apagarse entre sí. Rojo y violeta pueden ser lo suficientemente diferentes como para no chocar, pero lo suficientemente cerca como para no parecer intencional. Rojo claro (rosa) y una violeta oscura traen distinción.
Desafortunadamente, evitar una mala combinación de colores no es lo mismo que elegir uno bueno. Un esquema de color es exitoso no cuando está satisfecho, sino cuando su público se siente cómodo.
Descubra grandes esquemas
¿De dónde vienen los grandes esquemas de color? Con cientos de colores y miles de combinaciones, ¿cómo decides?
Los diseñadores de pequeños sitios web estáticos deberían dibujar el color del contenido . Eso usualmente significa fotos.
El diseño de un sitio web de ocho páginas que construí recientemente estaba cubierto con un elaborado andamio de metal contra un cielo índigo. Al poner la herramienta Cuentagotas de Photoshop en un promedio de 5x5, muestreé las partes más oscuras y claras del cielo y le di a la barra lateral, enlaces, encabezados y pie de página esos pocos tonos.
Cuando el cliente preguntó cómo pudimos diseñar un sitio web tan bien y con tanta rapidez, nuestra respuesta fue: "Esto es lo que hacemos". Pero el color ya estaba allí. Solo tenía que buscarlo.
Mientras que las fotos de archivo funcionan para sitios web rápidos, los diseñadores de sitios web más grandes y dinámicos deben buscar la inspiración de sus audiencias .
Un excelente indicador de qué colores son atractivos para su audiencia es su ropa diaria. Averigüe qué visten sus visitantes, y sabrá qué colores los hacen sentir cómodos. Si su sitio web se trata, por ejemplo, de deportes de liga, descubra qué usan las personas para los juegos, en lugar de sus trabajos diarios.
Si tienes la suerte de obtener fotos de tu público objetivo, puedes verlas en masa; quieres un promedio de la multitud. Pero si las fotos no están disponibles, vaya de compras.
Los diseñadores de ropa que pueden mantenerse en el negocio tienen un excelente sentido del color para cada estado de ánimo y estilo de vida. No tiene que ser la alta costura de la 5ta avenida. Una búsqueda en Google de "tiendas de camping", "ropa de bebé", "esquí y trajes de baño" y "vida informal" revelará muchas buenas combinaciones de colores.
La gente usa ropa de acuerdo a sus gustos. Si usa los colores que les gustan, se sentirán más cómodos en su sitio web.
Usa texturas
Pequeñas variaciones en matiz, saturación o valor crean texturas .
Las texturas monocromáticas (es decir, las texturas con un solo matiz) y los patrones proporcionan una dimensión sutil a la mayoría de los sitios web sin chocar.
Los fondos de textura simple, en particular, son fáciles de construir:
- Tome una foto de una pared interior, o algo que esté desnudo pero se sienta áspero.
- Ábrelo en Photoshop.
- Duplica la capa de fondo y llámala "textura 1".
- Llene la capa de fondo con los colores de su combinación de colores.
- Establezca el modo de fusión de la capa de "textura 1" en "Luz suave" y su opacidad en 30%.
- Pruébalo en tu sitio web. Si no se ve bien, juega con la opacidad de la capa.
El nombre de la capa es deliberado. Puede jugar con más de una fotografía, pero evite darle a las capas nombres como "textura de pared" o "textura de papel". Desea centrarse en el efecto en su sitio web, no en su origen.
Creando un buen esquema
Un buen esquema de color tiene ciertas características. Piense en ello como un marco o conjunto de pautas para mantener un diseño consistente. El esquema debería:
- Haga una lista de dos a cinco tonalidades que funcionen bien juntas,
- Describe qué tan lejos puede variar un diseño de esos tonos
- Cuenta para los tonos de cada matiz
- Trabaja bien contra blanco y negro.
Aquí hay un ejemplo:
El diseñador comenzó eligiendo tonos cálidos que le parecían correctos. No había lógica, solo el objetivo vago del "otoño" y su intuición.
En Photoshop, dos capas proporcionan sombras de blanco y negro. El modo de fusión de cada capa se configuró en "Luz suave". El negro puro era demasiado oscuro para el color más a la derecha, por lo que se ajustó la opacidad de la capa negra.
Para unificar los colores, se creó una nueva capa y se rellenó con rojo puro. Su modo de mezcla se estableció en "Color" y su opacidad se redujo a aproximadamente 40%. (Nota: el orden de las capas es muy importante. Los colores cambiarán si la capa "tinte" se establece debajo de las capas en blanco y negro.)
Esto le dio al diseñador 15 colores para elegir. Ella escogió cuatro que tenían una gama de tonos y matices. Aquí, los colores se establecen contra blanco.
Las variaciones son importantes, por lo que el diseñador experimentó. ¿Cómo se verían los colores contra el negro? ¿Qué pasa si los sombreamos un poco?
¿Qué pasa si los cambiamos por completo? El uso de Imagen → Ajustes → Tono / Saturación en la capa "tinte" crea una sensación claramente no otoñal, pero los colores aún están coordinados. Tal vez esa paleta se pueda usar para la Pascua.
El resultado final es un esquema de color: una referencia que proporciona diferentes (pero no muy diferentes) tonalidades y una gama de tonos que funcionan bien juntos. Descargue el archivo de muestra.
Usa el Marco
¿Los gráficos, las fotos y los iconos de mañana funcionarán con el esquema de colores actual? ¿Qué imágenes necesitará un sitio web en seis días, seis semanas o seis meses? Es difícil de decir, pero el contenido es parte de tu esquema de color .
Puede resolver este problema haciendo que sus imágenes sigan el esquema de color o haciendo que el esquema de colores siga sus imágenes.
Hacer cumplir su esquema de color, incluso con fotos, es una gran manera de lograr un aspecto unificado en todas las páginas .
La solución más fácil es encontrar imágenes que se ajusten a su esquema. Recuerde que un esquema de color permite un margen de maniobra: siempre que los tonos principales de una imagen quepan, la imagen debería funcionar. Muchos sitios web de fotos de stock te permiten buscar por color (es decir, matiz: generalmente primarios como rojo, verde y azul).
Si una imagen no se ajusta a tu esquema de color, dale un tinte:
- Abra la imagen en Photoshop.
- Crea una nueva capa. Establezca su modo de fusión en "Color".
- Llene esa capa con uno de los colores de su paleta, preferiblemente el que más se asemeje a la imagen.
- Establezca la opacidad de la capa de color al 50%.
- Juega con la opacidad hasta que obtengas un buen equilibrio entre el color original de la imagen y la paleta de colores de tu sitio web.
- Esta técnica funciona para fotos, ilustraciones e íconos, cualquier cosa basada en píxeles. (Si no posee la imagen, asegúrese de obtener el permiso antes de modificarla. Puede mejorar su apariencia en su sitio web, pero todavía se está tomando libertades con el arte de otra persona).
Buscando profesional
Ningún conjunto de colores parece "profesional" en sí mismo. Por el contrario, debe seguir un proceso para alcanzar una sensación coordinada y planificada.
No importa de qué se trata el sitio web, la audiencia sabrá que se toma en serio.
Consejos
- Cuando creas que tienes un buen esquema de color, pruébalo por al menos una semana. Evaluar el color requiere una intuición que se desarrolla con el tiempo. Date tiempo para absorber completamente la personalidad del esquema.
- Cuando creas que tienes un buen esquema de color, no lo dejes ir añejo. Los gustos de tus visitantes, como el tuyo, cambian con el tiempo. Haga una nota para revisar los colores después de cuatro meses. Luego pregunte, ¿siguen siendo apropiados? Si no, ¿qué ha cambiado? ¿Qué factores influirán en su ajuste?
- Use colores brillantes con moderación. Un toque de algo iridiscente atraerá visitantes, pero si lo ven en todas partes, vagarán sin rumbo fijo.
- Algunas personas piensan que los esquemas de color tienen un rango estrecho. Permita un margen de maniobra para dar profundidad adicional a sus diseños.
- Evite primarios puros como rojo, verde, azul y amarillo. Dale un toque de carácter real: rojo, pero ligeramente violeta, azul con un toque de verde, amarillo "cálido" con un tono naranja.
- Asegúrate de que tus colores funcionen cuando estén apagados. Si elige rojo, tenga en cuenta que el rojo claro puede ser femenino y el rojo oscuro puede parecer óxido o sangre. El amarillo corre desde la luz del sol desteñida hasta el marrón oscuro. El azul oscuro es misterioso, y el azul claro es tranquilo, o eléctrico si lo sobresatura.
- Usuarios de Mac, configura tu pantalla. Vaya a "Preferencias del sistema" y haga clic en "Acceso universal". Establezca su pantalla en "Usar escala de grises". Esto también es útil cuando le apetece el cine negro.
- No importa cuán activo quiera que se sienta su sitio web, use un fondo neutral. Negro, blanco y gris funcionan bien con casi todos los tonos.
- Si desea que el texto pequeño (por ejemplo, 14 puntos o menos) coincida con un campo de color grande, haga que el texto sea un poco más oscuro de lo normal. Esto compensará los contadores de luz dentro de los personajes.
- Use más tonos de menos tonos.
- Lo que "se ve bien" es intuitivo. Pero la intuición es una batalla entre tu ego, la delicia de tu público y la autoridad de las personas que financian el proyecto.
- Use fondos silenciados para resaltar el contenido:
Escrito exclusivamente para WDD por Ben Gremillion . Es un diseñador web independiente que ha aprendido que la inflexibilidad de un plazo es inversamente proporcional a la cantidad de características solicitadas en el último minuto.
¿Cómo se crean esquemas de colores exitosos? ¿Qué funciona y qué no funciona para ti?