10 Web Design Trends to Expect in  2023

‘Modo Goblin’ ha sido elegido como la Palabra del Año 2022 por Oxford. El término se refiere a “un tipo de comportamiento que es descaradamente autoindulgente, perezoso o desaliñado, y que típicamente rechaza las normas o expectativas sociales.” Se ha convertido en la primera palabra del año decidida por voto popular.

No es ningún secreto que, como sociedad, hemos caído lentamente en la autoindulgencia en las últimas décadas. A veces es vergonzoso y a veces excesivo, pero se puede ver en todos los aspectos de la vida occidental. Ropa deportiva, comprar todo en línea, pedir comida rápida cuando nos sentimos perezosos y maratonear la última serie de televisión. Estos son solo algunos ejemplos de la vida moderna que crean la atmósfera perfecta para que nuestro goblin interior salga a la luz, y es intrigante pensar cómo esto afectará el diseño web en el futuro.

Estas normas sociales recién evolucionadas, como refleja el término goblin, son interesantes cuando las correlacionamos con el diseño UI y UX. En su esencia, el diseño UI y UX es un campo basado en estándares, mejores prácticas y el estudio de los usuarios, mientras se intenta ser lo más inclusivo posible. Una de las formas en que vemos esta tendencia en acción es a través de sitios web goblin que ponen la marca primero, antes que el usuario. Ignorando las mejores prácticas e incluso la accesibilidad a veces, estos sitios web cuestionan qué es “belleza.” Aspiran a fortalecer la presencia de la marca, haciendo que el sitio web sea memorable y atractivo utilizando un estilo rudo, exceso de imágenes, duplicaciones, colores fuertes, ruidos, animaciones de entrada bruscas, múltiples objetos, etc. Podemos enamorarnos de estos sitios web, o criticarlos, pero no podemos pretender que nunca hemos usado uno o dos de esos trucos para mejorar la presencia de un sitio web.

Bornfight studio es una pequeña agencia que se especializa en producción web. Su actitud Goblin se manifiesta a través del tono de voz de su sitio web, que es muy “directo,” desinhibido y algo descarado. Toma su divertido banner de cookies, por ejemplo – “la vida es amarga, así que usamos cookies,” o la afirmación sincera de que trabajan por cumplidos y dinero, y las abrumadoras, pero hermosas, animaciones de desplazamiento de imágenes superpuestas.

En el otro lado del espectro del maximalismo, vemos un movimiento de simplicidad que afirma que todo lo que necesitamos es un poco de equilibrio – un ejercicio en “ralentizar.” Esta tendencia crea una experiencia agradable y relajante para el usuario y es opuesta a la “cultura de todo sobre las apariencias.”

Veremos más y más sitios web que exploran la simplicidad a través de la reducción de detalles, buscando alcanzar el anonimato.

Estos sitios web a veces actúan como una estructura o un wireframe diseñado, utilizando tipografía minimalista, una gama limitada de estilos tipográficos dentro del sitio, colores apagados que se alinean con grandes imágenes o con ilustraciones amorfas que reemplazan las ilustraciones detalladas de UX. Además, a veces una dulce animación de desplazamiento envuelve el sitio web y te hace flotar en la serenidad.

Sorprendentemente, puede ser un proceso difícil diseñar un sitio web así, ya que se requiere madurez del diseñador para entender dónde está la esencia y qué es redundante. Estos sitios web a veces destacan más, tanto en términos de estilo como de rendimiento, haciéndolos destacar entre los sitios web de la competencia que están cargados de contenido e imágenes.

Templeton Clothing es un sitio web de comercio electrónico de los Alpes del Norte de Baviera. Una mirada rápida a su sección de héroe es suficiente para entender su actitud; animación en cámara lenta, sin promociones ni CTA. Sin usar palabras, te están pidiendo que te relajes y navegues. Los bordes lineales en blanco y negro y las grandes imágenes en general se ajustan a su “anti-diseño, destacando los productos como lo principal y la marca como secundaria.»

El año pasado hablamos sobre scrollytelling, y aunque parece que fue hace una década, este año, parece que la experiencia web dio varios pasos adelante con nuevas formas de interactuar.

