Los sitios web brutalistas hacen las cosas raras, pero de una forma genial.
Ofrecen experiencias de usuario poco ortodoxas y desafían las convenciones de diseño. Los sitios web brutalistas nos atraen con su extrañeza.
Echemos un vistazo al origen del brutalismo y cómo se utiliza en el diseño web, para luego explorar algunos sitios web brutalistas y que veas cómo se hace.
Dónde empezó el brutalismo
Las raíces arquitectónicas del brutalismo surgieron en la Europa de la posguerra, sobre todo en el Reino Unido. Dio lugar a edificios austeros, similares a monolitos, sin ornamentación. Las líneas rectas y los patrones recurrentes aportaron una necesaria sensación de orden a un mundo que aún se estaba sacudiendo el caos de la Segunda Guerra Mundial.
Es fácil malinterpretar el término "brutal" en el brutalismo, pero proviene del francés "béton brut", que se traduce como "hormigón crudo". La gente quería volver a la normalidad lo antes posible, lo que llevó al uso de materiales de construcción expuestos, característicos de la arquitectura brutalista. Escuelas, edificios gubernamentales, apartamentos y otras estructuras importantes se construyeron en este estilo porque la prioridad durante este periodo de recuperación de posguerra era la rapidez y la eficiencia. Era una nueva era en la que la arquitectura ornamental no tenía sentido. La practicidad del brutalismo permitió que las ciudades surgieran rápidamente de los escombros y siguieran adelante.
El brutalismo en el diseño web
Donde la arquitectura brutalista ocupa un espectro más estrecho, el diseño web brutalista es un poco más variado. Pero, al igual que su homólogo arquitectónico, el diseño web brutalista va a contracorriente de la tradición y la convención.
El diseño web brutalista a veces adopta un minimalismo similar al de la arquitectura. Los patrones repetitivos, las combinaciones de colores monocromáticas y la tipografía sencilla se hacen eco de la contención vista en la reconstrucción de la posguerra.
El brutalismo en el diseño web sí diverge en los extremos que puede alcanzar. En su espíritu de inconformismo, las cosas pueden volverse visualmente estridentes. Donde el diseño web tradicional es educado, el brutalismo puede ser descarado y, a veces, molesto, que es a menudo el objetivo principal.
Las características clave del diseño web brutalista
El diseño web brutalista se deleita desafiando el statu quo. Es similar a la primera ola del punk rock, que se rebeló contra la música insípida de los años 70 que era popular en aquel entonces. Desata una cacofonía de imágenes y texto. Donde el diseño web tradicional es más Tom Jones, el brutalismo es más Johnny Rotten.
El brutalismo puede tratar sobre romper las reglas, pero hay algunos elementos comunes que podemos observar en los muchos diseños web brutalistas que existen.
Falta de organización
El brutalismo puede ser una pesadilla para quienes valoran la estructura. A menudo hay muy poca jerarquía. Esto puede resultar confuso, pero esta ausencia de organización nos obliga a centrarnos en descifrar lo que tenemos ante nuestros ojos.
Simetría y asimetría
Puede haber rejillas ocultas bajo un diseño, pero las imágenes y el texto pueden alejarse radicalmente de estos anclajes. Los diseños rotos mezclan el orden con el desorden.
Diseños abarrotados
El diseño web tradicional utiliza espacios negativos y una ubicación deliberada para cada elemento. Los sitios web brutalistas suelen estar desbordados de elementos visuales y texto que se amontonan unos contra otros.
Colores que chocan
El brutalismo se basa en los opuestos. Los colores se mezclan sin tener en cuenta si son complementarios. Los sitios web brutalistas vibran con colores contrastantes, destacándose de las paletas de colores convencionales a las que estamos acostumbrados.
Navegación extraña o inexistente
La navegación puede ser deliberadamente confusa, sin elementos obvios o familiares. El brutalismo disfruta ocultando elementos y complicando las cosas.
Tipografía ecléctica
El brutalismo alcanza extremos en ambos lados del espectro tipográfico. En el lado más minimalista, puede haber una sola tipografía en un único tamaño con un espaciado uniforme para todo el texto. Las fuentes monoespaciadas son comunes en los sitios web brutalistas.
La tipografía también puede ser exactamente lo opuesto, combinando múltiples fuentes en diversos tamaños y estilos.
Diseños de una sola página
Ignorando la formalidad de tener varias páginas con propósitos específicos, el brutalismo se libera con largos desplazamientos de contenido, todo contenido en un solo espacio.
CSS mínimo
El CSS ofrece un control preciso sobre el aspecto de un diseño web. Los diseños web brutalistas suelen mantener el CSS al mínimo absoluto, logrando una apariencia despojada. Esta falta de estilo le da a los sitios web brutalistas una sensación de ir directo al grano, sin las distracciones de los adornos decorativos.
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
El brutalismo ofrece una amplia gama de posibilidades creativas
Los sitios web brutalistas pueden adoptar muchas formas diferentes, desde las más básicas y sencillas hasta las más ostentosas. Echemos un vistazo a una variedad de ejemplos de sitios web que se encuentran dentro del espectro del brutalismo.
Portafolio de diseño de Ashley Cook
El portafolio de Ashley Cook contiene texto con muy poco estilo CSS. Vemos un largo desplazamiento de escritura homogénea, con muy poca jerarquía visual.
Sin distracciones visuales, su trabajo es el único foco de atención. Recuerda al texto escueto que acompaña a una obra de arte en un museo. El portafolio de Ashley es una lista de recursos, no una presentación llamativa.
Budapest Park
Lo primero que llama la atención en Budapest Park es el choque de colores. La mayoría de los diseños no mezclan azul, rojo y rosa, pero el brutalismo se trata precisamente de yuxtaposiciones impactantes.
Junto con un esquema de colores estridentes, hay muy poco espacio negativo. Líneas onduladas, cuadrados, botones elípticos y fotografías hacen que este diseño sea muy cargado. Y, sin embargo, este estilo nos incita a seguir haciendo scroll.
Aunque el choque de colores y la abundancia de elementos visuales están al borde de ser excesivos, todavía hay una sensación de cohesión. Es fácil ver qué conciertos se aproximan en este recinto.
El brutalismo es deliberadamente extraño; su rareza es lo que mantiene a la gente interesada. Budapest Park triunfa con un diseño brutalista poco ortodoxo que, aun así, comunica información de manera eficaz.
New Topographics
Con un aspecto sencillo y sin pretensiones, New Topographics comunica el propósito del museo de fotografía en línea. El gris oscuro y el negro, el texto blanco disperso y las líneas que forman conexiones lineales entre los distintos elementos hacen que este diseño se sienta más cercano a la arquitectura brutalista.
El diseño sirve como telón de fondo neutral, sin interferir nunca con el texto o el contenido sobre fotografía topográfica.
Trivi
Aunque la mayor parte del sitio web de Trivi ofrece una experiencia de usuario más tradicional, la página de empleo está repleta de elementos visuales parpadeantes, texto pixelado y otros elementos aleatorios que compiten por nuestra atención.
Si el resto del diseño web fuera así de frenético, resultaría abrumador. Esto es justo la dosis necesaria de absurdo brutalista para captar nuestra atención y dejarnos con ganas de saber más.
Sergei Kalymykov
El brutalismo aporta el sentido experimental perfecto para contar la historia del artista de vanguardia ruso Sergei Kalmykiov.
Con un fondo negro y todo el texto en la fuente sans serif Angrandir, se percibe una sensación de quietud. Esto crea un fuerte contraste con los elementos visuales, que están adornados con un zumbido de estática televisiva y colores fantasmales.
El brutalismo tiende a llevar el diseño al límite de la usabilidad. Aquí, hay justo el sentido adecuado de abstracción, lo que le confiere una atmósfera surrealista. El diseño, creado con Webflow, complementa el arte de Sergei Kalmykiov.
Make Noise
La síntesis modular es una rama bastante esotérica de la música electrónica donde los artistas esculpen y generan sonido a través de módulos especializados cuya funcionalidad depende de cómo estén conectados. Make Noise fabrica módulos de sintetizador modular, y su producto "Maths" es popular entre muchos entusiastas de los cables de conexión.
Los sintetizadores modulares están lejos de ser considerados instrumentos musicales tradicionales, por lo que el brutalismo es el aspecto perfecto para este diseño web. Hay una paleta de colores minimalista de negro con texto blanco. Aparte del logotipo de Make Noise, solo encontramos una tipografía monoespaciada, Lucida Console. El diseño tiene tanto simetría como asimetría para una sensación ligeramente descentrada.
El brutalismo, al igual que la síntesis modular, explora nuevas posibilidades artísticas, y Make Noise utiliza esta estética como el escaparate perfecto para sus instrumentos electrónicos.
ThreeSixtyEight
ThreeSixtyEight toma lo que esperamos de la navegación por un sitio web y le da la vuelta, obligándonos a desplazarnos hacia arriba en lugar de hacia abajo. Empezando por la parte inferior de la página, recorremos el trabajo de la agencia desde 2010 hasta la actualidad. Esta navegación poco ortodoxa es un ejemplo perfecto de brutalismo en acción.
ThreeSixtyEight también adopta el gusto del brutalismo por los diseños esotéricos. Su página "Sobre nosotros" es una extensión vertiginosa de elementos visuales flotantes controlados por el cursor: otro gran toque de anticonvencionalismo.
El diseño está lleno de colores llamativos y elementos visuales que no se ciñen a las restricciones de las cuadrículas. Este sitio web demuestra que pueden superar los límites del diseño sin dejar de crear una experiencia de usuario estelar.
Typical Organization
Al igual que la arquitectura brutalista que no oculta sus materiales en bruto, Typical Organization deja sus columnas al descubierto con líneas grises, como si fueran los pilares que sostienen el texto que se despliega sobre ellas.
Una lista de texto es una de las formas más básicas de mostrar contenido. Aquí, todos los trabajos destacados se presentan verticalmente, con poca variación en el texto. Fuera de las columnas, todo el texto se ve igual. Es brutalismo de manual.
La experiencia de navegación también tiene un toque experimental. El texto “Control” en la parte superior derecha no da muchas pistas de lo que hace hasta que interactúas con él, funcionando como un indicador críptico. Al hacer clic, el esquema de color se invierte y aparece una lista de categorías para navegar por las distintas secciones. El brutalismo puede ser misterioso, y nos encanta este elemento de navegación tan singular.
Los sitios web brutalistas desafían todo lo que sabemos sobre diseño web
La mayoría de los sitios web nos ponen en piloto automático con sus diseños familiares y su navegación convencional. Podemos llegar al contenido que buscamos sin pensarlo demasiado. El brutalismo hace añicos nuestras expectativas sobre cómo debe verse y funcionar una web. En lugar de una experiencia de usuario que apenas notamos, nos vemos arrastrados a un espacio digital que exige toda nuestra atención.
¿Buscas inspiración para tu próximo proyecto de diseño? Tanto si quieres hacer algo brutalista como si prefieres otro estilo, Made in Webflow es un recurso valioso para ver lo que la gente está creando con Webflow. ¡Esperamos ver tu trabajo allí algún día!
