tendencias en diseño web para 2021
tendencias en diseño web para 2021

Portada: Shutterstock por Soagraphics

Tiempo de lectura:

26 tendencias en diseño web para 2021 + ejemplos

26/11/2020

2020 llega a su fin y, siguiendo la tradición de este blog, toca publicar uno de los artículos que más me gusta escribir como diseñador web. Redoble de tambores: señoras y señores, les presento las tendencias en diseño web para 2021.

El diseño web es un sector en constante movimiento y transformación, por lo que quienes nos dedicamos a ello estamos en continuo aprendizaje, investigación y prueba de nuevos formatos de diseño.

De modo que, en este post recopilaré cuáles son las tendencias en diseño web para 2021 más punteras y que ya se están dejando ver desde hace un tiempo.

¡Empezamos!

Tendencias en diseño web para tener webs originales y modernas


#1 Colores brillantes e intensos

Empezamos fuerte, por la paleta de colores, uno de los elementos creativos más importantes de una web y que es de los primeros que debes establecer.

En lo referente a colores, las tendencias actuales van en la dirección de tonos brillantes e intensos, que refuercen el mensaje de forma visual, creando combinaciones creativas muy potentes.

Te dejo algunos ejemplos de diseños web con combinaciones de colores brillantes e intensas:

tendencias en diseño web para 2021: colores

Combinación de vídeo, imágenes e ilustraciones con colores muy vibrantes, que aportan al diseño el dinamismo buscado en esta landing page.

tendencias en diseño web para 2021: colores

En esta web del sector de la realidad aumentada utilizamos una combinación de colores muy llamativa, a la que aplicamos además un efecto degradado para potenciar el mensaje.

tendencias en diseño web para 2021: colores

En este caso, utilizamos un fondo en movimiento a modo de transición con los colores de la marca (azul marino y naranja).

tendencias en diseño web para 2021: colores

Por último, en este ejemplo puedes ver una cabecera cuyo fondo está compuesto por salpicaduras de diferentes colores en movimiento.

#2 Elementos flotantes

Los elementos flotantes han llegado al diseño web para quedarse y seguro que ya has empezado a verlos. Se trata de crear composiciones que fluyan en torno a los diferentes elementos del sitio (textos, imágenes, etc) o en múltiples columnas. El resultado es una especie de efecto en movimiento, pero de forma estática.

Te dejo varios ejemplos para que entiendas mejor el concepto:

tendencias en diseño web para 2021: elementos flotantes

En el primer ejemplo puedes ver cómo la ilustración se mantiene en todo momento como elemento flotante al hacer scroll y, mientras, en el fondo se produce un efecto movimiento por las diferentes formas geométricas que lo integran.

tendencias en diseño web para 2021: elementos flotantes

En el segundo ejemplo puedes ver cómo el formulario de contacto funciona como elemento flotante que se queda superpuesto sobre dos secciones diferentes: la cabecera y el texto que presenta el servicio.

#3 Mezcla de fotografía con gráficos

La combinación de fotografías y gráficos es otra de las tendencias en diseño web para 2021, ya que, al combinar los dos tipos de contenido, se consigue un resultado muy creativo y moderno.

Veamos algunos ejemplos:

tendencias en diseño web para 2021: mezcla fotografía gráficos

En esta web puedes ver la combinación de elementos gráficos con distintas formas (cuadros y círculos), fotografía y texto.

En mi propia web también puedes ver este recurso en diferentes páginas. En mi caso, lo aplico en forma de «brochazo» de pintura que se superpone sobre algunas imágenes.

#4 Formas orgánicas

La integración de formas orgánicas en diseño web ha ido ganando terreno durante los últimos meses, desplazando el uso de formas geométricas, algo que ha sido tendencia en años previos.

Te dejo varios ejemplos:

tendencias en diseño web para 2021: formas orgánicas

#5 Fuentes en negrita

Las tipografías como elemento destacado en el diseño vienen siendo tendencia desde hace varios años.

Yendo un paso más allá, es el momento de las fuentes en negrita como elemento destacado del sitio web, donde se convierten en protagonista para reforzar el mensaje.

Varios ejemplos:

tendencias en diseño web para 2021: fuente negrita

En esta web utilizamos la combinación de varios tamaños, formatos y colores para destacar su propuesta de valor (todos los textos van en la misma tipografía).

tendencias en diseño web para 2021: fuente negrita

En este otro ejemplo utilizamos fuentes en mayúscula y negrita con una sombra del color corporativo de la web. El resultado, combinado con un fondo de realidad virtual, es muy llamativo y moderno.

#6 Elementos apilados

