Bienvenido a nuestro resumen anual de tendencias de diseño web. Desde la tipografía retro hasta el movimiento sin código en constante crecimiento, hay mucho que esperar en 2021.
2020 no fue fácil. Con sus galones de desinfectante de manos, las incómodas reuniones de Zoom y la inminente ansiedad de la incertidumbre, todos nos sentimos un poco agotados. A pesar de las circunstancias, todos hicimos nuestro mejor esfuerzo para superarlo. Muchos de nosotros nos tomamos el tiempo para aprender nuevas habilidades de diseño. Y algunos de nosotros acabamos de hacer pan de masa madre. Todos tenemos nuestras habilidades de afrontamiento.
Cuando se trata de diseño, estamos atentos a las tendencias interminables en la web. Después de hablar con el equipo de Brand Studio en Webflow y con un puñado de otros diseñadores, reunimos una lista completa de algunas de las tendencias de diseño web que esperamos ver en 2021. Esperamos que esta lista no solo lo inspire, sino que lo haga abordar la web de una manera más inclusiva y accesible.
21 tendencias modernas de diseño web para 2021
Aquí hay 21 tendencias de diseño web que también ayudarán a que 2021 sea un poco más brillante.
Retro fonts
Hemos visto que muchas cosas viejas se vuelven geniales de nuevo y luego, a su vez, se vuelven aún menos geniales. Piense en bigotes de manillar y jeans mom. La ironía tiene una vida útil corta.
Las fuentes retro han experimentado este mismo reflujo y flujo en su popularidad, y muchos diseños con tipografía vintage no han envejecido bien.
Sin embargo, la tipografía de retroceso ha experimentado un pequeño resurgimiento. No vemos las mismas fuentes gastadas. Más bien, la estilización y un poco de arte 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 del Carnaval de Spotify. En lugar de sentirse obsoletos y clichés, dan nueva vida a las fuentes tradicionales en negrita con un poco de experimentación. Este es un buen ejemplo de cómo tomar fuentes tradicionales y darles un toque moderno y fresco, manteniendo la legibilidad.
Hay una sensación de retro-futurismo aquí en este sitio web para la empresa de planificación de eventos Goliath Entertainment. La tipografía audaz da un guiño al pasado sin dejar de sentirse muy del momento.
A medida que avanza el 2021, esperamos ver una reinvención tipográfica más creativa.
2. Parallax scroll animations
Los Parallax scroll effects han sido una 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 paralaje.
Recuerde que demasiado Parallax scroll animations puede ser perjudicial para las personas con trastornos vestibulares porque la ilusión de profundidad y movimiento puede provocar desorientación y mareos. Aquí hay algunas pautas que vemos que más diseñadores tienen en cuenta para garantizar que incorporen paralaje mínimamente y sin causar daño:
- No permita que los parallax effects le distraigan de la información importante
- No dificulte que el usuario complete una tarea importante
- Mantenga el número de parallax effects al mínimo
- Minimice la cantidad de movimiento de paralaje dentro de cada instancia
- Restringir los parallax efects en un área pequeña de la pantalla
- Incluya una opción para que los usuarios desactiven los parallax effects.
El sitio de portafolio de Alice Lee usa parallax effects que responden a la posición del mouse para darle vida a su ilustración. La cantidad de movimiento es pequeña y está contenida dentro de los límites del héroe. Este es un gran ejemplo del uso de parallax con restricción e intención.
No todas las animaciones de paralaje tienen que hacer grandes gestos en la pantalla. También hemos visto aplicaciones más sutiles. En este diseño web para Green Meadow, casi se podría perder este efecto por completo. Pero esta suave revelación de texto crea una yuxtaposition suficiente para llamar la atención sobre cada bloque de texto tal como aparece.
El año que viene estamos emocionados de ver el parallax scroll utilizado sutilmente, no para un efecto llamativo, sino como una herramienta para enfatizar o resaltar partes importantes del contenido.
3. Horizontal scrolling
Anteriormente considerado como un paso en falso del diseño web, el desplazamiento horizontal está regresando.
Vemos que más diseñadores web continúan experimentando con el desplazamiento horizontal. Aquellos que lo hacen mejor rompen el patrón no por ser diferentes sino como una forma práctica de revelar información secundaria de forma 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 obligue a los usuarios a navegar por contenido horizontal: permita formas alternativas de navegar, como botones de flecha con etiquetas claras
- Use señales visuales claras para indicar dónde el contenido utiliza el desplazamiento horizontal y no oculte estas señales detrás de los botones flotantes.
- Tenga en cuenta qué contenido se beneficiaría de mostrarse en un desplazamiento horizontal: una galería de fotos es un buen candidato, ya que el desplazamiento horizontal mostraría a los usuarios una pequeña vista previa y les permitiría la opción de ver más o seguir moviéndose hacia abajo en la página.
- Evite requerir un desplazamiento horizontal para el texto que debe leerse.
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 un enlace, deslizándolo lentamente hacia las obras destacadas al hacer clic. El movimiento de desplazamiento tiene un buen ritmo y no es demasiado largo, lo que deja brillar las imágenes destacadas.
McBride Design utiliza el desplazamiento horizontal para mostrar fotografías grandes de su trabajo sin ocupar demasiado espacio en la página. También incluyen un indicador claro en la parte inferior derecha que establece la expectativa de que la página se desplace horizontalmente.
4. Imágenes 3D en todas partes
Con el advenimiento de las pantallas de mayor resolución, el diseño 3D ha recorrido un largo camino desde los bordes en bloques y biselados de Geocities. Hemos visto imágenes en 3D de alta calidad integradas sin problemas en los diseños web. En lugar de ser distracciones llamativas, contribuyen a la experiencia general del usuario.
La agencia creativa Sennep arroja toques de profundidad con elementos 3D en todo su sitio web. Aquí 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 cada vez mayor.
Yaya puso su amor por el 3D al frente y al centro de su página de inicio con esta peculiar y genial animación de héroe.
Y en este ejemplo a continuación de la compañía de software de presentación Pitch, tienen un diseño colorido lleno de formas tridimensionales, sombras paralelas, degradados y elementos en capas. Estos elementos de diseño en 3D dan vida a este diseño.
Los elementos 3D añaden un sentido de singularidad y dimensionalidad a cualquier página web.
5. Multimedia experiences
Dado que la mayoría de las personas tienen acceso a velocidades de Internet más rápidas, las experiencias web multimedia están apareciendo en todas partes. La combinación de imágenes, texto, video y audio hace que la experiencia del usuario sea enriquecedora.
Los diseños exitosos en 2021 usarán restricciones con experiencias multimedia:
- Priorice la simplicidad, como al combinar movimiento y audio. Demasiadas actividades pueden distraer o abrumar a las personas con trastornos cognitivos.
- Utilice cuidadosamente diferentes formatos de medios como una forma de maximizar la accesibilidad del contenido.
- Incluya subtítulos y transcripciones para todos los archivos multimedia pregrabados.
- Incluya texto alternativo para las imágenes y acompañe imágenes complejas con texto descriptivo más extenso.
- Asegúrese de que todo el texto esté hecho con HTML en lugar de renderizado dentro de imágenes.
- Evite la reproducción automática de contenido de video o movimiento: en su lugar, proporcione un botón de "reproducción" claro que le brinde al usuario la opción de reproducir y pausar el contenido.
El uso de multimedia de manera eficaz y accesible conlleva la responsabilidad de abordar una variedad de factores.
El sitio de Nicolas Errera incluye controles de reproducción para un hermoso video de fondo: se reproduce al hacer clic y también se puede pausar. También incorpora una animación sutil que indica qué tan avanzado estás en el video.
Las experiencias multimedia funcionan en muchas áreas diferentes. En el siguiente ejemplo, vemos una captura de pantalla del Black Yearbook. Este es un libro financiado con fondos colectivos elaborado por Adraint Bereal y sus amigos para mostrar lo que es ser un estudiante afroamericano que asiste a escuelas predominantemente blancas. Los controles de reproducción completos son claramente visibles en todos los videos. La cinematografía bellamente filmada corta de una escena a la siguiente al comienzo del diseño con una hipnótica banda sonora de fondo, que se parece mucho al avance de una película. Hay una pasión detrás de esta introducción, lo que te hace querer ir más lejos en el aprendizaje sobre el libro y el movimiento detrás de él.
Y para algo fuera de lo común, vamos a completar esta lista de ejemplos multimedia con MSCHF, la famosa compañía detrás de muchos lanzamientos virales basados en la web. El diseño de a MSCHF se extiende a ambos lados de la línea del brutalismo, con un diseño casi absurdo que reúne una tipografía austera, mensajes de texto SMS y otros elementos.
6. Experiencias de realidad aumentada (RA)
Y con las experiencias multimedia, no olvidemos todas las increíbles experiencias inmersivas que utilizan la realidad aumentada (AR). La realidad aumentada significa más ahora que solo buscar Pokémon en tu dispositivo móvil Apple o Android. Las nuevas tecnologías como la API WebXR y el software creado por Wayfair Technologies han abierto este ámbito para casi todo el mundo.
Jeep utiliza AR para esta página "Build & Price a Jeep". Para aquellos que odian entrar en los concesionarios de automóviles, esto lo convierte en una experiencia relajada y sin presiones. Más sitios web minoristas y de comercio electrónico están aprovechando el poder de la RA para ayudar a vender sus productos y empoderar a los clientes potenciales en el proceso de compra.
7. Enfoque en los cereales
Las cuadrículas rígidas y los bloques planos de color sólido realmente pueden drenar la personalidad de un diseño web. Las texturas granuladas pueden darles una sensación más natural.
Vemos la belleza de la granulosidad en este sitio web de Studio Gusto. Utiliza elementos de diseño de baja fidelidad para ofrecer una experiencia de usuario más dura que se siente más natural que la perfección elegante que es común en muchos diseños web.
8. Centrarse en los colores apagados
Al igual que los granos pueden dar a un diseño una sensación más natural, también lo pueden hacer los colores tenues.
Magic Theatre Studio, utiliza una paleta de colores claros, junto con bloques oscuros de verde, lo que crea un contraste distinto entre las secciones de este diseño web. Estos colores apagados son el telón de fondo perfecto para el texto y las ilustraciones dibujadas a mano. En el fondo, hay un grano levemente zumbante que es casi imperceptible y una distorsión sutil de los fondos claros y oscuros, lo que hace que el diseño se sienta muy vivo.
Este portafolio de marketing a continuación para Bobby Rowe es una celebración del color y presenta escritos informativos y divertidos sobre el trabajo que hace. Puede ser difícil crear un diseño web bien redondeado en su genialidad, pero Bobby Rowe lo logra con este diseño web. Hay una buena variedad de colores tenues junto con los más atrevidos.
9. Diseños basados en preferencias
El desarrollo web ha hecho grandes avances para ofrecer experiencias más personalizadas. Esto puede ser cualquier cosa, desde alternar entre el modo oscuro / claro y otras formas de cambiar la apariencia y la navegación de un sitio, hasta ofrecer contenido personalizado a los gustos de uno, como las listas de reproducción personalizadas generadas por Spotify.
Las nuevas prácticas de diseño y algoritmos están haciendo que Internet sea una experiencia de usuario menos pasiva y más centrada en el usuario. El futuro traerá un enfoque aún mayor en satisfacer las necesidades, deseos y gustos de quienes navegan por sitios web.
10. Desenfoque gaussiano
El desenfoque gaussiano funciona muy bien para proporcionar un remolino de enfoque suave a imágenes y degradados. Este efecto ha existido por un tiempo, pero los diseñadores lo han estado usando en espacios más prominentes en diseños web.
Moment House comienza su página de inicio no con una imagen de héroe, sino con un agradable desenfoque de color gaussiano. Esto le da una sensación atmosférica y se relaciona directamente con la foto del paisaje urbano de Los Ángeles que lo sigue. Captura perfectamente la 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 bonito contraste entre las líneas rectas y la tipografía atrevida que la superpone.
El portafolio de UX I am Tamara adopta este mismo enfoque al lanzar un poco de desenfoque gaussiano en el fondo.
Goodbooks integra una burbuja similar a un vapor de un desenfoque gaussiano. La captura de pantalla a continuación no le hace justicia, pero se siente como algo que está escondido detrás de una pantalla blanca. Vemos que la forma cambia y gira, pero nunca vemos completamente de qué se trata. Esto lo convierte en un ancla visual tan maravillosa y llama la atención sobre el llamado a la acción debajo de él para ver sus 12 libros recomendados principales.
Nos encanta ver que cosas que han existido desde siempre, como el desenfoque gaussiano, se vuelven más populares en manos de los diseñadores que las utilizan de formas nuevas e interesantes.
11. Scrollytelling
Hemos visto una tendencia creciente en los diseñadores que cuentan historias a través de experiencias web. Aquí es donde entra en juego la narración de pergaminos, una narración visual que realza la historia y te engancha en su narrativa.
Las mejores aplicaciones de la restricción de práctica de scrollytelling:
- Mantenga el movimiento dentro de un área pequeña.
- Proporcione interacciones según los términos del usuario: proporcione controles de reproducción obvios para reproducir / pausar / detener interacciones y movimientos.
- Asegúrese de que cualquier elemento de la narración ayude a enfatizar la historia, en lugar de distraer la atención del texto importante.
Nuestro propio sitio Web Design Art History utiliza pequeñas y sutiles animaciones y hermosas ilustraciones para respaldar la historia de cómo la historia del arte informa el diseño web.
12. Dark mode
Cuente "Back in Black" de AC DC porque el modo oscuro llegará a más pantallas en 2021. Más diseñadores están adoptando la estética del modo oscuro, con el negro como fondo oscuro perfecto para hacer que los elementos de diseño resalten en la pantalla.
En el siguiente ejemplo, Obys Agency diseñó un hermoso tributo al diseñador de moda Peter Lindbergh, combinando un fondo negro de textura sutil con una hermosa tipografía serif.
No tenga miedo de oscurecerse en 2021 con su propio trabajo de diseño.
13. Ilustraciones de dibujos animados
No hace tanto tiempo, hubo un tiempo en el que los sitios web eran solo texto y algunas imágenes o gráficos. El diseño web ha evolucionado y los diseñadores ahora crean trabajos que conectan con las personas a un nivel más personal. Las ilustraciones de dibujos animados han ganado popularidad como una forma de transformar sitios web con un toque saludable de humanidad.
Hay tantas fuentes y artistas que crean fantásticas ilustraciones de dibujos animados. Blush es una gran plataforma para encontrar ilustraciones de personajes personalizadas, como este gran set de Vijay Verma.
Las ilustraciones de dibujos animados ofrecen mucho en términos de creatividad y hacen que una marca sea más agradable. Esperamos ver un creciente elenco de personajes en los diseños web durante el próximo año.
14. Cuadrículas geométricas
Las cuadrículas son simples pero tienen mucha flexibilidad en cómo se pueden integrar en un diseño. Las cuadrículas geométricas están ganando terreno como una forma de estructurar un diseño, con un aspecto limpio y atrevido.
Este diseño de Hudson Gavin y Martin utiliza bloques tanto para elementos de navegación como para contenido. Es divertido navegar por estos grandes cuadrados de color y funcionan muy bien para mantener su atención.
Las cuadrículas geométricas no tienen que estar en una disposición uniforme. 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 ponderadas más gruesas enfatizan las formas cuadradas en todas partes.
Y para un toque un poco más ligero, obtenemos una bonita disposición de cuadrados y líneas nítidas en este diseño de cuadrícula geométrica para la compañía de cosméticos Skin Labs.
Dando una estructura sólida y una presentación sencilla, las cuadrículas geométricas deben estar en la caja de herramientas de cualquier diseñador web.
15. Cursores personalizados
Los cursores son probablemente uno de los aspectos más pasados por alto del diseño web, y la mayoría de nosotros nos contentamos con una simple flecha vieja. Cuando un diseñador puede tomar esta parte insignificante de un sitio web y convertirla en algo genial, este es un gran logro.
Acabamos de hablar sobre HGM Legal y su uso de cuadrículas geométricas, pero también tienen este cursor negro llamativo fuera de la pared.
The Pen Tool lleva su cursor circular un paso más allá, con la animación y el texto unidos para un efecto casi psicodélico.
En 2021, esperamos ver más versiones originales de lo que puede ser un cursor.
16. Scrolling cards
Nos entusiasma ver que las tarjetas con desplazamiento se convierten en parte integral de los diseños. Ya sea que se desplacen horizontal o verticalmente, agregan una acción ágil a un sitio web y son una excelente manera de presentar información.
Este sitio web de Ofcina utiliza una atractiva variedad de colores para sus tarjetas de desplazamiento.
Los diseños de tarjetas han existido durante bastante tiempo y disfrutamos verlos tomar en nuevas direcciones de desplazamiento.
17. Diseño sin color
El blanco escaso crea un diseño limpio y cualquier elemento que tenga color recibe aún más atención.
Este diseño para Latinxs Who Design tiene mucho espacio en blanco, con un efecto hover que transforma la imagen en blanco y negro de cada diseñador a todo color.
Incluso algo como un diseño simple y minimalista puede ser una experiencia atractiva con microinteracciones, animaciones y otros efectos dinámicos.
User Experience Database también adopta un enfoque de diseño sin color, lo que lo hace mínimo y fácil de leer.
18. Audio
Ofrecer audio como parte integral de un diseño elimina las barreras de accesibilidad para las personas con discapacidades visuales y también beneficia a quienes prefieren escuchar una gran cantidad de texto en un sitio web.
The New York Times hace un trabajo fantástico al proporcionar audio de acompañamiento a algunos de sus artículos destacados.
Esperamos ver más opciones de audio en los sitios web en el futuro, lo que les permitirá a las personas elegir cómo quieren experimentar el contenido.
19. Web inspirada en la impresión
Con la tecnología digital reemplazando tanto que una vez fueron objetos físicos, ha habido un renacimiento de los viejos medios. La popularidad de los álbumes de vinilo es una prueba de que la gente quiere experimentar algo que no sea solo un montón de ceros y unos.
Los diseños que se inspiran en la impresión satisfacen el deseo de las personas de conectarse con algo del mundo real. Los diseños de revistas y otros elementos del diseño gráfico tradicional proporcionan un vínculo a la experiencia táctil de la impresión en papel.
El ejemplo anterior de Home Run Studio y el siguiente para Foundamour se inspiran en la impresión, lo que les da una familiaridad y conexión con la publicación.
20. Diseñar sistemas para mantener la coherencia
Los sistemas de diseño son poderosos. Al utilizar un CMS para crear diseños repetibles y colecciones relacionadas, es fácil realizar actualizaciones o ediciones, así como crear sitios web duplicados rápidamente. Ya sea que se utilicen a pequeña escala o para una mayor, son útiles para cualquier organización en la creación y gestión de sus diseños.
También hemos visto aplicaciones que parecen realmente útiles desarrolladas para facilitar aún más los flujos de trabajo del sistema de diseño. Zeroheight actúa como un espacio centralizado para gestionar tareas y colaborar. Figma ofrece plantillas y otras herramientas de sistemas de diseño. Y la colección CMS de Webflow puede impulsar un sistema de diseño sin importar el tamaño.
21. Sin código
Ningún código no significa la eliminación completa del código. Los programadores y desarrolladores siempre serán importantes. Ningún código significa abrir estas áreas de especialización a aquellos que de otro modo estarían exentos. Permite que cualquiera que tenga una idea o una visión pueda crear.
Sin código, los diseñadores pueden convertirse en desarrolladores front-end. Los escritores se convierten en diseñadores web. Y los propietarios de pequeñas empresas pueden lanzarse al mundo del comercio electrónico. Sea quien sea, ningún código le permite convertirse en algo más. Elimina las líneas divisorias entre los no diseñadores, los que solo diseñan y los que son desarrolladores. Reúne a las personas en colaboración.
Ha sido emocionante ver el desarrollo de nuevas plataformas sin código y diseñar cursos que incluyan enseñanzas al respecto en su plan de estudios. No podemos esperar a ver qué sucede con el movimiento sin código en 2021.
Jeff Cardello
traductor
Carlos && Ponce
El articulo original esta aqui -> webflow blog
Gracias especiales a la web webflow, este contenido en español es posible gracias ella. <3