10 Tendencias de diseño web en el 2016

10 Tendencias de diseño web en el 2016

Aún que el 2016 aun no termina ya se están marcando las tendencias en el diseño web de este año.

En lo personal algo que se me hace que vale la pena destacar es que desde el 2005 las tendencias de diseño web se ven reflejadas después en el diseño gráfico de impresos.

Es importante estar al tanto, no solo para conocer las nuevas tendencias, sino también para saber en qué podemos mejorar nuestro trabajo y aplicar las nuevas herramientas para poder innovar y actualizar nuestras tareas diarias.

En este post, te expongo tendencias de lo va del 2016 en diseño de páginas web.

1. Usabilidad

En el 2016, todo el diseño debe de estar centrado en el usuario. La Experiencia de usuario (UX) deberá de estar presente en todos tus proyectos.

No importa que tan “chido” sea tu diseño, si no cumple con estándares de usabilidad tendrás que tirar ese diseño a la basura.

Experiencia de usuario UX

Para enganchar a tus usuarios realmente en este 2016, si realmente quieres hacer crecer tu negocio o proyecto online necesitaras tomar en cuenta la experiencia de usuario dentro de tu proceso de desarrollo.

Si hablamos del diseño de una web, lo más importante será facilitar la interacción del usuario. Como saben ya todos los expertos en marketing digital, será muy difícil que un negocio online crezca, si no tiene muy en cuenta la experiencia de los usuarios.

Además el algoritmo de Google cambio todo apuntando a la misma dirección en favorecer a los sitios que piensen en sus usuarios y eso es si “tu sitio carga rápido y si es fácil de usar” Google te va a premiar mejorando tu posición en las SERPs.

Además el que tu página cargue rápido es súper necesario si tienes un sitio de ecommerce. Ya que estudios indican que reducir un segundo en el tiempo de carga aumentan las ventas un 27%. Entonces todos deberíamos tener un sitio que además de lucir “chido”, cargue rápido y sea intuitivo para los usuarios.

2. Material Design

Viene pareciendo en este tipo de listados desde el 2014 pero no fue hasta el 2015 que empezó a utilizarse ampliamente, pero el 2015 no es el año de Material Design, en 2016 viene cargado de nuevos diseños con esta tendencia, que no solo se encuentra en el diseño web, si no también en el diseño de Apps, obras de arte, diseño gráfico, etc…

Material Design

En el 2016 esta tendencia se adoptó masivamente. Será el año donde el Material Design empezó su dominio. Lo que significa que Google se ha ganado una gran batalla encontra de Apple – en el ámbito de diseño (si lo sé es impactante!).

3. Nuevo diseño flat

Desde el 2013 que el diseño flat está de moda y Google lo está impulsando mucho desde hace ya casi un par de años, con Material design. Que tiene una fuerte influencia del diseño flat.

flat2.0

Lo que está claro es que para este año se incorporaron efectos de profundidad, sombras, animaciones y transiciones que mejoraron sustancialmente las interacciones dentro de sus aplicaciones.

Otra de las consecuencias de esta tendencia, es el uso cada vez más frecuente de los dispositivos móviles para descargar contenido, lo que implica una búsqueda de la simplificación del diseño para que sea más sencilla y más rápida la carga de datos.

Lo que es más, el diseño plano tiene una gran ventaja en el campo de la experiencia de usuario: las imágenes que siguen este estilo pesan menos y no añaden un tiempo extra innecesario al tiempo de carga de la página.

Las líneas generales del flat design reinarán a lo largo y ancho de las webs y blogs de pequeñas y medianas empresas (por ejemplo, con el uso de los botones fantasma).

Al mismo tiempo, aquellos usuarios un poco más avanzados en cuanto a tendencias de diseño, pasarán al Flat 2.0 (una evolución del flat design que incorpora algunos efectos tridimensionales, para hacerlo más usable).

4. Diffuse shadow

Long shadow está muerto lo de hoy son las diffuse shadows.

