La evolución del diseño plano colores apagados

Hoy, estamos llevando el diseño plano al siguiente nivel. No todos los proyectos funcionan con algunas de las opciones de colores brillantes y audaces que comúnmente están conectadas al diseño plano.

Así que no te quedes atascado con ellos. Mejora tu esquema de diseño plano con una paleta de colores más apagada. El cambio sutil puede ayudar a darle a su sitio una revisión moderna y hacer que se destaque entre la multitud de diseño plano. Aquí vamos a seleccionar algunos sitios web que utilizan este estilo excepcionalmente bien para ayudarlo a crear un sitio con diseño plano y una paleta de colores apagados.

Imprimación de color silenciado

Probablemente haya visto variaciones de la paleta de colores planos miles de veces, y algunas veces estos colores no se ajustan a la estética de diseño que busca. Incluso cuando todo lo relacionado con el diseño plano lo atrae.

Ahí es cuando las opciones de color silenciado pueden funcionar maravillosamente. El uso de una paleta de colores apagados con una estética plana es clásico, pulido y lo suficientemente diferente como para que se destaque de todos los otros proyectos planos que hay.

Pero, ¿qué es una paleta de colores apagados? Para los fines de esta conversación, es cualquier tono altamente saturado (como los de los colores de UI plana) y agregar un tinte, tono o tono para hacerlo menos brillante y más tenue. El resultado es a menudo un color más suave y calmado que puede ser más fácil de trabajar y combinar con el diseño general.

Puede ver en las imágenes a continuación cómo los mismos colores de Flat UI Colors pueden verse diferentes con los cambios en el blanco o el negro que se usan con ellos. Y, sencillamente, de eso se trata una paleta de colores apagados. El resto de la estética del diseño puede seguir tan de cerca (o sin apretar) los principios del diseño plano como desee.

Tintes

Los tintes se crean cuando se agrega blanco a un color para aclararlo. Este color es a menudo significativamente más claro que el color original y generalmente se lo denomina pastel. Los tonos pueden variar desde casi blanco hasta unos pocos toques más claros que un color completamente saturado. A menudo tienen una sensación más ligera y suave y crean una estética más relajante que las opciones más audaces y brillantes.

Los tintes funcionan bien con las fotos y son populares en los sitios con ilustraciones. Estos colores más claros a menudo se alejan de la estética principal y son más adecuados para propósitos de diseño cuando otro contenido, como imágenes o palabras, realmente necesita ser el punto focal.

Jack Horner usa colores teñidos en todo el diseño lateral para contrastar marcadamente con detalles en negro. El amarillo en la página de inicio es tan claro que podría ser difícil de ver si no fuera por el acento más brillante. El sitio también utiliza un tono verde para llamadas a la acción e información importante en todo el diseño para mantener a los usuarios interesados.

Cake Teacher utiliza una paleta de color amarillo pálido y verde similar pero con diferentes tintes. Los amarillos son un poco más brillantes y los verdes son un poco más claros que los colores en el sitio de Jack Horner. La sutil paleta teñida ayuda a los usuarios a concentrarse en las fotos de la torta en el centro de la pantalla, particularmente aquellas con opciones de colores más brillantes. El contraste de luz y brillo ayuda a crear un centro de enfoque para el diseño.

Sombras

Las sombras son los colores del resultado con la adición de negro. Esto hará que un color más oscuro y más pesado al ojo. El rango para agregar negro es desde casi negro con un toque de color hasta un toque más oscuro que el tono original.

Las sombras pueden funcionar bien en ciertos tipos de entornos, a menudo cuando se usan con menos negro. Los proyectos que son realmente oscuros e incluyen mucho negro pueden dar lugar a preocupaciones sobre la legibilidad si no se ejecutan excepcionalmente bien. Una cosa que muchas personas asumen incorrectamente es que los tonos tienen que verse negros, pero cuando se desarrolla un color a partir de esquemas de diseño plano tradicionales, en particular, este no es el caso en absoluto.

La ventana emergente de venta para el minorista Ann Taylor utiliza una combinación de tonos para una promoción verde simple que es fácil de leer y atractiva a la vista. La estética utiliza un montón de conceptos planos y elementos modernos como botones fantasma y tipografía atrevida, pero los tonos sombreados son todo menos "tradicionalmente". plano. Combinado con el texto amarillo (gracias a un tono), la paleta plana silenciada es sorprendente y moderna.

¿Coste y flete? Frida usa un conjunto de colores que no es en absoluto común. Los sombreados amarillos, verdes e incluso los blancos crean una sensación vintage. Los colores son fuertes, pero no son abrumadores. Son atractivas pero no del todo emocionantes. La combinación establece la escena para el café, que se ejecuta bien a través del desplazamiento de la página de inicio.

Tonos

Los tonos se crean combinando el blanco y el negro con un color para que se vea más suave. La mayoría de los colores son creados usando tonos. Son colores complejos que tienen un atractivo casi universal porque se extraen de varias partes del espectro de colores. Es esta calidad sutil que hace de los tonos la elección número uno de diseñadores y artistas para la mayoría de los proyectos.

Los tonos funcionan en casi cualquier diseño estético debido a su naturaleza agradable.

Source Tree utiliza un verde pálido, casi calmante, en todo el sitio. Se combina con otros destellos de color tonificado también para los otros proyectos presentados. Lo bueno de este color es que el tono le da al sitio una sensación de bienvenida. Solo imagine lo diferente que sería este sitio si usara Emerald de la paleta plana de arriba en todos los lugares donde se usa el color tonificado. El color casi da espacio a las cajas más pequeñas y los elementos animados, algo que no ocurriría con tanta facilidad visual si el color fuera significativamente más brillante.

El instituto para Fe, Trabajo y Economía utiliza combinaciones de tonos de colores complejos para mover a los usuarios de la imagen principal hacia abajo de la página a la llamada a la acción. La combinación de azul oscuro y amarillo es fácil de leer, gracias al alto contraste y visualmente interesante porque los colores son su combinación estándar de azul y amarillo.Los colores se utilizan en todo el diseño para ayudar a establecer el enfoque en todo el diseño y guiar a los usuarios a acciones y clics en todo el sitio web.

Conclusión

Cuando se bifurca de algunos de los colores más tradicionales del diseño plano, no tiene que elegir una de las técnicas de color anteriores. Puedes combinar tonos, sombras y tonos para crear algo que sea absolutamente atractivo y diferente.

La verdadera lección en estos sencillos estudios de caso es la siguiente: ¿No se deje llevar por el uso de una tendencia por parte del libro? Rompa con una técnica diferente para hacer suya la tendencia y el uso. Estos ejemplos muestran lo maravilloso que es cambiar solo la paleta de colores, mientras se trabaja en diseños de naturaleza plana.