Tendencias dise├▒o web 2020

CATEGOR├ŹA:

Tendencias dise├▒o web 2020

Es cierto que este tipo de art├şculos se suelen escribir a principios de a├▒o, o incluso a finales del anterior pero… Con la renovaci├│n integral que realizamos en nuestra p├ígina Web y la priorizaci├│n de algunos art├şculos que hemos escrito anteriormente, por poco casi se nos olvida redactar un art├şculo de gran utilidad para los lectores. Conocer las tendencias en dise├▒o Web 2020 te permitir├í estar actualizado en las tendencias en materia de dise├▒o y realizar asombrosas Webs a tus clientes. Por supuesto y, c├│mo os tenemos acostumbrados, este art├şculo est├í basado en t├ęcnicas que nosotros mismos aplicamos a nuestros clientes o t├ęcnicas provenientes de los mejores gurus en dise├▒o Web de EE.UU.

En un mundo cada vez más competitivo, las tendencias en diseño Web requieren cada vez más un estudio completo de mercado. Mantenerse actualizado y no tener una web obsoleta en materia de diseño, es esencial para cautivar la atención de tus clientes.

En este post te mostraremos las tendencias en dise├▒o web para 2020. Mezclaremos diversas t├ęcnicas de dise├▒o web, desde las m├ís recientes y novedosas, a t├ęcnicas que jam├ís pasar├ín de moda.

Tendencias dise├▒o web 2020

A continuación os mostraremos las tendencias de diseño web más novedosas, creativas y únicas. No dejes de tenerlas en cuenta si quieres tener una página Web atractiva y única.

1. Elementos dinámicos

Los elementos din├ímicos tales como v├şdeos, animaciones, ilustraciones, textos en movimiento y gifs… son elementos visuales con los que debe contar tu p├ígina Web este 2020.

Gracias a ellos conseguirás una Web visual y creativa. Es necesario introducirlos en los lugares adecuados para crear el efecto deseado.

Cuando realizamos una página web, resulta de vital importa optimizarla. Además de mejorar la experiencia del usuario, mejorará la velocidad del sitio web y en consecuencia el posicionamiento en buscadores del mismo. Es necesario optimizar siempre todos los elementos visuales que incluyamos, reduciremos el tamaño de los mismos y los optimizaremos en función del dispositivo desde el que se visite la página Web.

tendencias en dise├▒o web

En este ejemplo se han usado im├ígenes muy grandes y un efecto de movimiento que convierte la im├ígen actual a una “pantalla de ordenador” te dejamos por aqu├ş el enlace de esta impresionante p├ígina web para que puedas comprobarlo por ti mismo.

Enlace a pitch.com

2. Efectos de Scroll

Los efectos scroll causan un gran efecto ¡Wow! en los visitantes de tu página web. Transmiten una gran imagen de dinamismo y creatividad.

En el siguiente ejemplo podremos observar cómo a medida que se hace Scroll, de forma dinámica van apareciendo los diferentes elementos de la Web.

tendencias dise├▒o web 2020

3. Elementos 3D

Los diseños 3D serán una vez más tendencia en el año 2020. Hay que prestar especial atención a su inclusión y no abusar de ellos. En el siguiente ejemplo podemos ver cómo Apple, en su página de Información del Ipad, sólo aplica un diseño 3D que aporta valor al contenido, puesto que muestra de un rápido vistazo el grosor del dispositivo.

tendencias dise├▒o web 2020 3d

4. Movimiento desigual

Esta es una tendencia de dise├▒o moderna muy atractiva a nuestro parecer. Cuando el usuario visitante de la p├ígina Web hace Scroll los elementos de la p├ígina Web no de desplazan uniformemente, sino de forma desigual, logrando as├ş captar la atenci├│n del usuario.

nuevas tendencias dise├▒o web

5. Animaciones Hover

En el dise├▒o web se denomina hover al cambio que se produce al pasar el rat├│n por encima de un elemento que forma la p├ígina Web. El efecto hover puede ser aplicable a palabras, enlaces, botones, im├ígenes, bloques…

Una de las tendencias en dise├▒o web para 2020 es aplicar esos efectos hover a gran escala. Bloques grandes de elementos, cambios en fondos, en im├ígenes grandes…

6. Elementos Gigantes

