Colores apagados: Definición y cómo usarlos en sitios web y aplicaciones

Publicidad

El concepto de usar colores apagados en tu diseño ciertamente no es nuevo. Cuando lo comparas con la tendencia de colores vivos que tenemos en casi todas partes, seguramente parece algo nuevo.

Cualquier diseñador UX moderno sabe que la tendencia minimalista y plana ha ido cogiendo fuerza en los últimos años.

Hay empresas de la talla de Microsoft, Apple y Twitter, y todas ellas están aprovechando este estilo emergente a la hora de diseñar sus productos digitales.

El diseño plano va de la mano con el enfoque minimalista.

El diseño plano eliminará la profundidad al no utilizar sombreado y degradado, y favorece la geometría unidimensional.

FireShot-Capture-1789-BO Colores apagados: Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Hacer las cosas demasiado simples ha tenido en realidad el efecto contrario al que se requería, y a los usuarios les resulta más difícil averiguar dónde pueden hacer clic, y por qué.

Afortunadamente, hay una tercera tendencia que ayuda a esto. Los colores apagados también han cobrado fuerza.

exploración-color-pastel-2- Colores apagados: Definición y cómo usarlos en sitios web y aplicaciones

exploration-pastel-color-2- Muted Colors: Definición y cómo usarlos en sitios web y aplicaciones

Los esquemas de colores apagados están por todas partes en la publicidad impresa. Sin embargo, en una campaña impresa no se necesita un diseño minimalista o un efecto plano, porque el usuario no está interactuando con un papel, sino que sólo necesita mirar.

Sin embargo, la paleta de colores apagados ha adquirido realmente un nuevo papel aparte de su papel principal en las prácticas funcionales de UX.

FireShot-Capture-1776-Aire Colores apagados: Definición y cómo usarlos en webs y apps

Si intentas encontrar una definición de colores apagados, encontrarás que la mejor respuesta a la pregunta «¿Qué son los colores apagados?» radica en que estos colores representan lo moderno, la eficiencia y la progresividad.

Transmiten al espectador que cualquier sustancia que esté viendo, es relevante y no está desfasada. Por ejemplo, se puede ver el color apagado en el vídeo «Hotline Bling» de Drake.

FireShot-Capture-1778-Rot Colores apagados: Definición y cómo usarlos en webs y apps

Estos colores y pasteles apagados fueron muy intencionados, y hablan de la cultura actual y de las masas. También significan algo del momento. Al ser mucho más fáciles de mirar que los colores duros y nítidos, también están muy de moda conceptualmente.

FireShot-Capture-1780-Vic Colores apagados: Definición y cómo usarlos en sitios web y aplicaciones

Publicidad

Hoy en día, los diseñadores de UX deben saber que sus elecciones de color son en realidad sus elecciones de diseño, y el color puede indicar mucho, al igual que el flujo, el contenido, la usabilidad y la función.

Elegir entre un verde vibrante o tonos apagados de verde puede marcar la diferencia entre que el usuario se quede en el sitio, o se vaya al instante. Al igual que una interfaz de usuario anticuada puede parecer un poco analógica, esos colores brillantes y vibrantes pueden parecer una explosión del pasado.

Los colores apagados aparecen como lo hacen debido a:

FireShot-Capture-1781-VR- Colores apagados: Definición y cómo usarlos en webs y apps

  1. Valor más bajo
  2. Saturación más baja
  3. Mezcla con colores adyacentes
  4. Combinación de cualquiera de los anteriores

Hay variaciones de la paleta de colores planos que has visto miles de veces, y que muchas veces simplemente no encajan con la estética de diseño que pretendes. Incluso cuando todo lo demás apela a ella.

Aquí es donde una opción de colores apagados puede hacer maravillas, ya que cuando la usas con una estética plana, es un aspecto clásico y pulido lo suficientemente diferente como para que destaque entre todos los demás proyectos planos.

animal-800-x-600-large-1 Colores apagados: Definición y cómo usarlos en webs y apps

animal-800-x-600-large-1 Colores apagados: Definición y cómo usarlos en webs y apps

Pero, ¿qué es una paleta de colores apagados?

Para los propósitos de esta conversación, es cualquier tonalidad que esté muy saturada y se le añade un tono, tinte o matiz para hacerla más tenue y menos brillante. A menudo se obtiene como resultado un color más suave y calmado que es más fácil de trabajar, así como de combinar con el diseño general.

