Blog

Lo último en Sem, Seo y mucho +

Qué se va a llevar en diseño web en 2017

10 de Enero de 2017 a las 12:07

Las tendencias en diseños de páginas web se perfeccionan y modernizan de un año para otro. El diseño web cambia y evoluciona año tras año atendiendo a cuestiones estéticas y a necesidades de adaptación que vienen impuestas por los nuevos tiempos y las nuevas tendencias tecnológicas. 

En este post  vamos a mostrarte lo que se va a llevar en diseño web para este año 2017. Las tendencias en diseño web son aquellas que han ido asentándose como los mejores diseños para hacer que la experiencia de usuario en la navegación sea la mejor posible. Deberás elegir la que mas se ajuste a tu proyecto.


Menús más simples


Parece que los diseñadores tienen claro que el internauta quiere menos opciones en los menús, no quiere que le desborden ni que haya tantas opciones. Necesita ir al grano y encontrar la información rápidamente y de forma clara. Antes se ofrecían hasta 5 o 7 opciones (incluso a veces más) pero ahora la tendencia es ofrecer todos los contenidos entre  3 y 4 pestañas. 
Así, los creativos tendían a colocar en los menús todo tipo de opciones llegando a la saturación. Se trataba de lograr que los usuarios vieran todo lo que la webs le ofrecía en tan sólo un pantallazo pero, al final, resulta contraproducente porque lo único que logramos es intoxicar al internauta que no sabe por lo que decantarse. Por este motivo, en 2017 se vuelve a la sencillez.

Nos despedimos del “menú hamburguesa”


Se trata de un tipo de menú que es expande o se contrae. Consciente de los problemas de usabilidad que a menudo provoca el “menú hamurguesa”, muchas empresas están prescindiendo de ellos. Es el típico menú de los teléfonos móviles, es decir, un icono de tres líneas horizontales. Este menú ha sido criticado por su poca usabilidad, ya que no todo el mundo asociaba ese icono al menú de la web.
Este tipo de menú “esconde” de alguna manera los diferentes contenidos que el usuario puede encontrar en una web (o en una app) y le despista inevitablemente
Es una tendencia muy útil para ciertos sitios, más intuitiva y minimalista que un gran menú difícil de adaptar al responsive. Pero, ¿el menú hamburguesa es útil para tu página web? Más te vale preguntarte si no logrará que la tasa de rebote aumente, todo depende de cuál es la información que debes colocar y si realmente te funciona.

El Vídeo continúa en los primeros puestos 


El vídeo se convierte en uno de los mayores protagonistas. Páginas de inicio con vídeos de tamaño gigante que captarán la atención del cliente
Estos vídeos ocuparán aproximadamente la mitad de la pantalla, dejando la otra mitad destinada a la información más relevante. Por lo tanto, gustan las webs con imagen o vídeo en la cabecera, que ocupe toda la pantalla, tanto de ancho como de largo y que  al hacer scroll encuentres que la web sigue. Al principio los usuarios no se daban cuenta de esto, pero ya hoy todos conocemos este tipo de webs, son más visuales. 
Es recomendable incluir los vídeos en tu homepage ocupando una parte importante de ella y, claro, cuanto mejor calidad tenga mucho mejor. Trata de integrarlo de una forma natural e interactiva. 

Imágenes con animación


Es similar al GIF pero mucho más moderno. Se denomina como Cinemagraphs y digamos que son una serie de fotografías o imágenes en las que se repite una animación como si se tratara de un vídeo de corta duración.
Siempre sin pasarnos y no nos referimos a las antiguas animaciones en flash, tan pesadas, ni tampoco a la música que sonaba en la misma época cuando abrías la página, y te desesperabas buscando el botón para apagarla. Se trata de ofrecer animaciones sencillas que acompañen el texto y que hagan la experiencia del usuario más interactiva  de forma ligera y fácil de comprender. 

Ejemplos:  los Pop-ups o ventanas emergente), loader o pequeño icono que aparece mientras carga la página, el efecto parallax o scroll del fondo que te acompaña a diferente velocidad que el contenido, efecto hover (cuando pasas el ratón por encima), fondos con animaciones o vídeos, microinteracciones, etc.

El efecto con rollover y hover,  consiste en bloques de información con los que puedes interactuar jugando con el ratón. Pueden ser imágenes, noticias o cualquier tipo de información y pueden ponerse a funcionar automáticamente pasando diapositvas de forma automática o permanecer de forma estática hasta que el usuario coloque el ratón encima o pulse los botones. Otra de las tendencias en diseño web que sigue manteniéndose este año son las galerías en forma de carrousel o slideshow. Son una forma perfecta de mostrar varias imágenes al usuario sin sobrecargar una página web. Son perfectas para portfolios, webs de fotografía y productos.

El material desing, alternatia al Flat design 


El estilo minimalista ha evolucionado hasta llegar al llamado Flat design. El Flat design se caracteriza por utilizar imágenes limpias con colores planos y sombras largas. Utiliza combinaciones de colores más vivos, tipografías sencillas y más grandes. No utiliza sombras, ni relieves, ni degradados, y tampoco texturas. 

El Material Desig fue desarrollado por Google en 2014, y se diferencia del Flat design por utilizar más sombras y profundidad, y más realismo. Su objetivo es ofrecer una mejor experiencia al usuario. Parece que el material design será tendencia durante largo tiempo.

Colores brillantes y uso expresivo de la tipografía


Es tendencia en diseño web utilizar colores brillantes, neón o fluorescentes. Se colocan sobre fondos con colores apagados o neutros para llamar la atención. En diseño web no es recomendable usar mas de dos tipografías, ya que usar demasiadas podría despistar y dificultar la legibilidad del contenido.

La tipografía puede ser negrita, más grande o más pequeña, para controlar a dónde dirigen la vista con mayor atención los usuarios. O puede ser utilizada para como elemento estético, utilizándola a modo de ilustración. Así, otra de las tendencias en diseño web que veremos 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.

Para darle personalidad, se experimenta con paletas de colores vivos y gradientes en lugar de los tonos apagados y simples. 
De esta manera, los colores vivos y los gradientes son ideales para inyectar energía, calidez y dinamismo en una página web, y que llame la atención. Atrévete con los colores, pero asegúrate de que sea funcional para tu marca y tipo de contenido.

Las microinteracciones, en nuestras vidas


Las microinteracciones ocurren día a día en nuestra vida cotidiana. Desde dar un like a una foto en Facebook hasta apagar el despertador. Permiten al usuario interactuar con una interfaz y cada vez las vemos mas en las apps y en los dispositivos que usamos. 
Las micro-interacciones normalmente son pequeñas, y su protagonismo respecto a la experiencia de usuario en pantallas pequeñas es definitivo. Son, en muchos casos, formas de respuesta visual para el usuario y sus acciones. Experimentándolas, los usuarios saben lo que está pasando, lo que ha sucedido, y lo que va a ocurrir a continuación, ya que interactúan con la interfaz de usuario.

Como decimos, un ejemplo ya clásico es el “Like” de Facebook, o el “Me encanta” que resulta en una micro-interacción para indicar la acción que acabamos de realizar. Un diseño web inteligente podría crear este tipo de interacciones divertidas y también hacerlas “funcionales”: entretienen a los usuarios al tiempo que los informan.












Comentarios

Volver atrás