Diseño web brutalista: ejemplos en vivo y CSS para copiar | We.Inc
El diseño web brutalista y neobrutalista explicado con cuatro ejemplos originales en vivo, un generador de botones con sombras duras y bordes gruesos, y el CSS para copiar.
El diseño web brutalista reduce una página a su estructura en bruto: fuentes por defecto o del sistema, bordes visibles, enlaces sencillos y poca decoración. El neobrutalismo, su pariente más amable, mantiene los contornos negros gruesos pero añade colores planos y vivos y sombras desplazadas duras. Ambos son sobre todo decisiones de CSS, así que los ejemplos de abajo se pueden editar y cada regla se puede copiar.
Brutalista frente a neobrutalista
Rasgo
Brutalista
Neobrutalista
Tipografía
Del sistema o monoespaciada, a menudo con tamaños por defecto
Grotesca en negrita o sans del sistema, grande
Color
Negro, blanco, quizá un azul para los enlaces
Rellenos planos y saturados: amarillo, rosa, verde menta
Bordes
Líneas de 1px, tablas, cajas visibles
Contornos negros sólidos de 2 a 4px
Sombras
Ninguna
Desplazamiento duro, sin desenfoque
Sensación
En bruto, como un documento
Desenfadada, como una pegatina
Las galerías de sitios brutalistas muestran capturas que no puedes inspeccionar. Cada ejemplo de aquí es un diseño original escrito en HTML y CSS sencillos, renderizado en vivo, editable en el sitio y libre para copiar, además de un generador del botón neobrutalista que busca la mayoría de la gente.
Ajusta el generador de botones: grosor del borde, desplazamiento de la sombra, color de relleno y radio de las esquinas.
Pasa el cursor por la vista previa para notar el efecto de pulsación y luego copia el CSS.
Baja hasta los cuatro ejemplos y edita su código para ver cómo cambia el resultado.
Ten en cuenta las notas de accesibilidad antes de publicar una paleta llamativa.
Las sombras duras no necesitan valor de desenfoque: pon a 0 la tercera longitud de box-shadow para obtener un bloque desplazado nítido.
El texto negro sobre amarillo, verde menta o rosa saturados suele leerse bien; el texto blanco sobre esos rellenos normalmente no. Comprueba cada combinación.
En bruto no significa descuidado. Mantén un paso de espaciado coherente aunque los bordes y la tipografía parezcan toscos.
Deja los contornos de foco visibles y gruesos, algo que además encaja con el estilo.
Usa este aspecto en portafolios, fanzines, eventos y herramientas para diseñadores; pruébalo con tu público antes de usarlo en la web de un banco o una clínica.
Preguntas frecuentes
¿Qué es el diseño web brutalista?
Es un estilo que muestra el esqueleto de una página web en lugar de pulirlo: fuentes por defecto, bordes duros, cuadrículas o tablas visibles, enlaces subrayados y pocas imágenes. El objetivo es la honestidad y la velocidad más que la belleza.
¿Qué es el neobrutalismo?
El neobrutalismo toma los contornos gruesos y la maquetación directa del brutalismo y los combina con colores planos y vivos, tipografía robusta y sombras desplazadas sólidas. Es habitual en páginas de producto y en interfaces de aplicaciones que quieren parecer atrevidas e informales.
¿Cómo hago una sombra neobrutalista en CSS?
Usa box-shadow con un desplazamiento x e y, desenfoque cero y un color sólido, por ejemplo box-shadow: 6px 6px 0 #000. Combínalo con border: 3px solid #000. Al pasar el cursor, mueve el elemento hacia la sombra y reduce el desplazamiento para dar sensación de pulsado.
¿El diseño brutalista es malo para la accesibilidad?
No por naturaleza. El HTML sencillo, los enlaces reales y los contornos marcados suelen ser muy accesibles. Los problemas vienen de combinaciones de colores con poco contraste, texto diminuto por defecto y la eliminación de los estilos de foco, así que revísalos como harías en cualquier sitio.
Dónde funciona el estilo
El brutalismo encaja en sitios que quieren transmitir personalidad o una actitud de hazlo tú mismo: páginas personales, estudios, publicaciones, sitios de música y de eventos. Su sencillez también aligera las páginas, porque hay pocas imágenes y pocas fuentes web que descargar.
Encaja peor donde los visitantes necesitan confianza, como en salud, finanzas o procesos de pago. Ahí, un diseño más sereno con un único acento brutalista, como una llamada a la acción con borde, puede ser un mejor término medio.
Hacerlo tuyo sin copiar
La mayoría de las páginas brutalistas comparten un vocabulario más que una plantilla, así que rara vez necesitas tomar nada de nadie. Elige un motivo estructural, como una cuadrícula visible, secciones numeradas o un teletipo, y repítelo con coherencia.
Elige una paleta de negro, blanco y como mucho dos acentos planos. Después deja que el espaciado, los bordes y el tamaño de la tipografía hagan el resto del trabajo en lugar de degradados, fotos o sombras suaves.
Cuatro ejemplos originales
Página de inicio en bruto tipo documento
Monoespaciada del sistema, enlaces azules por defecto y una tabla sencilla. Todo el aspecto se consigue con un puñado de reglas.
Tarjeta de precios neobrutalista
Contorno grueso, relleno plano y una sombra dura tanto en la tarjeta como en el botón.
Galería con cuadrícula visible
Los bordes hacen también de líneas de la cuadrícula, así que la estructura es la decoración.
Formulario de newsletter brutalista
Un campo con etiqueta y un botón con contornos gruesos y un anillo de foco ancho que encaja con el estilo.
Generador de botones neobrutalistas
Ajusta el borde, el desplazamiento de la sombra, el relleno y el radio. Los valores iniciales producen este CSS: