Tendencias en diseño web para 2018

No puedes crear una web y tenerla con el mismo diseño durante años mientras la competencia renueva la suya siguiendo las tendencias de diseño web. Tampoco se trata de centrarse en seguir todas las tendencias cada año, sino en ver hacia dónde van los gustos y las modas y ver cómo se pueden adaptar a tu página web. Estas son las Tendencias en diseño web para 2018.

Cinemagraphs

Una imagen animada que sale combinando fotografía y vídeo. La mayoría de la imagen es estática, pero algún elemento de la misma tiene movimiento. En el ejemplo todo es una fotografía normal excepto el agua de cascada que se mueve. Puedes ver el efecto entrando en la web, la imagen está enlazada.

Imagen cinemagraph

El fin de esta herramienta es sorprender al usuario, que se encontrará ante una imagen supuestamente normal que de repente se empieza a mover.

Full screen vídeos

En este caso, el fondo de la web es un vídeo que ocupa toda la pantalla del navegador. Los menús de la página, están sobrepuestos en el mismo vídeo. No quedan espacios en blanco en la pantalla. Estas web son más envolventes y atractivas para el usuario.

Micro-interacciones

Son pequeñas interacciones entre un dispositivo o web y el usuario. Puedes mejorar la experiencia de los visitantes a tu web con ellas.

Aunque creas que no sabes lo que es, las usas todos los días, un ejemplo es el botón para poner en silencio un smartphone; cuando lo pulsas el móvil queda sin sonido y sale un icono en la pantalla que te dice que el teléfono está en silencio.

Tienen cuatro fases:

  • Disparador: es el botón para activarla.
  • Regla: lo que ocurre después, la función del botón.
  • Feedback: es la respuesta que da el dispositivo o la web en este caso.
  • Bucle: es el tiempo que dura y si se repite.

Un ejemplo son las imágenes que puedes comparar con un simple movimiento de ratón, así a un lado de la barra queda una imagen y al otro lado la otra imagen. Puedes moverla para ver más de un tipo o del otro.

Imagen microinteracción

Animaciones en scroll

Esta técnica permite que el usuario de tu web se desplace horizontalmente en ella y los contenidos se vayan mostrando de una forma animada. Hace la visión de tu website más divertida y amena para los posibles clientes.

La empresa Apple es una experta en este tipo de recursos informáticos.

Imagen animación en scroll

Parallax

Si ​accedes a una web, haces scroll y ves que el fondo se mueve a otra velocidad que el contenido puedes estar seguro de que el diseñador de esta página ha utilizado la técnica parallax.

Imagen parallax

Es un diseño que ya se vió mucho en 2017 y que utiliza distintas capas que te ayudan a crear en tu website un pequeño efecto de profundidad y cada vez que los usuarios se desplacen por la pantalla verán partes del fondo que antes no se veían.

PWA

​Son las siglas en inglés de aplicaciones web progresivas. ¿Por qué progresivas? Porque son aplicaciones, que cambian su funcionalidad según la capacidad del dispositivo en el que se estén ejecutando.

Esto quiere decir que si un usuario de tu web la abre desde un smartphone, usará las funciones necesarias para que el contenido se vea óptimamente en él; pero si otro usuario la abre en un ordenador, la web se adaptará y se optimizará a ese dispositivo.

Diseño tipográfico

La tipografía en sí y la ordenación de la misma, tiene mucho impacto en la experiencia de tus clientes y usuarios. Cuando se diseña un sitio web, lo ideal es que la tipografía sirva para complementar el diseño del mismo.

Imagen diseño tipográfico

Por supuesto el diseño tipográfico también debe de estar equilibrado con el mensaje de la web. Si quieres una web formal, se utiliza tipografía fina y elegante; y si el diseño que quieres es minimalista, no usaríamos más de dos tipos de caligrafía.

Fuente: madridnyc.es