Las tendencias en diseño web 2020

Si lo que quieres es estar al día y empezar el año con los deberes bien aprendidos este artículo lo he escrito especialmente para ti. Voy a desgranar las tendencias en diseño web para 2020 que lo van a petar.

Si lo lees atentamente es posible que te conviertas en un experto en tendencias en diseño web, al menos para el año 2020.

Puedes ver el post ampliado en Code Barcelona, donde he analizado en más profundidad cada unos de los puntos: Tendencias en diseño web para 2020

Tendencias en diseño web para 2020, be ahead

Tipografías aún más grandes

Una de las principales tendencias en diseño web para 2020 será sin duda el uso de tipografías de gran tamaño totalmente integradas en el diseño web.

Es un recurso que no solo encontraremos en titulares sino que estará presente en todo el texto.

Las pantallas de gran formato están por todas partes, con sus grandes prestaciones y su bajo precio hacen posible que algunos diseños se puedan beneficiar de este recurso.

¿En qué diseño web puedo aplicar este recurso?

  1. Cuando el diseño sea muy visual y de gran impacto.
  2. Diseños web con pocas imágenes y quieras reforzar el mensaje sin cargar de texto la web.
  3. Diseños web dirigidos a público atrevido.
  4. Diseños web dirigidos a público con pantallas grandes.

 

Recuerda que:

 

  1. Tendrás que ajustar los tamaños a las distintas resoluciones de pantalla creando excepciones de pantalla responsive.
  2. Tendrás que prestar mucha atención a la versión de teléfono móvil responsive.

 

Páginas web que incorporan esta tendencia

Rogue Studio

Link al website

Diseño web en el que veréis claramente el uso de esta tendencia en diseño web, aquí el autor ha usado tipografías que van desde grandes a gigantes.

 

Granyon Summer Party

tendencias-diseno-web-2020-tipografias-2

Link al website

Otro ejemplo del uso de tipografías extragrandes en un diseño web con un resultado perfecto.

 

Team Elite Kickboxing

tendencias-diseno-web-2020-tipografias-2

Link al website

Un último ejemplo del uso de grandes tipografías en un diseño web.

 

Contrastes, colores negativos y colores estridentes

tendencias-diseno-web-2020-contrastes-1

Este recurso que tiene un largo recorrido lleva ya unos cuantos años apareciendo en tendencias en diseño web y cada vez se está aplicando de mejor forma.

Los contrastes y los colores y formas negativos van a pegar fuerte durante el año 2020, año en el que veremos como se ha pulido este recurso de diseño web hasta la perfección.

¿En qué diseño web puedo aplicar este recurso?

 

  1. En diseños web muy visuales.
  2. Dirigidos al público más atrevido.
  3. Quieras dejar a la gente con la boca abierta.

 

Recuerda que:

 

  1. Los proyectos corporativos para empresas conservadoras todavía no están preparadas para esto.
  2. Utiliza este recurso de forma coherente con la imagen de la empresa y sus colores.
  3. Mantén la armonía visual del conjunto de colores.

 

Páginas web que incorporan esta tendencia

Ninja guru

tendencias-diseno-web-2020-contrastes-2

Link al website

En este diseño web podemos apreciar este recurso de forma excelente. Se han utilizado colores negativos y contrastes estridentes para un diseño web de 10.

 

Festa da Francofonia 2019

tendencias-diseno-web-2020-contrastes-3

Link al website

En este ejemplo hay colores vivos, contrastes y elementos geométricos en movimiento, un diseño web que perfectamente podrá ganarse un puesto entre los mejores diseños web de 2020.

 

Kombu

tendencias-diseno-web-2020-contrastes-4

Link al website

En el diseño de esta página web podemos ver el contraste del packaging de la marca, además, podemos ver el efecto «wavy» para las líneas diagonales que coinciden y guardan coherencia con toda la identidad del branding.

 

Experiencia mobile, aún más importante

tendencias-diseno-web-2020

Ya nadie tiene dudas que el responsive web design debe estar presente en todos nuestros diseños web ya que el diseño web adaptable es un «must» de las tendencias en diseño web desde que se dieron cuenta que la mayoría de los usuarios entran a Internet a través de sus dispositivos móviles o tablets.

¿En qué diseño web puedo aplicar este recurso?

 

  1. En todos sin excepción.

 

Recuerda que:

 

  1. Hay que cuidar la velocidad de carga del contenido a todos los dispositivos.
  2. Las infraestructuras todavía no están preparadas para cargar vídeos en las versiones móviles.
  3. Tendrás que optimizar las imágenes.
  4. Usa el menú burguer.

 

Websites que incorporan la tendencia

Nicholas Munt

tendencias-diseno-web-2020

Link al website

El diseño de esta página web utiliza ajax para cargar la página y el resultado es muy mobile friendly ya que tiene una navegación muy App like.

 

Salmoon & Sons

Link al website