Los elementos que se apilan unos sobre otros son una buena idea para maquetar páginas con mucho contenido, pero en las que no queremos que el usuario haga un scroll muy largo a la hora de navegar. Por lo tanto, esta técnica es muy interesante para concentrar contenido en el mismo campo de visión de la web.

Te dejo un ejemplo:

tendencias en diseño web para 2021: elementos apilados

#7 El poder de los vectores

Los vectores son muy habituales en diseño web, ya que otorgan un toque creativo y sirven para mostrar el contenido de forma dinámica.

Son un tipo de recurso muy utilizado desde hace tiempo y que continuará estando en uso.

Te dejo varios ejemplos donde puedes ver la perfecta integración entre vectores y diseño web:

tendencias en diseño web para 2021: vectores

Aquí puedes ver el uso de vectores como elemento flotante para acompañar a una serie de textos que aparecen en forma de cronología vertical.

tendencias en diseño web para 2021: vectores

En mi propia web los utilizo para explicar mi propuesta de valor como diseñador web freelance.

tendencias en diseño web para 2021: vectores

Y aquí puedes verlos como forma para explicar los beneficios de contratar un servicio online.

#8 Elementos sticky (pegajosos)

Los elementos con efecto sticky (pegajoso) son una de las tendencias en diseño web para 2021 que más fuerza están tomando.

Se trata de fijar cualquier tipo de elemento (botones, imágenes, formularios, menús, etc) mediante posicionamiento cuando el usuario navega por una web y llega a un punto concreto. Es decir, dicho elemento se queda pegado o fijo en un punto concreto de la pantalla.

Te dejo varios ejemplos:

tendencias en diseño web para 2021: elementos sticky

En este caso, se trata de tres botones que están fijos en la parte inferior del diseño y se quedan pegados en la parte superior cuando el usuario hace scroll.

#9 Degradados / transparencias

Los degradados son otra de las tendencias que están en vigor desde hace un tiempo y que seguirán estando durante 2021.

Combinar varios tonos para crear gamas de colores modernas y atrevidas es un plus en el diseño web actual.

Te dejo varios ejemplos del uso de efectos degradados en diferentes tipos de recursos:

tendencias en diseño web para 2021: degradados

En esta academia de idiomas, utilizamos los degradados para presentar sus diferentes modalidades de formación online.

tendencias en diseño web para 2021: degradados

Y en Tramando Viajes los utilizamos en diferentes partes de su diseño, como son las cabeceras de algunas de sus páginas y landing pages.

#10 Texturas

Y de los degradados pasamos directamente a otra tendencia en diseño web muy actual, que es la integración de texturas en la maquetación del sitio.

Las texturas se suelen utilizar especialmente como fondos y se combinan con otros elementos (textos, botones, iconos, etc).

Es una de mis tendencias favoritas. De hecho, puedes verla en esta web, pues la utilicé cuando hice el rediseño completo.

tendencias en diseño web para 2021: texturas

Aquí puedes ver una sección con un fondo de textura en mi propia página de inicio, donde superpongo textos con diferentes estilos, tipografías y colores, y además un elemento gráfico vectorial.

#11 Interactividad

Las formas de interacción del usuario con los sitios web también son una de las tendencias en diseño web que ya llevan un tiempo en vigor.

Se trata de pequeñas acciones que se producen cuando el usuario realiza una interacción con alguno de los elementos que forman parte del diseño.

Un par de ejemplos:

tendencias en diseño web para 2021: interactividad

En este ejemplo, se produce un movimiento o giro al interactuar con los servicios de esta web.

tendencias en diseño web para 2021: interactividad

Y en este caso, se trata de subcategorías de productos que se despliegan al clicar en la categoría principal.

#12 Micro animaciones

Muy relacionada con la tendencia anterior, hablamos ahora de las micro animaciones: pequeños efectos de movimiento que contribuyen a dar dinamismo al diseño mientras el usuario navega por la web.

Te dejo varios ejemplos:

tendencias en diseño web para 2021: micro animaciones

En el primer ejemplo, puedes ver este separador que tiene una animación al hacer scroll en la página.

tendencias en diseño web para 2021: micro animaciones

En el segundo, puedes ver un elemento gráfico que aparece animado por la parte inferior y se ha utilizado para reforzar el branding de marca en el sitio web.

#13 Micro interacciones

Y de micro animaciones, pasamos a una tendencia muy relacionada: las micro interacciones, que son pequeñas acciones o movimientos que se producen al interactuar con algún elemento del diseño: acercar el ratón, ponerlo encima, clicar, desplazarse, etc.

Te dejo varios ejemplos para que veas de qué se trata exactamente:

