Seguir las tendencias en cuanto a Diseño Web es importante para conocer de primera mano ¿qué es lo que se está usando actualmente? y ¿cuáles son las herramientas que quedaron en el pasado?No se trata de que debes conocer a profundidad todo lo relacionado a las tendencias de Diseño de Sitios Web este 2018 pero sí que tengas claro cómo evoluciona el público al que quieres llegar y cómo un Diseño de Sitio Web pensado para posicionar a tu empresa en Internet puede ayudarte a estar presente en la mente de tus consumidores.
Un usuario que ingresa en internet buscando un producto y se encuentra con una web anticuada y obsoleta tendrá una mala impresión del negocio, no navegará el Sitio Web y por lo tanto no conocerá tu producto o servicio.
Antes de revisar estas 7 tendencias de Diseño Web en el 2018, es importante tener en cuenta lo siguiente:
- No todas las tendencias son para todos.
- Lo que le funciona a otro no tiene porqué funcionar en tu web ni gustar a tu público objetivo.
- Debes de elegir una tendencia que esté en equilibrio con los objetivos de tu empresa. De no seguir estas recomendaciones el mensaje puede confundirse y apagarse sin llegar a tu público objetivo y clientes actuales.
Revisaremos las siguientes tendencias del Diseño de Sitios Web en este año.
- Cinemagraphs.
- Full screen vídeos.
- Micro-interacciones.
- Animaciones en scroll.
- Parallax.
- PWA.
- Diseño tipográfico.
Para conocer un poco más el significado de estas tendencias te ampliamos un poquito más la información.
Cinemagraphs:
Son fotografías en las que ocurre una acción de movimiento menor y repetida. La mayoría de la imagen es estática, pero algún elemento de la misma tiene movimiento.
Video:
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.
El fin de esta herramienta es sorprender al usuario, que se encontrará ante una imagen supuestamente normal que de repente se empieza a mover.
https://flixel.com/
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, hacia 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.
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.
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.
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.
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.
Podemos hablar de otras tendencias en cuanto al color, contenido, imágenes y vídeos.
(Tomado de otro Post, corregir)
Un diseño en esqueleto que permite que la web se cargue en etapas, de lo más simple a lo más complejo. Se traduce en una mejora en la usabilidad de la web gracias sobre todo a que la velocidad se reduce notablemente. Esto quiere decir que en una primera instancia veríamos la estructura de la web y poco a poco se irían cargando el resto de contenido.
También se irá dando paso a los diseños modulares, como Pinterest, hace que la web funcione mediante módulos que actúan de manera independiente, proporcionando una gran capacidad de adaptación a las dimensiones de cada dispositivo.
Con respecto al color, la tendencia es a crear un contenido propio con respecto a ilustraciones e infografías, triunfando sobre todo los diseños que permitan la interacción con el sitio. Usando colores vivos, degradados y bucromatismos, formas geométricas usando texturas de la vida misma, fondo sobre formas, continua el diseño minimalista y limpio (no solo en la web, sino también en logos y nombres de marca) y personalización en formas y botones.
Si hablamos de imágenes y vídeos, se pone de manifiesto aquellos que ocupan toda nuestra página, a modo de presentación de la marca, siempre y cuando tengamos cuidado con los tiempos de carga. También se está hablando de las microinteraciones (pequeñas acciones que provocan un cambio cuando el usuario interactúa con ellos), diferentes tipos de efectos hover (que se activa cuando el usuario posa el ratón sobre la imagen y esta cambia) o parallax ( movimientos en distintas velocidades de elementos web que se activan cuando se hace scroll) y por supuesto, la realidad virtual y el 360º.
Y por último, pero no menos importante, uno de los puntos importantes en diseño web y es la tipografía, las “hand made” o vintage siguen estando presentes al conseguir una mayor diferenciación y distinción de las habituales. No obstante, las tipografías circulares y la Sans Serif también ocupan gran lugar entre las preferidas. Y una de las tendencias es a combinar textos o títulos horizontales y verticales para llamar la atención de los usuarios.