Cómo diseñar el degradado perfecto

Cuando trabajas para una empresa de diseño de experiencias de usuario durante tanto tiempo como yo, empiezas a notar la naturaleza cíclica de las tendencias de la industria. Al igual que la moda o el arte, lo que pasa de moda resurge inevitablemente unos años después, solo para ser adoptado por la corriente principal y volverse obsoleto una vez más.

En el mundo del diseño digital, tal vez no haya mejor ejemplo de esto que el ascenso y descenso (y ascenso) del gradiente. Considerado un eje del diseño de interfaces en los noventa (¿cuántos sitios de geocities tenían un encabezado de WordArt degradado?), La tendencia probablemente se remonta aún más atrás. Considere este logo icónico:

‘Regreso al futuro’ es un ejemplo apropiado de una tendencia de diseño que acaba de resurgir hoy, quizás más notablemente en el rediseño del logotipo de Instagram en 2016 y el ícono de la lista de reproducción de doble tono de Spotify. Los degradados se han vuelto cada vez más populares en el mundo del diseño de interfaces de usuario y por una buena razón: inyectan profundidad y textura a la interfaz. Cumplen roles únicos, incluso conflictivos: los degradados imitan de manera realista los colores que vemos a nuestro alrededor (rara vez encontramos tonos únicos en el mundo real), pero también se pueden usar para crear patrones de color que nunca antes habíamos visto.

El degradado es una técnica de diseño poderosa, y un gran poder conlleva una gran responsabilidad. Cuando se usan incorrectamente, los degradados representan un desastre de diseño. Pueden confundir un diseño, distraer al usuario y arruinar toda la estética de una interfaz. En este artículo (con la ayuda de mi confiable equipo de diseñadores de UX), revelamos el secreto para crear un gradiente que eleve su interfaz al siguiente escalón, en lugar de recordarle al usuario 1997.

Comience con una base sólida

Ya sea en dos tonos o en varios tonos, cada degradado es tan fuerte como sus colores base. Y al igual que todas las opciones de diseño basadas en colores, podemos consultar la rueda de colores como guía para seleccionar las correctas.

No se preocupe, no necesita ser un experto en teoría del color para realizar selecciones prudentes para su degradado. La regla general es elegir colores que estén cerca unos de otros, lo que les permitirá mezclarse de forma más natural. Planeta UX incluye un gran diagrama: mire lo perfecta que es la transición de amarillo a naranja en comparación con el verde-violeta.

¿Por qué los colores en las proximidades de la rueda son tan atractivos visualmente? Quizás sea porque esos son los gradientes que ocurren naturalmente con tanta frecuencia. Lo que nos lleva a un excelente secreto comercial para los diseñadores de UI: recurrir a la naturaleza como fuente de inspiración.

Gradientes en la naturaleza

Constantemente encontramos gradientes en nuestro día a día: el cielo, las puestas de sol, las masas de agua. No importa en qué parte del mundo estemos, el cielo sirve especialmente como material fuente excelente. Solo eche un vistazo a la impresionante diseñadora de cuadros naturales Anna Grenn vitrinas, completo con los maquillajes de color que lo acompañan.

Y aunque el cielo puede ser el material de origen más común, los ejemplos no tienen fin. Probablemente haya un gradiente natural a tu alrededor en este momento. El color de la vida real no se llena perfectamente dentro de las líneas, sino que se mezcla.

Llévandolo al siguiente nivel

Entonces, digamos que los colores de su marca existente no son exactamente propicios para los degradados. O tal vez su degradado estándar de dos tonos simplemente no lo está cortando. No temas: inyectar tonos adicionales al degradado es una excelente manera de mejorar su interés visual y distinguir aún más tu interfaz de usuario.

Como puede imaginar, los colores adicionales fluirán mejor cuando se encuentren entre el color inicial y final de la rueda de colores. Revisando el mismo diagrama de UX Planet:

Solo tenga cuidado: cuantos más colores agregue, más complejo será el degradado y más difícil será el acto de equilibrio del diseño que tendrá que realizar. Podrías apuntar alto y disparar a un gradiente de varias capas como el logo de Instagram, pero ir por la borda y podrías terminar con algo más cercano a este diseño web de MTV deliberadamente feo.

Fuente de luz y forma

Incluso después de definir la combinación de colores perfecta, todavía queda la cuestión de implementarla en el diseño. Primero, algunos de los conceptos básicos:

Los degradados deben alinearse con sus contenedores, contornear el diseño y dirigir hacia dónde deben apuntar los globos oculares del usuario. Para polígonos de lados x (cuadrados, triángulos, rectángulos, pentágonos, etc.) esto generalmente significa un gradiente lineal; las áreas más redondas requieren una dirección radial.

A algunos diseñadores de UI les gusta asignar una ‘fuente de luz’ imaginaria para la página en la que están trabajando, de la misma manera que lo haría un artista que pinta un paisaje. Esto les ayuda a decidir cómo orientar el degradado: el lado más claro debería estar obviamente más cerca de la fuente, el lado más oscuro más lejos. La asignación de una fuente de luz también puede ayudar a informar otros elementos gráficos de la página y actuar también como un punto focal.

Tenga en cuenta la fuente de luz en la esquina superior izquierda de la interfaz de esta aplicación de música.

Cuando todos estos elementos individuales se eligen correctamente, se fusionan en un degradado magnífico y llamativo. Y eso, a su vez, sirve como una gran ayuda para la interfaz en su conjunto.

¿A dónde van los degradados desde aquí?

Incluir un degradado en su interfaz de usuario es una manera excelente y fácil de modernizar su plataforma. Si sigue los consejos que se comentan aquí, puede asegurarse de que está manejando correctamente esta poderosa herramienta de diseño. Recordar:

• Seleccione los tonos base apropiados usando una combinación de su marca y la rueda de colores.
• En caso de duda, busque inspiración en el mundo natural
• Mejora las cosas agregando más tonos, pero ten cuidado de no exagerar
• Elija la forma y ubicación correctas dentro de su interfaz. Recuerda: ¡nuestros ojos siguen el degradado!

Como todas las tendencias de diseño de IU, los degradados pasarán de moda y serán derribados por el próximo gran avance. Pero por ahora, son un pilar del diseño de interfaz de usuario de vanguardia.