tendencias en diseño web para 2021: micro interacciones

Aquí puedes ver una sección que incluye varios testimonios de clientes, maquetados en dos columnas, y que van cambiando al pasar el ratón por cada uno de sus autores.

#14 Contenido dinámico

La siguiente tendencia me encanta. Se trata de mostrar contenido dinámico al público de tu web en función de distintas variables: la hora y el día de la visita o el lugar de procedencia

Te dejo un ejemplo:

tendencias en diseño web para 2021: contenido dinámico
tendencias en diseño web para 2021: contenido dinámico

Como puedes ver en estas capturas de la misma página realizadas en momentos diferentes, se produce un cambio en el saludo y el día según el momento de navegación por la web.

#15 Modo oscuro

Otra tendencia que ya llevamos viendo un tiempo y que empezaron a promover las redes sociales es el modo oscuro, que permite cambiar el tono de una web por colores oscuros en vez de claros en función de la selección que haga el usuario y de sus preferencias.

tendencias en diseño web para 2021: modo oscuro

En este ejemplo puedes ver cómo debajo del menú he incluido un selector para elegir el modo de visualización de la web: claro u oscuro.

#16 El énfasis en los datos

Mostrar una gran cantidad de datos es importante en determinados tipos de negocios o sectores. Si tu web se encuentra en este caso, te anticipo que hay posibilidad de mostrar estos datos de forma creativa.

Puedes recurrir a elementos como contadores, barras, vectores o animaciones para mostrar muchos datos de forma creativa.

Te dejo varios ejemplos:

tendencias en diseño web para 2021: datos

En este ejemplo puedes ver cómo se muestran cuatro datos en forma de porcentajes animados que van creciendo a medida que el usuario se desplaza por la página.

tendencias en diseño web para 2021: datos

Esta infografía que publicó El País hace un tiempo es muy buen ejemplo para entender esta tendencia. Su objetivo es ilustrar de modo creativo y animado cómo se propaga el Covid en diferentes lugares y situaciones. A medida que el usuario hace scroll van cambiando los datos, textos y colores.

#17 Hero con texto

En diseño web se conoce como hero al elemento de grandes dimensiones que es el que visualmente más destaca dentro de una página. Sería el elemento principal del diseño.

La tendencia en este sentido son los heros que incluyen texto únicamente, sin ningún tipo de elemento adicional como pueden ser imágenes, vídeos o gráficos.

Te dejo un ejemplo:

tendencias en diseño web para 2021: hero texto

#18 Textos animados

Ya has visto que las animaciones y los elementos interactivos son otra de las tendencias en diseño web para 2021, también en lo que a textos se refiere.

Los textos animados han llegado para quedarse y el resultado es muy creativo.

Te dejo un ejemplo:

tendencias en diseño web para 2021: textos animados

Como puedes ver, se trata de un texto animado en cuanto a movimiento y color, que además va acompañado de un elemento gráfico que hace de separador.

#19 Efectos hover potentes

Los hover son un efecto habitual en diseño web desde hace tiempo, pero en los últimos meses han evolucionado hasta llegar a diseños más potentes.

Ya sabes que el hover es un efecto de CSS que produce un cambio visual al poner el ratón sobre un elemento. Por ejemplo: un botón que cambia de color al poner el puntero encima.

Pero si hablamos de hover potentes, te dejo un par de ejemplos:

tendencias en diseño web para 2021: efectos hover

En el primero, puedes ver cómo, al pasar el ratón por encima de la imagen, el fondo se degrada y además aparece un botón que en la primera vista no está disponible.

tendencias en diseño web para 2021: efectos hover

En el segundo, mucho más visual, puedes ver cómo, al pasar el puntero por el botón, se produce un cambio en todo el diseño: fondo, efecto separación, imagen, colores, textos y botón.

#20 Elementos desplazables

Los elementos que se desplazan al realizar una acción determinada en la web también van ganando terreno y se están convirtiendo en tendencia.

Como puedes ver en este ejemplo, se trata de una página de servicios en la que la llamada a la acción (contáctanos) se desplaza desde la parte superior y, al hace scroll, entonces aparece el formulario de contacto.

tendencias en diseño web para 2021: elementos desplazables

#21 Combinación de elementos

La combinación de elementos, en principio, dispares entre sí también va ganando terreno en diseño web. Te dejo un ejemplo y te lo explico sobre el mismo:

tendencias en diseño web para 2021: combinación de elementos