S├ş, has le├şdo bien. Gigantes. Una de las tendencias modernas que m├ís se est├í utilizando en el a├▒o 2020 es la inclusi├│n de elementos visuales extra grandes. Tipograf├şas e im├ígenes gigantes que potenciar├ín el campo visual de la Web.

elementos grandes como tendencia de dise├▒o web

7. Párrafos decorados

Una de las tendencias de dise├▒o web para 2020 es la inclusi├│n de textos decorados. ├ôlvidate de inmensos p├írrafos (que nadie se lee) sin ning├║n tipo de decoraci├│n. Aumenta el tama├▒o de algunas palabras, usa elementos hovers, decoraci├│n, emojis, microinteracciones…

8. Peque├▒as interacciones y micro interacciones

Tal y cómo hemos mencionado anteriormente, crear pequeñas interacciones con el contenido hará que aumente el tiempo de retención del usuario en la página web además de conseguir transmitir una sensación única.

9. Part├şculas en movimiento

Las part├şculas en movimiento son un recurso gr├ífico que nunca pasa de moda y, este 2020 no va a ser menos. En la renovaci├│n de nuestra p├ígina Web decidimos incluir las part├şculas en la home de nuestro sitio Web.

10. N├║meros en movimiento

Al igual que las part├şculas, los n├║meros en movimiento son un elemento muy visual que capta la atenci├│n de los usuarios que visitan tu p├ígina web. Es un recurso que nunca pasa de moda. En el a├▒o 2020 cobran especial importancia los elementos gr├íficos por lo que los n├║meros en movimiento deber├ís incluirlo en tus dise├▒os web.

11. Desplazamientos verticales

Las webs con desplazamiento vertical tambi├ęn est├ín siendo tendencia en 2020. Esta t├ęcnica consiste en tener puntos espec├şficos de scroll marcados, es decir, a medida que el usuario hace scroll, la web se desplaza de forma vertical por “bloques”.

12. Pesta├▒as y navegaci├│n oculta

La navegaci├│n oculta es una metodolog├şa web muy aplicable a ciertos tipos de p├íginas Web. En el siguiente ejemplo de dise├▒o web para uno de nuestros clientes podemos ver c├│mo a trav├ęs de la gesti├│n de pesta├▒as y la navegaci├│n oculta simulamos un “men├║” para poder elegir el elemento de la carta del restaurante que deseamos ver.

Tambi├ęn se puede utilizar este recurso para banners que muestran su contenido desplegado una vez que se hace clic en ellos.

13. Elementos Sticky

Una de las tendencias de diseño web de 2020 es la inclusión de elementos adhesivos, fixed o sticky. Estos elementos se quedan fijos aunque el usuario se desplace por la Web. Un buen ejemplo de elemento sticky es el menú superior de una página Web, quedarlo como elemento fijo permitirá al usuario tenerlo siempre a mano sin tener que recurrir a hacer scroll hasta arriba de nuevo en la página Web.

La idea de este recurso es que facilite la navegaci├│n al usuario, por lo que resulta de vital importancia elegir de forma correcta que elemento decidimos quedar “fijado” en nuestra p├ígina web y tener muy claro el por qu├ę decidimos fijar dicho elemento.

14. Modo oscuro

Creemos que una de las tendencias principales en dise├▒o web en este 2020 ser├í el modo oscuro. Podremos ver webs dise├▒adas completamente en negro o interfaces de usuario que ofrecen al visitante la opci├│n de cambiar al modo oscuro. Los fondos oscuros permiten resaltar m├ís algunos elementos, as├ş como tambi├ęn poder jugar m├ís con los colores e intensidades de los mismos. Otra buena opci├│n de implementar el modo oscuro, es cambiar autom├íticamente a dicho modo cuando llega la hora nocturno. Esto es configurable hasta teniendo en cuenta la zona geogr├ífica y uso horario de cada visitante.

tendencia de dise├▒o web modo oscuro

 

15. Elementos 3D Inmersivos e Interactivos

Estos elementos 3D tienen un objetivo claro y establecido en la página Web, captar la atención del usuario y crear un mágico efecto Wow. Además de sorprender por su diseño, el usuario podrá interactuar ampliamente con el efecto 3D. A continuación os listamos algunos sitios que, sin duda alguna, te sorprenderán.

  • interview.ueno.co M├ís que una p├ígina con elementos y efectos 3D, parece un juego Online. Interacciones impresionantes. Bots. La m├║sica de fondo, que parece sacada de un Crash Bandicoot… SIN PALABRAS.
  • marmont.gucci.com
  • a-0.design

