Diseño brutalista

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

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.

Habitat 67
Habitat 67. Fuente: Wikipedia.

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.

Sainte Marie de La Tourette
Sainte Marie de La Tourette. Fuente: Wikipedia.

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:

Captura de pantalla de la primera web
Captura de pantalla de la primera web.

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:

Google en sus inicios
Qué majo era Google en sus inicios… y ya ves tú, ahora, con sus polémicas con los anuncios.

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:

Portal Terra
Portal Terra… un clásico de los 90 en Espana, con su diseño con tablas.

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.

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.

Diseño brutalista en Nelio Software
Nuestra web sigue algunos de los principios brutalistas. Los enlaces, por ejemplo, son claramente enlaces y sabes si los has visitado o no, porque cambian de color.

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.

Botón brutalista
Los botones de nuestra web también son brutalistas. Ojo, esto no quiere decir que no puedas darles un estilo propio… simplemente tienes que mantener su «pureza».

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

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.