Entender completamente el contraste en el diseño
Por lo general, el tema del contraste está reservado para principiantes. Los libros dirán "blanco y negro tienen contraste, rojo y naranja no" , pero hay mucho más.
Los libros para principiantes generalmente solo tocan el contraste de colores, pero ¿qué pasa con el contraste de tamaño y forma? A menudo, la manera más fácil de distinguir a un diseñador aficionado de uno profesional es observar su uso del contraste.
Crear una estructura de importancia usando tamaño, forma y color es lo que le da un impacto y legibilidad a la página al lector.
En esta publicación, vamos a ver el contraste en detalle, examinando la gran tipografía, las formas originales, las divisiones claras, las imágenes y cómo encajan correctamente utilizando el contraste para una buena experiencia de usuario.
Una introducción al contraste
El contraste puede ser definido como "la diferencia en las propiedades visuales que hace que un objeto (o su representación en una imagen) se distinga de otros objetos y el fondo." En inglés simple que podría describirse en su nivel más básico como "cosas que se ven diferentes entre sí". "
Para los diseñadores en todos los ámbitos de la práctica, pero especialmente para los diseñadores web, el contraste está en la raíz de casi todo. Constantemente intentamos establecer jerarquías de importancia, atraer personas a ciertas áreas de una página y comunicar un mensaje claro y conciso en el corazón de nuestro trabajo. Crear relaciones entre los diferentes elementos de un diseño es casi lo más importante que puedes hacer. Probablemente ya lo hayas hecho mucho, conscientemente o no.
Ejemplos obvios de contraste son blanco y negro, grande y pequeño, rápido y lento, grueso y delgado. Los opuestos son la forma más fácil de comprender qué es el contraste, pero cuando se aplica un contraste al trabajo de diseño, nunca es tan blanco y negro. Si te estabas preguntando, de ahí viene el dicho sobre una situación que es "blanco y negro", lo que también lleva a decir que algo es un "área gris". En diseño, a menudo comparamos cosas que son diferentes pero no opuestas, por ejemplo, un H1 y un h1, o un botón "agregar al carrito" y un botón de "retirar". Aquí es donde entran en juego mayores niveles de contraste.
Echemos un vistazo a los diferentes tipos de contraste y algunos ejemplos de cómo se usan en el diseño web.
Contraste de color
El ejemplo más común de todos, esto es más o menos donde todo comienza. Si dos colores son diferentes entre sí (por ejemplo, blanco y negro) tienen un alto contraste, mientras que si son muy similares (rojo y naranja) tienen poco contraste.
TekRoc utiliza un contraste de color muy obvio aquí al superponer una imagen brillante y vibrante sobre un fondo muy oscuro. El naranja brillante y el azul se destacan claramente y el ojo se ve atraído inmediatamente por encima de todas las demás cosas de la página.
Tim Van Damme hace un excelente uso del contraste de color en el diseño del sitio GoWalla. No solo se destaca el borde multicolor en la parte superior de la página y crea un interés visual al ser diferente del fondo pálido, sino que también ha agregado sombras extremadamente sutiles de 1px al texto en los botones. La naranja ligeramente más oscura realmente ayuda a crear un contraste entre el texto blanco y el fondo naranja.
Envato son los maestros del contraste sutil y la tendencia de usar bordes de 1px para esto probablemente pueda atribuirse a ellos más que a cualquier otra persona. Todos sus sitios cuentan con múltiples bordes de un solo píxel para crear contraste entre las secciones. En la captura de pantalla anterior, las dos áreas de contenido podrían haberse dividido por solo espacio o una sola línea; sin embargo, al usar dos líneas (una oscura, una luz) crean un contraste sutil entre las dos secciones, que es extremadamente efectivo.
Contraste de tamaño
La siguiente forma más común de contraste es usar el tamaño. Algo grande al lado de algo pequeño generalmente indica que el artículo más grande es mucho más importante. Así es, ¡estamos diciendo que el tamaño importa!
MadeByWater es la cartera de diseño de Jordan Vitanov. Utiliza el contraste de tamaño con una tipografía extremadamente grande para transmitir instantáneamente una cita de Bruce Lee que define por qué ha elegido marcarse con el nombre MadeByWater.
28 Thiers es un atractivo bar de lujo en Francia. Su sitio web hace un gran uso del contraste de tamaño para llamar su atención de inmediato a la gran fotografía del Martini con una variedad de ingredientes que lo rodean. Al instante queda claro que este es el elemento más importante de la página y el diseñador quiere que veas esa imagen y te vengas por el hecho de que es un establecimiento extremadamente elegante.
SlideScreen hace múltiples usos del contraste de tamaño en su sitio. Además de mostrar sus productos con una captura de pantalla grande, también usan botones muy grandes para sus llamadas principales a la acción. Quieren que vea el video de su producto en acción, y luego quieren que lo descargue. Estos son los elementos más importantes de la página, por lo que son sustancialmente más grandes que las otras cosas que los rodean.
Contraste de la forma
El contraste de forma significa hacer notar las cosas por su diferencia en la forma física en comparación con otras cosas en la página. En su nivel más básico, esto se puede usar en cosas como agregar esquinas redondeadas a botones, pero llevado a niveles más extremos puede atraer mucha más atención.
Anebstar usa el contraste de forma para mostrar tres imágenes importantes en el encabezado. Como la mayoría de las cosas en la web son rectangulares, una de las maneras más fáciles de lograr el contraste de forma es usar un círculo. Por supuesto, este ejemplo también tiene un pequeño contraste de tamaño mezclado, pero se puede ver claramente cómo los elementos circulares se destacan de todo lo demás en la página.
Carbonmade es un sitio impresionante con una mezcla real de magníficas ilustraciones y contenido bien presentado. Un simple botón de registro aquí habría funcionado, pero el tamaño y el contraste de color probablemente no lo hubieran separado lo suficiente del fondo ocupado. Agregar un pulpo amigable detrás del botón realmente le da esa diferencia de forma para atraer la atención directamente hacia él.
WireframePlus utiliza un contraste de forma simple pero extremadamente efectivo para resaltar el precio de sus servicios. Quieren que leas su contenido pero, sobre todo, intentan venderte a su gran precio poniendo un gran círculo detrás de él.
Contraste posicional
Crear contraste en el posicionamiento es una forma muy clara de crear una jerarquía de elementos puramente mediante el uso de diferentes alineamientos. En los últimos tiempos, esta técnica ha sido popularizada por personas como Elliot Jay Stocks, que la utilizó al extremo en su sitio de cartera más reciente.
Elliot Jay Stocks usa una grilla detallada para definir la alineación de todos los elementos en su sitio. Se llama la atención a áreas específicas por estar sangradas a la izquierda o a la derecha, respectivamente. En esta captura de pantalla en particular, el párrafo introductorio realmente se destaca porque está alineado más hacia la izquierda, donde el ojo primero mira para leer algo. Este tipo de alineación ha "inspirado" a muchos otros diseñadores en los últimos doce meses para crear diseños con contraste posicional en el mismo tipo de estilo.
SimpleBits es la marca con la que trabaja Dan Cederholm, usted puede conocerlo de proyectos tales como Dribbble . En las primeras impresiones, el sitio SimpleBits no parece tener ningún contraste posicional, sin embargo, cuando comienzas a desplazarte, todo se vuelve claro. Cuando algunas personas usan una imagen de fondo fija para crear un efecto estilístico limpio, Dan ha hecho que su logotipo y navegación estén completamente fijos en su posición, de modo que, independientemente de dónde se desplace, siempre permanecen en el mismo lugar en la pantalla. Este es un gran ejemplo de contraste posicional no estándar.
SquaredEye es el taller de diseño dirigido por Matthew Smith y las páginas de estudio de caso de su cartera hacen un uso fantástico del contraste posicional. Necesitas ver toda la página para realmente entender la idea, pero esencialmente Matthew ha creado meticulosamente un posicionamiento específico para cada sección de la página. Esto crea un contraste fantástico entre las secciones y crea un gran interés visual para el lector sin distraer en absoluto.
Contraste Conclusión
Hay mucho más para contrastar que solo "luz y oscuridad": es uno de los principios más importantes en el diseño y casi nunca se puede tener demasiado, siempre que lo use correctamente.
Llevar sus diseños al siguiente nivel no se trata de encontrar el próximo carro de banda para usar las esquinas redondeadas y dejar sombras para todo, se trata de encontrar formas mejores y más eficientes de comunicar el mensaje detrás del diseño.
Explorar el contraste en detalle y usarlo en todo su potencial es una de las mejores maneras de hacerlo.
¿Qué piensas? ¿Cuánta atención paga para contrastar dentro de sus diseños? ¿Es algo en lo que piensas todo el tiempo o es algo que surge naturalmente?