El brutalismo es un estilo arquitectónico que surgió a mediados de los años 20 del siglo pasado, aunque su auge llegó un poco después, entre los años 50 y 60. Se caracterizaba por ser un estilo sencillo y sincero, sin virguerías. Si tuviéramos que escoger una única característica para definir el brutalismo, esta sería su rechazo a las apariencias. En el brutalismo, la forma sigue a la función.
Los edificios brutalistas se componen de geometrías angulares repetitivas y se enorgullecen de los materiales con los que se construyeron. Así, por ejemplo, cuando el edificio es de hormigón, el brutalismo mantiene las texturas de los moldes de madera que se emplearon para dar forma al material, resultando en un acabado crudo y potente.
Después de esta pequeña introducción te estarás preguntando que por qué estamos hablando de arquitectura si este blog va de tecnología y WordPress. Pues bien, el motivo es sencillo: el brutalismo es una corriente de diseño que también podemos aplicar en el mundo web…
El origen de la web y su evolución gráfica
Para nuestros lectores más jóvenes, la web parece que es un invento que «lleva toda la vida con nosotros», pero nada más lejos de la realidad. La primera página web de la historia se publicó el año 1991 y, como puedes ver, era sencillísima:
Las primeras páginas web eran simplemente texto con hiperenlaces. Pero a medida que la tecnología avanzaba, la cantidad de recursos que se podían meter en nuestras páginas aumentaba y las posibilidades para innovar se expandían.
En esos inicios de Internet, nadie tenía muy claro qué era un buen diseño (a pesar de todo el bagaje que teníamos del mundo de la imprenta), y los primeros webmasters hacían «lo que podían», maquetando páginas de la mejor forma que sabían para que el contenido apareciera como a ellos les gustaba. Sí, estoy hablando de los infames diseños con tablas de finales de los 90:
Estos diseños «funcionaban» (entre muchísimas comillas) a nivel visual, pero eran un desastre absoluto a nivel interno. La maquetación HTML no tenía nada que ver con el contenido y las páginas eran cualquier cosa menos accesibles. Así que, como todo en el mundo del diseño y la moda, pronto fuimos cambiando poco a poco hacia diseños más sencillos y lineales, más simples:
Las paletas de colores, los brillos, iconos realistas o iconos complejos… todas estas cosas se van adaptando según el momento de tiempo en el que estamos, pero la tendencia que hemos seguido siempre ha sido la de ir hacia una web más clara y sencilla. Y, de hecho, una prueba de ello es la entrada que compartía Ruth antes de ayer, cuando hablaba de las nuevas tendencias en el diseño web y, en concreto, de cómo Apple sigue estos principios para crear su imagen corporativa.
Pero la realidad es más compleja que todo esto. No es verdad que haya una única línea de diseño y que todas las webs avancen siguiendo el mismo camino. Hay gente que se aleja de las tendencias globales y explora otros caminos. Rompen moldes. Quizás incluso creen la próxima tendencia…
Brutalismo en la web
El término brutalismo viene del francés «béton brut», u «hormigón crudo». Para nosotros, que estamos en el mundo web, la parte importante del brutalismo es precisamente esa «crudeza». Tal y como te decía al principio, la arquitectura brutalista tiene como máxima expresión el mostrar los materiales tal cual son, sin añadir ornamentos innecesarios o hacerlos pasar por lo que no son.
Si dejamos atrás el brutalismo arquitectónico y nos centramos en su vertiente web, ¿cuáles son estos «materiales» con los que construimos una web? El HTML y el CSS son a la web lo que una hormigonera o una grúa es a la construcción: es decir, son las herramientas que usamos para «construir» nuestro proyecto. En la web, el «material crudo» que trabajamos es el contenido. Y eso no te debería sorprender, porque ya te hemos dicho mil veces en esta web que «el contenido es el rey».
El brutalismo es una corriente sincera, así que como desarrolladores y diseñadores web tenemos que ser sinceros y saber qué es y qué no es una web. Una web no es una revista. Una web no es una app. Una web no es un cartel publicitario.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
Principios de diseño brutalistas en la web
A continuación de dejo con algunos principios básicos que debes tener en cuenta a la hora de diseñar una web brutalista:
1 – El contenido debe funcionar en todos los navegadores
Si creas una página web sin ningún estilo CSS, y te esfuerzas en estructurarla correctamente a través de las etiquetas HTML, sabes que esa web funcionará perfectamente en todos los navegadores del mundo. Incluso en aquellos navegadores que no tengan pantalla asociada (sí, estoy hablando de accesibilidad).
El contenido tiene que funcionar y tener sentido en un mundo sin CSS. Desde el momento en el que empiezas a maquetar la distribución de la página vía CSS, te arriesgas a alejarte de los principios brutalistas, intentando que tu web no sea lo que se supone que es.
2 – Las interacciones del usuario con la web están limitadas y definidas por el HTML
Con CSS y JavaScript podemos creas webs que parezcan apps nativas, con interacciones que antes parecían imposibles y animaciones y transiciones de ensueño. Pero todo esto puede alejarnos, de nuevo, de la pureza de la web y provocar que nos centremos más en «la app» que en «el contenido».
Por defecto, únicamente los botones y los enlaces son elementos a los que el usuario puede hacer clic. Y como son los únicos elementos que se pueden clicar, su apariencia debe ser clara.
Desde el principio de la web, los hiperenlaces han seguido un patrón claro. Son textos que usan un color (azul) diferente al cuerpo del texto y aparecen subrayados. Cuando el hiperenlace se ha visitado, este cambia de color (morado) para que el visitante sepa que ya ha visto esa página. Estos patrones se están perdiendo en las páginas actuales… pero quizás deberías plantearte si es buena idea.
Los botones, por otro lado, representan un elemento que existe en la vida real. El botón es algo que podemos pulsar y que se comporta como lo haría en la vida real. Por lo tanto, debe cambiar de estado mientras lo estoy pulsando. Y también debe comportarse como espero que lo haga: los botones no suelen estar solos, sino que acompañan a un formulario, y la promesa que hay detrás es que, cuando los pulse, enviarán la información del formulario y me llevarán a otra página con una respuesta.
3 – La web se consume dentro de un navegador, así que debo poder «navegar» por ella
Los navegadores, de siempre, han tenido botones para «volver atrás» y «adelante» según me interesa. Pero con la aparición de SPA (aplicaciones que usan una única página) y con el uso masivo de JavaScript para cargar contenido, ya no está tan claro cuándo paso de una página a otra y, por lo tanto, cómo debe comportarse el botón de atrás. Un diseño brutalista se mantiene fiel a este patrón: cuando el usuario hace clic al botón de «Atrás», la web hace lo que el usuario espera que haga.
4 – El contenido se consume en vertical
Una web no es una revista o un libro, así que no hay necesidad (en principio) de paginar el contenido. El único motivo por el que muchísimas webs lo hacen es para conseguir aumentar las visitas de forma artificial, ya que, para leer un artículo, el lector está obligado a visitar múltiples páginas.
En una web brutalista, el contenido se presenta de golpe y se deja que sea el lector el que lo consuma a su ritmo, haciendo scroll según le convenga. No hay necesidad de molestar al usuario con interacciones innecesarias para pasar a consumir aquello que de verdad importa: el contenido.
¿Tú qué opinas?
Como ves, existen diferentes corrientes a la hora de diseñar y maquetar una web. A mí personalmente me gustan los principios brutalistas, porque son los que menos problemas nos dan a aquellos creadores que no somos diseñadores: aceptar la web cruda nos quita complicaciones y nos ahorra tener que pensar y probar diseños imposibles.
Y tú, ¿qué opinas? ¿Es una ida de olla? ¿Te parece horrible? ¿Es la panacea? Déjanos tu opinión en los comentarios de abajo.
Imagen destacada de berenice melis en Unsplash.
Deja una respuesta