Tendencias diseño web 2016 ¿Qué es lo que se lleva?
comprea-delivery-alimentacion
Entrevista a Midiadia: El big data al servicio del gran consumo y la alimentación (+podcast)
03/06/2016
Feria de la Economía Social y Solidaria de Madrid
Un fin de semana en la feria de la economía social
10/06/2016

Tendencias de diseño web 2016 ¿Qué es lo que se lleva?

Hipnótico, ¿verdad?

Lo sabemos. Estamos a mitad de año y el veranito planea sobre las terrazas pidiendo entrar por la puerta. Pero hasta que las vacaciones no lleguen, debemos seguir pensando en esos proyectos de diseño web que iniciamos a principios de año y, en la medida de lo posible, adaptarnos a las corrientes que triunfan por la red.

Las tendencias en diseño web son como la moda: viene y va. Algunas se dictan por el guión de la usabilidad (responsive design) y otras por los cambios de la propia industria como el flat design, del que ya os hemos hablado en capítulos previos.

Con esto en la cabeza, vamos a ver qué opciones son las más populares entre los diseñadores, siempre poniendo por delante los objetivos de la compañía u organización para la que se trabaje.

Año de experimentos: los menús hamburguesa en diseño web

La expansión del uso móvil y su uso para el acceso a Internet ha hecho que los diseñadores repiensen sus propuestas. Una de las más recurrentes últimamente es la conocida como ‘hamburger menu’. La barra de navegación deja de ser ‘obvia’ y se simplifica tras un icono sobre el que el usuario debe interactuar para que los elementos del sitio queden visibles.

diseño-web-2016-hamburgers-menu

Ejemplos como el de We are Shellshock utilizan cards dentro de este tipo de menús ‘ocultos’.

 

time-ejemplos-diseño-web

La revista Time facilita a los usuarios una barra de navegación complementaria al menú hamburguesa donde incluye los artículos más recientes

Animaciones sutiles, pero enriquecidas

La democratización del diseño plano ha hecho que las webs se parezcan cada vez más entre si. Una manera de contrarrestar este efecto es incorporar ligeras e inteligentes animaciones dentro del sitio que vayas a crear. Esto hará que captures la atención del usuario más fácilmente, haciendo que la navegación en algunos casos sea más intuitiva.

Las rich animations están apareciendo tanto en los logos de las compañías hasta en los headers y fondos web.

animaciones-diseño-web-2016

    Presentación de producto en movimiento (antigua web de Beoplay)

 

Hipnótico, ¿verdad?

Hipnótico, ¿verdad? vía Make me pulse

El material design gana más posiciones

No hay quien lo pare y hasta podríamos decir que en cierta medida ha venido para quedarse. El documento publicado por Google en 2014 sentó las bases para la aplicación de elementos táctiles y dinámicos que recuerdan al estilo de papel y tinta.

El sombreado y las transiciones de cada sección en una web son capaces de mejorar la interacción del usuario con cada apartado correspondiente. Digamos que una vez los diseñadores se han adaptado al modelo flat, buscan el siguiente nivel con este estilo googliano.

 

diseño-web-casos-de-exito

El buscador de vuelos Jetradar combina elementos flat, material e ilustraciones vectorizadas dentro de su web

El scrolling: formato long vs short

Más y más diseñadores se van decantando por definir sitios web en base a la técnica del parallax scrolling, ideal para webs cuyo propósito sea contar una historia o generar sensación de ritmo en el contenido.

Aunque sea tendencia, úsalo con cabeza ya que este formato puede que no sea el más interesante si lo que quieres es que tu usuario identifique bien toda la información, por encima de la experiencia narrativa opta por el minimal scroll.  En cambio, la adaptación de infografías a gran pantalla suele cazar bien con el estilo.

scroll-parallax-ejemplo

Para su campaña del 25º aniversario, Gameboy diseñó un microsite que recreaba y permitía a los usuarios vivir la experiencia del juego desde la pantalla de un ordenador.

Formularios full-screen

Muchos sitios web y apps se decantan por visualizar sus formularios o inputs como los signups o logins en un formato de pantalla completa. Esta tendencia viene dada por la adaptación hacia el diseño responsive para permitir que el usuario tuviese más espacio y fuese más fácil introducir información desde el touch-screen. Gran ejemplo el de la boutique online Eigthy Easter.

diseño-web-formulario-de-contacto

Mejor evitarlo: Front-page carousels

Es bueno nombrar tanto las tendencias positivas como las que no lo son tanto, al menos según el debate colectivo. En este caso, si hay una moda que no suscita muchos seguidores es la de las ‘front-page carousels’. Estas tipo de diseño, aunque vistosos, no suelen ser muy apropiados para el SEO ya que la escasez de contenido limita la cantidad de metainformación que se inserta en el sitio.

Ejemplo del formato carousel vía Awwwards.com

Ejemplo del formato carousel vía Awwwards.com

Por otro lado, las imágenes que se suelen utilizar en este caso son de alta resolución (sliders hechos con Javascript o jQuery) lo que puede ralentizar el tiempo de carga de la página. Según Kissmetrics, un estudio refleja que solo 1% de las personas analizadas clickaron en el contenido del carousel por un efecto ‘ceguera’.

Ahora que has podido visualizar todo lo que está de moda, es hora de aplicar tu criterio para tomar aquellos elementos que vayan encajar en tu proyecto actual. No dudes en consultarnos tus dudas y dejar comentarios 😉

1 Comment

  1. Gracias por el aporte, que nos permite estar actualizado con las tendencias del desarrollo web, estaremos atentos que es lo que se viene este 2017. Gracias Nuevamente y saludos desde Perú

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *