Color de duotono: consejos y ejemplos para esta tendencia vibrante
¡La próxima gran tendencia de imagen de diseño web está aquí, y es vibrante, colorida y hermosa!
Gracias a Spotify, el duotono está creciendo en popularidad casi a diario. El efecto, que utiliza un par de colores sobre una foto, es sorprendente, divertido y vibrante. También es bastante moderno, con nuevos sitios que cambian a un formato de duotono casi a diario. Aquí hay algunas maneras de aprovechar al máximo esta técnica de diseño en caliente.
¿Qué es el duotono?
Primero, una pequeña cartilla: Duotone es el uso de dos colores.
El nombre y la técnica provienen de las imprentas. Las impresiones de duotono se realizan en dos tonos del mismo color o con negro y un tinte. El proceso utiliza dos placas de color hechas con la pantalla configurada en diferentes ángulos.
El concepto de dos colores es grande. Pantone nombró un par como Color del año, el minimalismo hizo que los diseñadores pensaran que las paletas limitadas y los duotonos son visualmente interesantes y bastante fáciles de crear. Puede crear el efecto usando Adobe Photoshop y un degradado de dos colores o una herramienta como Colofilter.css para aplicarlo en el código.
Pero lo que probablemente ayudó a que el duotono despegara más es el uso por parte de Spotify. Los esquemas de color Duotone se utilizan en la aplicación de reproducción de música y en varios micrositios promocionales. Duotone agrega un elemento de diseño único a las imágenes de artistas que son bien conocidos y ampliamente utilizados.
La técnica que alguna vez fue un elemento básico de impresión ha encontrado una nueva vida en línea, y es una tendencia que es probable que veamos mucho más en los próximos meses.
Como una imagen dominante
Usa duotono para crear una imagen dominante.
La imagen principal de New Deal Design es sorprendente gracias a una elección de color atrevida y peculiar, gracias a las divertidas imágenes y colores. No tenga miedo de salir de su comodidad cuando se trata de trabajar con imágenes de duotono; Está bien emparejar tonos que podrían no coincidir. El objetivo es crear una imagen que requiera atención e incluya mucho contraste para que la imagen se muestre.
Aquí hay algunos consejos para el máximo impacto:
- Elija dos colores contrastantes o empareje los colores de la marca.
- Seleccione una foto con un área de imagen enfocada. Un paisaje puede ser difícil de usar.
- Comience con una imagen de alta calidad. Las imágenes borrosas o pobres y el duotono no se mezclan.
- Juega contraste.
- Considere espacios para botones o tipografía.
- Elija colores que reflejen el estado de ánimo de la foto.
- Configure una imagen de duotono con un borde de color o mezcle y combine las opciones de color con un control deslizante de desplazamiento o efectos de paralaje.
Como una paleta de colores simple
Duotone no tiene que ser complicado. A veces, los proyectos de dos colores más llamativos son de naturaleza simple.
Assurity Life Insurance utiliza un par de rojos y una tipografía limpia. El pergamino incluye un estilo más de medios tonos también. Los colores son brillantes y atractivos. El rojo es el tipo de color que casi hace que los usuarios lo vean.
El truco aquí es que es lo suficientemente simple como para ser efectivo. El usuario no está abrumado con elementos. El rojo te atrae para que las palabras en la pantalla se conviertan en el foco. Este tipo de efecto duotono está casi hecho para sitios web que tienen un aspecto más formal porque permite el uso de una tendencia sin sentirse forzado o abrumador.
Como una forma de aumentar la legibilidad
Use duotono para actuar como un estabilizador de color que le da al texto mucho espacio y contraste. Una superposición de color duotono puede ayudar a "aplanar" las variaciones de color en una imagen para que el texto se pueda colocar usando un solo color en casi cualquier lugar de la imagen y aún así ser legible.
Las opciones de color de duotono no serán tan brillantes para este uso y es probable que aparezcan más apagadas, pero pueden servir para un gran propósito. Holm Marcher & Co. hace esto con un duotono coral y azul que es interesante y crea un fondo muy legible para las letras. Como una ventaja adicional, los elementos de navegación usan tonos de azul de la paleta de colores para alentar a moverse por el sitio.
Como acento
Si bien los efectos de duotono se prestan a imágenes grandes, también pueden funcionar en lugares más pequeños. Considere un acento duotono en la navegación, para imágenes secundarias o para tipos específicos de contenido.
Lo bueno de las áreas más pequeñas de duotono es que tienes un poco más de libertad para jugar si te intimida la técnica o no estás muy seguro de cómo hacer que funcione para ti. Cuando se usa en espacios más pequeños, puede ser visualmente interesante jugar con múltiples pares de colores para diferentes elementos en el diseño.
Considere los elementos de duotono para elementos de estilo de tarjeta, como una superposición para enlaces para video o para enfatizar las llamadas a la acción. Los acentos de duotono también pueden ser herramientas efectivas para su uso en un esquema de color mínimo o blanco y negro debido al contraste de color que crean.
Como un fondo
No hay nada como un sutil efecto de duotono para crear una imagen o patrón de fondo interesante. Este es un uso ideal para los colores de la marca o como una forma de incorporar una tonalidad o técnica moderna en su diseño sin una revisión a gran escala.
El fondo de duotono graduado para Join Radio es la perfección. El cambio de color es casi imperceptible y se combina a la perfección con otros elementos de la interfaz de usuario en el diseño. Hay una animación simple que se mueve a través de los colores que es relajante y tiene un movimiento parecido al agua. El cambio de claro a oscuro sigue los patrones naturales de ojos y lectura que se mueven desde la parte superior izquierda de la página de inicio a la parte inferior derecha, donde el usuario se anima a desplazarse y hacer clic.
Conclusión
Es difícil encontrar una técnica de diseño con la que sea más divertido jugar que con el color. Los duotonos son igualmente atractivos para los diseñadores. El efecto puede darle vida a una imagen usada en exceso, agregar un elemento divertido cuando falta una y simplemente ayudar a atraer a los usuarios visualmente.
Además, usted, el diseñador, realmente puede experimentar al usar efectos de duotono. Puede combinar colores que quizás no haya imaginado para un gran impacto o combinar colores con variaciones sutiles para un pequeño elemento de sorpresa. De cualquier manera, la creación de este efecto de color casi siempre parece personalizada y puede ser divertido trabajar con ella.
