Diseño brutalista

El brutalismo es un estilo arquitectónico que surge a mediados de la década de 1920, aunque su auge se produce un poco más tarde, en las décadas de 1950 y 1960. Se caracterizó por ser un estilo sencillo y sincero. En el brutalismo, la forma sigue a la función .

Los edificios brutalistas generalmente se construyen con elementos modulares repetitivos que forman masas que representan zonas funcionales específicas, claramente articuladas y agrupadas en un todo unificado. El hormigón se utiliza por su honestidad cruda y sin pretensiones, lo que contrasta dramáticamente con los edificios altamente refinados y ornamentados construidos en el estilo de élite Beaux-Arts.

¿Guay, verdad? Pero quizás se pregunte por qué estamos hablando de arquitectura si este blog es sobre tecnología y WordPress. Bueno, la razón es simple: el brutalismo es una tendencia de diseño que también podemos aplicar al mundo web…

El origen de la web y su evolución gráfica

Para nuestros lectores más jóvenes, la web parece algo que siempre ha existido, pero nada más lejos de la realidad. La primera página web de la historia se publicó “recientemente”, en 1991 ? y, como podéis ver, era muy sencillo:

Las primeras páginas web eran simplemente textos con hipervínculos. Pero a medida que avanzaba la tecnología, aumentaba la cantidad de recursos que se podían agregar y las posibilidades de innovación se expandían rápidamente.

En aquellos primeros días de Internet, nadie sabía exactamente qué era un "buen diseño" (a pesar de todo el bagaje que teníamos del mundo de la impresión), y los primeros webmasters hicieron "lo que pudieron" para crear diseños de página efectivos para mostrar el contenido. ¿Recuerdas los diseños de principios de los 90, todos basados ​​en tablas?

Claro, estos diseños más o menos “funcionaron” a nivel visual, pero internamente fueron un absoluto desastre. La estructura HTML solo se enfocaba en el aspecto final de la página e ignoraba por completo el contenido en sí, por lo que el resultado no era accesible en absoluto. Pero todos estábamos aprendiendo cómo “construir la web…”

Paletas de colores, iconos planos o realistas, animaciones… todos los detalles que, combinados, se convierten en “tendencia de diseño” van y vienen. Pero hay una tendencia que parece una constante hoy en día: la simplicidad, de la que habló Ruth hace un par de días cuando analizó Apple y sus principios de diseño.

Pero la realidad es más compleja que todo esto. No todos los sitios web siguen las mismas tendencias. Hay personas que se alejan de las tendencias globales y exploran otros caminos. Rompen el molde. Tal vez incluso creen la próxima tendencia...

Brutalismo en la Web

El término brutalismo proviene del francés "Beton brut" o "concreto en bruto". Entonces, si estamos hablando de brutalismo en la web, está claro que no estamos hablando de "concreto", sino de "crudeza". La arquitectura brutalista quiere ser fiel a los materiales que utiliza como bloques de construcción, y eso es lo que nosotros, como desarrolladores web, también debemos esforzarnos por lograr. Al menos, si queremos crear webs brutalistas.

Esto plantea la pregunta: ¿cuáles son los "materiales" que usamos para construir una web? Puede pensar que se trata de HTML y CSS, pero tenga en cuenta que HTML y CSS son para la web lo que una hormigonera o una grúa son para la construcción: son las herramientas que utilizamos para "construir" nuestro proyecto. Por tanto, la “materia prima” con la que trabajamos en la web es el contenido . Y eso no debería sorprenderte, porque hemos hablado de ello extensamente en este sitio web cada vez que mencionamos que el contenido es el rey.

El brutalismo es fiel a sus materiales, por lo que, como desarrolladores y diseñadores web, también debemos ser honestos con nuestro trabajo y saber qué es y qué no es un sitio web. Las webs no son revistas. No son aplicaciones. No son vallas publicitarias. Entonces, ¿por qué deberían parecerse a alguno de estos?

