El diseño web experimental nos permite liberarnos de las limitaciones.
Como diseñadores, a menudo vamos a lo seguro. Arrastramos un par de elementos de diseño y configuramos las opciones de navegación de la misma forma que lo hemos hecho incontables veces. Y no hay nada de malo en ceñirse a los diseños de página web populares; después de todo, está demostrado que funcionan.
Pero el diseño puede ser mucho más. Echemos un vistazo al diseño web experimental y exploremos algunos ejemplos que podrían inspirarte a salir de tu propia zona de confort.
El experimentalismo desafía los diseños tradicionales
Las disposiciones de una sola columna, en patrón Z, de pantalla dividida y otras similares abundan porque han demostrado su funcionalidad. No tenemos que pensar en cómo navegar por estos diseños porque ya estamos acostumbrados a ellos.
El diseño web experimental se aleja de lo familiar. Las líneas definidas desaparecen, creando una primera impresión algo impactante. Se evita la perfección de las cuadrículas en favor de un enfoque más libre e imaginativo que ofrece una experiencia de usuario muy distinta a la que estamos acostumbrados.
Diseño de interfaz de usuario experimental
El diseño de interfaz tradicional se centra en una navegación familiar e intuitiva. El diseño web experimental interrumpe intencionadamente este flujo rutinario. Al principio, es posible que los visitantes del sitio no sepan muy bien qué hacer, como cuando se empieza un rompecabezas. Pero una vez que se acostumbran a la lógica detrás de una interfaz experimental, pueden explorar todo lo que el sitio web tiene para ofrecer.
Todos los días realizamos acciones tan rutinarias que apenas nos damos cuenta de que las estamos haciendo. No pensamos más en desplazarnos por una página web que en pulsar un botón en un ascensor. Realizamos los movimientos de forma automática. El diseño web experimental nos desafía a trabajar fuera de esos instintos.
Un sitio con diseño experimental puede pedirnos que nos desplacemos por su contenido de forma horizontal. Puede indicarnos que hagamos algo como mantener presionada la barra espaciadora para explorar el contenido u ofrecer otras guías de interfaz poco ortodoxas. Aunque estas tácticas pueden emplearse de forma lúdica, es importante reconocer que harán que un sitio web sea significativamente menos accesible. Crear un sitio web teniendo en cuenta la accesibilidad y la experimentación puede ser un reto, pero es posible. Si decides cambiar las opciones de interfaz tradicionales, asegúrate de proporcionar instrucciones sobre cómo usarlas o evitarlas, y de que esas instrucciones sean accesibles para todos los visitantes de tu sitio.
Este sitio web con temática espacial de Stykovka ignora por completo las normas de navegación. En su lugar, incluye instrucciones claras sobre cómo interactuar con el sitio. El experimentalismo a menudo trabaja fuera de los estándares a los que estamos acostumbrados, por lo que la guía de Stykovka resulta útil y necesaria.
El diseño experimental explora diferentes formas de trabajar con los elementos visuales
Los sitios web tradicionales no suelen cambiar mucho en cuanto a sus experiencias visuales. El diseño experimental está lleno de sorpresas. Si los diseños web fueran esculturas, el experimentalismo sería como el cincel que talla espacios y formas que desafían lo convencional.
Aunque el experimentalismo significa que las experiencias de usuario y la forma en que se comunican las ideas pueden alejarse radicalmente de la tradición, es importante recordar que solo debe usarse cuando aporta valor al mensaje o a la forma. No harías experimental la página de inicio de un banco, pero sí podrías hacerlo con una página de destino interactiva diseñada para atraer al visitante.
Aquí tienes algunas implementaciones de diseño visual experimental efectivo.
La realidad virtual ofrece espacios tridimensionales surrealistas
El Museo de Experiencias Molestas de Zendesk ofrece un viaje de realidad virtual desenfadado por las pequeñas frustraciones de la vida moderna.
Los diseñadores web se están liberando de las convenciones de las cuadrículas, el texto y los gráficos estáticos creando mundos tridimensionales que piden a gritos ser explorados. Los sitios web de realidad virtual ofrecen una sensación de inmediatez e interactividad que no es posible mediante el diseño web tradicional.
Las visualizaciones de datos muestran información de formas creativas
La web ha abierto nuevos horizontes en la representación de datos. La visualización de datos transforma los números y la analítica al presentarlos de formas mucho más interesantes y atractivas.
En la publicación digital The Pudding, la visualización de datos es el medio. Utilizan visualizaciones experimentales cautivadoras para abordar temas que pueden abarcar largos periodos de tiempo o grandes conjuntos de datos.
El diseño web experimental a menudo se toma grandes libertades en sus visualizaciones y comparte datos de formas nuevas e imaginativas.
Integración de los nuevos avances tecnológicos en el diseño web
Las nuevas tecnologías tienen una larga historia moldeando el diseño. Las imprentas cambiaron la forma en que se hacían los libros. Las computadoras dieron a los diseñadores gráficos más libertad para explorar su oficio. Los avances y la experimentación tecnológica suelen estar ligados a la evolución del arte y el diseño.
Ahora que el aprendizaje automático y la inteligencia artificial (IA) son cada vez más accesibles, los diseñadores están encontrando formas de aplicar estas tecnologías al desarrollo web. Elementos como la experiencia de usuario (UX) predictiva pueden ofrecer una navegación más eficiente y personalizada. El aprendizaje automático puede potenciar algoritmos para recomendaciones de productos.
La IA y el aprendizaje automático también pueden aprovecharse para crear una experiencia visual más rica. Los sistemas de reconocimiento de gestos visuales que rastrean los movimientos del visitante ofrecen una forma novedosa de interactuar con un sitio web, como este sitio que enseña el alfabeto manual en lengua de señas.
Los gráficos al estilo Bitmoji ofrecen a los visitantes una representación divertida y personalizada de sí mismos, generada en parte por IA. Apenas estamos empezando a ver cómo la inteligencia artificial y el aprendizaje automático pueden utilizarse para potenciar la naturaleza visual del diseño web.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
El diseño web experimental abre nuevas posibilidades
Ahora que hemos hablado de algunos de los principios del diseño web experimental, echemos un vistazo más profundo a algunos sitios web que son todo menos tradicionales. Verás que no hay un único estilo de experimentalismo, ya que cada uno de estos sitios adopta enfoques muy diferentes.
Project Turntable
Ya hemos hablado antes de la agencia ThreeSixtyEight cuando contamos cómo hicieron la transición de WordPress a Webflow. Son un equipo de primera categoría, lleno de ideas de diseño imaginativas e innovadoras.
Esta página de destino, que existe además de su sitio web principal, ofrece una experiencia inspirada en el sonido de alta fidelidad. En la parte superior de la pantalla, una flecha dirige a los visitantes al botón de reproducción/espera. Cuando se acciona el interruptor, el disco comienza a girar con un ritmo inspirado en los años 60.
Los botones e interruptores analógicos interactivos hacen que este diseño destaque. ThreeSixtyEight utiliza el diseño web experimental para celebrar su sensibilidad creativa mientras ofrece a sus visitantes algo diferente a lo que hacen otras agencias.
Reminiscence Movie
Este sitio web es para la agencia ficticia Bannister and Associates, que forma parte del universo creado en la película de ciencia ficción noir Reminiscence. Incluso si no has visto la película, vale la pena echarle un vistazo a este sitio.
El sitio utiliza IA para crear "recuerdos" para sus visitantes. Se pide a los usuarios que suban una imagen suya o de alguien importante en sus vidas. Cada paso los guía a través del proceso de generación de un recuerdo.
En la pantalla final, verás una formación flotante de esferas y se te pedirá que conectes las sinapsis. Luego se te muestra la imagen que subiste, con el rostro cobrando vida mediante movimiento. Es extraño e inquietante, pero muy divertido.
Este es un gran ejemplo de cómo la IA puede integrarse en un sitio web, brindando a los visitantes una experiencia visual única y atractiva que no es posible en diseños más convencionales.
The Pudding
Nos encanta The Pudding (sí, los hemos mencionado dos veces en este artículo, pero es que somos MUY fans) por su talento para contar historias interesantes y fascinantes a través de lo visual. Ya sea analizando la comedia de Ali Wong, documentando máscaras de lucha libre o creando la base de datos definitiva de boy bands de internet, siempre encuentran formas novedosas de presentar la información.
Este gráfico muestra a artistas musicales que se lanzaron como solistas, documentando sus seguidores en Spotify en comparación con las bandas de las que formaban parte. Este gráfico interactivo es mucho más atractivo que uno convencional y hace que la información sea comprensible al instante.
El diseño web experimental ofrece nuevas formas de presentar datos. The Pudding destaca por crear visualizaciones de datos que no solo comunican grandes ideas, sino que lo hacen de una manera visualmente cautivadora.
Music Theater Showcase
Creado con Webflow, este sitio web para el departamento de teatro de la Baldwin Wallace University se aleja de los confines del diseño académico tradicional para crear una página que captura la esencia de la actuación.
La navegación se realiza a través de un foco que nos guía por el espacio, iluminando lo que tenemos delante. Nos lleva al centro del escenario, donde podemos descubrir más sobre los estudiantes que se han graduado del programa.
En lugar de las mismas cuadrículas y columnas que vemos una y otra vez, este sitio nos sumerge en el mundo del teatro.
Krivitzky
Al navegar por Krivitzy, el sitio web de un bufete de abogados ruso, nos encontramos con gráficos y animaciones que parecen sacados directamente de un cómic atrevido.
En la sección de bancarrota, vemos a un hombre atado a un diamante que sale disparado con un propulsor. Un demonio aparece en la página de disputas fiscales. Un dragón de fuego se transforma en un conejo dócil bajo la varita que representa al bufete. Muchos otros elementos visuales curiosos aparecen mientras navegamos por el sitio.
No solemos asociar el ámbito legal con romper barreras creativas. Pero el diseño web experimental demuestra que, sea cual sea el sector, existen formas de contar la historia de una marca de manera poco convencional.
Stonewall Forever
Los disturbios de Stonewall se consideran el punto de inflexión del movimiento LGBTQ+. Este viaje de realidad virtual cuenta su historia a través de imágenes deslumbrantes.
Los diseñadores web solían tener una paleta limitada. Imágenes bidimensionales, columnas, filas y texto era todo lo que tenían para comunicar ideas o contar una historia. La realidad virtual ha abierto amplios horizontes creativos, dando a los diseñadores el poder de comunicarse de formas más directas y vibrantes.
Black dog story
A menudo nos dejamos llevar por los aspectos más comerciales del diseño web. Pero se puede hacer mucho en este medio visual sin necesidad de vender productos o empresas. Black Dog Story aprovecha todas las posibilidades del diseño web, utilizando interacciones, animaciones y otros elementos visuales para contar una historia que se siente como una obra de arte.
Una elipse palpitante invita a hacer clic en cada fotograma de esta historia, representada en hermosos tonos negros y grises. Las formas se arremolinan y transforman, llevándonos a través de lo que parece un sueño fascinante.
Bivak
Donde la mayoría de los estudios de arquitectura muestran una colección de sus proyectos en una cuadrícula, Bivak adopta un interesante enfoque de desplazamiento lateral. En lugar del clásico carrusel de imágenes, Bivak utiliza desplazamiento horizontal para llevarnos a la página de cada proyecto.
Bivak podría haber optado por lo seguro con opciones de navegación estándar. En cambio, han tomado un camino experimental que refleja quiénes son como estudio de arquitectura moderno.
Webflow te da libertad total
Nos encanta ver cómo los diseñadores llevan su trabajo por caminos nuevos y creativos.
A menudo, el obstáculo para crear algo único son las herramientas que utilizas. Nos alegra ofrecerte una plataforma de diseño visual intuitiva que te ayudará a lanzar tus ideas, por muy locas o experimentales que sean.
Si necesitas más inspiración, echa un vistazo a Made in Webflow, donde los diseñadores publican constantemente sus últimos proyectos. O suscríbete a Webflow Inspo, nuestro boletín semanal con los proyectos más increíbles creados en Webflow.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
