# Diseño brutalista: maquetas crudas y cómo usarlas [Canonical HTML page](https://gradiently.design/es/guide/brutalist-design) El brutalismo empezó como edificios de hormigón y se convirtió en una forma de diseñar sitios web y carteles que rechaza el pulido. Usado con intención, es uno de los estilos más reconocibles que puedes elegir. ## The short version - El diseño brutalista toma su nombre de la arquitectura brutalista, una palabra que suele rastrearse hasta el francés béton brut, hormigón crudo. - En el diseño gráfico y web, brutalismo significa estructura expuesta: cuadrículas visibles, tipografía por defecto o monoespaciada, bordes duros y poca decoración. - El neobrutalismo es una variante más amable y pulida usada en apps y sitios web, con colores vivos planos, gruesos contornos negros y sombras duras desplazadas. - Las maquetas brutalistas pueden parecer descuidadas y a la vez ser fáciles de usar, siempre que el contraste del texto, el estilo de los enlaces y la navegación sigan claros. - El brutalismo funciona mejor para marcas que quieren parecer honestas, independientes o técnicas, y peor para marcas que venden calma o lujo. 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. | Cuándo | Qué pasó | | --- | --- | | Finales de los años cuarenta a 1952 | Le Corbusier construye la Unité d’Habitation de Marsella en *béton brut* visto, el edificio más citado como inicio del estilo. | | Principios de los años cincuenta | Alison y Peter Smithson usan la expresión Nuevo Brutalismo para su propia arquitectura despojada. | | 1955 | El crítico Reyner Banham publica su ensayo *The New Brutalism*, que da al movimiento su teoría. | | Años 2010 | Los diseñadores web adoptan la palabra para sitios crudos, de aspecto programado a mano, que ignoran las plantillas pulidas. | | Años 2020 | El neobrutalismo se extiende por apps y startups: colores vivos planos, contornos gruesos y sombras duras desplazadas. | Del hormigón al código. La idea compartida en todo ello es la honestidad sobre cómo se hace una cosa. ## 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. - Hormigón: #e5e4e0 - Árido: #9a9894 - Alquitrán: #111111 - Blanco: #ffffff - Naranja señal: #ff4800 - Azul de enlace: #0000ee Una paleta brutalista clásica: grises hormigón, negro, blanco y un color señal. `#0000ee` es el azul de enlace no visitado que muchos navegadores usan desde hace tiempo por defecto. 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](https://gradiently.design/es/guide/monospace-fonts) 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. ### Brutalismo - Grises, negro, blanco, un color señal - Fuentes por defecto o del sistema - Deliberadamente torpe, a veces hostil - Parece un documento o un fanzine - Común en portafolios y sitios de arte y cultura ### Neobrutalismo - Colores vivos planos como limón, lila y menta - Grotescas gruesas con personalidad - Divertido y accesible - Parece pegatinas sobre una página - Común en startups, apps y newsletters ```css .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 */ } ``` Una tarjeta y un botón neobrutalistas. La sombra no tiene desenfoque, así que parece una losa sólida; al pulsar el botón, se desliza a su sitio. ## 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. **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. **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](https://gradiently.design/es/guide/color-contrast-accessibility). 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. **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. **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](https://gradiently.design/es/guide/bold-design-ideas) para la escala. Una publicación vertical con estilo de cuaderno de campo que dice Índice de obras, 2019 hasta hoy, sobre un fondo con textura Sensibilidad brutalista en una publicación: texto simple, palabras de documental y un fondo que es todo textura y nada de pulido. ## 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](https://gradiently.design/es/guide/swiss-design) 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](https://gradiently.design/es/guide/landing-page-design) para un sitio que se sienta a la vez crudo y acabado. ## FAQ ### ¿Qué es el diseño brutalista? Un estilo que expone la estructura y evita el pulido, con tipografía por defecto o monoespaciada, bordes duros, color plano y cuadrículas visibles. Se llama así por la arquitectura brutalista. ### ¿De dónde viene el nombre brutalismo? Suele rastrearse hasta el francés *béton brut*, hormigón crudo, el material más asociado al estilo arquitectónico de posguerra. ### ¿Cuál es la diferencia entre brutalismo y neobrutalismo? El brutalismo es crudo y a menudo austero, en grises con fuentes por defecto. El neobrutalismo conserva los contornos gruesos pero añade colores vivos planos, letra gruesa y sombras duras desplazadas. ### ¿Es malo el diseño web brutalista para la usabilidad? No tiene por qué. Mantén alto el contraste del texto, evidentes los enlaces y simple la navegación, y un sitio brutalista puede ser más fácil de usar que uno pulido. ### ¿Qué fuentes se usan en el diseño brutalista? Fuentes monoespaciadas, fuentes del sistema como Arial y Times, y grotescas gruesas. La elección suele indicar que el contenido importa más que el estilo.