Parece que algunas de las tendencias de diseño web no irán a ningún lado pronto. pero tal parece que a las long shadow les ha llegado su fin.

Diffuse shadow

Hemos visto la iniciación y evolución de material design, flat design y long shadow llegó con estas tendencias, fue una moda que la tuvimos hasta en la sopa.

Hay que destacar que este año hay una nueva tendencia que está haciendo su camino a través de la comunidad de diseño web: el diseño de la sombra difusa o diffuse shadows, es el nuevo término medio, lo que indica la profundidad sin crear contraste áspero.

5. El foco en la tipografía

Otra de las cosas que vemos cada vez más frecuentemente es el uso expresivo de la tipografía. Se utilizará como forma y no como medio para comunicar, o dicho de otra forma, se ilustrará con letras.

tipografía

La tipografía es un lenguaje en sí misma. Hace algunos años, sólo los diseñadores gráficos eran capaces de hablar y comprender ese lenguaje. Hoy, cada vez más gente se anima a practicarlo, gracias a que la variedad de fuentes disponibles para web es mucho mayor.

El uso de tipografías creativas y no la típica Arial o la tan odiada Comic Sans se lo debemos prácticamente a Google Fonts que ofrece a los diseñadores y desarrolladores un gran catálogo de más de 1500 Fuentes tipográficas disponibles y a @fontface una de las propiedades nuevas de CS3

Esto le permite a los diseñadores escoger Fuentes adecuadas al tipo de proyecto permitiendo hacer webs más atractivas.

Ahora que la tipografía se ha convertido un elemento clave de cualquier estrategia de branding, el público está cada vez más acostumbrado a ver tipos de letra artísticos y originales en casi cualquier lugar.

En el 2016 hay una tendencia hacia los rótulos grandes, con fuentes en mayúscula y cursiva para los encabezados. Otra tendencia muy importante son las tipografías que parecen hechas a mano.

6. Animaciones

animaciones

No es ningún secreto que las animaciones bien utilizadas enriquecen notablemente la experiencia de usuario de cualquier web, sea cual sea su propósito. Utilizándolas conseguirás generar una experiencia más rica y memorable. Estas son algunas de las técnicas más populares:

Parallax: Requiere interacción por parte del usuario, genera ritmo (o lo rompe) ayuda a contar historias y, en consecuencia, potencia el contenido.

Siendo ya tendencia desde el 2013, y creo que seguirá siéndolo en el próximo año, ya que se apostará por el dinamismo en las presentaciones.

Tampoco hay que olvidar que los dispositivos móviles fomentan la verticalidad del diseño web, por lo que el efecto del Parallax es una técnica que puede sorprender al usuario con algo que no se espera.

Loaders: no requieren interacción. Calman ansiedades, entretienen y si me apuras hipnotizan (en el mejor de los casos).

Hover: ayuda a que la experiencia del usuario sea más intuitiva y da una respuesta inmediata a cualquier movimiento del ratón sobre el contenido.

Slideshow: una forma efectiva de presentar varias imágenes o vídeos sin sobrecargar tu diseño.

7. Diseño responsivo

En el 2010 era un lujo para el 2016 es una necesidad por dos cosas principalmente por los usuarios, Hoy la pantalla del móvil es ya la “primera pantalla”. y si tu sitio no está optimizado para estos dispositivos estás fuera de la jugada y además el segundo motivo es que Google penaliza a partir del 2015 en su SERP´s a las páginas que no están optimizadas para dispositivos móviles así que es por eso que el diseño responsivo es tendencia en el 2016.

Diseño responsivo

Nuevamente en este punto hablamos sobre usabilidad y experiencia de usuario (UX) es muy importante ya que los dispositivos móviles se han convertido en la pantalla principal de un gran número de usuarios. Un buen diseño responsivo debe de tener perfecta usabilidad en pantallas móviles, ocultar funciones de escritorio en versiones móviles no es una solución aceptable ya en este año.

Y no lo hagan solo por SEO háganlo principalmente por los usuarios y solo para ponerte a pensar un pocos en tus usuarios no pueden tener una experiencia completa o disfrutar en sus smartphones de tu sitio web mientras viajan en el metro es momento de que le eches una revisada a tu sitio para hacerle mejoras.

