Tendencias de diseño web 2021

Mientras que el mundo se adapta a un nuevo año, también lo hacen los diseñadores que adoptan un nuevo año de diseño. Después de un año de tantas incógnitas, comenzamos a ver tendencias que nos llevan de regreso a un pasado cómodo al tiempo que enfatizan la experiencia del usuario enfocada en el futuro. 

Desde trabajar en línea hasta comprar en línea y socializar en línea, las personas están interactuando con Internet más que nunca, y los diseñadores están adoptando diseños audaces para ampliar los límites de lo que podemos experimentar juntos.

Si bien esto no es de ninguna manera exhaustivo, aquí están 11 de las principales tendencias de diseño web que estamos viendo para 2021:

  1. Diseños de página con desplazamiento horizontal
  2. Cursores personalizados
  3. Objetos 3d
  4. Excelentes experiencias de comercio electrónico
  5. Líneas de cuadrícula visibles con grosores de línea gruesos
  6. Opciones de preferencia del usuario en los sitios (no solo en las aplicaciones) 
  7. Un cambio de la creación de sitios web a la creación de soluciones
  8. Ilustraciones lúdicas
  9. La tipografía como diseño, no solo palabras
  10. Formas geométricas como elementos de fondo
  11. WordPress como CMS

1. Diseños de página con desplazamiento horizontal

Los sitios web de desplazamiento largo y los diseños de paralaje son populares desde hace varios años. A medida que nos acercamos al 2021, comenzamos a ver un cambio de orientación de los diseñadores que utilizan el movimiento horizontal para «disminuir» la longitud de la página. 

Si bien la experiencia física no es diferente para el usuario (por lo general, todavía desplaza el mouse hacia arriba y hacia abajo), la experiencia visual proporciona algo inesperado e interesante. Crea un viaje a través del sitio web en el que el usuario no sabe muy bien a dónde lo llevará, lo cual es raro ahora que hemos desarrollado patrones tan normales para sitios web. 

Este sitio web de Jony Guedj , un director de cine independiente, utiliza un desplazamiento horizontal para la sección principal de su sitio para mostrar su trabajo. La barra de colores en la parte inferior se mueve junto con el mouse, como una forma útil de orientar «dónde» se encuentra en la página.

LinkSture , una agencia centrada en el diseño y las soluciones de comercio electrónico, utiliza un desplazamiento horizontal para mostrar su cartera también en su página de inicio. Sin embargo, está más abajo en la página, usando una combinación de movimientos verticales y horizontales mientras se desplaza.

We Virtually Are , un estudio de realidad virtual, utiliza el movimiento horizontal para hacerte sentir como si estuvieras en el mismo lugar en su sitio, mientras todo el contenido cambia. Es completamente diferente de lo que espera de la mayoría de los sitios web, una experiencia adecuada para una empresa de realidad virtual que se especializa en crear nuevas realidades.


2. Cursores personalizados

Me encanta especialmente esta tendencia porque me resulta familiar y nueva. Un guiño a los cursores personalizados de mediados de la década de 2000 , Los cursores personalizados están regresando con elegancia. 

Desde formas geométricas mínimas hasta experiencias de páginas web totalmente interactivas, personalizar el cursor del mouse se está convirtiendo en una pequeña forma de agregar algo de repetición a su marca. Muchas agencias lo utilizan para repetir formas o colores de sus logotipos, o como una forma de involucrar a los usuarios con el sitio. 

En este ejemplo de Rox Studios , una agencia de diseño boutique, el mouse es ese círculo amarillo. Cambia en función del contenido de fondo sobre el que se desplaza el cursor, convirtiéndose en un botón de llamada a la acción para «Ver» un proyecto.

¿Ves esa carita divertida en la primera imagen? Eso es su mouse cuando aterriza en el sitio web de Concept Studio . Verá algunas criaturas similares en todo el sitio y también verá el cursor cambiar para diferentes secciones.

En la segunda captura de pantalla, el mouse se convierte en una varita que incluso deja caer pequeñas partículas a medida que te mueves. Nunca interrumpe el contenido y, en cambio, solo agrega un elemento de fantasía e interactividad a medida que experimenta su sitio.

¿Ves ese pequeño círculo blanco? Ese es su mouse en el sitio web de Etienne Pharabot , un desarrollador front-end con sede en Francia. Sin embargo, hay más de lo que parece a simple vista. Recomiendo encarecidamente desplazarse por las distintas frases del sitio. (¡Te esperan algunas sorpresas emoji!)

