Diseño brutalista: maquetas crudas y cómo usarlas

El diseño brutalista es un estilo que muestra su estructura en lugar de esconderla: cuadrículas visibles, tipografía por defecto o monoespaciada, duros bordes negros, color plano y casi ningún adorno. El nombre viene de la arquitectura brutalista, que suele rastrearse hasta el francés béton brut, hormigón crudo. En un sitio web o un cartel, el brutalismo parece deliberadamente sin pulir, lo que lo hace destacar en un mundo de tarjetas redondeadas y degradados suaves. Usado con cuidado, sigue siendo perfectamente fácil de leer y de navegar.

De dónde viene el brutalismo: una breve historia

La idea nació en la arquitectura tras la Segunda Guerra Mundial. Los arquitectos dejaron el hormigón desnudo, mostraron cómo estaba hecho un edificio y priorizaron la función sobre el acabado. Los diseñadores gráficos y web recogieron la actitud décadas después, no el hormigón.

Cómo es el diseño gráfico y web brutalista

• Tipografía por defecto o del sistema: Times, Arial, Courier y fuentes monoespaciadas, a menudo en un solo tamaño con el peso marcando la jerarquía.
• Estructura visible: bordes alrededor de cada bloque, líneas de cuadrícula a la vista, tablas que parecen tablas.
• Bordes duros: sin esquinas redondeadas, sin sombras suaves, sin desenfoque.
• Color plano: blanco, negro, gris y uno o dos colores señal llamativos.
• Enlaces en bruto: enlaces azules subrayados, botones simples con borde.
• Maquetas densas o desiguales: contenido apilado de borde a borde, o un elemento enorme que rompe la cuadrícula.

La tipografía es donde el brutalismo se nota más. Una fuente monoespaciada dice «hecho a mano, en código»; una serif simple a tamaño por defecto dice «no nos molestamos con las fuentes», que es justo la idea. Fuentes monoespaciadas enumera buenas opciones si quieres el aspecto sin depender de lo que tenga el sistema del lector.

Brutalismo y neobrutalismo comparados

Casi todo lo que hoy se llama brutalista en sitios de producto es neobrutalismo. Mantiene los contornos duros y el color plano, pero añade cercanía: colores vivos pastel o de caramelo, letra gruesa y una sombra desplazada sólida que hace que las tarjetas parezcan apoyadas sobre la página.

.card {
  background: #fff36b;
  border: 3px solid #111111;
  border-radius: 0;
  box-shadow: 6px 6px 0 #111111; /* hard offset, no blur */
  padding: 24px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.card a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.button {
  background: #c4b5fd;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: none; /* the button sinks into its shadow */
}

Cómo usar el diseño brutalista sin dañar la usabilidad

El brutalismo puede parecer áspero. No puede ser confuso. Los sitios brutalistas más sólidos son tajantes sobre dónde está cada cosa: navegación grande y simple, enlaces evidentes, titulares honestos. La fealdad elegida es un estilo; el texto ilegible es solo un error.

1. 1

   Elige una regla que romper

   Quizá sea la tipografía por defecto, quizá un color estridente, quizá una cuadrícula desigual. Romper todas las convenciones a la vez parece roto, no brutal.

2. 2

   Mantén el contraste alto

   Negro sobre blanco o blanco sobre negro es muy brutalista y muy legible. Gris sobre gris no es ninguna de las dos cosas. Revisa el texto pensando en contraste de color y accesibilidad.

3. 3

   Haz los enlaces inconfundibles

   Subrayados y un color distinto. El brutalismo es un estilo donde los viejos valores por defecto del navegador son una ventaja.

4. 4

   Usa la estructura como decoración

   Bordes, filetes, secciones numeradas y cuadrículas visibles dan a la página su aspecto, así que no necesitas imágenes para que parezca diseñada.

5. 5

   Deja que un elemento sea enorme

   Un titular o un número gigante que rompe la cuadrícula da a una maqueta brutalista su tensión. Mira diseño gráfico atrevido para la escala.

A quién le va el diseño brutalista

El brutalismo le dice a la gente que te importa más el contenido que el envoltorio. Eso encaja con editoriales independientes, sellos discográficos, galerías, arquitectos, herramientas para desarrolladores y portafolios de diseñadores. Encaja mucho menos con un spa, una joyería o una marca infantil, porque esos clientes compran tranquilidad y calma. Si te gusta la claridad pero no la aspereza, el diseño suizo comparte el amor del brutalismo por la cuadrícula con mucho más pulido.

También puedes tomar prestado el brutalismo en parte. Un sistema tipográfico crudo y monoespaciado sobre un fondo rico, por ejemplo, conserva la honestidad y añade atmósfera. Un Mark de Gradiently queda bien detrás de ese tipo de texto simple, porque mantiene una zona tranquila bajo las palabras y elige tinta clara u oscura por línea. Combínalo con las maquetas de diseño de páginas de destino para un sitio que se sienta a la vez crudo y acabado.