Hace unos meses Verónica nos enseñó cuales iban a ser las tendencias de diseño para este año 2022. Entre ellas nos encontrábamos dos que cada vez estamos viendo en más sitios web: la vuelta a los 90 y el maximalismo. Y estas dos tendencias prácticamente se tocan en un estilo que está tomando cada vez más fuerza: el neobrutalismo.
Si os gusta el arte y la arquitectura, seguramente habéis oído hablar del brutalismo. El brutalismo es un movimiento arquitectónico que surgió a mitad del siglo XX y que apostaba por mostrar los materiales y las estructuras en bruto, abandonando por completo cualquier complemento estético u ornamentación. Es un estilo en el que la funcionalidad está por encima de todo, y que no tiene miedo a enseñarla.
Pero, ¿qué tiene que ver esto con el diseño web y el neobrutalismo?. Básicamente, queremos poner un poco de contexto sobre que otras tendencias se apoya y evoluciona el neobrutalismo, para saber porque es así y que podamos usarla en nuestros diseños conociendo todos sus detalles. Por ello, en primer lugar, queremos mostraros otras dos tendencias que, a primera vista, pueda parecer que no tengan muchos puntos en común, si los analizamos veremos que si los tienen. Y después nos centraremos en el neobrutalismo en si, y cuales son sus criterios básicos.
Minimalismo y Brutalismo
Para entender cuales son los principios que rigen el diseño neobrutalista, lo mejor es empezar hablando por dos tendencias que, aunque distintas entre si, comparten ciertos valores. Y nos van a ayudar a entender como el neobrutalismo es, en cierta manera, una evolución de estos.
El primero es el minimalismo. En diseño web, seguro que habéis visto muchos sitios con este estilo. Sin ir más lejos, hace un tiempo os mostramos algunas de las mejores plantillas minilmalistas para WordPress. Este minimalismo se basa en el menos es más, la simplificación de la interfaz mediante la eliminación de cualquier elemento innecesario:
- Pocos colores, con tendencia al blanco/negro/gris, o algún toque de color muy sutil.
- Uso potente y bien pensado del espacio en blanco.
- Expresión al mínimo de sombras, animaciones, transiciones…
- Iconos simples y con estilo flat design.
De este minimalismo pasamos al brutalismo. Si vimos antes como era el brutalismo en la arquitectura, en el diseño web casi tiene una traslación completa:
- Sin miedo a mostrar la web con la estructura del HTML tal cual.
- El uso del color casi se reduce en su totalidad al blanco y negro, totalmente planos y con un fuerte contraste.
- Elementos que se superponen, o que no tienen un ritmo consistente.
Este brutalismo es prácticamente no darle estilo de ningún tipo a nuestra web, salvo en contadas excepciones. Si en la arquitectura se buscaba la pureza de los materiales y la estructura, en el diseño web se quiere que se confía en la estructura pura del HTML como elemento básico y natural para la navegación, sin intermediarios.
Una vez dejando claros estos conceptos, entremos directamente cuales son los principios fundamentales del neobrutalismo dentro del diseño web.
Bases del Neubrutalismo en el diseño web
Contraste y Color
Ya sabemos de la importancia del contraste dentro del diseño web, tanto para temas como la accesibilidad, como para mantener una jerarquía correcta de cada uno de sus elementos. Y en el neobrutalismo se lleva eso hasta la última expresión, ya que no tiene miedo de incluso usar el negro puro (#000000) a la hora de trabajar. Lo que en muchos proyectos es una línea que nunca se debe cruzar, el uso de este negro en el neobrutalismo es muy habitual usarlo en textos o sombras.
Si siempre solemos recomendar no usar una paleta de colores muy amplia, en el neobrutalismo es todo lo contrario. Y no solo se usan múltiples colores, sino que estos incluso muchos seguro que los calificáis como colores feos. Normalmente se usan colores con luminosidades medias, moviéndose entre 45 y 7, y saturaciones altas, entre 70 y 90. Esto hace que tengamos siempre colores colores muy agresivos y vibrantes. Nada de tonalidades suaves o con tendencia a colores pastel.
Tipografías
Las tipografías es una parte esencial del neobrutalismo, ya que se apuesta por títulos a gran tamaño (incluso a veces tamaños desproporcionados), alta legibilidad y con mucho contraste respecto a su fondo. Con respecto a la legibilidad, es muy importante el uso de los espacios entre diferentes tipos de texto. Los titulares deben tener cierta separación con los cuerpos de texto, y los párrafos entre sí. Esto hace que sea muy fácil de leer el contenido gracias al buen uso, tanto de la jerarquía como de los espacios en blanco.
Además, la tipografía no solo sirve para servir contenido, sino que es parte de la ornamentación del diseño. Incluso se puede utilizar para que sea parte de las ilustraciones, o que se creen ilustraciones con ella. Por ejemplo, en vez de tener un icono para representar nuestro menú de navegación, podemos usar el texto MENÚ en mayúsculas, con una tipografía bold, relleno transparente y contorno negro.
Otro elementos
Si vemos otros elementos del diseño como las sombras, estas son muy simples, usando colores planos y sin difuminar. No se quiere tener una sombra suave y que apenas molesta. Es una decoración dura y que se hace notar.
Otro elemento muy importante son las ilustraciones. Olvidémonos de renders en 3D, tan de moda ultimamente, o o dibujos más realistas. Solo se utilizan ilustraciones simples, casi infantiles, con colores planos y vibrante. Incluso sin colores, solo con su contorno. Todo tiene que tener un aspecto de hecho con rapidez y casi sin pensar.
Y si se usan fotografías de personas, normalmente se les elimina el fondo, incluso de forma irregular, recortando su silueta con rectas irregulares. Imaginad cuando usábamos unas tijeras en el colegio para recortar fotografías. Esa es la idea. Por supuesto, el fondo que tendrán estás imágenes es, como no podía ser de otra forma, un color plano y vibrante.
Ejemplos de Neobrutalismo en la web
Los dos mayores exponentes que podemos encontrar a día de hoy del neobrutalism en la web son Gumroad y Figma. En ambas podemos ver el como el uso de colores agresivos y tipografías a gran tamaño que hemos descrito durante el artículo.
Luego tenemos otro par de ejemplos que toman píldoras de otros estilos para fusionarlas con el neobrutalismo. En la revista cultural The Outline vemos los colores y tipografías, pero insertan emojis como si fueran pegatinas, además de fotografías a gran tamaño, pero casi escondidas detrás de los textos.
Y en el diario digital Bloomberg tenemos un estilo más cercano al brutalismo, con el uso de negro y blanco puro, pero que no duda en usar colores muy llamativos en ciertas zonas para llamar la atención del lector.
Conclusiones
El neobrutalismo es una tendencia que seguro no es del gusto de todos: colores demasiados llamativos, textos enormes, ilustraciones simples… Esto se aleja de otros estilos que apuestan por un estilo web más pausado y agradable. Y quizás sea este uno de sus puntos fuertes, ofrecer una alternativa rompedora para aquellos que quieren un estilo diferente y que sobresalga sobre los demás.
También es ideal para los que buscan un estilo más abstracto, y en el que se tenga un aspecto de collage, o casi incluso de carpeta de instituto, donde se pegaban fotos, dibujos, y se escribía con rotuladores llamativos para compartir nuestras ideas con los demás.
Y con esto terminamos por hoy. Esperamos que os haya resultado interesante, y que el neobrutalismo entre dentro de vuestro catálogo de posibles diseños para el futuro. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras ideas y experiencias sobre esta tendencia en el diseño web.
