El diseño web brutalista pone el contenido y la personalidad por delante de los principios de diseño.
Si quieres que tu sitio web destaque, considera el brutalismo. Esta estética se inspiró en la arquitectura brutalista de mediados de siglo, donde las estructuras de hormigón no se ocultaban tras acabados elegantes. Ya sea mediante el uso de cuadrículas rotas y HTML básico o colores agresivos y diseños caóticos, estos sitios ofrecen una visión estimulante de lo que puede lograr la audacia sin pulir.
Esta guía explica el diseño web brutalista y presenta 11 sitios brutalistas para inspirar el tuyo.
¿Qué es el brutalismo en el diseño web?
Los sitios web brutalistas rompen las reglas de diseño a propósito. A diferencia del diseño minimalista, este estilo no simplifica las cosas: se mantiene deliberadamente crudo. Estos sitios muestran su construcción abiertamente, sin suavizar sus asperezas.
El estilo brutalista empezó a ganar terreno alrededor de 2014. Los diseñadores estaban cansados de los sitios pulidos que se veían todos iguales. Pascal Deville notó este cambio y lanzó un sitio, Brutalist Websites, que documenta diseños web alternativos. Tomó prestado el término de los edificios brutalistas, conocidos por su construcción audaz y cuadrada que deja a la vista los materiales de construcción en bruto.
Brutalismo frente a minimalismo
Reducir un sitio web a su mínima expresión puede hacer que una página parezca vacía. En este sentido, hay una coincidencia con el diseño web minimalista. Sin embargo, ambos estilos utilizan el espacio en blanco de formas muy distintas.
El objetivo del minimalismo es la elegancia y la sencillez. Los diseñadores que trabajan con un estilo minimalista eliminan deliberadamente el texto y los gráficos innecesarios, planificando cuidadosamente el espacio en blanco y la tipografía. Cada elemento de la página tiene una razón para estar ahí.
El brutalismo, por otro lado, no se preocupa por la elegancia. Un sitio brutalista puede ser escueto. O, por el contrario, puede amontonar encabezados gigantes, elementos visuales que chocan entre sí y una paleta de colores descoordinada. Aunque en un sitio web brutalista sigue habiendo muchas decisiones de diseño intencionadas, este enfoque es una forma sencilla de destacar.
¿Cuáles son los elementos clave del diseño web brutalista?
Los sitios web brutalistas no siguen una única plantilla o tendencia, pero sus diseños comparten ciertos patrones:
- Diseños asimétricos. En lugar de seguir cuadrículas, los elementos se colocan en ángulos extraños o se superponen. Los encabezados brutalistas pueden inclinarse hacia la izquierda, mientras que los bloques de contenido flotan a la derecha.
- Colores que chocan. Los sitios brutalistas rompen las reglas de la teoría del color. El rojo brillante se encuentra con el verde neón y el rosa intenso se sitúa junto al azul eléctrico, a menudo todo en la misma página.
- Tipografía audaz. Los valores predeterminados del sistema, como Times New Roman, y las fuentes personalizadas experimentales comparten la pantalla. Independientemente de la fuente, el texto tiende a ser grande, negrita y brillante.
- Navegación mínima. Los sitios web brutalistas exigen que los visitantes presten toda su atención. Eso también se aplica a la navegación por sus páginas. No hay muchos menús de hamburguesa: algunos sitios apilan los enlaces de texto verticalmente, mientras que otros te obligan a buscar opciones de navegación ocultas.
- Páginas abarrotadas. El texto presiona contra las imágenes. Los tamaños de fuente varían enormemente. Las ubicaciones de los medios y el texto pueden superponerse y no se limitan a cajas para transmitir su mensaje.
¿Qué beneficios aporta el brutalismo al diseño web?
El diseño brutalista no se trata solo de verse diferente. Este enfoque ofrece ventajas prácticas:
- Llama la atención. Los sitios brutalistas no siguen las tendencias de diseño y utilizan una estética que atrae la atención. Es más probable que los visitantes recuerden un sitio web brutalista porque no se parece en nada a las páginas de inicio a las que están acostumbrados.
- Enfoque en el contenido. Los visitantes tienen que leer e interactuar con la información de la página, en lugar de dejarse seducir por animaciones y elementos decorativos sin sustancia.
- Carga más rápida. Estos sitios suelen prescindir de imágenes pesadas y CSS elaborado, lo que mantiene el tamaño de los archivos pequeño. Tienden a cargarse rápidamente, incluso con conexiones a internet lentas.
- Mejora la accesibilidad. Los colores de alto contraste y el texto en negrita ayudan a los visitantes con discapacidad visual a leer el contenido. Las estructuras simples funcionan mejor con los lectores de pantalla y mejoran la experiencia de usuario (UX) general.
Los sitios web brutalistas también tienen algunos beneficios de SEO que los sitios web modernos y modernos no tienen. Los tiempos de carga más rápidos son una parte importante de las Core Web Vitals de Google, y las funciones de accesibilidad como el texto alternativo y el diseño responsivo mejoran las señales de UX que rastrean los motores de búsqueda. Esto significa un mayor alcance y más personas viendo tu sitio.
11 ejemplos de diseño web brutalista
Los estilos de sitios web brutalistas no siguen una única plantilla. Algunos utilizan colores que chocan y diseños caóticos, mientras que otros son monocromáticos con una tipografía austera. Aquí analizamos 11 sitios que muestran la variedad de este estilo.
1. La historia de los abogados de presidio
La historia de los abogados de presidio utiliza una línea de tiempo roja que divide la historia de los abogados en prisión en capítulos codificados por colores. Esta técnica fragmenta siglos de historia legal en partes digeribles sin perder de vista dónde se encuentra usted, el lector. Las fotos de archivo se convierten en gifs al pasar el cursor sobre ellas. El alto contraste entre la tipografía negra gruesa y los fondos —incluso cuando el cursor invierte sus colores al pasar por encima— hace que la información densa sea legible en una sola experiencia de desplazamiento.
Todo el contenido del sitio se desliza horizontalmente a medida que te desplazas verticalmente, por lo que el sitio sigue siendo compatible con dispositivos móviles. Este desplazamiento horizontal requiere tu participación activa, pero la interacción de pasar el cursor para ver el gif recompensa esa exploración.
2. Deck Doctors
El sitio web de Deck Doctors aprovecha su nombre de marca para inclinarse hacia un contenido y elementos visuales lúdicos, ignorando la estética empresarial tradicional por algo un poco más personal. El sitio utiliza metáforas médicas para sus servicios de presentaciones comerciales: los proyectos se convierten en "tratamientos" y los clientes en "pacientes". Los posibles clientes pueden "Reservar una cita", que es la principal llamada a la acción (CTA) de la página.
Un azul eléctrico llena todo el fondo del sitio, con el nombre de Deck Doctors en letras gigantes y una fuente en negrita a través de la pantalla. Una cabeza de dibujos animados en 3D, con un tinte azul que la integra en el esquema de color, se sitúa en la esquina. El color llamativo y los elementos caricaturescos son difíciles de olvidar. Funciona porque el enfoque coincide con su posición en el mercado: la narrativa de su marca es clara y memorable, reforzando el mensaje de que pueden hacer que la tuya destaque con la misma eficacia.
3. EditStudio.
El sitio web de EditStudio. superpone texto mayormente estático sobre fondos de colores sólidos con un portafolio de moda organizado en una cuadrícula vertical y videos que se reproducen automáticamente al cargar. La barra de navegación fija no tiene adornos y se mantiene como un texto plano, sin remates, en la parte superior de la página. La tipografía es grande y se superpone con fotos y otros elementos visuales. Los nombres y las características tienen mayúsculas inconsistentes.
El diseño de cuadrícula del sitio permite a los usuarios escanear docenas de proyectos rápidamente sin tener que leer párrafos largos. Este ejemplo de diseño brutalista pone las imágenes de moda en primer lugar, dejando que los proyectos del portafolio hablen por sí mismos.
4. Mike Lamont
El sitio web de Mike Lamont parece más un PDF de un libro que un sitio tradicional. Se mantiene simple, con un fondo blanco y fuentes negras, a excepción de un conjunto rotativo de gráficos en el lado derecho de la página de inicio. Hay cuatro páginas en total, pero no hay nada que diferencie visualmente el menú de navegación. Todo permanece visible a la vez.
El formato de índice elimina los clics y las búsquedas que suelen acompañar a la navegación por portafolios. La página de "trabajo", por ejemplo, muestra un índice numerado que enumera todos los proyectos: número, año, cliente y servicios. Puedes explorar todos los proyectos de inmediato y saltar directamente a lo que quieras ver. Este estilo brutalista ofrece una experiencia de usuario limpia para los visitantes que saben exactamente lo que están buscando.
5. LORD
LORD abre con un fondo rojo intenso, pero no se queda así. Cada proyecto en el portafolio de esta agencia de branding y web se asienta sobre su propio fondo negro a medida que te desplazas por la página, solo para ser interrumpido por el rojo inicial entre secciones. El alto contraste del sitio se mantiene constante incluso cuando los colores cambian, manteniendo legibles las secciones brillantes y cargadas.
El cambio de color divide cada proyecto, dejando bordes y tarjetas para separar la información densa en lugares como su página "Acerca de". Los videos y las animaciones se reproducen por todas partes. Una píldora de navegación negra se adhiere a la parte superior de cada página, manteniéndose fija mientras todo lo demás se mueve a su alrededor. La personalidad de LORD está presente en cada momento. Los colores agresivos, las imágenes elegantes y las páginas dinámicas refuerzan su mensaje principal —sé audaz— y le dicen a los clientes potenciales que saben cómo llevarlo a cabo.
6. OutThere
Al principio, el sitio web de OutThere es simplemente naranja. El fondo brillante parece cubrir todas las imágenes, que están fuertemente filtradas con tonos anaranjados. Sin embargo, al pasar el cursor sobre una imagen, se revelan sus verdaderos colores. Esto se vincula directamente con su declaración de principios, que aparece en la parte inferior de la página: "generar intervenciones espontáneas y relevantes [en el mobiliario urbano], con el fin de revelar el potencial único de cada lugar".
La superposición naranja no solo encaja con sus objetivos como organización, sino que ayuda a los visitantes a escanear el contenido con mayor fluidez. El diseño asimétrico funciona porque la consistencia del color lo mantiene unido. Es una elección cromática atrevida que funciona muy bien como una metáfora visual llamativa del propósito de la organización.
Lánzate con las plantillas de Webflow
Elige entre cientos de plantillas de sitios web diseñadas profesionalmente para cualquier sector o estilo. Personalízalas visualmente y publícalas al instante, sin necesidad de programar.
7. GIRL
GIRL comienza con una página de carga que muestra fotografías colocadas directamente una encima de la otra, que luego desaparecen para revelar una página de inicio oscura. Una escultura metálica en 3D en la sección principal se superpone y bloquea parte del enorme texto blanco que deletrea el nombre del estudio de diseño. El resto del sitio está cargado de texto pequeño e imágenes grandes, incluido un portafolio que aparece en tarjetas asimétricas con diferentes dimensiones.
A diferencia de la mayoría de los diseños brutalistas, el sitio web de GIRL tiene tantas imágenes y elementos en movimiento que las páginas se cargan lentamente, incluso con conexiones a internet de alta velocidad. Si planeas crear un sitio web brutalista lleno de gráficos complejos, considera optimizar tus recursos o alojarlos en otro lugar en lugar de subirlos directamente a tu sitio.
8. Contekst
Contekst, diseñado por httphil, se abre con un fondo blanquecino y un gran cursor circular que dice "haz clic para navegar" sobre un texto en mayúsculas. Al seguir las instrucciones del cursor, las imágenes de proyectos de interiores se superponen al texto. Cada clic revela una nueva fotografía con diseños impredecibles. El texto del cursor cambia, primero para indicar al visitante que haga clic de nuevo y luego para dedicarle un nombre atrevido. El último clic lleva a una página donde se pueden explorar todos los proyectos de Contekst.
Este sitio no permite que los visitantes se desplacen pasivamente: o haces clic o no ves nada. Aunque hay un menú de navegación fijo en la esquina superior derecha, el sitio web mantiene un estilo de presentación fresco e impredecible en cada página. Cada proyecto es único, y también lo es todo en este sitio web.
9. Dare
Dare llena toda la pantalla con tipografía de gran tamaño. "DARE" aparece en letras negras gigantes sobre la primera mitad de la página de inicio, donde las imágenes y las ilustraciones se superponen con las formas de las letras y ocultan parte del texto. Más abajo en la página, el imperativo termina con el mismo estilo visual con una referencia a su llamada a la acción: "TO SHARE" (PARA COMPARTIR).
La fuente de gran tamaño obliga a desplazarse para verlo todo, y Dare aprovecha los espacios en blanco para incluir más información sobre el proyecto. Dado que es una iniciativa comunitaria para que más creativos compartan su trabajo en línea, la técnica de capas de imágenes de Dare significa que comparten más del trabajo que están liderando, el cual también aparece en tarjetas de colores brillantes hacia la parte inferior de la página. Este diseño web es otra forma de representar visualmente tu misión y tus objetivos para conectar con tu público objetivo y que este te comprenda.
10. Trivi
La página de inicio de Trivi es un viaje a un escritorio de Windows corrupto del año 2001. Los avisos de MS-DOS se superponen con advertencias de Internet Explorer y código de matriz que se desplaza en ángulos extraños, mientras los fallos técnicos hacen que las ventanas emergentes cambien de posición en la pila. Pero al desplazarse hacia abajo, todo se limpia y se convierte en un diseño de sitio más tradicional: logotipos tecnológicos azules en una cuadrícula con mucho espacio en blanco sobre un fondo blanco.
Este sitio web utiliza el estilo antiguo como una forma de resaltar la alegría de Trivi y su enfoque contemporáneo de las tecnologías de aprendizaje automático. La inmediatez de su personalidad es especialmente importante si se tiene en cuenta que el propósito del sitio es contratar nuevos desarrolladores. Si te molestan los cuadros de diálogo superpuestos, probablemente no disfrutarás de la cultura de trabajo de Trivi. En tu sitio, intenta añadir fuertes contrastes visuales que reflejen tu misión y tu enfoque de trabajo.
11. ¡Bananaa!
El portafolio del diseñador Melvin Yeong, Bananaa!, te recibe con una marquesina amarilla que grita en bucle infinito: «¡Trabajar sin jugar te va a chiflar!». Su fondo blanco deja espacio de sobra para el toque divertido de Melvin: hay guiños a la canción «Call Me Maybe» de Carly Rae Jepsen y emojis junto a sus muestras de diseño gráfico, que se presentan como bloques de colores vibrantes. Pasa el cursor sobre un proyecto para ver el nombre del cliente y haz clic en la imagen para obtener más información.
Los diseños desenfadados de Melvin encajan a la perfección en este sitio web brutalista. Su enfoque lúdico sigue el formato de muchos otros portafolios de diseño, pero poniendo la personalidad por encima de todo.
Rompe el molde con un diseño atrevido
El diseño web brutalista no es para todo el mundo. Y precisamente de eso se trata. Rechaza los diseños pulidos que dominan la web actual en favor de una tipografía cruda y estructuras poco convencionales.
Webflow te da el control creativo para construir sitios con esta filosofía. Tú defines la cuadrícula, los espacios, la escala tipográfica y todo lo demás. Si prefieres inspirarte en el sitio brutalista de otra persona para que fluyan tus ideas, Webflow ofrece miles de plantillas para ayudarte a empezar.
Muestra tu personalidad al mundo. Crea y gestiona diseños brutalistas increíbles con Webflow.
Crea sitios web que dan resultados.
Diseña visualmente, publica al instante y escala de forma segura y rápida. Todo con la plataforma de marketing web con IA de Webflow.
