21 tendencias de diseño web únicas para 2021

Echa un vistazo a nuestra última publicación: 11 tendencias de diseño web atractivas para 2024.

El 2020 no fue fácil. Entre litros de desinfectante de manos, reuniones incómodas por Zoom y la ansiedad constante de la incertidumbre, todos nos sentimos un poco agotados. A pesar de las circunstancias, hicimos lo posible por seguir adelante. Muchos aprovechamos para aprender nuevas habilidades de diseño. Otros simplemente nos dedicamos a hacer pan de masa madre. Cada uno tiene sus formas de sobrellevar las cosas.

En cuanto al diseño, estuvimos atentos a las tendencias interminables de la web. Tras hablar con el equipo de Brand Studio de Webflow y otros diseñadores, elaboramos una lista completa de las tendencias de diseño web que esperamos ver durante gran parte de 2021. Esperamos que esta lista no solo te inspire, sino que te ayude a abordar la web de una manera más inclusiva y accesible.

21 tendencias modernas de diseño web para 2021

Aquí tienes 21 tendencias de diseño web que también ayudarán a que 2021 sea un poco más brillante.

1. Fuentes retro

Hemos visto muchas cosas antiguas ponerse de moda y, a su vez, volverse anticuadas de nuevo. Piensa en los bigotes estilo manillar o los vaqueros de tiro alto. La ironía tiene fecha de caducidad.

Las fuentes retro han experimentado este mismo flujo en su popularidad, y muchos diseños con tipografía vintage no han envejecido nada bien.

Sin embargo, la tipografía de estilo retro ha resurgido con fuerza. Ya no vemos las mismas fuentes cansadas de siempre. Más bien, la estilización y un toque artístico están reinventando lo que pueden ser las fuentes retro.

Vemos esta fusión de lo antiguo y lo nuevo en la página de la promoción Carnival de Spotify. En lugar de sentirse anticuadas y clichés, insuflan nueva vida a las fuentes negritas tradicionales con un toque de experimentación. Este es un buen ejemplo de cómo tomar fuentes tradicionales y darles un giro moderno y genial, manteniendo la legibilidad.

Hay una sensación de retrofuturismo en el sitio web de la empresa de organización de eventos Goliath Entertainment. La tipografía en negrita hace un guiño al pasado sin dejar de sentirse muy actual.

A medida que avance 2021, esperamos ver más reinvenciones tipográficas creativas.

2. Animaciones de desplazamiento con efecto parallax

Los efectos de desplazamiento parallax han sido tendencia en el diseño de sitios web durante años, y en 2021 esperamos ver exploraciones más sutiles y creativas de lo que se puede lograr con ellos.

Recuerda que un exceso de movimiento en los efectos parallax puede ser perjudicial para personas con trastornos vestibulares, ya que la ilusión de profundidad y movimiento puede causar desorientación y mareos. Aquí tienes algunas pautas que vemos que cada vez más diseñadores tienen en cuenta para asegurarse de incorporar el parallax de forma mínima y sin causar daños:

• No permitas que los efectos parallax distraigan de la información importante
• No dificultes que el usuario complete una tarea importante
• Mantén el número de efectos parallax al mínimo
• Minimiza la cantidad de movimiento de paralaje en cada instancia
• Limitar los efectos de paralaje a un área pequeña de la pantalla
• Incluye una opción para que los usuarios desactiven los efectos de paralaje
  

El sitio de portafolio de Alice Lee utiliza efectos de paralaje que responden a la posición del ratón para dar vida a sus ilustraciones. El movimiento es leve y se mantiene dentro de los límites de la sección principal. Es un gran ejemplo de cómo usar el paralaje con moderación y propósito.

No todas las animaciones de paralaje tienen que hacer grandes gestos por toda la pantalla. También hemos visto aplicaciones más sutiles. En este diseño web para Green Meadow, casi se podría pasar por alto el efecto. Pero esta suave revelación del texto crea el contraste suficiente para dirigir la atención a cada bloque de texto a medida que aparece.

