26 tendencias en diseño web para 2021 + ejemplos

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:

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.

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.

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

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:

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.

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:

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:

#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:

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).

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:

#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:

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.

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

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:

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:

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

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.

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:

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

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:

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

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:

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:

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.

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:

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.

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:

#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:

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:

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.

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.

#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:

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 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:

⬅️ 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.

#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:

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.

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 😉