5 tendencias de UI para 2020

5

Como con la moda, el diseño web también tiene sus tendencias y van cambiando cada año. Es imprescindible mantenerse al día sobre las corrientes de diseño, con tal de destacar entre la multitud y cautivar a la audiencia, que cada vez es más exigente.

Dividiremos las tendencias en dos vertientes: interfaz de usuario (UI) y experiencia de usuario (UX). Hoy, empezamos con la primera. Aquí encontraréis las tendencias de diseño de interfaz y estilos visuales que van a estar en auge este 2020.

Gigantismo

Lo vamos a ver tanto en las imágenes y vídeos como en las tipografías. Lo más frecuente va a ser el uso de vídeos que ocupen toda la pantalla (full-width), sobre todo en las páginas de inicio. Es una muy buena forma de impactar en el usuario.

También afectará a las tipografías. Veremos tipografías fuertes y presuntuosas, en negrita y que ocupen gran parte de la pantalla. El mensaje es claro y es el protagonista. En muchos casos, incluso, los titulares y encabezados estarán pisando las fotografías. ¡Así que vete olvidando de Arial 12px, porque se avecinan gigantes!

Web Ever & Ever

Dark mode (modo oscuro)

Los diseños web en modo oscuro no solo hacen a una web más moderna, sino que son agradables a la vista y hacen que los colores y los elementos de diseño destaquen más.

A veces, las tendencias de diseño web más impresionantes visualmente tienen principios prácticos. Los temas oscuros son mejores para las pantallas OLED, ya que ahorran energía y prolongan la vida útil de la pantalla, pero esa utilidad no impide que se vean bien. Los fondos oscuros mejoran la visibilidad de otros colores de acento para un diseño verdaderamente dinámico.

Además, la estética del diseño del modo oscuro también encaja perfectamente con otras tendencias de diseño predominantes de 2020 que incluyen esquemas de colores oscuros y cambiantes combinados con neones brillantes, así como estilos futuristas oscuros y distópicos.

Cabe destacar, que el modo oscuro hasta ahora estaba relacionado con un producto premium. Pero ahora, ya no debemos asociar estos colores a este tipo de producto de alta calidad, pues se aplica en entornos mucho más tecnológicos y modernos.

Instagram

Colores vivos y brillantes

Este año veremos valientes combinaciones de colores, que se usan estratégicamente para hacer que los diseños salten de la pantalla. El diseño web se está volviendo más audaz, utilizando neones que brillan en la oscuridad y colores altamente saturados en combinación con sombras más oscuras y apagadas para dar una sensación mucho más luminosa.

Paletas de colores mucho más vivas y brillantes, junto con el (ya bastante usado) degradado. Quedan atrás los tonos apagados para dar la bienvenida a una explosión de color. Sin embargo, siempre utilizándolo con cabeza y sin abusar, para no saturar al usuario.

Digital Design Days

Efectos 3D, sombras suaves, capas y elementos flotantes

Las imágenes en 3D siempre han creado ese efecto WOW en los usuarios que todos queremos en nuestra web; lo que detuvo esta tendencia fue la tecnología y el precio. Poco a poco, la tecnología empieza a estar en un lugar donde puedes diseñar en 3D sin un equipo de nivel de la NASA, abriendo las puertas a más y más diseñadores.

Hasta que la realidad virtual se vuelva más convencional y rentable, el 3D hiperrealista que a menudo ocupa toda la pantalla es la mejor manera de crear una experiencia inmersiva. Eso no es solo una ventaja para las imágenes, sino también para UX: el diseño interactivo en 3D alienta a los usuarios a quedarse más tiempo. A medida que avance 2020, se espera ver diseños web 3D más inmersivos que atraigan a los usuarios y rompan visualmente los límites entre el espacio digital y la realidad.

Dogstudio

Si te gusta el efecto 3D y crear profundidad en la web pero de una manera más atenuada tienes la opción de usar sombras. Las sombras suaves y los elementos flotantes agregan interés y profundidad y le dan un aspecto «3D Lite». Y no se tiene que usar solo en los gráficos; también puedes usar este efecto en texto y fotos.

Llevando los principios del Material Design un paso más allá, los diseñadores pueden agregar un poco de dinamismo adicional a los diseños 2D con sombras suaves y elementos de capas uno encima del otro para crear una mayor profundidad. Estos efectos le dan al diseño una sensación de ligereza, como si los elementos estuvieran flotando unos sobre otros, un fuerte contraste con el diseño plano impenetrable clásico donde las capas parecen, bueno pues eso, planas.

Fruition lab

Animaciones y microinteracciones

Es el año de las animaciones, microinteracciones y gifs animados. Veremos bloques que aparecen, títulos que se mueven, ilustraciones dinámicas, transiciones entre páginas, el famoso efecto Parallax o efectos al pasar el ratón por encima. Todos estos elementos aportan movimiento a la página, añaden valor y personalidad a la marca.

La gente ignora el diseño que ignora a la gente

Frank Chimero

Escribe el primer comentario

Sobre el autor

Laia Olivares

Diseñadora UX/UI en Grupo Planeta. Máster en Diseño y Dirección de proyectos para Internet de ELISAVA. Curso tècnico de HTML5, CSS3, JavaScript en Seeway Barcelona.

Eloy Urarte

Lead UX & CRO | MA Degree Lecturer. Crítico del “vale más una imagen que mil palabras”. Enamorado del storytelling y la experiencia de usuario.

¿Hablamos?

Si quieres conocerme, insultarme o incluso contratarme...