Impero , una agencia creativa, utiliza un gran círculo amarillo como cursor que se ubica detrás de cualquier texto sobre el que se desplaza. También lo utilizan como una oportunidad para ayudar a los usuarios a navegar por el sitio, por ejemplo, mostrando «arrastrar» sobre una sección de desplazamiento horizontal. (¡Una buena manera de combinar algunas de estas tendencias!)


3. objetos 3d

Si bien el diseño plano gobernó durante bastante tiempo, estamos comenzando a ver un cambio tridimensional en los elementos de los diseños web. Esto puede estar inspirado por el auge de la realidad virtual y aumentada, que se desangra en nuestras experiencias de navegación bidimensionales. 

Este colorido ejemplo de Chip & Byte , una agencia con sede en Italia, agrega un elemento lúdico a su sitio. A medida que mueve el cursor (¡el pequeño círculo gris!), Las formas también se mueven, lo que aumenta la sensación de dimensión.

¡Se siente bien que una empresa llamada » Yellow Telescope » tenga un telescopio amarillo 3D que se muestra con orgullo en su página de inicio! Cuando aterrice por primera vez en el sitio, verá cómo se «construye» a medida que cada pieza encaja en su lugar, lo que quizás sea un sinónimo de cómo ayudan a sus clientes a desarrollar prácticas confiables. 

Beans Agency utiliza la tendencia 3D para dar vida a sus granos, mostrándolos en varias escenas en todo el sitio. Esta tendencia es una excelente manera de darle movimiento a un personaje, o darle un sentimiento «realista» sobre una simple ilustración abstracta y plana.

¿No se vende por completo en la tendencia 3d? Siempre puede adoptar un enfoque sutil, como C-HM Conseil . El elegante bisel y brillo sobre un fondo monocromático se inclina hacia el aspecto del material sin ser dominante. 


4. Excelentes experiencias de comercio electrónico

No es de extrañar que el comercio minorista en línea haya aumentado drásticamente durante el último año, lo que también ha llevado a experiencias de compra más intencionales y mejores . Después de todo, con más competidores que se apresuran a poner sus sitios web en línea, ya no es aceptable que una tienda solo exista en Internet; debe optimizarse y priorizar la experiencia del usuario para evitar que los compradores reboten.

Minsom , una tienda de mascotas, facilita la compra de artículos y servicios directamente desde su página de inicio. Con botones grandes y categorías simples, es fácil navegar para que pueda pagar rápidamente, en lugar de perder demasiado tiempo buscando en el sitio.

Esta tienda de vinos, Molly Dooker , no solo es una experiencia de sitio hermosa y artística, sino también una experiencia de compra sin problemas. Es fácil navegar por los vinos, obtener una vista previa de lo que hay en su carrito y luego comprar, todo mientras disfruta de un encantador diseño de sitio.

Zoya’s Pantry , una tienda de alimentos orgánicos y saludables, optimiza la experiencia de compra para agregar varios artículos a su carrito. Cuando hace clic en «Agregar a la bolsa», su ventana no cambia, por lo que puede continuar navegando sin perder su lugar en la página. Luego, para ver su carrito, todo lo que tiene que hacer es colocar el cursor sobre el ícono en la navegación superior (en lugar de hacer clic en una página separada).

Notarás algunas tendencias de diseño de 2021 en el sitio de The Cool Club . Desde una experiencia de comercio electrónico sin esfuerzo hasta una visualización en 3D de uno de sus productos (¡un juego de cartas!), Es fácil ver exactamente lo que está comprando y luego ponerlo en su carrito. (¡Incluso justo encima del pliegue de la página de inicio!)


5. Líneas de cuadrícula visibles con grosores de línea gruesos

Las cuadrículas han sido útiles en el diseño web durante mucho tiempo, pero estamos comenzando a ver una tendencia de darles un toque de color o un grosor de línea grueso. En lugar de mantenerlos mínimos, los diseñadores se inclinan por las formas naturales que construyen en la página y hacen que sus líneas de cuadrícula se destaquen para lograr una apariencia geométrica audaz. 

Eat Sleep Work utiliza líneas de colores para ayudar a dar vida a su escritorio similar a Windows. Si bien no son demasiado gruesos, el azul intenso hace el truco para hacer que la cuadrícula se destaque y crear una estructura intencional en todo el sitio.

Este estudio de desarrollo de software, OSM , utiliza líneas de cuadrícula de algunas formas interesantes en todo el sitio. Como puede ver en el fondo, se inclinan hacia un grosor de línea grueso y un estilo geométrico con su marca, y repiten esto de múltiples maneras diferentes, incluso con diseños de cuadrícula.

