Como en la moda, el diseño web se ve inmerso y sujeto a tendencias que cambian a un ritmo vertiginoso. Hace años las animaciones flash y el uso masivo de gifs eran la tendencia imperante, quedando esto muy lejos de los actuales diseños. No sólo por modas, sino por un perfeccionamiento constante de las webs encaminados a mejorar la experiencia del usuario.

Si bien cada año aparecen nuevas tendencias, ni todas se consolidan, ni todas deben ser aplicadas a nuestro site. Todo depende de nuestro caso concreto, teniendo siempre en mente nuestro usuario final. De esta manera, debemos estar siempre al día para ofrecer la mejor experiencia de usuario posible.

A continuación expongo los principales aspectos que por mi experiencia y observaciones se consolidarán como tendencias para este 2017 en nuestras webs.

Vídeos llamativos y cautivadores

Desde que empezaron a incluirse en nuestros diseños webs, los vídeos son cada vez más recurrentes. Y es que bien usados pueden aportar muchísimo dinamismo a tu sitio, siendo además unos grandes aliados del storytelling. No obstante hay que tener en cuenta que puede distraer al usuario.

Ni que decir cabe que su uso requiere de una optimización previa para su inclusión en la web. No obstante, no debemos olvidar el incremento del tiempo de carga de nuestro site que puede suponer, debiendo meditar mucho sobre su posible uso.

Un espectacular ejemplo de web que utiliza este recurso es el site de Mt. Cuba Center. Aquí se aprovecha la belleza del lugar expuesta mediante vídeos para cautivar al usuario.

Portada web de Mt. Cuba Center
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Web de Mt. Cuba Center (mtcubacenter.org).

Efecto parallax

El parallax consiste en añadir un efecto de animación a los fondos generando así una sensación de profundidad. Esto se consigue haciendo que el fondo se mueva a una velocidad diferente a la del resto de la página.

Quizás parezca novedoso, pero el efecto parallax fue inventado por Walt Disney para la animación de sus dibujos. Aunque tiene sus detractores, desde que entró en el mundo del diseño web,  el parallax es indispensable para cualquier web que quiera aportar frescura a sus visitantes.

Aún siendo sencillo, con este efecto podemos generar interesantes resultados, como es el caso de la web de Melanie-F. En esta web podemos ver la sensación de profundidad generada con este efecto.

Detalle del site de Melanie-F
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Detalle del site de Melanie-F (melanie-f.com)

Cinemagraphs que seduzcan

Los Cinemagraphs son una combinación de imagen y vídeo, en la cual se otorga movimiento sólo a una determinada parte de la imagen. Como puede verse en el ejemplo, pueden ser elementos visuales muy potentes a integrar en tu página web.

Cinemagraph de chico con chaqueta
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Ejemplo de cinemagraph (Fuente: awwwards.com).

Su principal ventaja frente a los vídeos es que no consumen tanto ancho de banda, y son más llamativos que una imagen estática. Si bien esta tecnología no es para nada nueva, se espera que su integración en sitios web sea creciente dada sus ventajas.

Como ejemplo de uso de este recurso tenemos el site de Glendevon Motor. En esta página web podemos ver movimiento únicamente en el espejo del coche que aparece en la imagen principal.

Portada del site de Glendevon Motors
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Portada del site de Glendevon Motor (glendevonmotors.com). Ejemplo de uso de cinemagraph como elemento principal.

 

Diseños minimalistas, flat design y material design

El incremento de webs con diseño minimalista ha aumentado con el uso de dispositivos móviles para acceder a Internet. Debido principalmente al menor consumo de ancho de banda de estos diseños, y por tanto menor consumo de recursos para estos dispositivos.

Podemos decir que desde 2013 el diseño minimalista ha ido invadiendo la red. Este estilo ha ido evolucionando hasta convertirse en lo que ahora conocemos como Flat design. Diseños limpios, e imágenes sencillas pero impactantes, combinado todo con formas geométricas son las principales características de este estilo. Esta sencillez se traduce en mayor velocidad de carga del site, lo que mejora

Un alternativa más llamativa visualmente hablando es el Material Design. La principal diferencia con el Flat Design es el uso de sombras y degradados que otorgan una mayor profundidad a nuestros diseños. Cada uno tiene sus detractores y partidarios, pero lo que sí que está claro es que este 2017 seguirán inundando nuestros diseños web.

Diferencias entre flat y material design en Chrome
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Principales diferencias entre Flat y Material Design a través del logo de Chrome (Fuente: infinitymkt.com)

La web de Zero Finalcial se alza como un gran ejemplo de minimalismo combinado con una gran funcionalidad y atractivo, no dejes de visitarla si necesitas inspiración.

Web Zero Finalcial ejemplo de diseño web minimalista
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Portada del sitio web de Zero Finalcial (zerofinancial.com), ejemplo de diseño web minimalista.

Menú Hamburguesa en la versión escritorio