Antes de crear un sitio web, mapeamos un recorrido del usuario y por razones funcionales, creamos una estructura y un marco. Si lo comparamos con el mundo real, el sitio web es un camino que queremos que el usuario recorra hacia la conversión. La pregunta que plantea esta tendencia es, ¿cuál es este recorrido del usuario y cómo debería verse en 2023?

Este enfoque de ‘deleite’ nos inspira a empezar a pensar en el sitio web como algo más que un conjunto de páginas, sino como una experiencia tridimensional. El objetivo general, por supuesto, es mantener a los usuarios involucrados y curiosos, y guiarlos en el camino con sorpresas y huevos de pascua alegres en el camino. Un gran ejemplo de tal deleite alegre es el cursor animado, que puede jugar un papel importante en mejorar la experiencia del usuario en el diseño web.

De esta escuela de pensamiento, podemos pensar en las características que solíamos descartar como técnicas, bifurcaciones en el camino, como el menú o los enlaces internos, CTA y los finales del camino también, como el pie de página o el 404. En estas “áreas de conflicto,” podemos mapear los sentimientos que los usuarios podrían experimentar como éxito o fracaso, interés, confianza o sospecha, etc. Agregar animaciones, mensajes de marketing y motivos humorísticos puede facilitar la experiencia del usuario y fortalecer el vínculo entre el usuario y la marca. Parece que, por el momento, los clientes no tienen sentimientos fuertes respecto a estas áreas, lo que las convierte en el lugar ideal para dejar volar nuestra creatividad.

Studio Brot es una agencia de diseño que se enfoca en publicidad y branding. Sus servicios están desglosados y simplificados, presentados al usuario en forma de una metáfora de horneado de pan (Brot – alemán para pan). Nos enamoramos de sus técnicas de navegación y las diversas animaciones a lo largo del sitio web que siempre te mantienen en vilo, haciéndote preguntarte qué esperar a continuación.

Como parte de la difuminación de los límites entre lo físico y lo virtual, es fascinante sumergirse y prever los cambios en el ámbito del comercio electrónico. Es un poco paradójico. Por un lado, el diseño físico se está volviendo hiper digitalizado, pero por otro lado, algunos sitios web de comercio electrónico atrevidos sugieren una experiencia de compra sensual y tangible.

Por una buena razón, a muchos de nosotros nos gusta entrar en una tienda de ropa, el olor de la ropa nueva, o probarse una camisa y sentir la suavidad de la tela. Esta tendencia web intenta reproducir una experiencia de compra real a través de exhibiciones de productos interactivas que añaden otra capa de dimensión para hacer que todo el proceso de compra sea casi tangible.

Incluso con un presupuesto pequeño, podemos intentar estimular los sentidos del usuario utilizando animaciones lottie, rotación y animaciones 3D, todo para alentar al usuario a explorar e interactuar con el producto que estamos vendiendo. Esto crea una sensación poderosa y memorable de descubrimiento de las características del producto, ángulos e iluminación con un gran sentido de juego. El truco es entender cómo tu producto es diferente de los demás y cómo hacer que el usuario interactúe con él.

Grace es un producto nutricional, con un enfoque de marketing impactante. Permiten a los usuarios simular la experiencia de desempaquetar, jugar con el paquete y revelar el producto a través de un recorrido de usuario cuidadosamente diseñado que ni siquiera es posible en la tienda física.

Aunque estamos lejos de las primeras etapas de la tecnología de IA, solo recientemente se ha vuelto accesible para el público y parece que todos están hablando de ello. En el último año hemos sido testigos del surgimiento de varios motores de IA en línea que parecen ser un cambio de juego. Motores como ChatGPT, dall.e2, Midjourney, Stable diffusion por nombrar algunos, junto con la tecnología deepfake, han generado un amplio debate sobre cómo se verá nuestro papel como creadores en el futuro.

Gran parte de la conversación gira en torno a la noción de que la IA pronto hará obsoleta la necesidad de profesionales creativos. Este es un enfoque bastante distópico. La verdad es que la IA en su estado actual es más una herramienta para que usemos en lugar de un reemplazo futuro. Y la usaremos.

