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!
Resumen
- Tendencias en diseño web para tener webs originales y modernas
- #1 Colores brillantes e intensos
- #2 Elementos flotantes
- #3 Mezcla de fotografía con gráficos
- #4 Formas orgánicas
- #5 Fuentes en negrita
- #6 Elementos apilados
- #7 El poder de los vectores
- #8 Elementos sticky (pegajosos)
- #9 Degradados / transparencias
- #10 Texturas
- #11 Interactividad
- #12 Micro animaciones
- #13 Micro interacciones
- #14 Contenido dinámico
- #15 Modo oscuro
- #16 El énfasis en los datos
- #17 Hero con texto
- #18 Textos animados
- #19 Efectos hover potentes
- #20 Elementos desplazables
- #21 Combinación de elementos
- #22 Realidad virtual
- Tendencias en diseño web obligatorias
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?
- 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.
- 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.
- 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.
- 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:
✅ ¿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.
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 😉
¡No te vayas! Aún hay más...
Diseñador Web en WordPress. Diseño páginas con gancho, que cargan rápido y están optimizadas para SEO. Amante de la creatividad, el marketing y los animales.
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.
Me alegro que coincidas, Aleix ?
¡Muchas gracias por pasarte y comentar!
¡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 ?
¡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
Hola, Max.
Muy de acuerdo con todas estas tendencias 😉
¡Qué bonitas animaciones veo por aquí!
¿Todas con Divi, verdad?
¡Un abrazo!
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