Tendencias en diseño web 2018

Ya entrados en el último trimestre del año tenemos que ir preparándonos para el 2018. No hace falta que recordemos la importancia de tener presencia en la red, por eso pasamos a contaros las tendencias y predicciones en web design para el próximo año. ¿A qué esperas para adelantarte y empezar el año con una web a la última?

Responsive sí o sí

A pesar de lo drástico que pueda sonar, los números dan la razón: más de la mitad de las consultas que Google recibe en todo el mundo se hacen a través de dispositivos móviles. Se reafirma más que nunca el diseño responsive, el diseño sensible que permite que tu sitio web se adapte al dispositivo en el que los usuarios lo están viendo.

Flat design

Eliminar o reducir todo tipo de decoración en un diseño de interfaz o web para simplificar el mensaje y facilitar la funcionalidad. Se eliminan texturas, degradados, biselados, sombreados… en definitiva, todo lo que no aporte valor al mensaje o información que se quiere transmitir al usuario que interactúa con la interfaz. Todo esto tiene una serie de ventajas, como facilidades a la hora de diseñar o integrar el diseño con una web responsive ya que es más fácil redimensionar objetos con fondos planos.

Hero vs sliders

Las imágenes sliders de la página de inicio son populares, pero un diseño hero estático enfocará a los visitantes en un mensaje clave y mejorará las tasas de clics. Una imagen a pantalla completa captará totalmente la atención además de ser totalmente compatible con el diseño responsive y el flat design.

Tipografías con personalidad

La elección de una tipografía es muy importante ya que manteniendo todos los elementos gráficos de una composición, sólo cambiando la fuente, la sensación y percepción que genera es muy diferente. 2018 será el año en el que diremos adiós a las tipografías aburridas. Cada vez más diseñadores utilizan fuentes no estándar para dar un toque de “condimento” a las páginas web. En gran medida, esto es gracias a la mayor disponibilidad de tipografías gratuitas disponibles al alcance de cualquier diseñador.

Tarjetas

Son una manera práctica de mostrar información heterogénea, útil cuando cada pieza de información tiene diferente tamaño o longitud, o está formada por diferentes componentes.

Botones ghost

Este tipo de botones sigue el estilo minimalista, además, se combina muy bien con las imágenes hero, mencionadas anteriormente.

Video vs Texto

Una imagen vale más que mil palabras. Los videos bien utilizados aumentan la duración de las visitas a las webs, lo que lo hace una forma atractiva de mejorar la calidad de las visitas recibidas. Muchas webs utilizan videos en la home al 100% de ancho.

Sitios de una única página

https://wigolia.com/

Por lo general se adopta este tipo de diseño para hacer más fácil la navegación en móviles, ya que en este tipo de dispositivos (sobre todo en smartphones) es más fácil acceder al contenido haciendo scroll, que navegando por el menú a base de clics de ratón.

Parallax y scrolling

http://www.firewatchgame.com/

Si bien a veces puede resultar un poco sobrecargado de movimiento, muchos diseñadores aplican el efecto parallax a las imágenes de fondo para que, mientras hacemos scroll, estas imágenes se vayan moviendo a una velocidad menor que el resto de la página. Esto nos da una sensación de profundidad interesante. De todas formas, hay que tener mucho cuidado con esta técnica ya que puede sobrecargar un poco el diseño de la página y distraer al usuario del resto del contenido.

Animaciones HTML 5

https://www.supremo.tv/typeterms/

HTML 5 y CSS 3 nos aportan una gran variedad de instrucciones para realizar cualquier tipo de animación en nuestra web. Podemos realizar animaciones con objetos vectoriales en 2D o 3D. Existen también librerías, que nos permiten otorgar comportamientos reales (de la física) a objetos, por ejemplo una pelota que bota en la pantalla cada vez que hacemos clic sobre ella, etc. CSS 3 nos permite además, realizar operaciones sobre imágenes (estilo Photoshop) como modificar el brillo, y efectos como desenfoque.