Hemos visto esta tendencia acelerarse en los últimos meses con la explosión de dall.e2 y Midjourney en la escena con sus impresionantes capacidades de creación de imágenes. Más recientemente, la introducción de ChatGPT en la mezcla, y la microcopia nunca se sintió más accesible. Pero es importante recordar, los resultados que obtenemos de estos motores requieren trabajo, y como cualquier herramienta, cuanto más la dominemos, mayor será nuestro control. Centrémonos en la creación de imágenes. Si tomamos Midjourney como ejemplo, puedes crear fácilmente imágenes a partir de simples indicaciones de texto. Estas son imágenes que solían llevar una eternidad en crearse o incluso encontrar y comprar los derechos. Pero las indicaciones simples solo te llevan hasta cierto punto. La clave es refinar tus consultas a medida que avanzas, enfocándote en las áreas que sientes que necesitan trabajo. Cuanto más profundices, más rápido llegarás a los resultados deseados.

En mayo celebraremos 20 años de WordPress. La introducción de WordPress desencadenó una especie de revolución propia, llevando la creación web a las masas. Ahora, estamos en 2023, y cada pocas semanas leemos sobre un desarrollo digital diferente y sensacional.

A veces, queremos estar a la vanguardia de la tecnología como buenos primeros adoptantes, leer un artículo y aprender una nueva herramienta o técnica y compartir nuestros descubrimientos con nuestra comunidad de creadores web. Pero de vez en cuando, preferimos saltarnos la curva de aprendizaje, acurrucarnos y aferrarnos al pasado cómodo incluso en esta era de aceleración digital. Todavía vemos una gran cantidad de motivos de los 80-90. Lo que encontramos intrigante es la añoranza por la tecnología antigua, como la primera computadora que tuvimos en casa o el reproductor de discos compacto de aspecto tonto.

Entonces, para los rezagados entre nosotros, o para aquellos con cariño por el Y2K, especialmente tomamos nota de collages, pixelización, colores fuertes, interfaces de usuario similares a MS-DOS y las influencias de los viejos juegos de arcade.

Hie es una agencia de talentos para creadores de contenido. Usan objetos nostálgicos y los reinventan desde un punto de vista contemporáneo. Esta juguetonería está diseñada para despertar nuestra curiosidad y atraernos.

La capacidad de atención de las personas disminuye cada año. Podemos culpar a las redes sociales, Tiktok e Instagram, por supuesto, pero también somos consumidores además de creadores. Dada esta realidad, la interfaz de usuario no puede permanecer estática. El movimiento es una gran herramienta para atraer a los usuarios y puede ser una experiencia muy efectiva e inmersiva. En el último año hemos visto cómo se utiliza el movimiento para mantenernos comprometidos, llevándonos a consumir más contenido. Nos permite, como usuarios, sentir que estamos interactuando con el sitio web a un nivel más alto que antes, y de una manera más significativa.

Nuestros usuarios están acostumbrados a ver píxeles moviéndose y saltando; esperan recibir indicaciones para cada acción. Esta retroalimentación permite al usuario sentirse como un participante activo, haciéndolo sentir presente y enfocado. Una forma de crear tal experiencia es a través de la animación de desplazamiento suave, hecha usando efectos de paralaje flotante entre secciones que suavizan micro animaciones. Otro ejemplo, que esperamos se vuelva más popular, es el movimiento que excede las normas, incluso llegando a jugar con el sentido del equilibrio y la gravedad del usuario. Veremos más animaciones o videos integrados que buscan jugar con tus ojos, con animaciones de entrada bruscas, explosiones poderosas, acercamientos, fuentes variables, pegatinas giratorias, y así sucesivamente. Puede ser agotador a veces, pero la atención del usuario es tan valiosa que intentaremos atraerla por cualquier medio necesario.

Estudios Victor Cordon es una plataforma creativa que apoya a la comunidad artística independiente. Usan un movimiento constante y fluido mientras te desplazas de una sección a otra. Algo a notar, que encontramos tanto hermoso como único, es que los componentes en pantalla son en realidad estáticos, pero el movimiento creado por el fondo da una sensación de fluidez y movimiento constante.