El próximo año nos entusiasma ver el desplazamiento de paralaje utilizado de forma sutil, no como un efecto llamativo, sino como una herramienta para enfatizar o resaltar partes importantes del contenido.

3. Desplazamiento horizontal

Considerado anteriormente como un error de diseño web, el desplazamiento horizontal está regresando.

Cada vez vemos a más diseñadores web experimentando con el desplazamiento horizontal. Quienes mejor lo hacen rompen el patrón no por el simple hecho de ser diferentes, sino como una forma práctica de mostrar información secundaria de manera progresiva, como en una galería de imágenes.

Los diseñadores que empleen el desplazamiento horizontal con éxito en 2021 tendrán en cuenta estas consideraciones:

• No obligues a los usuarios a navegar por el contenido horizontal: ofrece formas alternativas de navegación, como botones de flecha con etiquetas claras
• Usa señales visuales claras para indicar dónde se utiliza el desplazamiento horizontal y no ocultes estas señales detrás de efectos al pasar el ratón
• Piensa bien qué contenido se beneficiaría de mostrarse con desplazamiento horizontal; una galería de fotos es una buena candidata, ya que el desplazamiento horizontal mostraría a los usuarios una pequeña vista previa y les daría la opción de ver más o seguir bajando por la página
• Evita requerir el desplazamiento horizontal para textos que necesitan ser leídos
  

En nuestra propia página de destacados de diseñadores, hemos utilizado un poco de desplazamiento horizontal para ampliar una imagen grande y mostrar partes más relevantes de la misma a mayor tamaño, acompañando al contenido correspondiente.

‍La página de inicio de Momento Design Studio incluye una señal clara junto al botón principal que también actúa como enlace, deslizándote lentamente hacia los trabajos destacados al hacer clic. El movimiento de desplazamiento tiene un buen ritmo y no es demasiado largo, lo que permite que las imágenes destacadas brillen.

McBride Design utiliza el desplazamiento horizontal para mostrar fotos grandes de su trabajo sin ocupar demasiado espacio en la página. También incluyen un indicador claro en la parte inferior derecha que prepara al usuario para que sepa que la página se desplazará horizontalmente.

4. Visuales 3D por todas partes

Con la llegada de pantallas de mayor resolución, el diseño 3D ha recorrido un largo camino desde los bordes pixelados y biselados de Geocities. Hemos visto visuales 3D de alta calidad integrados perfectamente en diseños web. En lugar de ser distracciones llamativas, contribuyen a la experiencia general del usuario.

La agencia creativa Sennep añade toques de profundidad con elementos 3D en todo su sitio web. Hay una agradable sensación de armonía entre todos los elementos de diseño. Este es un ejemplo perfecto de cómo, en diseños más minimalistas, el 3D puede causar una impresión aún mayor.

Yaya ha puesto su pasión por el 3D en el centro de su página de inicio con esta animación principal tan peculiar y genial.

Y en este ejemplo de abajo de la empresa de software de presentaciones Pitch, tienen un diseño colorido lleno de formas tridimensionales, sombras paralelas, degradados y elementos en capas. Estos elementos de diseño 3D hacen que la página cobre vida.

Los elementos 3D añaden una sensación de singularidad y tridimensionalidad a cualquier página web.

5. Experiencias multimedia

Dado que la mayoría de la gente tiene acceso a velocidades de internet más rápidas, las experiencias web multimedia están apareciendo por todas partes. Combinar elementos visuales, texto, vídeo y audio crea una experiencia de usuario muy completa.

Los diseños exitosos en 2021 utilizarán la moderación en las experiencias multimedia:

