10 Tendencias Ui (interfaz de usuario) para 2017

El mundo de la web y el diseño de interfaz de usuario está en constante cambio, y puede ser difícil mantenerse al día en la cima de las tendencias en constante evolución y los desarrollos. Seleccionamos 10 de las tendencias más importantes que creemos que deberías implementar en 2017 y por qué.

01. Vídeo inmersivo en pantalla completa

tendencias ui

Coffee Campos utiliza tipografía sencilla en conjunto con un video dinámico de pantalla completa para crear un mensaje simple pero fuerte


El viejo dicho “una imagen vale más que mil palabras” sigue siendo cierta hoy en día, y en el mundo de diseño de interfaz de usuario es todavía una gran manera de captar rápidamente la atención del usuario. La visión se dice que es la más fuerte de todos los sentidos humanos, y una imagen única es rápidamente capaz de resumir el mensaje y el tono de la voz de una manera más eficiente y sucinta.
 
Las imágenes han sido durante mucho tiempo un elemento básico de la interfaz de usuario y el diseño web, y su éxito ha pavimentado lentamente el camino para su sucesor natural: el video. Estamos viendo video utilizado cada vez más en diseño digital, y por una buena razón. Cuando la fotografía tradicional es estática, el video es dinámico. Es genial para captar la atención de los usuarios y como un medio de narración visual.
 
Las imágenes convencionales no van a desaparecer en corto plazo, pero una cosa es segura – 2017 y más allá estará lleno de videos más ricos, interactivos y de pantalla completa como un medio de compromiso y narración de cuentos.
tendencias ui

La revista holandesa KLM iFly50 se basa en un enfoque más estilizado, utiliza un video de doble exposición para intrigar a los usuarios, alentándolos a continuar explorando el sitio

¿Por qué usarlos?

Video, (así como grandes y hermosas imágenes de pantalla completa), es un medio de gran alcance utilizar para atraer a los usuarios y establecer rápidamente el tono. Ambos medios son muy versátiles en su aplicación, trabajando especialmente bien como dispositivos de fondo acompañados de tipografía.

02. Contenido en una página con scroll

tendencias ui

National Geographic es un gran ejemplo de contenido que cubre prácticamente cada punto descrito en este post


El desplazamiento no es de ninguna manera un mecanismo nuevo, y definitivamente no es una “tendencia” tanto como una función fundamental para navegar tanto en la web como en las aplicaciones. Sin embargo, lo que estamos viendo cada vez más es la implementación del contenido de larga duración y largo formato en dispositivos de escritorio y dispositivos de mayor pantalla para entregar contenido.
 
A medida que los usuarios se han vuelto más cómodos desplazándose para encontrar contenido en dispositivos de pantalla más pequeños en los últimos años, más diseñadores han comenzado a implementar contenido de forma larga y interfaces desplazables en pantallas más grandes.
 
Esto permite a los usuarios escanear muy rápidamente grandes volúmenes de contenido, en un solo movimiento fluido sin ser removido de la experiencia por navegación o interrupción. Es un mecanismo versátil que funciona bien en todos los dispositivos y medios de contenido, desde periodismo de larga duración e historias de noticias, hasta páginas de destino y experiencias interactivas.
tendencias ui

Combinando mapas, video, imágenes y animación, National Geographic crea una experiencia única, fluida, inmersiva y variada que le permite mantenerse comprometido

¿Por qué usarlos?

El scroll largo es un gran mecanismo para implementar cuando se trata de contar una narración, o estructurar el contenido de una manera lineal para guiar al usuario. Es un mecanismo versátil, ideal para crear contenido inmersivo, transparente y de forma larga que permite a los usuarios consumirlo de una manera fluida, independientemente del dispositivo que estén usando.

03. Gradientes y colores vivos

tendencias ui

Spotify es un gran ejemplo de una gran marca experimentando con colores y gradientes en negrita


2013 trajo el diseño plano (flat design) que posteriormente se extendió como un reguero de pólvora a través de la comunidad de diseño, silenciando colores y eliminando todos los elementos superfluos en su estela. Aunque no sin sus defectos, el diseño plano era una filosofía práctica que todavía tiene valor hoy en día.
 
Se creía en la simplificación de las interfaces de usuario a sus elementos más básicos y funcionales para lograr una experiencia de usuario más refinada y eficiente.
 
Aunque funcional y bueno en sus intenciones, el diseño plano rápidamente hizo que la web se convirtiera en un paisaje muy similar. Las marcas y los diseñadores de todas partes saltaron en el carro, siguiendo los fundamentos de la guía, que para muchos, conducen al contenido que era demasiado similar y vacío de la personalidad.
 