Se denomina menú hamburguesa al utilizado de forma casi universal en las aplicaciones móviles. Este consta de tres líneas horizontales paralelas que al pulsarlas despliegan el correspondiente menú. Cuando empezó a utilizarse su empleo se limitaba a las versiones móviles de las webs, para ir ganando terreno en las versiones escritorio (desktop). Actualmente la cantidad de webs que usan este tipo de menú en todas sus versiones es ingente.

Este tipo de menú es un gran aliado del minimalismo, lo cual ha hecho que se haya incrementado tanto su uso. Su uso garantiza un diseño limpio, que a su vez deja el protagonismo al resto de componentes de la web, como las imágenes o vídeos a toda pantalla.

Aunque personalmente no estoy a favor de incluir este tipo de menú cuando no es estrictamente necesario, su uso en el diseño de páginas webs irá en aumento. Como ejemplo os dejo el diseño de una web propia CiezaNatural en la que se usa este tipo de menú.

Ciezanatural ejemplo de diseño web con menú hamburguesa
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Portada del site CiezaNatural (ciezanatural.es) ejemplo de aplicación del menú hamburguesa.

Efectos rollover y hover llamativos

Este tipo de efectos se refiere a aquellos que son desencadenados mediante el uso del ratón. Estos efectos están ganando cada vez más en originalidad y complejidad, añadiendo un plus a la experiencia de usuario.

Casi siempre se emplean sobre imágenes y botones, pero su uso en otros elementos como noticias y cual otro tipo de información va en aumento. Ni que decir cabe que serán tendencia este 2017 mejorando su originalidad y creatividad, como el que se muestra a continuación.

Ejemplo de hover effect en diseño web
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Ejemplo de hover effect en diseño web (Autor: Kenny Sing)

 

 

Microinteracciones que capten la atención del usuario

Podemos decir que las microinteracciones son pequeñas animaciones activadas por determinadas acciones del usuario. Como por ejemplo los efectos de desplazamiento y animación activados al seleccionar determinadas categorías en algunos sitios web.

Una microinteracción bien hecha puede resultar muy atractiva para el usuario, entreteniendo y mejorando la experiencia del mismo. Por esto, cada vez más, las microinteracciones serán más llamativas y más presentes en nuestros diseños web. Un ejemplo de microinteracción llamativa y atractiva es la expuesta en la siguiente imagen.

Ejemplo de microinteracciones en diseño web
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Ejemplo de microinteracciones en diseño web (Fuente: Aurélien Salomon)

 

Diseño web responsive como requerimiento

El diseño web responsive ha dejado de ser una tendencia para convertirse en un requerimiento para cualquier web. El incremento de las visualizaciones a través de dispositivos móviles ha hecho fundamental que estas se adapten a cualquier tipo de pantalla. Además si lo que quieres es que tu web aparezca en el buscador por excelencia, es esencial que tu site sea responsive. Ya que Google considera este factor como clave para ofrecer una buena experiencia de usuario. Por todo ello en Mibubo sólo realizamos únicamente diseños responsive, dada las ventajas que ello conlleva.

En este contexto, ni que decir queda que el diseño web de este 2017 estará supeditado casi en exclusiva por el diseño web responsive. Como ejemplo de diseño responsive, os dejo de nuevo la web de CiezaNatural, la cual se adapta perfectamente a cualquier tipo de pantalla.

Ejemplo de diseño web responsive
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Ejemplo de diseño web responsive (Fuente: Mibubo)

Storytelling, el arte de contar historias

Cada vez  más los usuarios queremos saber la historia que se esconde detrás de una marca, persona o producto. Y no nos vale cualquier cosa, queremos historias que nos trasmitan emociones, que nos hagan sentir. Y aquí el storytelling entra en juego.

¿Que qué es el storytelling? Podemos definirlo como el arte de contar historias de forma que cautiven y hagan sentir emociones al usuario. Este recurso está siendo actualmente muy utilizado en la creación de branding, ya que es una forma muy efectiva de trasmitir los valores de una marca. Por todo ello este recurso seguirá siendo uno de los más utilizados en el diseño de webs.

 

 

 

Ejemplo de diseño web con storytelling
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Ejemplo de diseño web con storytelling (Web: pleasuretoburn.com)

Otros aspectos que serán tendencia este 2017

  • Las imágenes a toda pantalla como elemento principal de la web seguirán siendo tendencia.
  • En un mar de información como es Internet el contenido de calidad hará que tu web destaque sobre el resto. Siendo en este caso también más un requerimiento  que una tendencia.
  • El uso de la tipografía como elemento principal del diseño seguirá siendo un recurso muy empleado.
  • El uso de paletas de colores llamativos y brillantes que nos trasladan a los ochenta.
  • El empleo de formas geométricas seguirá siendo popular en el diseño web.
  • Los denominados botones fantasmas. Aquellos compuestos por un simple contorno que cambian al interactuar con él seguirán formando parte de nuestros sites.

 

Esta web utiliza cookies para que tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Pin It on Pinterest