Para salir de dudas: si tus usuarios no pueden disfrutar al 100% de tu sitio web navegando en su móvil mientras vuelven a casa en metro, entonces tienes un serio problema y necesitas revisar completamente tu experiencia de usuario.

8. Storytelling

Contar historias para enganchar a los usuarios es algo que no solo se utiliza en anuncios de publicidad, cada vez más vemos el storytelling aplicado a la creación de infografías y el diseño web.

El objetivo de aplicar técnicas como el storytelling, no es otro que el de crear un vínculo emocional con el usuario, por lo que en diseño web no podía faltarnos esta novedad.

En general, la sencillez, la creatividad y las emociones, se hacen dueños de los sitios webs de marcas de todo tipo, desde las más potentes hasta las apenas incian en su sector.

Ya se sabe que una imagen vale más que mil palabras, y eso vale para los esfuerzos en marketing de cualquier marca o negocio. ¿Qué mejor manera de hacer que tu historia parezca viva y real?

Unos cuantos datos:

  • En internet, 100 millones de personas ven como mínimo un vídeo por día.
  • Los usuarios de una web tienen un 64% más de posibilidades de hacer una compra tras ver un vídeo.
  • El 80% de los usuarios recuerdan haber visto un anuncio en un vídeo 30 días después.
  • El 92% de los que ven vídeos en dispositivos móviles comparten el contenido con otros usuarios.
  • Los seres humanos procesamos un elemento visual 60,000 veces más rápido que si leemos la misma idea en un texto.

storytelling

9. Infografías

El mejor camino para presentarle al usuario información compleja de una manera simple, esta es la razón por la cual las Infografías son tendencia no solo en el diseño web, marketing digital, social media, SEO, marketing de contenidos… Todo el mundo ama las Infografías.

No las típicas y aburridas Infografías de gráficas de barras y pays si no Infografías interactivas, gifografías e Infografías creativas, es hora de mezclar Infografías con storytelling con un profundo conocimiento de visualización de datos. Infografías y Big Data juntos? Y por que no? Suena como el sueño más salvaje de moda entre los gurús de marketing en línea, pero ya casi está aquí.

infografías

No es casualidad que las infografías se hayan puesto de moda en todos los ámbitos del marketing online: redes sociales, SEO, marketing de contenidos… A todo el mundo le gusta una buena infografía, y sobre todo, nos encantan sus resultados: las infografías se comparten tres veces más que cualquier otro tipo de contenido visual.

10. Patrones UI

Los patrones UI son aquellos que a golpe de repetición se han grabado en la mente de los usuarios convirtiéndose en soluciones estándar y probadas. Estos patrones guían al usuario mientras navega por tu web. Te solucionarán más de un problema. Úsalos, funcionan, a continuación te nombro algunos de los más populares.

Menú de hamburguesa: aunque tiene detractores no hay duda de que su uso ya generalizado es una función fácilmente reconocible, desde hace un par de años atrás que se hizo bastante popular y la tendencia de este año es tenerlo incluso en las versiones para escritorio no sólo para las versiones móviles.

Scroll: antes había un pánico a usarlo. mucho tenemos que agradecer a los dispositivos móviles y sus scrolls interminables (que Twitter puso de moda así como el drag and refresh). Tampoco es ya ningún secreto que el uso del scroll para contar historias dentro de una web es una fórmula que funciona (y muy bien).

Módulos y texto modular (al estilo Pinterest): aporta impacto visual y toda la información necesaria encapsulada en forma de celda Pinterest lo popularizó y ahora son muchos los que han adoptado esta tendencia. Es ideal para mezclar en un mismo sitio distintos pedazos de información, que invitan a navegar sin control a través de los diferentes contenidos.

Módulos y texto modular

Igual que cuando leemos una revista, un sitio web se nos hace más accesible cuando nuestros ojos pueden saltar de un módulo a otro, y el tipo de contenido va cambiando al mismo tiempo que nos movemos por el documento.