FireShot-Capture-1784-AMA Colores apagados: Definición y cómo usarlos en webs y apps

El «color» es en realidad un término muy impreciso que usamos a diario. Está formado por tres componentes principales, que son el tono, la saturación y el valor.

Si tienes un globo donde el ecuador es el tono en 360 grados, el eje vertical es el valor, y el horizontal es la saturación, los colores se pueden visualizar en el volumen interior.

FireShot-Capture-1785-Des Colores apagados: Definición y cómo usarlos en webs y apps

Hay algunos otros conceptos que pueden ayudar con esta cuestión, como el «sombreado» y el «matizado». Por ejemplo, la mezcla de cualquier color con el negro se conoce como «sombreado», y da como resultado un color un poco más apagado.

Sin embargo, añadir blanco a un color se conoce como «matizar», y da como resultado un color más brillante. Sin embargo, no todos los colores pueden volverse brillantes u oscuros, como el amarillo, por ejemplo. Si se oscurece, se convertirá en marrón.

Matizado en colores apagados

FireShot-Capture-1783-Tim Colores apagados: Definición y cómo usarlos en webs y apps

Al añadir blanco a un color, o matizar, se obtiene un color significativamente más claro que el original, y que suele conocerse como pastel. Pueden ir desde un color casi blanco, hasta un poco más claro que el color totalmente saturado.

FireShot-Capture-1786-Kve Colores apagados: Definición y cómo usarlos en webs y apps

Su sensación es más ligera, más suave, y te da una estética más calmada en comparación con las opciones más atrevidas y brillantes.

Son muy populares con las ilustraciones y también funcionan de maravilla en las fotos. Se alejarán de la estética principal, y son más utilizados cuando tienes otro punto focal en contraposición a la estética principal.

Tonos en colores apagados

FireShot-Capture-1787-Céd Colores apagados: Definición y cómo usarlos en webs y apps

Los tonos, por su parte, hacen que el color parezca más pesado a la vista, y van desde un color casi negro, hasta un toque más oscuro que el original. Funcionan bien en una variedad de entornos, especialmente cuando se usan con menos negro.

story-app-exploration-large Colores apagados: Definición y cómo usarlos en sitios web y aplicaciones

Hay proyectos que son realmente oscuros y tienen mucho negro que vienen con problemas de legibilidad a menos que los ejecutes excepcionalmente bien. La gente a menudo asume incorrectamente que los tonos deben parecer negros, pero cuando estás evolucionando uno de los colores de los esquemas tradicionales de diseño plano, este no es el caso.

Tonos en colores apagados

FireShot-Capture-1782-Wha Colores apagados: Definición y cómo usarlos en webs y apps

Combinando el blanco y el negro con un color para que parezca más suave se obtienen los tonos. La mayoría de los colores se hacen realmente usando tonos, ya que son colores complejos con un atractivo casi universal.

Esto se debe al hecho de que tiran de algunas partes diferentes del espectro de color, y es por eso que los tonos son la primera opción de los artistas y diseñadores para la mayoría de sus proyectos.

unsplash-app-exploration-la Colores apagados: Definición y cómo usarlos en webs y apps

unsplash-app-exploration-la Colores apagados: Definición y cómo usarlos en webs y apps

Pensamientos finales sobre los colores apagados

Independientemente de que te salgas de algunos colores tradicionales del diseño plano, elegir una de las técnicas de color anteriores no es tu única opción. Puedes combinar sombras, tintes y tonos para crear algo que sea diferente y absolutamente atractivo.

La lección con estos sencillos estudios es que no puedes quedarte atrapado teniendo que usar una tendencia «según el libro». Utiliza un tipo de técnica diferente para hacer tu propia tendencia. La paleta de colores y cambiarla puede ser maravilloso, y aún puedes conseguir un diseño plano.

Si te gustó este artículo sobre los colores apagados, deberías ver estos también:

  • Sitio web de fotografía: Diseño, ideas, cómo crear una
  • Diseño de páginas web de deportes: Consejos, inspiración y mejores prácticas
  • Diseño de páginas web de restaurantes: Consejos, inspiración y mejores prácticas

Descargas ilimitadas: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Deja una respuesta

Tu dirección de correo electrónico no será publicada.