16. Mezclar fotograf├şas reales con gr├íficos

Mezclar fotograf├şas reales con ilustraciones o gr├íficos comunican un mensaje muy personalizado. Tanto si son fotograf├şas de personas o fotograf├şas de producto, estos dise├▒os pueden ser muy compatibles con la marca y ayudar a las p├íginas webs a destacar frente a la competencia.

Superponer gr├íficos originales sobre fotograf├şas reales crea una imagen memorable para el visitante de la Web. La imaginaci├│n del usuario se volver├í loca. Es un m├ętodo muy efectivo para agregar m├ís personalidad a sus productos o servicios.

17. Espacios en blanco alrededor del elemento

Crear un espacio en blanco alrededor de los elementos principales de la p├ígina Web permitir├í centrar al usuario visitante de la p├ígina web en los elementos que realmente cobran importancia. Las im├ígenes y estructuras de sangrado completo han sido y son tendencia desde hace much├şsimo tiempo. Actualmente muchos dise├▒adores est├ín optando por dise├▒os muy limpios, con amplios m├írgenes y espacios en blanco, en webs con poco contenido que consiguen captar en sus puntos m├ís importantes la atenci├│n del usuario. Los marcos cuidadosamente estructurados permitir├ín crear un sentido de orden satisfactorio para el visitante y ayudar├ín a priorizar y separar las distintas partes de una p├ígina Web.

18. Esquemas de colores atrevidos

Los esquemas de colores atrevidos y futuristas son una clara tendencia de diseño web este año. Los colores azules, púrpura y rosa fuerte ayudarán a dar a tus diseños web una sensación futurista y brillante. Estas combinaciones de colores ayudan a que los diseños web resalten en la pantalla y se diferencien completamente de la competencia. Sobre fondos oscuros estos diseños crean una combinación perfecta que cautivará a los visitantes de tu web. Una de las últimas tendencias es usar colores que se asemejan a los colores de los neones.

tendencia dise├▒o web paleta de colores atrevidos

 

18. Navegaci├│n Web minimalista

El minimalismo y la simplificaci├│n de las p├íginas Web es una tendencia que ha llegado para quedarse. Crear webs “simplificadas” facilitar├í la navegaci├│n del usuario y la usabilidad Web. Con el paso de los a├▒os la navegaci├│n web se ha vuelto m├ís simplista, eliminando gran parte de la dificultad que las webs antiguas ten├şan en la experiencia de navegaci├│n. Al mismo tiempo las im├ígenes cobran cada vez m├ís importante, donde una s├│la imagen puede transmitir m├ís que muchos p├írrafos de texto, esta capacidad de las fotograf├şas a├║n se ve m├ís incrementada con la inclusi├│n de v├şdeos en las p├íginas Web.

19. La tipograf├şa rompe las normas

Ha sido una tendencia que ha costado que cale en los dise├▒adores, pero parece que 2020 es el a├▒o en el cual los dise├▒adores Web romper├ín con las normas establecidas y jugar├ín m├ís que nunca con las tipograf├şas. Cambiar el tama├▒o, espaciado, jugar con las negritas, subrayados y resaltados son tan s├│lo algunas de las tendencias con las tipograf├şas en el dise├▒o Web. En esta tendencia la tipograf├şa se usa como elemento decorativo m├ís que como elemento informativo.

20. Superposici├│n de capas

La superposici├│n de capas no crear├ín un efecto 3D pero si crear├ín un efecto de profundidad y dimensi├│n al proyecto Web. Esta tendencia funciona en casi cualquier tipo de esquema de dise├▒o. Podemos superponer todo tipo de elementos, textos, iconos, im├ígenes, bloques….

21. Degradados y más degradados

Hace un tiempo los dise├▒adores evitaban a toda costa los degradados y optaban por dise├▒os planos. Este 2020 regresan con m├ís fuerza que nunca los degradados. Esta t├ęcnica de dise├▒o es aplicable a textos, superposiciones en fotograf├şas, bloques, fondos…

22. Dise├▒o basado en emociones y sensaciones