• Prioriza la sencillez, como al combinar movimiento y audio. Demasiados estímulos pueden distraer o abrumar a personas con trastornos cognitivos.
• Utiliza diferentes formatos multimedia de forma inteligente para maximizar la accesibilidad del contenido.
• Incluye subtítulos y transcripciones para todo el contenido multimedia pregrabado.
• Incluye texto alternativo para las imágenes y acompaña las imágenes complejas con un texto descriptivo más largo.
• Asegúrate de que todo el texto esté creado con HTML en lugar de renderizado dentro de imágenes.
• Evita la reproducción automática de vídeos o contenido en movimiento: en su lugar, ofrece un botón de "reproducir" claro que dé al usuario la opción de iniciar y pausar el contenido.
  

El uso eficaz y accesible de los elementos multimedia conlleva la responsabilidad de abordar diversos factores. Aquí tienes más recursos sobre la accesibilidad en vídeo.

El sitio de Nicolas Errera incluye controles de reproducción para un hermoso vídeo de fondo: se reproduce al hacer clic y también se puede pausar. Además, incorpora una sutil animación que indica cuánto has avanzado en el vídeo.

Las experiencias multimedia funcionan en muchísimas áreas. En el ejemplo de abajo, vemos una captura de pantalla de Black Yearbook. Se trata de un libro financiado mediante crowdfunding, creado por Adraint Bereal y sus amigos para mostrar cómo es ser un estudiante afroamericano en escuelas predominantemente blancas. Los controles de reproducción completos son claramente visibles en todos los vídeos. Una cinematografía bellamente rodada corta de una escena a otra al principio del diseño con una banda sonora hipnótica de fondo, lo que da la sensación de estar viendo el tráiler de una película. Hay mucha pasión detrás de esta introducción, lo que te invita a seguir descubriendo el libro y el movimiento que lo respalda.

Y para algo fuera de lo común, vamos a cerrar esta lista de ejemplos multimedia con MSCHF, la infame empresa detrás de muchos lanzamientos virales basados en la web. El diseño extravagante de MSCHF roza el brutalismo, con un estilo casi absurdo que combina una tipografía austera, mensajes de texto SMS y otros elementos.

6. Experiencias de realidad aumentada (RA)

Y hablando de experiencias multimedia, no olvidemos todas las increíbles experiencias inmersivas que utilizan la realidad aumentada (RA). La RA significa mucho más hoy en día que simplemente cazar Pokémon en tu dispositivo móvil Apple o Android. Nuevas tecnologías como la API WebXR y el software creado por Wayfair Technologies han abierto este mundo a casi todo el mundo.

Jeep utiliza la RA para esta página de “Configura y pon precio a tu Jeep”. Para quienes odian tener que pisar un concesionario, esto supone una experiencia ágil y sin presiones. Cada vez más sitios web de venta al por menor y comercio electrónico están aprovechando el poder de la RA para ayudar a vender sus productos y dar más autonomía a los clientes potenciales durante el proceso de compra.

7. Un enfoque en el grano

Las cuadrículas rígidas y los bloques planos de colores sólidos pueden restarle mucha personalidad a un diseño web. Las texturas granuladas pueden darles un toque más natural.

Podemos apreciar la belleza del granulado en este sitio web de Studio Gusto. Utiliza elementos de diseño de baja fidelidad para lograr una experiencia de usuario más cruda, que se siente mucho más natural que la perfección pulida tan común en muchos diseños web.

8. Un enfoque en colores tenues

Al igual que el granulado puede darle a un diseño un aire más natural, también pueden hacerlo los colores suaves.‍

Magic Theater Studio, utiliza una paleta de colores claros junto con bloques oscuros de verde, creando un contraste marcado entre las secciones de este diseño web. Estos colores tenues son el telón de fondo perfecto para el texto y las ilustraciones de estilo dibujado a mano. En el fondo, hay un granulado ligeramente vibrante que es casi imperceptible, además de una sutil distorsión en los fondos claros y oscuros, lo que hace que el diseño se sienta muy vivo.

