Tendencias de diseño web para 2022

Si algo hemos aprendido en los últimos dos años es que siempre tendremos que seguir adaptándonos a algo nuevo. Esto es cierto tanto en la vida como en el diseño, y a medida que avanzamos hacia el 2022, los diseñadores están comenzando a aceptar el caos de la vida y expresarlo a través de sus diseños.

Las tendencias para 2022 se están moviendo hacia diseños más audaces, creativos e interactivos. Los creadores se inclinan por un poco más de disrupción y superan los límites de lo que se considera un "buen" diseño web.

Aumente su creatividad en el nuevo año implementando algunas de las tendencias que esperamos ver más en 2022:

• Mini-sitios interactivos
• Diseños de inspiración retro
• Diseños de concepto abierto
• Más personalización
• Objetos 3D, desplazamiento 2D
• Brutalismo-lite
• Morfismo de vidrio
• Efectos de desplazamiento creativos
• tipografía de gran tamaño
• Fronteras visibles
• Componentes de collage con imágenes abstractas

Mini-sitios interactivos

Eres genial en lo que haces, ¡muéstralo! Presentar sus habilidades en un entorno más pequeño y controlado con contenido e interacciones altamente especializados es una forma en que los diseñadores están atrayendo nuevos clientes. Muestre a los clientes potenciales que puede crear experiencias verdaderamente únicas al crear algo simplemente por crear.

El desarrollador surcoreano Jungik Lee creó este minisitio que permite a los usuarios completar una de tres tareas simples. Utiliza mucho color e instrucciones simples para crear o mover diferentes objetos, y llenar una página con círculos de colores es bastante divertido.

La diseñadora web con sede en Ámsterdam Victoire Douy utiliza la interactividad en su pequeño sitio de cartera para captar su atención. Simplemente moviendo el cursor, puede interrumpir colores, tirar de cuerdas, mover objetos y más.

Diseños de inspiración retro

La edad promedio de un diseñador web en los Estados Unidos es de 37 años, lo que los ubica firmemente en la generación Millennial. Debido a que los Millennials fueron la primera generación en adoptar verdaderamente Internet como usuarios diarios, no sorprende que muchos diseñadores se inspiren en el arte, la tipografía y los colores que fueron populares durante los primeros días de la web.

Wild Souls tiene un sitio de comercio electrónico que combina formas coloridas con un estilo superpuesto para crear una estética divertida y vibrante que se adapta a la empresa de alimentos. Son un minorista que se especializa en nueces, mantequillas de nueces, mieles y mermeladas, y los efectos de desplazamiento sobre sus productos agregan nuevas texturas y formas que se basan con buen gusto en los temas visuales inspirados en los años 90 en todo momento.

Cartoon Network en sí es una marca querida por gran parte de las Generaciones Y y Z. El sitio web del estudio utiliza una base en blanco y negro combinada con colores llamativos y animaciones encantadoras para crear un sitio que se siente retro y a la vez muy a la moda.

Diseños de concepto abierto

Tal vez la pandemia esté afectando nuestras preferencias de diseño, así como nuestro comportamiento en persona, porque hay una tendencia emergente de dejar mucho espacio libre en los diseños. Puede que no sea de seis pies, pero los diseñadores están dejando una cantidad cada vez mayor de espacio entre las secciones, centrándose en los titulares y, a veces, eliminando las imágenes principales por completo, dando a los usuarios mucho espacio para respirar.

Los licores de cualquier tipo son intensos y crujientes, y el sitio web de Bear Creek Distillery en Denver, CO, también está libre de aditivos adicionales. El concepto de diseño de su sitio web es tan limpio como el vodka, el bourbon, el ron y el whisky que refinan.

Atalson es una empresa de diseño de productos y empaques, abastecimiento de materiales y fabricación con sede en la ciudad de Nueva York. La sostenibilidad está en el centro de su proceso, y la idea de fabricación limpia se refleja visualmente en su sitio mediante el uso de espacios en blanco. Este espacio abierto permite que los productos que han diseñado sean el centro de atención, mientras que los efectos de desplazamiento sobre las imágenes expresan una descripción general de un producto o una explicación de los valores de su empresa.

Más personalización

A medida que los usuarios gastan más tiempo y dinero en línea, los proveedores encuentran nuevas formas de atraer a subconjuntos más amplios de sus audiencias. Para hacerlo, muchos están aumentando el nivel de personalización disponible en sus sitios y aplicaciones, incluidas grandes mejoras en las funciones de inclusión que van más allá de las mejores prácticas de accesibilidad estándar que todos los sitios deberían seguir.

