Tendencias en diseño web para 2016 y 2017

En este artículo voy a enseñarte las tendencias en diseño web para estos años 2016 y 2017. Las tendencias en diseño web van cambiando, ahora es el flat design el estilo que está mas presente en las páginas web pero…¿Os acordáis de los GIFs, que dominaban la web en los años 90?

“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, por eso debes elegir la que mas se ajuste a tu proyecto.”

Debido a la popularidad del diseño web responsive cada vez vemos mas sitios adaptados a dispositivos móviles para cumplir con las pautas que marca Google en cuanto a las webs “mobile friendly”.

Vamos a repasar las tendencias mas populares en diseño web para este año.

beach¿Que tendencias en diseño web puedes encontrarte este año?

El problema del diseño web responsive es que todas las páginas web pueden parecer iguales en dispositivos móviles. No obstante esto también es debido al boom de WordPress y al aumento del uso de plantillas.

Esto ha resultado en un montón de diseños comunes, aunque algunos de ellos han madurado y podemos ver algo de innovación:

monitorSecciones Split Screen

Son secciones de una web en las que el contenido aparece con un fondo de imagen o color a ancho completo (full width), pero la colomna y el contenido está dividido en dos columnas. Visualmente queda muy bien y además es una forma genial de separar y estructurar el contenido de una página web .

Las secciones split screen están desde hace algo de tiempo pero están empezando a ser tendencia en diseño web hoy en día, y cada vez mas plantillas de WordPress las incorporan entre sus diseños.

Captura-de-pantalla-2016-10-02-a-las-12.15.32

1454990763_LightEl menú “Hamburguesa”

El menú tipo “hamburguesa 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.

No obstante, con el aumento significante de la navegación desde móviles este tipo de menú ya es familiar y reconocible por casi todos.

Su uso es cada vez mas extendido no solo en teléfonos móviles, sino que cada vez está mas visto en muchas páginas web en su versión “pantalla grande”, consiguiendo un diseño limpio y minimalista.

tendencias diseño web

AnalyticsFormularios de registro:

Un formulario de registro será siempre un formulario de registro, y su función está clara y definida.

La tendencia web hoy en día está en facilitar y acelerar este proceso facilitando que el usuario se registre con su perfil de redes sociales.

De esta forma se completan muchos mas registros de usuarios ya que estos no estarán tan reacios ante la idea de perder tiempo rellenando campos.

La tendencia para registros mas complejos es crear formularios “por pasos” en los que el usuario es guiado por cada una de las fases del proceso de registro de una forma mas efectiva.

tendencias-web

1451873851_browser-windowDiseños tipo “tarjetas” con información escaneable.

El pionero en este tipo de diseños fue Pinterest y cada vez vemos este estilo en mas sitios. De hecho están surgiendo cada vez mas plantillas de WordPress que incorporan este tipo de diseño y logran diferenciarse de los diseños a los que estamos mas que habituados hasta ahora.

Lo bueno de estos diseños es que cada “tarjeta” contiene y presenta la información en pequeños trozos perfectamente escaneables. Aíslan la información de forma muy visual dando un punto de vista gráfico atractivo, y favoreciendo la usabilidad.

tendencias diseño web

ganar clientes por internet autonomoImágenes “Hero”

Las llamadas “Hero images” son la imágenes que vemos nada mas llegar a muchas páginas web y que ocupan toda la pantalla.

Las imágenes en las páginas web son un recurso muy potente para captar la atención del usuario desde el primer momento.

Con un buen servidor y una buena optimización de tu sitio e imágenes en general no tendrás que preocuparte por tiempos de carga bajos.

Este recurso ya viene siendo utilizado desde hace unos años, pero anteriormente los usuarios tendían a no seguir haciendo scroll en las páginas. Ahora ya estamos acostumbrados a este tipo de imágenes de presentación, por lo que la mayoría de usuarios intuyen que debajo de ellas continua el contenido de la web.

tendencias-web

ganar clientes por internet descuentosAnimaciones:

Las animaciones están siendo usadas cada vez mas para resaltar los contenidos de un sitio web. Cada vez son mas tendencia en diseño web y son incluidas en la mayoría de plantillas de WordPress.

Hacen que la experiencia de usuario sea mas interactiva y entretenida. No obstante, no hay que pasarse con las animaciones. No podemos ponerlas en todas partes de forma indiscriminada.

Las animaciones en una página web pueden ser usadas de dos formas diferenciadas:

  • Animaciones “mayores”: Son usadas como una forma de interacción directa para el usuario, como por ejemplo, incluir notificaciones en forma de pop-up, o efectos parallax.
  • Animaciones “menores”: No requieren ninguna acción por parte del usuario, como los iconos animados que aparecen cuando está cargando una web, las barras animadas o los efectos hover.
Estas son las animaciones mas típicas que puedes ver en las páginas web actuales:

Animaciones de carga:

Sirven para entretener al usuario en el tiempo de espera mientras carga una web.

Deben encajar con la personalidad y apariencia de tu web, deben ser simples y preferiblemente sin audio.

loading

Menus:

Los menús “ocultos” están creciendo en popularidad ya que pueden ahorrar espacio en la pantalla. Los menús tipo hamburguesa ya tan comunes en dispositivos móviles activan varios tipos de animaciones para mostrar los elementos del menú cuando se hace clic en un icono específico.

Quizá te suene el nombre de off-canvas menu, que cada vez se ve mas en las plantillas de WordPress.

Hover:

Las animaciones hover son esos efectos que se activan cuando pasas tu cursor por encima de algunos elementos, como por ejemplo los botones de una web.

