Tendencia de diseño: colores vivos del arco iris
Por lo menos, 2017 ha sido un año de color en el diseño de sitios web. Las tendencias de color han dominado la conversación sobre el diseño, con tonos más brillantes y audaces como gran parte del paisaje.
Hay una nueva tendencia de color que combina muchas de esas opciones brillantes en paletas de colores más grandes que ahora podría esperar: patrones de colores del arco iris. Así es, más diseñadores están tomando un cambio con mucho color e incorporando colores vívidos y degradados en los proyectos de diseño. ¡Y es genial!
Aquí hay un vistazo a la tendencia y algunas ideas sobre cómo usar colores vivos que no son llamativos.
Explore los recursos de diseño
Animación del arco iris para el compromiso
Casi desde que Spotify entró en escena, ha estado dando forma a las tendencias de diseño y empujando los límites de cómo se ve el diseño genial. El sitio de música actualiza y cambia constantemente su diseño y utiliza micrositios para resaltar géneros y artistas específicos.
El diseño del sitio web London Grammar Moodmix utiliza una burbuja de color que rebota para captar la atención del usuario. La animación es interesante y te hace querer casi tocarla. Y ese es el objetivo de esta animación de color arcoíris. Observe que la llamada a la acción está justo en el medio de todo ese color.
El resultado es un diseño simple con una animación interesante que lleva a los usuarios directamente al objetivo del diseño. La animación funciona con mucho color debido al movimiento. La gota no sería tan interesante en un solo color.
Color vs. Oscuro
Los colores del arco iris pueden ser difíciles de usar debido a las preocupaciones sobre el contraste. Poner tonos brillantes de estilo arcoíris sobre un fondo oscuro puede resolver la mayoría de estos problemas.
Los colores brillantes casi saltarán de un fondo oscuro.
Otro nombre muy conocido en el diseño y desarrollo de sitios web, Github, está utilizando colores del arco iris para promover su conferencia este año. El sitio web simple utiliza un divertido logotipo de estilo arcoíris y botones de llamada a la acción para la venta de entradas. Lo que es diferente de este diseño de muchas otras estéticas del arco iris es que el diseño es bastante plano y no se utiliza un degradado para los colores. Cada línea en el logotipo es de un color diferente al igual que las letras. Un degradado se usa solo para el botón CTA.
Savee va en otra dirección con el color del arco iris sobre un fondo oscuro, utilizando muchas imágenes de alto color para crear un mosaico con una sensación de arco iris. Si bien la mayoría de los usos del color del arco iris proporcionan una graduación de rojo a amarillo a verde a azul, ese no es siempre el caso. Las paletas de colores del arco iris pueden ser cualquier cosa con un amplio uso de tonos.
Color sutil
A veces, los mejores usos de los estilos del arco iris no saltan directamente de la pantalla. Southwest utiliza una paleta más sutil con tonos de arcoíris en el fondo.
La elección interesante casi contradice muchas de las otras tendencias de color del año y el resultado es refrescante. Miras el diseño casi porque es muy diferente a muchos de los otros diseños de sitios web que existen en este momento.
Incluso con una paleta de colores del arco iris más tenue, ponga énfasis en el contraste entre los elementos de fondo y primer plano para asegurarse de que cada elemento sea fácil de ver y leer. Este es el problema más común con los diseños de estilo arcoíris: no hay suficiente contraste y una legibilidad desafiante.
Logotipo del arco iris
Considere usar colores del arco iris para un logotipo simple. Este es probablemente el uso más difícil del color del arco iris, pero puede tener un efecto sorprendente.
Es un desafío debido a todos los lugares y formas en que se puede usar un logotipo. Optar por los colores del arcoíris podría funcionar mejor para las marcas pequeñas que no usan el logotipo en muchas aplicaciones. Definitivamente, también querrá una opción secundaria para cuando una gran cantidad de color simplemente no funciona.
Richard Gazdik utiliza un logotipo de arcoíris para su cartera, y su posterior navegación. Funciona casi perfectamente gracias a sus iniciales, RGB, y la relación con los colores seleccionados. No todos tendrán esta suerte, pero muestra cómo un logotipo de alto color puede ser efectivo en un esquema de diseño simple.
El color como punto focal
El color del arco iris puede ser lo que atrae a los usuarios a un diseño con una fuerte primera impresión.
Pero hay una línea delgada entre el color del arco iris que se engancha y el color del arco iris que puede alejar a los usuarios. ¿Recuerdas algunos de los diseños de sitios web de fines de la década de 1990 y principios de la década de 2000, cuando casi todos los sitios web tenían colores brillantes en todas partes (y parpadeaban)? Ese tipo de tratamiento de color del arco iris puede ser desastroso y alejar a los usuarios.
Lonsdale hace lo contrario con un video en bucle del líquido del arco iris que es fascinante de ver. El movimiento y los cambios de color son audaces y hacen que quieras mirar. El fondo del arco iris está compensado por el tipo blanco y los elementos de navegación para atraer a los usuarios a través del resto del diseño, que se adhiere al color en las imágenes sobre un fondo blanco.
Color Code adopta otro enfoque con muchos colores brillantes en todo el diseño. El color se utiliza para enfocar visualmente el producto en la pantalla: teléfonos y relojes que muestran aplicaciones.
Crear un fondo atractivo
Las gotas de arco iris casi podrían ser una tendencia de color propia: animaciones líquidas, estilo de tinta, burbujas de colores en movimiento. Como elemento de fondo, el color del arcoíris puede ayudar a establecer el tono de un proyecto e impulsar la participación del usuario. (Solo piense en cuánto más dibujado está para colorear que un solo fondo beige).
Si bien muchos de estos elementos de fondo tienen cierto movimiento en forma de animación o video, no es necesario. Lo que es común entre los sitios web con fondos de arco iris es que a menudo están contenidos en la página de inicio o en el diseño sobre el desplazamiento y el resto del sitio web está menos ocupado.
Esa es una gran técnica cuando se trata de compromiso. Hay algo inmediato para que los usuarios se conecten, lo que los lleva a contenido que pueden profundizar un poco más.
Más técnicas de gradiente
Los colores del arco iris pueden ser una extensión de otra tendencia de color de este año: el retorno del gradiente.
Pruebe una superposición de degradado con una sensación de arco iris. Elija un cambio de color a gran escala de rojo a azul, como SpicyWeb, o elija colores que estén un poco más a la moda, como Talkd.
De cualquier manera, usar un degradado puede ser una forma divertida de agregar color sin sentirse abrumador. Funciona a pantalla completa o en elementos más pequeños. Un degradado también puede ayudarlo a incorporar los colores de la marca en un esquema de colores de estilo arcoíris sin un rediseño completo del sitio web.
Resalta algo diferente
Use la tendencia del color del arco iris para resaltar algo inusual o diferente en su diseño. Debido a que los colores del arcoíris son tan llamativos, pueden ayudar a los usuarios con un patrón de usuario poco convencional, atraer la atención hacia un cierto contenido o parte de la pantalla o ayudar a crear clics y conversiones.
Jony Guedj usa el color para la navegación. Los elementos del menú no están compuestos de la manera habitual, están en la parte inferior de la pantalla y funcionan solo con la acción de desplazamiento para mostrar diferentes videoclips. Si bien este tipo de diseño no se recomienda, funciona aquí. Los colores del arco iris atraen a los usuarios a interactuar con ellos y ayudan a las personas a comprender cómo usar el sitio web.
Conclusión
La tendencia del color del arco iris es muy divertida.
Puede ser difícil de usar si el color te intimida un poco. Pero comience con un elemento de color del arco iris para ver cómo funciona. La mayoría de los diseñadores no están convirtiendo sitios web enteros en diseños de arcoíris; están usando el color del arco iris para crear imágenes efectivas que atraigan a los usuarios. Probablemente por eso ha surgido la tendencia.