Este portafolio de marketing de Bobby Rowe es una celebración del color y presenta textos informativos y divertidos sobre su trabajo. Puede ser difícil crear un diseño web que sea redondo en su genialidad, pero Bobby Rowe lo logra con este sitio. Hay una buena variedad de colores suaves junto a otros más atrevidos.

9. Diseños basados en preferencias

El desarrollo web ha avanzado mucho a la hora de ofrecer experiencias más personalizadas. Esto puede ir desde incluir un interruptor para cambiar entre modo oscuro y claro, u otras formas de modificar la apariencia y navegación de un sitio, hasta ofrecer contenido adaptado a los gustos de cada uno, como las listas de reproducción personalizadas que genera Spotify.

Las nuevas prácticas de diseño y los algoritmos están haciendo que internet deje de ser una experiencia de usuario pasiva para centrarse más en la persona. El futuro traerá un enfoque aún mayor en satisfacer las necesidades, deseos y gustos de quienes navegan por los sitios web.

10. Desenfoque gaussiano

El desenfoque gaussiano funciona de maravilla para añadir un toque de suavidad a imágenes y degradados. Este efecto existe desde hace tiempo, pero los diseñadores lo están utilizando en espacios cada vez más destacados dentro de los diseños web.

Moment House no comienza su página de inicio con una imagen principal, sino con un agradable desenfoque gaussiano de color. Esto le da un aire atmosférico y conecta directamente con la foto del paisaje urbano de Los Ángeles que aparece a continuación. Captura a la perfección esa lente de luz dorada y neblina a través de la cual se ve Los Ángeles.

Vemos un desenfoque gaussiano en el fondo de Monograph Communications. Esta mezcla esponjosa de rojo, morado y azul crea un contraste agradable con las líneas rectas y la tipografía llamativa que se superpone.

El portafolio de UX I am Tamara adopta el mismo enfoque al añadir un toque de desenfoque gaussiano en el fondo.

Goodbooks integra una burbuja de desenfoque gaussiano que parece vapor. La captura de pantalla de abajo no le hace justicia, pero da la sensación de algo oculto tras una pantalla blanca. Vemos cómo la forma cambia y gira, pero nunca llegamos a verla del todo. Esto crea un ancla visual maravillosa y dirige la atención hacia la llamada a la acción que aparece debajo para consultar sus 12 libros recomendados.

Nos encanta ver cómo elementos que existen desde siempre, como el desenfoque gaussiano, ganan popularidad en manos de diseñadores que los usan de formas nuevas e interesantes.

11. Scrollytelling

Hemos visto una tendencia creciente en diseñadores que cuentan historias a través de experiencias web. Aquí es donde entra el scrollytelling — una narrativa visual que realza la historia y te atrapa en su relato.

Las mejores aplicaciones de scrollytelling practican la moderación:

• Mantén el movimiento dentro de un área pequeña.
• Ofrece interacciones bajo los términos del usuario: proporciona controles de reproducción claros para reproducir, pausar o detener las interacciones y los movimientos.
• Asegúrate de que los elementos de "scrollytelling" ayuden a enfatizar la historia en lugar de distraer la atención del texto importante.

Nuestro propio sitio de Web Design Art History utiliza animaciones pequeñas y sutiles junto con hermosas ilustraciones para respaldar la historia de cómo la historia del arte influye en el diseño web.

12. Modo oscuro

Prepara el "Back in Black" de AC/DC, porque el modo oscuro está llegando a más pantallas en 2021. Cada vez más diseñadores se suman a la estética del modo oscuro, utilizando el negro como el telón de fondo perfecto para que los elementos de diseño resalten en la pantalla.

En el siguiente ejemplo, Obys Agency diseñó un hermoso homenaje al diseñador de moda Peter Lindbergh, combinando un fondo negro con una textura sutil y una elegante tipografía con remates.

No tengas miedo de pasarte al lado oscuro en 2021 con tus propios diseños.

