Cuando trabajas para una empresa de diseño de experiencias de usuario desde hace tanto tiempo como yo, emFooterzas a ver la naturaleza cíclica de las tendencias de la industria. Al igual que la moda o el arte, lo que pasa de moda reaparece inevitablemente unos años después, sólo para ser adoptado por la corriente dominante y volver a quedar obsoleto.
En el mundo del diseño digital, puede que no haya mejor ejemplo que aumentar y disminuir (y disminuir) el gradiente. Considerado como la Footerza clave del diseño de interfaz en la década de 1990 (cuántos sitios de geociencias tenían un header WordArt?), es probable que la tendencia disminuya aún más. Mira este logo icónico:
Back To The Future’ es un buen ejemplo de una tendencia de diseño que ha resurgido recientemente, quizás más notablemente el rediseño del logotipo de Instagram en 2016 y el símbolo bicolor de la lista de reproducción 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 en la superficie. Sirven papeles únicos e incluso contradictorios: Los gradientes de color imitan de manera realista los colores que vemos a nuestro alrededor (rara vez encontramos sombras individuales en el mundo real), pero también se pueden usar para crear patrones de color que nunca antes hemos visto.
Si se usan incorrectamente, los degradados conducen a un desastre del proyecto
.
El gradiente es una técnica de construcción poderosa, y con gran poder viene una gran responsabilidad. Si se utilizan incorrectamente, los degradados provocan una catástrofe en el diseño. Pueden confundir un diseño, distraer al usuario y arruinar la estética general de una superficie. En este artículo (con la ayuda de mi confiable equipo de diseñadores de UX), revelamos el secreto de crear un gradiente que lleve su interfaz al siguiente nivel en lugar de recordar al usuario de 1997.
Resumen de el Contenido
Comience con una base fuerte
Ya sea doble o multitono, cada gradiente es tan fuerte como sus colores primarios. Y como con todas las decisiones de diseño basadas en el color, podemos atenernos a la rueda del color eligiendo los diseños correctos.
No se preocupe, no necesita ser un experto en teoría del color para hacer una elección cuidadosa de su gradiente. La regla general es elegir colores que estén cerca uno del otro para que puedan mezclarse de manera más natural. UX Planet contiene un gráfico grande – vea cómo se compara la transición del amarillo al naranja con el verde púrpura.
¿Por qué los colores cerca del volante son tan atractivos visualmente? Tal vez sea porque estos son los gradientes que ocurren tan a menudo por naturaleza. Esto nos lleva a un excelente secreto comercial para los diseñadores de UI: la naturaleza como fuente de inspiración.
Gradientes en la naturaleza
En nuestra vida diaria, encontramos gradientes constantes: Cielo, puesta de sol, agua. No importa dónde estemos en el mundo, el cielo sirve sobre todo como una excelente fuente de material. Echa un vistazo a las impresionantes ventanas de la diseñadora de mesas naturales Anna Grenn, con el correspondiente maquillaje colorido.
Y aunque el cielo es la fuente material más común, no hay límites para los ejemplos. Probablemente sólo hay un gradiente natural a su alrededor. El color de la vida real no se rellena perfectamente dentro de las líneas, sino que se funde.
Hasta el siguiente nivel
Así que asumamos que los colores de su marca existente no son exactamente conducentes a los degradados de color. O tal vez su gradiente estándar de dos colores no es suficiente. No se preocupe: Añadir sombras adicionales al degradado es una buena manera de aumentar el interés visual y diferenciar aún más su interfaz de usuario.
Como puede imaginar, los colores adicionales fluirán mejor si se encuentran entre el inicio y el final de los colores en la rueda de colores. Visito el mismo diagrama del planeta UX:
Tenga en cuenta: cuantos más colores añada, más complejo será su gradiente y más difícil será para usted proyectar el equilibrio. Usted podría apuntar alto y apuntar a un gradiente de varias capas como el logotipo de Instagram, pero exagerar y terminar acercándose un poco más a este diseño web de MTV deliberadamente feo.
Fuente de luz y forma
Incluso después de determinar la combinación perfecta de colores, es importante integrarla en el diseño. Primero, algunas de las cosas básicas:
Los gradientes deben estar orientados hacia sus envases, orientados hacia la planta y mostrar dónde deben estar alineados los ojos del usuario. Para polígonos x lados (cuadrados, triángulos, rectángulos, pentagonales, etc.), esto normalmente significa una trayectoria lineal; las áreas más redondeadas requieren una dirección radial.
Algunos diseñadores de interfaces de usuario quieren asignar una fuente de luz imaginaria a la página en la que están trabajando, igual que un artista pintando un paisaje. Esto les ayuda a decidir cómo alinear el gradiente – el lado más brillante debería, por supuesto, estar 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 a otros elementos gráficos de la página y servir como punto focal.
Observe la fuente de luz en la esquina superior izquierda para la interfaz de usuario de esta aplicación de música.
Cuando todos estos elementos individuales se seleccionan correctamente, se funden en un bello y deslumbrante gradiente. Y eso es una gran ventaja para la interfaz en su conjunto.
¿A dónde van los gradientes a partir de aquí?
La integración de un degradado en su interfaz de usuario es una forma excelente y fácil de modernizar su plataforma. Siguiendo los consejos aquí descritos, puede asegurarse de que está utilizando correctamente esta potente herramienta de diseño. Para resumir brevemente:
- Elija los tonos de base correctos con una combinación de su marca y la rueda de color
- Si tiene dudas, busque inspiración en el mundo natural
- Acelerar las cosas añadiendo más matices, pero tenga cuidado de no exagerar
- Elija la forma y la posición correctas dentro de su superficie. Recuerda: ¡Nuestros ojos siguen el gradiente!
.
.
.
Como con todas las tendencias de diseño de interfaz de usuario, los degradados pasarán de moda y serán derribados por la próxima gran cosa. Pero ahora mismo, son un pilar del diseño de próxima generación de UI.