Neobrutalismo web: qué es, de dónde viene y cuándo usarlo
Mientras Apple vuelve a poner de moda el brillo y las transparencias del glassmorphism, hay otro estilo que va justo en la dirección contraria: el neobrutalismo. Colores saturados, bordes gruesos, sombras sólidas y nada que intente disimular la estructura de la página. Recuerda a los primeros diseños digitales, tanto de software como de la web.
Me gusta tanto que el banner de este artículo lo diseñé yo siguiendo el estilo.
De dónde viene
Sus raíces están en la arquitectura brutalista, que dejaba los materiales a la vista, sin revestir, con formas geométricas y angulosas. El brutalismo pasó después al diseño gráfico con la misma idea: directo y sin adornos.
Del brutalismo al neobrutalismo
El “neo” indica una evolución: el neobrutalismo conserva los rasgos del brutalismo, pero los adapta a la web actual con colores más vivos, interactividad y un aire nostálgico que recuerda a los diseños de los noventa.
“Surgido como una reacción contra los diseños elegantes y minimalistas, el neobrutalismo crea un estilo visual impactante (casi rebelde). Si bien el neobrutalismo llama la atención, los diseñadores deben equilibrar cuidadosamente su aspecto distintivo con la usabilidad.”
Hayat Sheikh, Nielsen Norman Group
Leer artículo completo
Cómo se reconoce
- Color: contrastes fuertes y colores muy saturados, negro intenso, sombras marcadas y fondos que se salen del blanco de siempre.
- Tipografía: letras grandes y gruesas, con una jerarquía muy evidente.
- Formas: bloques, líneas duras y una estructura que se deja ver.
- Composición: disposiciones asimétricas, cuadrículas visibles y elementos que se superponen.
- Acabado: bordes y contornos visibles, con un aspecto casi hecho a mano.
Cuándo usarlo y cuándo no
Encaja bien en proyectos que quieren salirse de lo convencional: portafolios de creativos, agencias, startups o marcas que quieren transmitir una imagen directa y sin rodeos.
Se suele decir que choca con la accesibilidad, y yo creo que es al revés: bien aplicado cumple muchas de sus reglas. El contraste alto, los bordes que marcan claramente dónde empieza y termina cada elemento, los botones grandes y la tipografía gruesa son justo lo que piden las pautas. Donde sí hay que tener cuidado es en las páginas con mucho texto para leer con calma: tanto color saturado alrededor cansa en una lectura larga.
Si lo usas, tres cosas ayudan a que no se vuelva un caos:
- Mantener el contraste suficiente y una tipografía legible, aunque el estilo pida exagerar.
- Usar una paleta corta y coherente que ayude a ordenar el contenido, en vez de un color distinto para cada cosa.
- Probarlo con usuarios, porque es fácil que tanta intensidad visual confunda.
Ejemplos para inspirarte
Para leer más
- Neobrutalism: Definition and Best Practices – NNGroup
- How can I design in the Neo Brutalism style? – Medium
- Qué es el brutalismo en el diseño web – Elementor
Lo que hice con todo esto
Todo lo que investigué para este artículo lo apliqué en Moda en Movimiento, una pequeña web para una marca de artículos personalizados, hecha con Astro y Tailwind en estilo neobrutalista. Es de las webs que más he disfrutado desarrollar (también está en mi portafolio).
Actualización, septiembre de 2026: estoy desarrollando una herramienta de accesibilidad para webs (la menciono en este artículo), y una de sus versiones tendrá diseño neobrutalista, precisamente porque el estilo cumple muchas reglas de accesibilidad.