En contraste con la estética de diseño limpio, vemos cada vez más sitios web que literalmente llevan los límites al extremo con diseños tipográficos únicos. Esta tendencia es bastante sorprendente considerando que esta práctica de diseño es común en medios que tienen poco espacio, como empaques traseros, carteles de festivales de música, etiquetas y señalización, etc. Tal vez esta tendencia tenga que ver con nuestra añoranza por los diseños que usan materiales reales, que abandonamos en favor de la pantalla y la experiencia interactiva.

Con el objetivo de atraer la atención, los más interesantes juegan con tipografía y cuadrículas mientras dejan de lado los diseños web convencionales en su misión de crear una experiencia visual memorable basada en texto. Estos sitios web tienden a usar encabezados de letras grandes con tipografía de estilo brutalista, que no se usa típicamente en la web. Como parte de este movimiento, también podríamos ver más sitios web con secciones que tienen solo un párrafo con un tamaño de letra tan grande que ocupa toda la sección. En conjunto, agrega un elemento dinámico a la página, incluso cuando está estática.

La página web de Parazker tiene mucho que absorber. Este único pliegue podría haberse distribuido fácilmente en varios pliegues y páginas, sin embargo, esta presentación crea una sensación de familiaridad, como etiquetas en empaques o códigos de barras. Los diseñadores aquí condensaron toda la información en un solo pliegue, para que los usuarios puedan ver todo de un vistazo.

En una época de voces extremistas en aumento en el mundo real, tenemos la oportunidad de marcar la diferencia aquí en el universo alternativo de la web que creamos. Después de todo, nosotros como creadores web, somos una gran comunidad. Tenemos la oportunidad de agregar más valor y hacer de la web un lugar mejor y más inclusivo.

Junto con la creciente dependencia digital en nuestra sociedad, desde que golpeó el Covid19, los usuarios pasan mucho más tiempo en línea para obtener incluso los servicios más básicos. Al comenzar un proyecto, generalmente creamos un brief preciso y adaptamos el diseño para una persona usuaria y necesidad específica. Tal vez este año, nuestra resolución de año nuevo pueda ser intentar ver Internet a través de los ojos de los demás, haciendo la tecnología utilizable para todas las personas, independientemente de sus habilidades, situación económica, edad, educación o ubicación geográfica.

Es un pequeño cambio de mentalidad y un pequeño ajuste en el flujo de trabajo. Comienza desde la etapa de inicio con la responsabilidad de educar a los clientes sobre la accesibilidad y los requisitos legales que conlleva. Pensar en ello desde la etapa inicial y dedicar un poco más de tiempo y esfuerzo puede ayudar a dar forma al estilo de diseño del sitio web. Podemos usar colores y tamaños de fuente sabiamente, así como texto alternativo y soporte para la navegación con teclado. Diseñar a través del lente de este desafío no solo puede crear nuevos estilos y convenciones, sino que puede cambiar cómo experimentamos la web en su totalidad.

Las redes sociales, con sus infinitas posibilidades, aún tienen algunas limitaciones; compartir solo un enlace en tu perfil es ciertamente una de ellas. Así nació el ‘Enlace en la biografía’. El enlace en la biografía es básicamente una página de destino diseñada para conectar redes sociales, sitios web, tiendas, videos, música, podcasts, eventos y más. Todos se unen en esta página diseñada para conectar, formar nuevas relaciones y convertir.

Con el creciente número de usuarios que llegan a través de las redes sociales, la pregunta que viene a la mente es, ¿cómo debería verse este puente entre tu perfil social y tu sitio web? ¿Es simplemente una extensión de tu página de perfil?

Hasta ahora, el diseño del enlace en la biografía es muy básico. Las capacidades y oportunidades ocultas en este diseño de página de destino aún no se han explorado completamente. Vistas en forma de lista o una galería: están diseñadas principalmente con botones o fotos que son iguales en tamaño y jerarquía. Sin embargo, surge la pregunta, ¿deberían serlo? ¿Todos tus enlaces tienen el mismo peso?

¿Cómo se integrarán las metodologías de navegación en estas páginas simples? Es probable que veamos este campo expandirse en el próximo año, con creadores sugiriendo nuevas visiones de cómo debería verse esta tarjeta de presentación digital.

Resumen