Como puedes ver en este ejemplo de landing, la cabecera incluye una llamada a la acción en la parte central (quiero pedir presupuesto) y en la parte inferior tres botones que llevan al resto de apartados de la web (páginas: servicios, blog y sobre mí). Además, en la esquina derecha aparece un formulario de contacto para preguntar dudas; todos ellos elementos diferentes entre sí, pero que en este diseño funcionan juntos.

#22 Realidad virtual

La realidad aplicada en diseño web permite crear entornos con apariencia real para transmitirle al usuario la sensación de estar dentro de esa escena.

Para ver ejemplos muy buenos de esta tendencia, te recomiendo visitar la web de IKEA, donde han creado marcos de realidad en las que el usuario puede interactuar y comprobar cómo quedaría cualquier estancia de su hogar en tiempo real.

Te dejo un ejemplo con una de sus cocinas:

tendencias en diseño web para 2021: realidad virtual

Tendencias en diseño web obligatorias


Antes de terminar, quiero recordar algunas tendencias en diseño web que son obligatorias y que ya he mencionado en ediciones anteriores de este post:

#23 WPO

Una buena velocidad de carga es fundamental en un sitio web por varios motivos:

  • Usabilidad: queremos información rápida, no estamos dispuestos a esperar más de unos segundos para que una web cargue. Si tu web es lenta, el usuario se marchará.
  • Conversiones: muy relacionado con el punto anterior; a mejor velocidad de carga, aumentará el número de conversiones.
  • SEO: la velocidad de carga es uno de los factores clave en el posicionamiento de un sitio web.

Por lo tanto, te recomiendo optimizar tu web para reducir al máximo posible su velocidad de carga y además hacer un buen aprovechamiento de los recursos del servidor (ahorras espacio en tu hosting y tiempo de carga).

¿Algunos consejos rápidos?

  1. Optimiza muy bien tus imágenes: súbelas siempre a tu web con las dimensiones requeridas por tu tema y comprimidas para reducir su tamaño sin perder calidad.
  2. Utiliza un buen sistema de caché: para ello existen plugins específicos, o bien puedes servirte del sistema de caché que te ofrezca tu propio servidor (si lo tiene). En el caso de SiteGround, mi proveedor de hosting, dispone de SuperCacher, su propio servicio de caché para optimizar el rendimiento.
  3. Activa el lazyload (carga perezosa) en imágenes, vídeos e iframes para que este tipo de contenido solo cargue cuando el usuario necesite visualizarlo. Con ello reducirás el número de solicitudes y mejorarás el tiempo de carga de tu web.
  4. Comprime, combina y minifica los archivos CSS y JavaScript.

#24 Mobile first

Como ya habrás imaginado, la navegación desde dispositivos móviles es prioritaria en estos momentos (y desde hace unos años ya). El propio Google ha reconocido que centra su indexación en la versión móvil del buscador.

Por lo tanto, esta tendencia que prioriza la navegación (y la indexación) desde los teléfonos móviles hace que, a la hora de diseñar y desarrollar sitios web, se tenga en cuenta en primer lugar a este tipo de dispositivos.

En este sentido, te recomiendo activar en tu sitio web la tecnología AMP, que se encarga de adaptar y mejorar la navegación desde el móvil, reduciendo al máximo la velocidad de carga y priorizando la indexación del contenido en Google.

Yo la tengo activada en los artículos de este blog desde hace un tiempo y te voy a mostrar las diferencias entre la versión responsive y AMP de un post:

tendencias en diseño web para 2021: mobile first
versión responsive
tendencias en diseño web para 2021: mobile first
versión AMP

⬅️ A izquierda puedes ver la versión responsive de este post que genera Divi (el plantilla de mi web) en base al diseño y configuración de mis artículos.

➡️ A la derecha puedes ver la versión AMP que genera el plugin AMP for WP en base a los ajustes y estilos que he aplicado en su configuración. Su particularidad es que el diseño es más simple (ya que carga muchos menos recursos), está alojado en los propios servidores de Google e incluye una barra superior que te permite ir a la web directamente y salir de la vista de Google.

Además, si activas la tecnología AMP, verás que ahora en los resultados de búsqueda aparece un ⚡ al lado de tu web, dato que le permite al usuario saber en qué sitio encontrará información rápida y optimizada.

tendencias en diseño web para 2021: mobile first

#25 Legalidad y RGPD

De nada sirve tener un sitio precioso y a la última en lo que a diseño se refiere si no es una web legal, es decir, si no cumple rigurosamente con el Reglamento General de Protección de Datos (RGPD) y la LOPD (Ley Orgánica de Protección de Datos).

En este sentido, la cosa se ha puesto seria en los últimos meses y ya hay varias empresas que han sido multadas por la AEPD ( Agencia Española de Protección de Datos) por no cumplir la legalidad vigente.