13. Ilustraciones tipo caricatura

Hubo un tiempo, no hace mucho, en que los sitios web eran solo texto y algunas imágenes o gráficos. El diseño web ha evolucionado y ahora los diseñadores crean trabajos que conectan con las personas a un nivel más personal. Las ilustraciones tipo caricatura han ganado popularidad como una forma de transformar los sitios web con un toque saludable de humanidad.

Existen muchísimas fuentes y artistas creando ilustraciones fantásticas. Blush es una plataforma excelente para encontrar ilustraciones de personajes personalizadas, como este gran conjunto de Vijay Verma.

Las ilustraciones tipo caricatura ofrecen mucho en términos de creatividad y hacen que una marca sea más cercana. Estamos deseando ver un elenco de personajes cada vez mayor en los diseños web durante el próximo año.

14. Cuadrículas geométricas

Las cuadrículas son sencillas, pero ofrecen mucha flexibilidad a la hora de integrarlas en un diseño. Las cuadrículas geométricas están ganando terreno como una forma de estructurar el diseño, aportando un aspecto limpio y audaz.

Este diseño de Hudson Gavin and Martin utiliza bloques tanto para los elementos de navegación como para el contenido. Estos grandes cuadrados de color son divertidos de explorar y funcionan de maravilla para mantener tu atención.

Las cuadrículas geométricas no tienen por qué ser uniformes. Flowmingo utiliza una cuadrícula geométrica más asimétrica, pero con cuadrados y líneas como base de su diseño. Las líneas de mayor grosor enfatizan las formas cuadradas en todo el conjunto.

Y para un toque más ligero, tenemos una agradable disposición de cuadrados y líneas nítidas en este diseño de cuadrícula geométrica para la empresa de cosméticos Skin Labs.

Al proporcionar una estructura sólida y una presentación directa, las cuadrículas geométricas deberían estar en la caja de herramientas de cualquier diseñador web.

15. Cursores personalizados

Los cursores son probablemente uno de los aspectos más ignorados del diseño web, ya que la mayoría nos conformamos con la típica flecha de siempre. Cuando un diseñador logra tomar esta parte insignificante de un sitio web y convertirla en algo genial, es todo un logro.

Acabamos de hablar de HGM Legal y su uso de cuadrículas geométricas, pero también cuentan con este cursor negro, audaz y fuera de lo común.

La herramienta Pluma lleva su cursor circular un paso más allá, combinando animación y texto para lograr un efecto casi psicodélico.

O echa un vistazo a este cursor circular que cambia de forma de Büro, el cual modifica su apariencia según el elemento de diseño sobre el que se desplace.

En 2021, esperamos ver propuestas más originales sobre lo que puede llegar a ser un cursor.

16. Tarjetas con desplazamiento

Nos entusiasma ver cómo las tarjetas con desplazamiento se están convirtiendo en partes integrales de los diseños. Ya sea con desplazamiento horizontal o vertical, añaden un toque dinámico a los sitios web y son una forma fantástica de presentar información.

Este sitio web de Ofcina utiliza una llamativa gama de colores para sus tarjetas con desplazamiento.

Los diseños basados en tarjetas llevan tiempo entre nosotros y nos encanta ver cómo se exploran nuevas direcciones de desplazamiento para ellas.

17. Diseño sin color

El uso de espacios en blanco crea un diseño limpio, haciendo que cualquier elemento con color destaque mucho más.

Este diseño de Latinxs Who Design cuenta con mucho espacio en blanco y un efecto al pasar el ratón que transforma la imagen en blanco y negro de cada diseñador a todo color.

Incluso un diseño minimalista y sencillo puede ofrecer una experiencia atractiva mediante microinteracciones, animaciones y otros efectos dinámicos.

User Experience Database también apuesta por un enfoque sin color, logrando un resultado minimalista y fácil de leer.

18. Audio

