4 formas en que los colores vibrantes mejoran el diseño de la interfaz de usuario
El color es una de las herramientas más poderosas en el juego de herramientas del diseñador. Puede llamar la atención, establecer un estado de ánimo, influir en las emociones, percepciones y acciones de los usuarios. Con la presencia persistente de Flat and Material Design, el color tiene aún más prominencia en el diseño de UI en la actualidad. Los colores brillantes son igualmente adecuados tanto para diseños de dibujos animados divertidos centrados en el entretenimiento como para los estilos elegantemente minimalistas centrados en soluciones empresariales. Esta versatilidad hace que los colores vibrantes sean una de las mayores tendencias de diseño de interfaces de usuario de 2017.
El atractivo de la tendencia del color vibrante es que se puede aplicar de muchas formas y estilos diferentes al diseño. En este artículo, analizaremos más a fondo cuatro tendencias de combinaciones de colores y analizaremos algunos ejemplos inspiradores que las implementan de manera muy efectiva.
1. Monótono
Una de las formas más populares de usar colores vibrantes en su diseño es una técnica llamada monótona. Las paletas monótonas incluyen un solo color con una mezcla de tonos y tintes. Monotone es bastante fácil de crear: piense en el color que mejor se adapte a su mensaje y considere la cantidad de variación que desea entre los tonos.
Mejorar la legibilidad
Monotone ayuda a establecer una base sólida para el contenido en primer plano, cuidando la legibilidad. Junto con una tipografía espectacular, los esquemas de colores monótonos pueden crear una experiencia verdaderamente memorable.
Sydneystockhom usa colores llamativos para crear una apariencia memorable de una manera muy simple
2. Duotono
Como sugiere el nombre, el duotono es una imagen compuesta por dos colores. Pueden ser dos tonos del mismo color o dos colores contrastantes. La técnica que alguna vez fue un elemento básico de impresión ha encontrado una nueva vida en línea. Gracias a Spotify, el duotono está ganando popularidad casi todos los días.
Crea una atmósfera
Duotones te permite inyectar cualquier imagen con los atributos emocionales de cualquier color. Recuerde que los diferentes colores evocan diferentes emociones. La combinación de colores suave y modesta es capaz de crear una atmósfera seria. Por ejemplo, en Holm Marcher & Co Por ejemplo, cada detalle intenta contribuir a la atmósfera profesional, y las imágenes de fondo no son una excepción.
Mientras que una combinación de colores brillantes puede crear una sensación de felicidad. Diseño de New Deal llama la atención gracias a una atrevida elección de color. Crean un ambiente agradable y crean un estado de ánimo positivo.
Incrementar la legibilidad
Duotone es capaz de dar mucho contraste al texto. Ajusta las variaciones de color en una imagen para que el texto se pueda colocar usando un solo color en casi cualquier lugar de la imagen.
3. Gradientes
Los degradados han regresado a las GUI, esta vez utilizando colores complementarios de alto contraste. Los degradados modernos pueden incluir varios colores, irradiar desde el centro, provenir de una esquina o caer horizontalmente.
Crea una apariencia moderna
Los degradados regresaron y dieron nueva vida a la tendencia de colores brillantes. Combinados con una paleta de colores planos, pueden evocar sentimientos de modernismo. Con un solo color, Zample utiliza un efecto degradado en su fondo sin caer en tonos apagados.
Al utilizar uno de los colores brillantes y saturados asociados con Material Design, puede evocar sentimientos de modernismo.
Haga que el diseño sea agradable a la vista
Los degradados pueden mejorar la comunicación visual. La transición de naranja a rosa en Symodd’s El siguiente ejemplo proporciona profundidad y contraste a la interfaz y crea algunos efectos visuales llamativos. El cambio de claro a oscuro sigue los patrones naturales de escaneo del ojo humano que se mueven desde la parte superior izquierda de la página hacia la parte inferior derecha.
La página de inicio de Symodd presenta un fondo degradado completo de naranja a rosa. Es un degradado sutil ya que los dos tonos no son muy diferentes entre sí, lo que lo hace agradable a la vista.
Úselo como acento
Si bien el degradado se usa a menudo como fondo para las páginas, también pueden funcionar en lugares más pequeños. Considere usar degradados como acento en la navegación, para imágenes secundarias o para tipos específicos de contenido. Lo bueno de las áreas más pequeñas de degradado es que tienes más libertad para jugar con esta técnica. Y cuando se usa en espacios más pequeños, puede ser visualmente interesante jugar con múltiples pares de colores, al igual que Bloomberg hizo en el ejemplo siguiente.
Bloomberg usa gradiente para el ticker Latest News.
4. Superposiciones
Superponer es filtrar una imagen a través de una “lente” de color. Las imágenes con superposiciones de color han sido una opción de diseño popular durante mucho tiempo porque es bastante fácil crear este efecto: simplemente cubre una imagen o video con un cuadro de color semitransparente.
Centrar la atención del usuario
La superposición de efectos puede ayudar a los usuarios a centrarse en determinados elementos de diseño. Sin embargo, cuando utilice un solo color como superposición, piense en el grado de saturación y transparencia del color. Las combinaciones de colores intensos (menos transparencia y más saturación) ponen más énfasis en el color en sí:
Superposición de color utilizada por Contornos pone más énfasis en la imagen
Conclusión
Es difícil encontrar una técnica de diseño con la que sea más divertido jugar que el color. Los efectos de color pueden ser dramáticos, impresionantes e incluso serenos. No tenga miedo de salir de su zona de confort cuando se trata de trabajar con colores. Si eres un fanático de los tonos brillantes y atrevidos o prefieres un blanco y negro más minimalista, lo único que debes recordar: no hay colores incorrectos, lo que más importa es cómo los usas.