El dise├▒o es comunicaci├│n. Cuando pensamos en comunicaci├│n naturalmente pensamos en entregar y recibir informaci├│n. Pese a ello, hay un elemento de la comunicaci├│n que puede ser f├ícilmente olvidado, las emociones. Por mucho tiempo, las tendencias de dise├▒o web se basaban en la usabilidad del usuario. Hoy en d├şa, adem├ís de una gran usabilidad Web y experiencia de usuario durante la navegaci├│n, la web debe transmitir un gran impacto emocional. Las p├íginas webs han pasado de ser “neutras” a ser p├íginas cargadas de emociones. En funci├│n del tipo de negocio intentaremos transmitir unas u otras sensaciones. No es lo mismo la web de un experto fot├│grafo en bodas que la web de un restaurante.

23. Visualizaci├│n de datos

Para muchas personas resulta mucho m├ís sencillo entender la informaci├│n que transmitida a trav├ęs de la visualizaci├│n de datos. La visualizaci├│n de datos se ha convertido r├ípidamente en un elemento esencial para crear historias visuales. Los datos aumentan la retenci├│n de la audiencia e incrementan el inter├ęs de la misma por tu marca.

24. V├şdeo como cabecera

El v├şdeo es capaz de transmitir la idea principal en cuesti├│n de segundos. Utilizar un v├şdeo como cabecera de un apartado de tu p├ígina web (generalmente suele ser en el “home”) en vez de una imagen, generar├í una experiencia inmersiva y ├║nica en el visitante de la p├ígina Web. La experiencia de visitar la web de tu proyecto ser├í m├ís viva y din├ímica. Los v├şdeos utilizados en la secci├│n de cabecera podr├í tener una duraci├│n muy breve y ser reproducido en bucle o ser un v├şdeo largo que incluye la opci├│n de activar el audio.

25. Sitios web generados por Scroll

Gracias a esta tendencia podremos crear sitios web en los que embarcaremos a nuestros visitantes en aut├ęnticos viajes inmersivos. A medida que el usuario hace scroll en la p├ígina Web se ir├í mostrando el contenido de forma din├ímica. Estos sitios web rastrean el progreso del usuario a medida que se desplazan por la p├ígina y mostrar├ín la informaci├│n de la web en funci├│n del contexto. Estos sitios tienen habitualmente una gran retenci├│n de la audiencia ya que captan la atenci├│n del usuario e introducen un gran dinamismo en las interacciones de los usuarios. El mejor ejemplo de Webs dise├▒adas mediante scroll es Apple.

26. Usar gráficos vectoriales

Hemos comentado en infinidad de ocasiones que una de las tendencias principales ser├í la inclusi├│n de elementos multimedia y gr├íficos. En ocasiones, al incluir tantos logotipos, gr├íficos e im├ígenes se ralentiza el sitio web y nos penaliza en posicionamiento. Una de las mejores soluciones es utilizar archivos SVG. Los archivos .svg son im├ígenes vectoriales que escalan con el tama├▒o de la pantalla manteniendo la calidad de los gr├íficos originales. El SVG no trabaja con p├şxeles por lo que por muy grande que escale nuestro gr├ífico siempre garantizaremos una buena visibilidad del mismo. Siempre que sea posible usaremos gr├íficos SVG garantizando una m├íxima velocidad de nuestros sitios web.

27. Interfaces de voz

Gracias a los millones de dispositivos que existen en el mercado con asistentes de voz c├│mo Google Assistant o Siri, muchas personas est├ín acostumbradas a hablar con su dispositivo m├│vil, bien sea para usar el asistente o para, por ejemplo, enviar una nota de audio de Whatsapp. Como dise├▒adores podemos adoptar esta tendencia e incluir funcionalidades a trav├ęs de la voz en las p├íginas Web de nuestros proyectos. Por ejemplo, en vez de poner un formulario de contacto, establecer un sistema mediante el cual los visitantes de la web puedan dejar un mensaje de voz con su consulta.

28. Contenido dividido

La t├ęcnica del contenido dividido no es una novedad este a├▒o, pero seguir├í siendo tendencia. El contenido dividido muestra m├ís de un mensaje importante a la vez e una misma p├ígina. Generalmente esta t├ęcnica se utiliza con un texto en uno de los lados y una imagen al otro.

29. Formularios a pantalla completa

Los formularios a pantalla completa son una tendencia que han llegado para quedarse. En muchas ocasiones, el formulario de contacto se convierte en una de las partes m├ís importantes de la p├ígina Web. Entonces, ┬┐por qu├ę no ponerlo a pantalla completa? Centra la atenci├│n del usuario para que pueda transmitirte sin distracciones la informaci├│n que desee.

