5 maneras de aumentar el contraste en su diseño web

¿Su proyecto de diseño carece de ese pop especial? Es probable que lo que te falta sea suficiente contraste. El contraste proporciona la diferenciación entre los elementos, haciendo que cada uno se vea más individual, prominente y especial.

El contraste de diseño se crea de varias maneras, y se utilizan todos los diferentes tipos de elementos. Desde la tipografía hasta el color y el espacio, la creación de contraste puede llevar un diseño de bleh a wow. Aquí hay cinco maneras de hacerlo.

1. Hazlo más grande (o más pequeño)

La simetría y el orden pueden ser una especie de trampa cuando se trata de crear un punto focal en el diseño. Demasiados elementos con igual peso terminarán luciendo igual.

La solución fácil es hacer un elemento significativamente más grande o más pequeño.

El elemento diferente se convierte en el punto inmediato del potro. El usuario será atraído a esa área del lienzo porque es diferente.

Hacer un elemento, una foto o un bloque de texto más grande o más pequeño es más que un tamaño físico; es el peso visual también. La forma más fácil de entender esto es con la tipografía. Mira las imágenes de arriba. Ambas palabras son del mismo tamaño? Pero note cuánto más peso tiene una de las versiones. Este contraste se debe a los trazos gruesos y finos en las formas de letras.

También puede aplicar este mismo concepto a casi cualquier otro elemento de diseño.

Mira el sitio web de Little Flyers, arriba. Preste especial atención a la navegación basada en texto en la parte superior de la página y los botones en la parte inferior de la pantalla. ¿Qué texto te llama la atención más rápido? ¿Por qué? Todo el tipo es del mismo tamaño, pero el tratamiento con una caja dentro de una foto colorida lo hace parecer más grande.

2. Agrega un poco de textura

Con estilos planos y mínimos como el motor dominante en las tendencias de diseño en este momento, la textura es menos común de lo que era antes. Pero todavía lo ves en muchos lugares, tal vez sin siquiera pensarlo.

Cambiar de un elemento plano a cualquier cosa con una textura, patrón o estilo tridimensional ayudará a crear un área de enfoque. Y mientras que agregar textura a un fondo podría ser la solución inmediata, también se puede usar de otras maneras.

Considere un elemento de texto con una sensación de textura. (Esto es bastante popular entre muchos estilos de tipografía vintage). Los tipos principales de textura son ásperos y suaves. Pueden trabajar juntos o de forma aislada para ayudar a crear un enfoque visual. Cuando trabaje con diseño impreso, puede agregar textura físicamente según el tipo de papel utilizado, las opciones de impresión tipográfica y otros métodos de publicación.

3. Cambia la forma

Mira la imagen de arriba. ¿Qué es lo primero que ves? Para mí es el objeto circular con el signo de interrogación dentro.

¿Sabes por qué? En una imagen llena de rectángulos, es el único círculo. La diferencia del objeto es lo que lo hace destacar. El hecho de que el personaje esté al revés es también un factor de atención. Cambiar la forma u orientación de un elemento puede agregar un impacto inmediato.

Pruébalo la próxima vez que tu diseño se sienta un poco plano. Redondea los bordes de los botones. Ponga una foto en un marco circular en lugar de rectangular. Opta por una foto vertical. Use una ubicación que sea un poco fuera de lugar.

Cualquiera de estas técnicas puede hacerte sentir un poco incómodo al principio. Pero sigue experimentando y jugando con opciones hasta que transformes ese mismo rectángulo antiguo en algo un poco más interesante.

4. Agregue color (o quítelo)

La teoría del color es uno de los conceptos más importantes a su disposición. Al cambiar los tonos, o al agregar o eliminar colores, puede cambiar el estado de ánimo general de un diseño. El color puede hacer que las cosas parezcan grandes o pequeñas, atrevidas o tenues. El truco para algunas de las paletas de colores más brillantes es a través del uso del contraste.

La forma más simple de contraste comienza con la rueda de color. El emparejamiento de colores a lo largo de la rueda da como resultado varias combinaciones de contraste:

  • Complementario: Pares de alta intensidad desde lados opuestos de la rueda.
  • Triádico: Colores espaciados en incrementos de un tercio a lo largo de la rueda.
  • División complementaria: Un color y los dos colores junto al tono complementario.

Existen otras opciones de contraste de color que pueden funcionar particularmente bien si ya tiene una paleta de colores y no le importa hacer ajustes sutiles.

  • Mezclar colores cálidos, fríos y neutros.
  • Cambie su color base agregando tonos y tonos para que la saturación sea diferente de un color a otro.
  • Entrelazar colores claros y oscuros; Piénsalo como yin y yang.
  • Añadir elementos sin color. Los acentos negros o blancos pueden agregar énfasis en espacios con mucho color; Y el color puede agregar contraste al blanco y negro.

5. Hacer algo inesperado

Una forma o detalle inesperado también puede agregar la cantidad justa de contraste. Una sorpresa en el diseño es cualquier cosa que no coincida con todo lo demás, pero aún así funciona en armonía con él.

Estos elementos incluyen:

  • Un elemento de asimetría en un diseño simétrico.
  • Una señal visual que lo guía a través del diseño, como una forma intensa o un patrón de seguimiento ocular, como el que se usa en el sitio para Vibrant, arriba.
  • Un cambio en un patrón o elemento repetitivo.
  • Cambiar la orientación o alineación de un elemento o texto, como en el Anima (con la letra? I?), Arriba.
  • Cambiar la posición o el tamaño de un elemento en una fila de imágenes.
  • Diferentes estilos de imágenes, como el cambio de fotos a una ilustración o un toque de animación.
  • Mezclando visuales complejos y sencillos o estilos tipográficos.

Conclusión

Lo bueno de cambiar el contraste entre los elementos es que puede proporcionar un impacto inmediato en un proyecto de diseño. Al modificar el aspecto de los elementos, puede cambiar el enfoque visual y ayudar a los usuarios a perfeccionar la parte del diseño que es más importante para el mensaje.

La falta de contraste es un problema común y, a menudo, fácil de remediar.¿Cuántas veces cuando escuchas el temido, hazlo estallar? de un cliente o compañero de trabajo, lo que realmente están tratando de decir es que les gustaría ver más contraste en los elementos de diseño. Ahora estás armado con las herramientas para enfrentar ese desafío.