Principios de diseño brutalista en la web

Aquí tienes algunos principios básicos que debes tener en cuenta a la hora de diseñar una web brutalista:

1 – El contenido debería funcionar en todas partes

Si crea una página web sin ningún estilo CSS y se esfuerza por estructurarla correctamente utilizando únicamente etiquetas HTML, sabe que este sitio web funcionará perfectamente en todos los navegadores del mundo. No será el sitio web más hermoso, pero funcionará. Incluso funcionará en navegadores sin pantalla (sí, estoy hablando de accesibilidad). Y si el contenido es el rey, ¡ genial !

El Contenido tiene que funcionar y tener sentido en un mundo sin CSS. Diseñar una página web definitivamente puede ayudarlo a tener su propia marca, pero también puede romperla y alejarlo de los principios brutalistas.

2 – Las interacciones del usuario con la Web están limitadas y bien definidas por HTML

Con CSS y JavaScript, podemos crear sitios web que parecen aplicaciones nativas, con interacciones que antes parecían imposibles, animaciones sorprendentes y transiciones impresionantes. Pero todo esto no tiene absolutamente nada que ver con el contenido… Entonces, ¿cómo diseñamos interfaces útiles en un sitio web brutalista?

De forma predeterminada, los usuarios solo pueden interactuar con su sitio web a través de botones, enlaces y formularios. Y solo se puede "hacer clic" en los enlaces y botones. Por eso es importante mostrarlos crudos:

Desde los inicios de la web, los hipervínculos han seguido una pauta clara. Son como texto normal, pero su color es azul y su estilo está subrayado. Cuando se ha visitado el hipervínculo, su color cambia a morado para que el visitante sepa que ya lo ha visitado. ¿Deberíamos realmente alejarnos de esta pureza?

Los botones , por otro lado, representan un elemento que existe en la vida real: un botón. Un botón es algo que podemos presionar tanto en la vida real como en la web, por lo que esperamos que se comporten de manera similar. Asegúrese de que sus botones se vean como botones y su apariencia cambie cuando interactuamos con ellos. Además, úselos cuando necesite usarlos: al lado de un formulario, por ejemplo, le prometen al usuario que la información que escribió se enviará al servidor y luego será llevado a otra página con una respuesta.

3 – Los sitios web existen en los navegadores web, así que permita que sus usuarios "naveguen" su sitio web

¿Sabías que los navegadores tienen botones para retroceder y avanzar? Sé que lo haces, porque todos estamos acostumbrados a este patrón... y, sin embargo, ¡algunos sitios web están rompiendo este patrón hoy! Las aplicaciones de una sola página (SPA) usan JS para cargar contenido dinámicamente, y algunas de ellas lo hacen ignorando que hay una opción en el navegador para volver a una etapa anterior. Un diseño brutalista se mantiene fiel a la web y nunca rompe los patrones y las reglas a las que está acostumbrado un usuario.

4 – Los usuarios pueden desplazar el contenido verticalmente

Un sitio web no es una revista o un libro, por lo que no es necesario (en principio) paginar el contenido. La única razón por la que muchos sitios web lo hacen es para aumentar las visitas de forma artificial, ya que, para leer un artículo, el lector se ve obligado a visitar varias páginas. ¡No hagas esto!

En un sitio web brutalista, el contenido se presenta de una vez y el lector puede consumirlo a su propio ritmo, desplazándose según le convenga. No hay necesidad de molestar al usuario con interacciones innecesarias para ver y usar lo que realmente importa: el contenido.

¿Qué piensas?

Me gustan los principios brutalistas. Si no es diseñador, aplicar estos principios es bastante fácil: simplemente deje las cosas como se ven por defecto (o modifíquelas ligeramente). Pero, ¿qué piensa usted? ¿Te gusta? ¿Crees que es feo y anticuado? ¡Háganos saber en la sección de comentarios a continuación!

Imagen destacada de berenice melis en Unsplash.