Los efectos hover hacen mas intuitiva la navegación en una página web ya que avisan que esos elementos incluyen algún tipo de función, generalmente un enlace.

tendencias diseño web

Galerías y slideshows:

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.

Hosting SSD

Fondos con animaciones o videos:

Un simple fondo animado puede añadir mucha visibilidad a una parte concreta de tu web. Aun así pueden distraer al usuario, por lo que debe usarse con moderación.

newsletter

SUSCRÍBETE PARA RECIBIR CONTENIDOS EXCLUSIVOS

Déjame tu email y te enviaré recursos gráficos de forma periódica para tu página web

ganar clientes por internet blogMicrointeracciones:

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.

En esta captura de pantalla puedes ver un ejemplo utilizado en diseño web.

tendencias-web2

composeMaterial Design: La alternativa al flat design

El Material Design surge con el objetivo de Google de crear un Sistema Operativo con una interfaz homogénea para todos sus dispositivos, ya fueran tablets, smartphones o incluso en la web.

El material design usa mas sombreados y profundidad que el flat design, y su función es recrear diseños que parezcan mas realistas para los usuarios.

El principal objetivo del material design es crear diseños web limpios y modernos enfocados en la experiencia de usuario (UX).

tendencias diseño web material design

Trucos analyticsDiseño responsive

El diseño web responsive se ha vuelto muy popular en estos últimos años debido al considerable aumento del uso de teléfonos móviles.

El diseño web responsive realmente ha dejado de ser una tendencia para pasar a ser una buena práctica.

El diseño web responsive se puede aplicar usando plantillas de WordPress premium que te permiten tener tu página web optimizada para móviles de forma sencilla y barata.

No obstante el diseño web responsive puede no haber sido creado correctamente y provocar algunos fallos. Para asegurarse de que el diseño web responsive funciona de la mejor forma posible, los diseñadores web deben:

  • Evitar el uso de JavaScript y CSS en la carga de imágenes que añade peso innecesario a una página.
  • Usar imágenes y videos responsive.
  • Prestar especial atención a los plugins de terceros, que puedan estar ocasionando un impacto negativo en el rendimiento.

tendencias-diseño-web

OneHydra herramienta SEO para grandes e-commerceEl diseño Flat no va a desaparecer en el corto plazo

El Flat design es compatible con otras modas del diseño web como el minimalismo, el diseño web responsive o el Material Design.

De cara al futuro, es probable que veamos las siguientes tendencias en el diseño Flat.

  • Las sombras largas (Long Shadows): Dan mucha mas más profundidad a los diseños planos.
  • Combinaciones de colores vivos: Las interfazes y plantillas mas populares han llevado a muchos a comenzar a usar colores más vivos en sus diseños.
  • Tipografía sencilla: En el Flat Design, las tipografías sencillas ayudan a asegurar que el texto sigue siendo legible.
  • Botones fantasma: Son los botones que se presentan con un simple contorno, y cambian cuando el usuario se desplaza sobre ellos. Estos mantienen la funcionalidad sin distraer al usuario.

Secciones largas con mucho Scroll

Los usuarios ya estamos acostumbrados a hacer mucho scroll en los dispositivos móviles, y por eso mismo vemos que ya no es necesario preocuparse por crear páginas web con secciones cortas en las que se trata de concentrar todo el contenido en la parte superior a toda costa.

Las páginas con mucho scroll y mucho contenido son perfectas además para quienes quieren atraer a sus usuarios a través delstorytelling.

apple tendencias web

monitor

Tendencias en diseño web peligrosas

Los cambios de tendencias y modas en diseño web pueden venir dados por las necesidades de los usuarios, o simplemente por un cambio en la industria. No obstante, no tenemos que aplicar todas las modas en diseño web a nuestro proyecto.

En diseño web solo es aconsejable seguir una tendencia si esta va a aportar algún valor o va a resolver alguna necesidad al usuario. No debemos aplicar todas las modas solo porque queden bien en nuestro sitio, sino que dependerá de cada proyecto.

Vamos a ver algunas tendencias en diseño web que debes plantearte si debes aplicar.

Menú tipo hamburguesa que esconde contenido relevante

Los menús tipo hamburguesa quedan muy bien ya que dan un aspecto muy limpio a una página web. Pero no son recomendables para sitios como tiendas online, por ejemplo, ya que pueden ocultar contenido importante que no sea visto a primera vista por los usuarios.

Usar demasiado Javascript

El javascript puede ofrecerte funciones interesantes, pero puede hacer que tu web tarde mas tiempo en cargar, provocando que los usuarios se vayan de tu sitio.

Debes tener cuidado con algunos plugins que crean muchos archivos Javascript y CSS, afectando el desempeño general de tu web.

Sliders en la homepage con varias imágenes a modo carrousel

Utilizar un carrousel de varias imágenes en tu página de inicio te puede dar la oportunidad de agrupar información de una forma muy ordenada y visual, pero tiene algunas desventajas.

Los sliders requieren de varias imágenes de alta resolución que seguramente tengan un peso que haga que tu sitio tarde mas en cargar. También suelen incluir Javascript, que hará que sea mas difícil de optimizar.

Usar varias tipografías

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.

notepadConclusión sobre las tendencias en diseño web

No se deben seguir las tendencias marcadas en diseño web simplemente por ser lo que está de moda en un determinado momento. En diseño web, lo que es tendencia o deja de serlo, viene marcado por lo que es mejor para los usuarios, es decir por la experiencia de usuario (UX).

¿Piensas que están por venir otras novedades en el diseño web? Si es así, déjame un comentario mas abajo contándome tu punto de vista.

Sin comentarios

Para introducir comentarios debe iniciar sesión