Cómo evitar el uso de degradados como loco | Shay Moran | Marzo 2021 – Usabilidad web y seo

Cómo evitar el uso de degradados como loco | Shay Moran | Marzo 2021

Vistas: 48
0 0
Tiempo de lectura:8 Minutos, 3 Segundos

Al igual que la sutil desaparición del degradado en sí, el mundo del diseño se ha ido inundando gradualmente de degradados en los últimos años. Ya sean dos colores, cinco colores, dirección central, dirección de esquina, dirección vertical o alguna otra combinación; una vez que siga las pendientes, empezará a notarlas por todas partes (a diferencia de Honda Civics).

Instagram marcó el comienzo de una nueva era de degradados con un importante rediseño de logotipo en 2016, y más marcas han adoptado el degradado desde entonces. Recientemente, Facebook Messenger también ha adoptado un atractivo diseño de degradado.

Antes de sumergirnos en ¡Oh sí! y ¡por supuesto no! sobref gradientes, permítanme exponer el caso de los gradientes. Presumiblemente, si estás leyendo esto, probablemente ya seas un fanático de los degradados y no necesitas que te convenzan, pero construí este caso para elogiarlos después de que mi amigo Steve discutiera conmigo que los degradados son estúpidos y que necesito espacio. tira tu opinión. Así que toma esto, Steve.

El uso más obvio y quizás más práctico de los degradados es agregar profundidad. Puede parecer contradictorio en comparación con la ola de iconografía plana y color que recientemente ha barrido el mundo del diseño, pero agregar un degradado elegante a un mar de gráficos planos puede hacer que un elemento se destaque y llame la atención. Continuaría argumentando (y argumentó Steve) que un degradado se puede usar en casi cualquier tipo de elemento de diseño para agregar profundidad. La advertencia es que este es el tipo correcto de gradiente (más sobre esto más adelante).

Todo lo que nuestro ojo ve a nuestro alrededor se compone de una combinación de longitudes de onda de luz reflejadas que el cerebro humano percibe como color. De estos, nuestro cerebro los interpreta como alrededor de 10 millones de colores diferentes en un momento dado. Debido a la forma en que un objeto absorbe y refleja la luz (absorbiendo todos los colores que no percibimos, reflejando los que vemos), toda nuestra base de cómo vemos el color en nuestro mundo, y esto nos hace tener un color infinito. debate sobre un vestido a rayas, confía en los degradados como base de la realidad. ¿Quieres que tu diseño se vea realista? Prueba con un degradado.

¿Quieres saber más? He aquí un fascinante un artículo sobre la ciencia detrás de la percepción de muchos colores como una imagen coherente en el arte

Mantenga los degradados naturales. Una regla general que utilizo para hacer que mis degradados se vean armoniosos y agradables a la vista es mantener los colores utilizados en el degradado lo más naturales posible. Con eso, me refiero a elegir colores con unos pocos pasos uno del otro, como si estuviera viendo degradados «en la naturaleza», como una puesta de sol. La elección de colores que están demasiado separados en el espectro de colores solo crea ruido y falta de armonía, que suele ser el efecto opuesto que desea lograr con un degradado.

¿Quieres saber más sobre los degradados inspirados en la naturaleza? Controlar Este artículo por Jessica Anderson.

Utilice colores que reflejen la naturaleza en degradados. Foto de Victor García en Unsplash
¿Quiere crear un degradado multicolor que aún se vea natural? La naturaleza también tiene esto. Foto de Igor Kasalovich en Unsplash.

Si bien una buena regla a seguir es mantener los colores del degradado lo más cerca posible entre sí, podemos ir más allá con combinaciones de colores degradados y sumergirnos en los pequeños detalles del uso de proporciones de color específicas para fines precisos.

CLASE DE ARTE 101: Un matiz es un color (como el verde) mezclado con blanco. Básicamente, te da encendedor versión de su color inicial.

Los tintes, seguros y sutiles, son una excelente manera de inyectar degradados en diseños que pueden no tener mucho ancho de banda visual. Usar el tono es una excelente manera de aclarar una interfaz y hacerla más limpia y clara sin riesgo de opacidad. La profundidad se asocia a menudo con colores oscuros y profundos. Pero usar un degradado teñido puede agregar profundidad a su diseño con un estilo ligero y minimalista.

CLASE DE ARTE 101: Un tono es un color (como el verde) mezclado con negro. Básicamente, te da mas oscuro versión de su color inicial.

Usar un degradado que reproduzca el tono con su color inicial es una gran solución cuando necesita agregar contraste y saturación a su diseño. Una sombra paralela puede actuar como un ancla cuando se usa en encabezados y pies de página para hacer su diseño en negrita, o simplemente para hacer que los botones y selectores sean más legibles. Con el aumento de la popularidad de los modos / temas oscuros en las interfaces, está creciendo una era de degradados ricos y profundos.