En este ejemplo la versión para móvil destacamos el slider con una funcionalidad swipe totalmente mobile friendly.

 

Volia

tendencias-diseno-web-2020

Link al website

Este ejemplo viene muy bien para ver el uso de grandes tipografías en la versión mobile y el uso de menú burguer.

 

Cursores y scrolls personalizados

tendencias-diseno-web-2020-scroll-cursores-1

Otra tendencias en diseño web que lo va a petar durante el 2020 es la incorporación como parte del diseño de cursores y scrolls personalizados, el resultado es una experiencia de usuario mucho más personal ya que incorporan alguna interacción.

¿En qué diseño web puedo aplicar este recurso?

 

  1. En un diseño web con un extra de personalidad.
  2. Para usuarios que tengan muchas horas de vuelo online.

 

Recuerda que:

 

  1. Antes de lanzar la web online tendrás que comprobar que el scroll funcione en distintos navegadores.
  2. Los dispositivos móviles acostumbran a tener problemas con los scroll, así que tenlo en cuenta cuando plantees el diseño.

 

Websites que incorporan la tendencia

Aluxion

tendencias-diseno-web-2020-scroll-cursores-2

Link al website

Ejemplo en el que vemos un puntero personalizado que forma dos circunferencias, el cursor se desplaza con un pequeño delay con un hover muy atractivo. Además vemos el scrollbar personalizado.

 

Joseph Berry

tendencias-diseno-web-2020-scroll-cursores-3

Link al website

Otro ejemplo de aplicación de esta tendencia en diseño web 2020 similar al anterior.

 

Matt VBRG

tendencias-diseno-web-2020-scroll-cursores-4

Link al website

En este diseño web el cursor interactúa con todo el contenido de la página web, cambia de colores los elementos y aplica efectos muy atractivos a las imágenes.

 

Canvas y elementos 3D con Three.js

tendencias-diseno-web-2020-3d-3

El uso de Canvas en los diseño web más trendy’s es una tendencia en diseño web que se ha posicionado con firmeza en este listado. Y es que con Canvas podemos crear, junto con OpenGL, experiencias que literalmente se salen del simple HTML.

¿En qué diseño web puedo aplicar este recurso?

 

  1. Para diseños web en los que queramos crear un efecto de profundidad.
  2. En diseños web con objetos 3D con los que interactuar.
  3. En diseños web de gran impacto.
  4. Público atrevido.

 

Recuerda que:

 

  1. Un gran poder requiere de una gran responsabilidad.
  2. No todos los dispositivos están preparados para este recurso, así que tendrás que prestar especial atención.

 

DMC2019

tendencias-diseno-web-2020-3d-2

Link al website

En este diseño web se ha utilizado Three.js para su creación con un resultado muy especial.

 

Hack Wired

tendencias-diseno-web-2020-3d-1

Link al website

Utilización de este recurso para crear un efecto de chicle en movimiento y cambio de forma que interactúa con el cursor.

 

Vladimir Gruev

tendencias-diseno-web-2020-3d-4

Link al website

Este desarrollador web ha optado por usar la tecnología Canvas para mostrar todo su potencial creativo y ofrecernos una experiencia de navegación totalmente vanguardista.

 

Canvas y efectos de distorsión en imágenes

tendencias-diseno-web-2020-distorsiones-1

Esta tendencia en diseño web para 2020 está anidada dentro de la anterior ya que aprovecha la tecnología Canvas para generar distorsiones en las imágenes que pongamos en el diseño web. El resultado es muy transgresor.

¿En qué diseño web puedo aplicar este recurso?

 

  1. Para  diseños web muy creativos.

 

Recuerda que:

 

  1. Igual que antes: un gran poder comporta una gran responsabilidad.
  2. Deberás prestar atención a las versiones en distintos dispositivos.

 

Websites que incorporan la tendencia

Francesco Michelini

tendencias-diseno-web-2020-distorsiones-2

Link al website

Este developer nos muestra como se utiliza este recurso tan rompedor y su resultado.

 

Julio Cesar

tendencias-diseno-web-2020-distorsiones-3

Link al website

Otro ejemplo de la utilización de Canvas para distorsionar las imágenes con un resultado de gran impacto y creatividad.

 

Violence

tendencias-diseno-web-2020-distorsiones-4

Link al website

Último ejemplo de este listado con las tendencias en diseño web de 2020 en el que el efecto de distorsión de las imágenes es muy «grunge».

Conclusiones y resumen para vagos

Tal y como habréis adivinado las tendencias en diseño web de 2020 cada vez tienen más en cuenta la personalización de los diseños y prestan especial atención a la experiencia de los usuarios.

Todos somos especiales y queremos que nos hagan sentir así.

Post completo

Puedes ver el post ampliado en Code Barcelona, donde he analizado en más profundidad cada unos de los puntos: Tendencias en diseño web para 2020

Soy diseñador web, freelance. En Barcelona, Maresme.
Desde ahí trabajo para clientes de todo el mundo.