Ofrecer audio como parte integral del diseño elimina barreras de accesibilidad para personas con discapacidad visual y también beneficia a quienes prefieren escuchar grandes bloques de texto en un sitio web,

El New York Times hace un trabajo fantástico al ofrecer audio complementario en algunos de sus artículos destacados.

Esperamos ver más opciones de audio en los sitios web en el futuro, dando a los usuarios la posibilidad de elegir cómo quieren consumir el contenido.

19. Web inspirada en el diseño impreso

Con la tecnología digital reemplazando tantos objetos que antes eran físicos, ha surgido un renacimiento de los antiguos medios. La popularidad de los discos de vinilo demuestra que la gente quiere experimentar algo que no sea solo una sucesión de ceros y unos.

Los diseños inspirados en el mundo impreso satisfacen el deseo de conectar con algo del mundo real. Los formatos tipo revista y otros elementos del diseño gráfico tradicional ofrecen un vínculo con la experiencia táctil de la tinta sobre el papel.

El ejemplo anterior de Home Run Studio, y el siguiente de Foundamour, se inspiran en el diseño impreso, lo que les otorga una sensación de familiaridad y conexión con el mundo editorial.

20. Sistemas de diseño para la coherencia

Los sistemas de diseño son una herramienta potente. Al usar un CMS para crear diseños repetibles y colecciones relacionadas, es muy sencillo realizar actualizaciones o ediciones, además de crear sitios web duplicados en un abrir y cerrar de ojos. Ya sea a pequeña o gran escala, son útiles para que cualquier organización cree y gestione sus diseños.

También hemos visto aplicaciones muy útiles diseñadas para facilitar aún más los flujos de trabajo de los sistemas de diseño. Zeroheight funciona como un espacio centralizado para gestionar tareas y colaborar. Figma ofrece plantillas y otras herramientas para sistemas de diseño. Y la colección CMS de Webflow puede potenciar un sistema de diseño sin importar su tamaño.

21. No-code

No-code no significa eliminar el código por completo. Los programadores y desarrolladores siempre serán fundamentales. El movimiento no-code significa abrir estas áreas de especialización a quienes antes no tenían acceso. Permite que cualquier persona con una idea o visión pueda crear.

Gracias al no-code, los diseñadores pueden convertirse en desarrolladores front-end. Los redactores pueden ser diseñadores web. Y los propietarios de pequeñas empresas pueden lanzarse al mundo del comercio electrónico. Sea quien seas, el no-code te da el poder de llegar más lejos. Elimina las barreras entre quienes no diseñan, quienes solo diseñan y quienes desarrollan. Une a las personas para colaborar.

Ha sido emocionante ver el desarrollo de nuevas plataformas no-code y cómo los cursos de diseño incluyen estas enseñanzas en sus planes de estudio. Estamos deseando ver qué ocurre con el movimiento no-code en 2021.

Esperamos con ilusión el 2021

Siempre es emocionante ver cómo el diseño web sigue cambiando y observar el impulso constante del movimiento no-code.

También estamos deseando ver lo que vas a crear en el nuevo año. Publica tus últimos trabajos en nuestro escaparate y no olvides unirte a la creciente y solidaria comunidad de nuestro foro.

¡Feliz año nuevo y a seguir diseñando!

‍

Nota: Nuestra publicación original incluía la accesibilidad como una tendencia de diseño web, pero clasificarla así resta importancia a su valor. Pedimos disculpas sinceramente y reconocemos el daño causado al tratar la accesibilidad web como una tendencia más. La accesibilidad no es una moda pasajera, es un estándar hacia el que nuestra industria debería avanzar.

También hemos añadido algunas consideraciones y directrices a tener en cuenta para utilizar estas tendencias sin causar perjuicios. Esperamos seguir educando y creando conciencia sobre la accesibilidad en Webflow, y animar a nuestra comunidad de diseñadores a hacer lo mismo.