La categoría de “belleza” de Pinterest es una de las más buscadas en el sitio, y la empresa reconoció la necesidad de ser más inclusiva para todos sus usuarios. Pinterest ahora crea experiencias más rápidas y personalizadas en esa categoría al ofrecer una función de "rango de tonos de piel". Para muchos usuarios, esta es una respuesta a la sobresaturación de tonos de piel más claros en la aplicación, por lo que todos los usuarios de Pinterest pueden encontrar looks que les funcionen más rápida y fácilmente.

Mastercard ha encontrado una manera de permitir que más titulares de sus tarjetas expresen sus verdaderas identidades durante las transacciones mediante la creación del sistema "Nombre verdadero". Esto permite que los titulares de Mastercard trans y no binarios tengan sus nombres verdaderos en su tarjeta en lugar de su nombre muerto, independientemente de si su nombre se ha cambiado legalmente o no.

Objetos 3D, desplazamiento 2D

Los diseños con modelos 3D y una presentación plana de contenido 2D se ven convincentes y totalmente cohesivos. Presentar contenido fácil de digerir de una manera predecible con un elemento 3D interactivo de fondo es especialmente útil cuando ayuda a los usuarios a comprender mejor un concepto físico.

El sitio web que promociona este nuevo distrito comercial cerca del corazón de Moscú, Rusia, es un gran ejemplo de cómo centrarse en una pieza central en 3D acompañada de contenido simple y plano. La página de inicio muestra un modelo móvil del Parque Skolkovo, pero no eclipsa el contenido destacado.

One Ocean Science es una cumbre de intercambio de conocimientos que tiene como objetivo conectar a los líderes mundiales en conservación e investigación de los océanos desde una perspectiva multidisciplinaria. La página de inicio de su sitio web le da la bienvenida con un desplazamiento en 2D sobre un modelo 3D del globo terráqueo, que se mueve a medida que se desplaza, destacando diferentes áreas y la investigación que se lleva a cabo allí.

Brutalismo-lite

El brutalismo se refiere a un estilo de arte y arquitectura muy bloqueado, geométrico y duro. En el diseño web, este estilo descarado pero simple se destaca porque tiende a evitar algunas de las reglas tradicionales seguidas por los sitios web en favor del minimalismo. A menudo hechos en blanco y negro, los sitios en este estilo presentan pocos o ningún adorno y texto en negrita para un acabado marcado.

La agencia creativa italiana Caroselling tiene una identidad de marca que se trata de ser honesta y directa. Creen en establecer expectativas realistas, pensar en las ramificaciones de su estrategia y respetar las limitaciones de tiempo y presupuesto de sus clientes. Un sitio brutalista les ayuda a ilustrar su historia como un socio de agencia sencillo y sin complicaciones.

El diseñador nacido en California y con sede en París, Rick Owens, describió una vez su filosofía sobre el diseño de muebles como "una piel brutalista en una roca brutalista junto a un fuego brutalista en una cueva brutalista". En el sitio web de sus líneas de ropa y accesorios, no encontrará muebles, pero encontrará una clara inspiración brutalista en las imágenes y el diseño.

Morfismo de vidrio

Exactamente como sugiere el nombre, Glassmorphism es el arte de hacer que una pantalla parezca estar hecha o cubierta por vidrio, que generalmente se usa para desenfocar un fondo en una interfaz de usuario. En 2022, esta tendencia debería continuar creciendo en popularidad a medida que los diseñadores superen los límites de la interfaz creando objetos y texto animados similares al vidrio.

La agencia de productos digitales Dovetail Studios ha animado este conjunto Glassmorphic de anillos anidados que giran en diferentes ángulos. Llama la atención y muestra la destreza de modelado 3D de su equipo. Otros íconos en el sitio también reflejan este efecto.

Otra agencia creativa digital, Lo and Behold Studios, también utiliza objetos Glassmorphic animados en su página de inicio. Sin embargo, el tema general más claro le da a su sitio un efecto completamente diferente al que tendría un usuario al ver el de Dovetail.

Efectos de desplazamiento creativos

Muchos diseñadores están ampliando la tendencia de desplazamiento horizontal del año pasado y están experimentando aún más con los efectos de desplazamiento. Ya sea horizontal, de lado a lado o multidireccional, cambiar la dirección del viaje de su usuario a través de un sitio es una manera fácil de brindarles una experiencia más dinámica en general.