30. Cabeceras de s├│lo texto

La inclusi├│n de grandes cabeceras con s├│lo texto y sin im├ígenes logra captar toda la atenci├│n del usuario al mensaje que se quiere transmitir. Es una excelente t├ęcnica para transmitir un mensaje con un visual muy limpio. Adem├ís esta t├ęcnica reporta claros beneficios al rendimiento de la Web, al ser dise├▒os ligeros y r├ípidos de cargar.

┬┐Qu├ę tendencias dise├▒o web 2020 uso para mi web?

Esta es una pregunta muy habitual… El dise├▒o de una p├ígina web requiere de un gran estudio previo donde influyen muchos factores. Tipo de negocio, cliente objetivo, objetivos de venta… Hay ciertas tendencias en dise├▒o web que no pasan de moda, los efectos por scroll, la superposici├│n de capas, los efectos hover… Estas tendencias podr├ín ser aplicadas en casi cualquier proyecto de dise├▒o web, pero otros, como las tipograf├şas gigantes, esquemas de color atrevidos, o los sitios webs generados por scroll, son tendencias aplicables a proyectos muy concretos. 

Efectos, webs dinámicas, imágenes ¿pENALIZAN EN VELOCIDAD?

Los diferentes efectos aplicables a una p├ígina web, la inclusi├│n de im├ígenes y v├şdeos, y la creaci├│n de webs din├ímicas, que “tienen vida propia”, deben de ser dise├▒adas poniendo especial mimo durante su creaci├│n. La presencia de estos elementos pueden ralentizar de forma notable la velocidad de la p├ígina web y en consecuencia su posicionamiento. Recordemos que uno de los factores m├ís importantes en el posicionamiento, es la velocidad de nuestro sitio web, por lo que, encontrar el balance necesario entre la inclusi├│n de las ├║ltimas tendencias de dise├▒o y no caer en sobrecargas que penalicen la velocidad de nuestro sitio web, es una labor compleja.

Encontrando el balance entre las ├║ltimas tendencias dise├▒o web y la optimizaci├│n

┬┐C├│mo podemos aplicar las ├║ltimas tendencias en dise├▒o web, a├▒adir a nuestro sitio im├ígenes, v├şdeos, efectos y no penalizar la experiencia de usuario y velocidad de nuestro proyecto? Debemos contar con un especialista en dise├▒o web que encuentre el equilibrio perfecto. Un buen desarrollador deber├í tener en cuenta miles de factores, optimizaci├│n de las im├ígenes, uso de logotipos .SVG , v├şdeos cortos de baja calidad en bucle, uso de gifs optimizados, gestionar correctamente y optimizar de forma independiente la versi├│n m├│vil y la versi├│n de ordenador de la web…

Y si usas im├ígenes…

┬íQu├ę sean de calidad! La inclusi├│n de buenas im├ígenes en tu sitio web har├ín que tu proyecto capte m├ís la atenci├│n de tus posibles clientes y retengan un mayor n├║mero de audiencia en tu sitio. Las im├ígenes de tu web podr├ís hacerlas tu mismo. Seg├║n el tipo de negocio, puede ser la opci├│n ideal pero… ┬┐Si no podemos contratar a un fot├│grafo? ┬íNo pasa nada! Casi cualquier m├│vil de hoy en d├şa tiene mejor calidad que muchas c├ímaras de hace tan s├│lo unos a├▒os, prueba a fotografiar diversos detalles propios de tu negocio con tu c├ímara y completa tu proyecto web gracias a nosotros… Recientemente hemos creado una mega gu├şa con m├ís de 40 bancos de im├ígenes gratis. ┬íVisita el post y desc├║brelos!

┬┐Te ha gustado el post? No dudes en compartirlo o dejarnos un comentario cont├índonos qu├ę te ha parecido.

Si te gustó el post vótalo con 5 estrellas. ¡Ayuda mucho!
[Total: 0 Media: 0]

Dejar un comentario

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

Responsable: David Del R├şo Pascual
Finalidad: Gesti├│n de los comentarios de las publicaciones
Legitimaci├│n: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o gestionados por entidades acogidas al acuerdo EU-US Privacy Shield.
Derechos: Acceder, rectificar y suprimir los datos, as├ş como otros derechos, como se explica en la informaci├│n adicional. Si no facilitas los datos solicitados como obligatorios, puede dar como resultado no poder cumplir con la finalidad para los que se solicitan