Por lo tanto, tener una web legal es totalmente obligatorio, sí o sí.

Te dejo un resumen para que lo entiendas de forma más gráfica:

✅ ¿Qué es una web legal?

  • Tiene todos los textos legales actualizados y visibles desde cualquier página.
  • Informa a sus usuarios sobre qué datos recoge y qué tratamiento hace de ellos.
  • Tiene todos los formularios adaptados, ya sean de contacto, suscripción, registro o comentarios: check con la política de privacidad y capa informativa.
  • Doble-optin: reconsentimiento cuando el usuario se suscribe.
  • Las cookies cargan cuando el usuario las acepta y, en el caso de rechazarlas, no se produce dicha carga.

❌ ¿Qué NO es una web legal?

  • Falta alguno de los textos legales, están desactualizados o todos en la misma página (errores muy comunes).
  • No se explica el tratamiento que se hace con los datos personales recogidos.
  • Los formularios no están correctamente adaptados.
  • La suscripción se realizar directamente, sin el doble opt-in.
  • Las cookies cargan sin que sean aceptadas, el usuario no puede rechazarlas o ajustarlas, o directamente se asume su aceptación cuando empieza a navegar.

Este es un resumen «grosso modo». Si necesitas más información sobre legalidad web, te recomiendo echarle un vistazo a los kits de Marina Brocca para legalizar tu web, mi profesional de confianza en esta materia.

#26 Seguridad

Terminamos este repaso hablando de seguridad, un tema fundamental tanto por la privacidad de tus usuarios como por la protección de tu sitio para evitar ataques.

Para tener un sitio seguro, es fundamental tener un certificado SSL que cargue tu web bajo protocolo HTTPs (y no http).

Estos certificados puedes descargarlos y activarlos directamente desde tu proveedor de hosting (el 95% lo incluyen de forma gratuita).

Ten en cuenta que, desde hace un tiempo, la mayoría de navegadores muestran un mensaje que indica que el sitio no es seguro si la web no cuenta con el certificado SSL.

Además, si tienes una tienda online, el protocolo HTTPs es obligatorio para que funcionen las pasarelas de pago.

tendencias en diseño web para 2021: seguridad
Aviso de web no segura
tendencias en diseño web para 2021: seguridad
Mensaje que aparece si tu web es segura

Espero que esta recopilación con las tendencias en diseño web para 2021 te sea de mucha utilidad si estás pensando en crear una web o ya tienes una y quieres actualizarla. Recuerda que, si necesitas ayuda con este proceso, tienes a tu disposición mi servicio de diseño web 😉

Summary
🎨 26 tendencias en diseño web para 2021 + ejemplos
Article Name
🎨 26 tendencias en diseño web para 2021 + ejemplos
Description
Descubre las tendencias en diseño web para 2021, los formatos y tipos de diseño actuales, y ejemplos de webs originales y modernas.
Author
Publisher Name
Max Camuñas
Publisher Logo

6 Comentarios

  1. Aleix

    Gran artículo Max, y por supuesto estoy realmente de acuerdo con todo lo que has expuesto en este post. Destacando los elementos desplazables, la combinación de elementos y el énfasis en los datos. No hay que dejar de mencionar que es de uso obligatorio los textos legales y el SSL.

    Responder
    • Max Camuñas

      Me alegro que coincidas, Aleix ?

      ¡Muchas gracias por pasarte y comentar!

      Responder
  2. Óscar

    ¡Genial post, muy completo e ilustrativo, muchas gracias Max!

    Me gustaría preguntarte cómo haces los gifs animados que pones en los ejemplos, ¡me encantan!.

    Un abrazo ?

    Responder
    • Max Camuñas

      ¡Muchas gracias, Óscar!

      Lo que hago es capturar primero la pantalla en vídeo con la herramienta del Mac y luego convertirlo a GIF en ezgif.com/video-to-gif

      Un abrazo

      Responder
  3. Marcos

    Hola, Max.
    Muy de acuerdo con todas estas tendencias 😉
    ¡Qué bonitas animaciones veo por aquí!

    ¿Todas con Divi, verdad?

    ¡Un abrazo!

    Responder
    • Max Camuñas

      Hola Marco,

      Así es. Salvo los ejemplos de Ikea y El País, todas son ejemplos de diseños hechos con Divi 🙂

      ¡Gracias por pasarte!

      Un abrazo

      Responder

Enviar un comentario

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

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Diseña
tu web

Diseña
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guía

PARA DISEÑAR LOGOTIPOS MEMORABLES

GUÍA para diseñar logotipos memorables