2016 vio los grilletes del diseño plano empezar a aflojarse; como más marcas y diseñadores comenzaron a centrarse una vez más en la personalidad, la experimentación con paletas de colores vivos y gradientes en lugar de los tonos silenciados simples, pero aburridos utilizados anteriormente. Gradientes y colores vivos también se están implementando en mucho más que la tradicional interfaz de usuario y diseño web, como el rebrand de Instagram (controvertido). Si son a tu gusto o no, espera ver un aumento en el uso de “out-there”, paletas de colores y colores de gradiente de transición; las tendencias ui empujan a la personalidad!
tendencias ui

Los gradientes cambiantes de Spotify crean una estética amistosa y juguetona, imitando el tono subyacente de la pieza

¿Por qué usarlos?

Colores y gradientes vivos son ideales para inyectar energía, calidez y dinamismo en un proyecto para que se destaque de la multitud. Se valiente y experimenta con sus paletas de colores, pero asegúrate de que siempre trabajas el tono de tu contenido y no en contra.

04. Ilustraciones

tendencias ui

Dropbox es un gran ejemplo de una marca con un estilo ilustrativo fuerte. El rough, dibujado a mano y renderizado, es ligero y juguetón, creando una conexión personal que infunde un sentido de confianza


Las ilustraciones ofrecen un sentido de la personalidad y del carácter, que pueden ser de otro modo difíciles de alcanzar con la fotografía tradicional. Las ilustraciones a medida que trabajan en línea con la identidad de una marca le permiten crear cuidadosamente un lenguaje visual que capte verdaderamente su personalidad y su tono de voz, útil para inculcar un sentido de autenticidad y confianza en los usuarios y clientes.
 
Las ilustraciones son también un medio versátil. Algunas marcas pueden optar por elegantes ilustraciones basadas en líneas para lograr esa apariencia nítida y sofisticada, mientras que otros pueden optar por estilos hechos a mano para colocarlos como elementos más divertidos y cercanos. Las ilustraciones abren más avenidas para la dirección creativa, aún más cuando se animan o se utilizan junto con la fotografía y la tipografía.
tendencias ui

La luz, el estilo ilustrativo suave y la estética de PayPlan ayudan a posicionar la marca como amigable y cariñosa, apelando a las necesidades de sus usuarios

¿Por qué usarlos?

Las ilustraciones pueden ser hechas a medida para crear personalidad y autenticidad, dos componentes vitales que llevan un largo camino en la creación de una conexión significativa con los usuarios. Son super versátiles en su aplicación y trabajan fantásticamente con muchas de las otras tendencias de la UI discutidas dentro de esta pieza.

Romper la grilla o caja

tendencias ui

Red Collar Digital es un gran ejemplo de interfaz de usuario que rompe la caja o grilla


La caja ha sido durante mucho tiempo un santo grial para los diseñadores, proporcionando una base para el diseño que asegura la consistencia, el equilibrio, el ritmo y el orden. Es una herramienta importante en el diseño de la experiencia del usuario, ya que proporciona un nivel de familiaridad para los usuarios, lo que les permite navegar intuitivamente a través de un sitio o una aplicación de una manera natural.
 
Sin embargo, tan importante como es la caja, también puede ser restrictiva y rígida, lo que limita las opciones creativas para los diseñadores. En un intento por crear experiencias digitales que rompen con la tradición, muchos diseñadores de la web y de la interfaz de usuario están experimentando con el diseño al “romper la cuadrícula”.
 
Al alejarse de la caja y de las estructuras rígidas de línea de base, los diseñadores están creando sitios, aplicaciones e interfaces que son más intrigantes y experimentales. Se abre un nuevo conjunto de posibilidades creativas, lo que permite a los diseñadores crear piezas de declaración real a través del uso de capas, profundidad, movimiento y obvios puntos focales.
tendencias ui

Al igual que Red Collar Digital, Sergey Makhno Arquitectos usa ambas capas de tipografía, imágenes e incluso vídeo para crear una experiencia más suelta y libre de fluidez

¿Por qué usarlos?

Romper la cuadrícula proporciona opciones más creativas. Su flexibilidad puede crear una sensación de fluidez y libertad, de lo contrario inalcanzable cuando se pega a una rejilla. Sin embargo, ser muy considerado en su aplicación al hacerlo. Todas las interfaces tienen que ser en primer lugar fácil de usar, y su enfoque de diseño siempre debe reconocer esto, de lo contrario puedes tener algunos usuarios muy confundidos! También tendrás que considerar cómo funciona en pantallas más pequeñas si está diseñando de manera adaptable.

Tagged with: , , , , ,