¿No está seguro de si las líneas de cuadrícula en negrita son adecuadas para su sitio? Podría intentar un enfoque de «espacio negativo» como Rui Ma , un diseñador y director de arte. Es más sutil que enfatizar la cuadrícula con un color de contraste, pero el amplio espacio aún permite que brille esa sensación geométrica.


6. Opciones de preferencias del usuario en los sitios (no solo en las aplicaciones)

La creación de experiencias únicas y personalizadas se está volviendo cada vez más popular, y una de las formas en que los diseñadores web lo están haciendo es incorporando opciones en el diseño del sitio. Desde preferencias como el modo claro frente al modo oscuro hasta opciones de accesibilidad como qué idioma usar, esta tendencia se trata de darle más control al usuario sobre cómo es su experiencia en el sitio. 

Inmediatamente cuando cargue el sitio web de Hoang Nguyen , verá una opción para audio. El valor predeterminado está configurado en «apagado», por lo que incluso si el sitio se carga antes de que usted elija, no lo sobresaltará (aunque incluso si estuviera configurado en «encendido», no lo haría; ¡es una música muy relajante!). . Esto le da el poder de personalizar su experiencia de inmediato, y si cambia de opinión más tarde, hay una opción para el sonido junto a su logotipo en la parte superior del sitio.

El sitio de Sofia Papadopoulou es similar en el sentido de que ofrece configuraciones para el audio, pero están pegadas en la esquina inferior derecha (donde tradicionalmente se puede encontrar un botón pegajoso para volver arriba ). El valor predeterminado está nuevamente configurado en «apagado», a pesar de el sonido que contiene solo instrumentales calmantes (nada loco).

Este ejemplo de Studio OUAM , una agencia creativa en Francia, facilita la elección del idioma que desea utilizar mientras navega por su sitio. Enumerados en la parte superior del menú, dan la opción de francés o inglés, adaptando su sitio web a sus dos audiencias principales.


7. Un cambio de la creación de sitios web a la creación de soluciones

Si bien el diseño web es tan importante como siempre (si no más crítico en la era del coronavirus), las agencias están comenzando a cambiar su enfoque hacia la venta de soluciones completas, en lugar de productos individuales. Por ejemplo, en lugar de llamarse a sí mismos una agencia de diseño web, un estudio creativo puede referirse a sí mismo como un «socio de experiencia de marca» o algo más que se refiera al valor total de lo que ofrecen (no solo las partes tangibles). 

Este es Soda Studios , un «socio de innovación, estudio de diseño y laboratorio». No están demasiado preocupados por enumerar cada uno de los servicios individuales que brindan, sino centrarse en soluciones integrales para sus clientes.

BORN Group es una «agencia digital global impulsada por experiencias centradas en el ser humano». Tienen una página de servicios para entrar en más detalles sobre lo que ofrecen, pero incluso eso se enfoca en el panorama general con servicios como experiencia de marca, diseño de servicios e innovación.

Kappow es una agencia digital que se enfoca en el diseño web, pero no necesariamente lo sabría de su página de inicio. En cambio, comparten el valor de lo que su trabajo realmente les brinda a sus clientes: crecimiento comercial, lanzamientos exitosos de productos y una ventaja sobre la competencia. (¡¿Quién no quiere todo eso ?!) 


8. Ilustraciones lúdicas

El aumento de las ilustraciones ha ido en aumento desde hace algunos años, y todavía no vemos que vaya a ninguna parte. Es una excelente manera de agregar un elemento «humano» a su sitio, especialmente si no tiene acceso a un gran fotógrafo y desea evitar las fotos de archivo. O si usted o su agencia se especializan en ilustración, ¡es la manera perfecta de mostrar su trabajo!

Qué mundo tan maravilloso para navegar en el sitio de RUYA , una agencia de branding y digital. Le han dado a su ilustración el ancho completo de su página de inicio, lo que la convierte en algo espectacular tan pronto como carga la página. Aún mejor: cuando pase el mouse sobre partes de la imagen, descubrirá que sirve como un elemento de navegación, lo que lo ayuda a obtener más información sobre su agencia, servicios y trabajo.

Estas extravagantes ilustraciones de UPQODE , una agencia de diseño web, se combinan con animaciones para darles vida. Puede verlos cambiar de color, tamaño e interactuar entre sí, lo que lo convierte en una experiencia entretenida en la página de inicio.

Si las ilustraciones completas no son adecuadas para su marca, siempre existe la opción de usarlas como acentos, como lo hace No Clima . Encontrará «garabatos» en la parte superior de las fotos en todo su sitio, lo que le dará una sensación artística hecha a mano. Esta también es una excelente manera de combinar la ilustración y la fotografía, si está interesado en usar ambas.