Este tipo de diseño permite ver varias fotografías encapsuladas en forma de celda. Ideal para la publicidad o para una empresa que comercializa varios productos.

Genera un gran impacto visual, sensación de dinamismo y movimiento. Es un recurso muy utilizado en el 2016.

Scroll modular e infinito: ¿cual es siguiente movimiento en la tendencia de diseño modular? El scroll modular. Manejando cada modulo de nuestro sitio web de manera independiente con scroll en cada modulo.

scroll

¿Suena complicado de hacer no? En realidad es bastante sencillo, es posible que ya lo hayan visto (aun que a veces sea difícil darse cuenta) en sitios con una barra lateral el scroll de los módulos no se desplaza a la misma velocidad.

La tendencia del scroll infinito la inicio Twitter después otros sitios como Facebook o Pinterest aplicaron la tendencia y si ellos la aplican por que no aplicarla nosotros también.

Y la combinación de ambos conceptos ayuda a mejorar la experiencia de usuario a que es más fácil y rápido hacer scroll que hacer click. Esto se hace mediante el desvanecido de manera automática cuando el usuario hace scroll para mirar mas contenido.

No es de extrañar que sitios como Pinterest y Facebook cuentan con tiempos de carga increíblemente rápidos cuando el usuario hace scroll, claro esto no es para todos los sitios, esto solo funciona cuando el contenido es extremadamente atractivo he interesante para los usuarios, el scroll infinito es extremadamente adictivo.

Fotos y videos grandes: llámalo HD o llámalo como quieras, el impacto que conseguimos con imágenes/vídeos a toda pantalla no es ningún secreto.

Las imágenes a pantalla completa desplazaron a los pequeños sliders como centro de atención.

La fotografía predomina y asumió una función explicativa o de llamada a la acción, con la capacidad de atrapar al usuario.

El vídeo con ancho completo se convertió en protagonista del home, en formato clips, que sintetizaron el contenido de todo el sitio web. Por ejemplo, la información de la empresa, o la explicación del funcionamiento de un producto o servicio.

Patrones geométricos: me refiero a la utilización de símbolos, construcciones simétricas, y patrones exactos por medidas.

En el enfoque geométrico, destacan las construcciones simétricas, los símbolos, y patrones realizados en medidas exactas que se construyen por y para las marcas.

Esta tendencia nace de transformar el diseño flat en algo más complejo y un poco más “cargado”, completando de alguna manera el diseño para llevarlo a otro nivel.

figuras geométricas

Botón fantasma: estos misteriosos botones son tendencia en el 2016. Muy utilizados en secciones a pantalla completa para poder acceder a un contenido especifico, haciéndose visible con un grosor de borde marcado.

Los botones fantasma son formas planas sin relleno, con trazados finos que se suelen usar para los call to action o llamadas a la acción de los usuarios. Suelen camuflarse sobre fotografías y en la parte central de la pantalla.

Se trata de llevar los típicos botones web a la mínima expresión, con lo que se consigue NO obstruir la visión de otros objetos que se encuentran en la pantalla.

Además, su tamaño es menor, por lo que facilita la carga web y, por si fuera poco, son “mobile friendly”.

Conclusiones

Las tendencias web para este 2016 traen consigo varias posturas que pasan por el diseño minimalista, lejos de estridencias y colores.

Las tendencias van y vienen, pero debemos estar seguros de que son la mejor opción para nuestro diseño. No hay que dejarse llevar por las tendencias, es importante que las uses con sentido común.

Estará en el diseñador, en trabajo conjunto con la marca que lo contrata, analizar qué será lo conveniente relacionado con lo que se quiere mostrar. El juego está en no utilizar un solo de los métodos, sino ir utilizando varios para poder destacar en este mundo virtual.


Este post es una traducción libre de la presentación del infografista español Ernesto Olivares, se las comparto.

¿Necesitas quién te ayude con tu proyecto de diseño web?

Vamos trabajando juntos

Contáctame