La empresa de muebles holandesa Moooi mueve a los usuarios más y más profundamente en sus colecciones a medida que se desplazan. Su sitio ofrece tres experiencias: Beauty Blooms, Defy Gravity y Paper Play. En cada uno, la pantalla se abre para revelar una colección tras otra, y te sumergirás en nuevos patrones y viñetas a medida que te desplazas.

Kayla Fisher, una fotógrafa de cuyo sitio hemos hablado antes, usa un desplazamiento de lado a lado, manteniendo el menú fijo en el lado izquierdo de la pantalla. Esto le permite ver su trabajo de una manera visualmente atractiva sin perder de vista los botones grandes que obligan a los usuarios a profundizar más.

tipografía de gran tamaño

Su sitio web debe hacer una declaración audaz sobre quién es usted como empresa. Muchas empresas se están tomando esta idea en serio y utilizan tipografías de gran tamaño para los titulares, o incluso en lugar de una imagen destacada.

El colectivo de investigación tecnológica HUMAIN está trabajando para cerrar la brecha entre las experiencias humanas y la innovación técnica. Con el respaldo del Grupo Cronos, su objetivo es encontrar nuevas formas de utilizar las tecnologías emergentes para mejorar las experiencias humanas tanto en línea como en la vida. Mediante el uso de texto en lugar de una imagen de héroe, esta empresa con una historia complicada grita su misión desde el momento en que ingresa a su sitio.

Cuando piensas en auriculares, las ideas que te vienen a la mente son tanto auditivas como visuales. El nombre de la compañía de auriculares AIAIAI es tanto una exclamación como un nombre, y grita una declaración audaz para los usuarios que visitan su sitio. El texto grande presenta a la empresa, seguido de un video más pequeño, adyacente al héroe, justo debajo del pliegue, lo que altera el patrón tradicional de la imagen del héroe y luego el texto.

Fronteras visibles

Los bordes visibles dan estructura a su diseño y atraen la atención de sus usuarios a través de su contenido. Usando solo líneas simples, los bordes pueden ayudarlo cuando diseñe para clientes que necesitan un sitio limpio y ordenado. Por otro lado, un borde divertido, original e interactivo puede crear un interés visual adicional para sus visitantes en línea mediante el uso de colores llamativos o efectos interactivos.

La agencia independiente Bonjour Paris combina bordes visibles con un desplazamiento horizontal, por lo que el sitio es minimalista pero aún tiene mucha intriga. Los bordes de las líneas continúan a lo largo del sitio hasta la sección de su proyecto, donde adquieren una nueva forma sin parecer ambiguos ni recargados.

El restaurante australiano Curry Cafe tiene dos ubicaciones, y el borde de desplazamiento de su sitio proporciona un marco sólido a través del cual los usuarios pueden consumir el resto de su contenido colorido y atractivo.

Componentes de collage con imágenes abstractas

Hemos recorrido un largo camino desde el comienzo de la web. Mientras que algunos diseñadores adoptan la estética estructurada, otros se mueven en la dirección opuesta. Los colores llamativos, las imágenes superpuestas y las múltiples texturas pueden combinarse a la perfección cuando cada uno de los elementos está cuidadosamente diseñado.

Illuminating Radioactivity es un sitio web educativo creado en colaboración por el Stimson Center, el proyecto Reinventing Civil Defense y el Bombshelltoe Policy x Arts Collective. Cuenta la historia y el significado de la palabra "radiactividad" y nuestras asociaciones con ella, así como las formas en que ha desempeñado un papel en la ciencia, el entretenimiento, la medicina y más. A medida que avanza, se verá inundado de imágenes antiguas que ayudan a contar la historia junto con formas abstractas y brillantes.

La empresa australiana The Loved Up Co ayuda a darle vida a las citas nocturnas con prácticos kits que brindan todo lo que necesita para una noche con su pareja. ¡Su página de inicio presenta personas con estilo de collage en el que los cuerpos se toman de fotografías en blanco y negro y las cabezas se superponen con bocas sonrientes, flores y cócteles! Aparecen formas abstractas, círculos y garabatos en todo el diseño para seguir moviendo la vista a través de su contenido.

Diseñando el futuro de la web

Esté atento a estas tendencias y pruebe algunos conceptos que llamen su atención. Si su ojo para el seguimiento de tendencias es bueno, es posible que incluso haya notado que algunas de las tendencias de diseño web en 2022 son extensiones o permutaciones de las tendencias del año pasado.

¿Ves algunos que te encantan? ¿Algo que dejamos fuera? Háganos saber en los comentarios a continuación y recuerde: los estilos que están aquí para quedarse y los que están pasando de moda dependen de lo que los diseñadores como usted decidan crear con sus clientes este año.