Tendencias en Diseño Web para 2019

En 2019 se espera que proliferen algunas tendencias que vienen a romper con algunas pautas establecidas y muy fuertemente arraigadas entre la Comunidad de Diseñadores a lo largo de los últimos años. A continuación, vamos a repasar las principales  propuestas que se están popularizando en cuanto a Diseño Web y que veremos cada vez más en las páginas web maquetas en los próximos meses. Sin duda, evolucionarán en paralelo a las tendencias de Desarrollo Web que analizamos hace sólo unos días.

Animaciones

La animación de componentes en sitios web es más fácil de incorporar que nunca. Gracias a CSS, además, alcanza sus mejores cotas de rendimiento (frames por segundo de las animaciones). En 2019 y también en los próximos años, un sitio sin un alto componente de animación parecerá un sitio del pasado. Obviamente, no nos referimos a las animaciones sin sentido popularizadas hace más de una década con esas introducciones hechas en Flash, sino a transiciones suavizadas al operar con las interfaces de usuario del sitio web.

En este tema hemos profundizado con algunos tutoriales, como  ¿CSS3 o JavaScript y jQuery? ¿Qué utilizo para animar nuestra página web?¿Canvas o SVG? Cómo animar con CSS3 usando sprites y JavaScript.

Formas

El uso de formas para decoración de sitios se está popularizando. Las formas nos permiten insertar color en los sitios, romper la rigidez de las rejillas y pueden encajar con cualquier diseño. Con mayor frecuencia veremos formas suavizadas, curvas y naturales, que ayuden a transmitir una sensación de movimiento. En este punto, si además nos beneficiamos de las ventajas del SVG, podemos incorporar fondos adaptables a cualquier tipo de pantalla, con máxima calidad y un peso muy reducido.

También hemos publicado diversos artículos prácticos con recursos que te resultarán útiles en este tema: Bordes redondeados con CSS3,  Cómo crear formas avanzadas con border-radius o Cómo crear un bocadillo de cómic con CSS.

Degradados y altos contrastes

Si hace poco el color plano copaba la presencia en la web, hoy el degradado está tomando mucha fuerza. Por un lado, debido a las tecnologías que nos permiten incorporarlo a muy bajo coste, como SVG y CSS, pero también como recurso de diseño diferenciado, capaz de atraer la atención del usuario, y como vía de incorporar color. En paralelo, también veremos cómo proliferan los diseños de alto contraste, ya sea con páginas web maquetadas en blanco y negro o basados en gamas monocromáticas, con fondos negros y fotografías en blanco y negro con mucho contraste en los elementos, además del uso de tipografías con serifa para títulos o elementos textuales de gran tamaño.

Hace ya tiempo que analizamos las ventajas de utilizar SVG en nuestros desarrollos web, comparamos los diferentes formatos de imagen con los que podemos trabajar y explicamos cómo gestiona HTML los colores.

Diseños pensando en los móviles

Desde hace tiempo la navegación móvil supera a la de ordenadores personales. Es por ello que seguiremos viendo sitios adaptables, pero ahora altamente centrados en la parte móvil. Lo que ya se conoce como Mobile First está evolucionando en sitios cuyo aspecto es similar a una aplicación móvil, incluso en el ámbito de pantallas amplias. Este factor además se potencia porque Google está posicionando mejor los sitios que priorizan la experiencia de usuario en móviles.

Te recomendamos consultar nuestro artículo Mobile First, por favor o cualquiera de los muchos que hemos escrito sobre el diseño responsive.

Fondos basados en vídeo

Los hemos visto incorporarse a la caja de recursos de los diseñadores recientemente y esperamos que se popularicen aún más. Los vídeos son capaces de comunicar un mensaje efectivamente. En los pocos segundos que dura el vídeo es capaz de transmitir información, e incluso sentimientos a los usuarios, algo que usando texto sería mucho más difícil de alcanzar.

Sobre este tema te pueden resultar interesante el artículo WebM, el formato de vídeo Open Source para las necesidades multimedia de la Web actual y el tutorial Cómo insertar vídeos de fondo en nuestra página web.

Alternativas a Material Design

Durante los pasados años hemos visto cómo se han establecido casi como un estándar algunas guías de diseño creadas por grandes actores. El más claro ejemplo es Material Design de Google, inicialmente presentado para las aplicaciones Android, pero que ha calado fuerte en el ámbito de la web. No cabe duda que seguiremos observando más y más sitios basados en estas líneas de diseño, pero por otra parte encontramos sectores cansados de encontrar todos los sitios iguales, en áreas de contenido dispares como los viajes o el comercio electrónico, por ejemplo.

Actores de relevancia como IBM han presentado nuevas guías de diseño que podemos conocer y usar, como Carbon Design o Fluent Design.  Faltará ver si la comunidad de diseñadores crea frameworks CSS asombrosos como los que encontramos para Material Design, como el caso de Materialize CSS.

En la sección de Diseño Web de este blog, encontrarás muchos recursos que te resultarán útiles.