9. La tipografía como diseño, no solo como palabras

A veces, las palabras están destinadas a ser prácticas, a veces están destinadas a ser arte. Y los diseñadores web de hoy no tienen miedo de usarlos para el segundo propósito, más como un elemento de diseño que como un párrafo o cuerpo de texto.

Si bien aún es legible, el texto de la página de inicio de Dystopian Creatives difumina las líneas entre lo práctico y lo visual de una manera convincente. Se siente más como un patrón de fondo que como un párrafo e interactúa con las otras imágenes de la página de formas interesantes. 

Loop , una agencia creativa de servicio completo, utiliza la tipografía como elemento de fondo en su página de inicio junto con un párrafo más fácil de leer en la parte superior. Debido a que el tamaño de la fuente de fondo es tan grande (y tiene un bonito tono de amarillo), sus ojos pueden leer ambos conjuntos de texto sin confundirse. También me encanta la forma en que hace que los usuarios se desplacen para responder a la pregunta «¿Diseñar para … para qué?» 

A medida que se desplaza hacia abajo en este sitio para Stone & Style , verá cada título como un bloque de texto normal, pero también se repite en una gran fuente serif en el fondo que sangra fuera de la página. Es una excelente manera de repetir el mensaje sin sonar repetitivo y agrega un toque de misterio elegante al sitio mientras intenta leer lo que dice el texto de fondo (antes de descubrir el patrón).


10. Formas geométricas como elementos de fondo

Cuando se trata del diseño de su sitio, no lo piense demasiado. Si bien las formas geométricas pueden parecer demasiado «simples», son familiares y sencillas (¡ambas cualidades son buenas para la experiencia del usuario!). Y con bloques de construcción tan sólidos, hay mucho que puede hacer para poner la marca de su agencia en ellos, de modo que se sientan como cualquier cosa menos simple. 

Este ejemplo de fourpillars usa formas simples (¡esencialmente solo bloques y puntos!) Emparejadas con el movimiento basado en el desplazamiento del usuario para crear una experiencia dinámica y geométrica. A medida que se desplaza hacia abajo en la página, verá cómo los bloques se construyen y se descomponen, cambiando constantemente para seguir contando la historia. (¡También puede haber un huevo de pascua del juego «Pong», si estás buscando un pequeño descanso!) 

Si bien las formas coloridas y ovaladas de Oh Happy Dani pueden no ser técnicamente geométricas, ciertamente logran el mismo efecto lúdico. Combinados con los colores de su marca, crean un gran marco detrás de su imagen de héroe, y los verás repetidos de nuevas formas en todo el sitio. 

Blab , un estudio de comunicación, también utiliza formas casi geométricas en su página de inicio. Estos patrones circulares / ovalados / en forma de huevo crecen y se encogen mientras descansa en la página, y luego se mueven a un lado cuando comienza a desplazarse. Me recuerdan el sonido que sale de un altavoz, que se combina perfectamente con la copia de la página «Tu voz más fuerte». 

Este colorido estudio, illo , utiliza formas geométricas justo detrás de su mensaje principal en la página de inicio. Al pasar el cursor sobre las frases que están subrayadas, una de las formas se moverá para revelar una imagen en su interior, una forma inteligente de mostrar su primer enfoque: diseño de movimiento. 


11. WordPress como CMS

Por último, pero ciertamente no menos importante, es cómo se construyen estos sitios. (Después de todo, si el back-end no está cumpliendo el propósito que necesita, ¡no importa qué tan bien se vea el front-end!) 

WordPress ahora alimenta más del 40% de Internet . Eso es casi la mitad de todos los sitios web (incluidos los que no se basan en un CMS), y probablemente se deba a lo flexible que se ha vuelto realmente el CMS a lo largo de los años. 

¿No se vende? Todos los sitios web de este resumen funcionan con WordPress, ¡para darte un gran ejemplo de todo lo que puedes construir con él! Desde hermosos temas que lo ayudan a comenzar rápidamente hasta más de 55,000 complementos gratuitos que lo ayudan a extender la funcionalidad, WordPress puede hacer casi cualquier cosa.  


¿Qué opinas de estas tendencias de diseño web para 2021? ¿Estás de acuerdo con el auge de los cursores personalizados o crees que los diseños 3D son solo una moda pasajera? ¡Háganos saber en los comentarios a continuación qué tendencias le gustan o cuáles cree que faltan en esta lista!

¿Quieres recibir en tu buzón un correo con las últimas novedades?