CLASE DE ARTE 101: El tono es un color (como el verde) mezclado con gris o resultante de y tonificar y sombrear tu color.

Normalmente, se utiliza un degradado de tono como fondo en lugar de como elemento de primer plano. Dado que los tonos tienden a neutralizar en lugar de resaltar un elemento, funcionan bien como fondos para las «estrellas del espectáculo». ¿Quiere utilizar dos degradados en la misma interfaz de usuario? Es una buena idea comenzar con un degradado tonal y luego agregar un tinte o degradado de tinte, los degradados de tinte y tinte se combinan mejor con el degradado de tinte que entre sí.

Si bien me gustaría decir que los degradados se pueden usar en cualquier lugar y en cualquier momento, esto no es cierto. Hay algunas cosas que debe tener en cuenta al usar degradados para asegurarse de usarlos como una herramienta eficaz.

Si su diseño no funciona con un color sólido, no funcionará con un degradado.
Muchos enemigos de los degradados tienen una aversión tan fuerte a los degradados porque con demasiada frecuencia los degradados se han utilizado como una muleta para ocultar diseños malos. Siempre pruebe primero el tema de degradado elegido con un color sólido para asegurarse de que el diseño responda y sea completamente comprensible con o sin degradado. También le dará durabilidad a su diseño si más adelante necesita hacer una versión sin degradado.

Sea intencional.

La intención es un gran lema de vida y un gran enfoque para agregar degradados. Al elegir un degradado, tenga en cuenta la intención, la marca y el propósito del diseño. Pregúntese por qué elige los colores que usa y si son compatibles con el lenguaje de marca / diseño. También considere si está tratando de acentuar una parte específica del diseño o reflejar el reflejo natural de la luz en un objeto, y qué método podría ser más efectivo.

Verifique dos o tres veces su degradado para asegurarse de que sea legible y reproducible.

Asegúrese de que el uso de un degradado no afecte la accesibilidad o legibilidad de su diseño. En caso de duda, verifique el contraste de color de su degradado para asegurarse de que cualquier parte con texto o imágenes cumpla con los criterios de contraste de color WCAG. También tenga en cuenta si es probable que el diseño se reproduzca en una variedad de formatos, como impresión, donde los degradados pueden crear problemas cuando se reproducen.

Para obtener más información sobre la impresión de degradados y la prevención de rayas de degradado horribles, consulte este artículo de Max Bridge

No use simplemente un degradado para usar un degradado.

¿Cuál es el propósito del degradado que está utilizando? ¿Esto refuerza el objetivo del diseño y tiene sentido, o es solo ruido innecesario? Esto es especialmente importante para elementos de diseño pequeños, como logotipos y botones, de modo que la razón para usar el degradado sea clara y esté bien articulada; de lo contrario, corre el riesgo de agregar ruido innecesario o incluso romper una de las reglas descritas anteriormente.

Entonces, ¿cómo aplicas tu nueva pasión por los degradados? Experimentar un poco siempre es un buen comienzo. Tenga en cuenta que es mejor permanecer en el lado demasiado delgado que demasiado abierto. Si lo primero que nota sobre un diseño es su gradiente, lo más probable es que necesite bajar algo. Deje que el degradado apoye el diseño, no lo domine.
A continuación se muestran algunos ejemplos de algunos de mis diseñadores favoritos que demuestran el uso eficaz de los degradados:

Este diseño de Alex Banaga es un gran ejemplo de gradientes de apoyo sutiles. Tenga en cuenta que no todos los colores de un diseño son degradados y que existe un uso constante del degradado en todos los diseños.
Otro ejemplo de un degradado muy sutil que agrega incluso la más mínima profundidad y contraste sin abrumar. Este ejemplo pertenece al talentoso James Xu.
¿Busca una inspiración en degradado atrevida? Mira el trabajo de Paul Trani. Paul usa magistralmente gradientes grandes y audaces que agregan profundidad, contraste y realismo sin superar el diseño.

Los degradados pueden ser una excelente manera de dar vida a los diseños, reforzar la identidad de la marca y crear una apariencia llamativa sin agregar desorden. Así que adelante, diviértete con esta herramienta de degradado.

¿Qué opinas sobre los degradados en el diseño? Me encantaría escucharlo en los comentarios a continuación.

UX Collective dona $ 1 por cada artículo publicado en nuestra plataforma. Esta historia contribuyó a los Diseñadores Negros del Área de la Bahía: una comunidad de diseñadores negros profesionales que son diseñadores e investigadores digitales en el Área de la Bahía de San Francisco. Al unirse a una comunidad, los miembros comparten inspiración, conexiones, tutoría, desarrollo profesional, recursos, comentarios, apoyo y resistencia. El silencio contra el racismo sistémico no es una opción. Cree una comunidad de diseño en la que crea.
Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post American’s Trust Google más que Facebook o TikTok
Next post Cómo ahorrar tiempo con la mejor integración de correo electrónico de Salesforce

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta