Web design brutalista: exemplos ao vivo e CSS para copiar | We.Inc
Web design brutalista e neobrutalista explicado com quatro exemplos originais ao vivo, um gerador de botões com sombras duras e bordas grossas, e o CSS para copiar.
O web design brutalista reduz a página à estrutura crua: fontes padrão ou do sistema, bordas visíveis, links simples e pouca decoração. O neobrutalismo, seu parente mais amigável, mantém os contornos pretos grossos, mas acrescenta cores chapadas e vivas e sombras duras deslocadas. Os dois são sobretudo escolhas de CSS, então os exemplos abaixo são editáveis e cada regra pode ser copiada.
Brutalista versus neobrutalista
Característica
Brutalista
Neobrutalista
Tipografia
Do sistema ou monoespaçada, muitas vezes nos tamanhos padrão
Grotesca em negrito ou sans do sistema, grande
Cor
Preto, branco, talvez um azul de link
Preenchimentos chapados e saturados: amarelo, rosa, verde-menta
Bordas
Linhas de 1px, tabelas, caixas visíveis
Contornos pretos sólidos de 2 a 4px
Sombras
Nenhuma
Duras e deslocadas, sem desfoque
Sensação
Crua, de documento
Divertida, de adesivo
Galerias de sites brutalistas mostram capturas de tela que você não consegue inspecionar. Cada exemplo aqui é um design original escrito em HTML e CSS puros, renderizado ao vivo, editável no lugar e livre para copiar, além de um gerador do botão neobrutalista que a maioria das pessoas vem procurar.
Ajuste o gerador de botões: espessura da borda, deslocamento da sombra, cor de preenchimento e raio do canto.
Passe o mouse sobre a prévia para sentir o efeito de clique e depois copie o CSS.
Role até os quatro exemplos e edite o código para ver o resultado mudar.
Tenha em mente as notas de acessibilidade antes de lançar uma paleta chamativa.
Sombras duras não precisam de valor de desfoque: defina o terceiro comprimento do box-shadow como 0 para um bloco deslocado nítido.
Texto preto sobre amarelo, verde-menta ou rosa saturados costuma ser bem legível; texto branco sobre esses preenchimentos geralmente não. Confira cada par.
Cru não quer dizer descuidado. Mantenha um passo de espaçamento consistente mesmo quando as bordas e a tipografia parecem brutas.
Deixe os contornos de foco visíveis e grossos, o que também combina com o estilo.
Use esse visual em portfólios, zines, eventos e ferramentas voltadas a designers; teste com o seu público antes de usá-lo no site de um banco ou de uma clínica.
Perguntas frequentes
O que é web design brutalista?
É um estilo que mostra o esqueleto de uma página web em vez de poli-lo: fontes padrão, bordas duras, grids ou tabelas visíveis, links sublinhados e poucas imagens. O objetivo é honestidade e velocidade, não beleza.
O que é neobrutalismo?
O neobrutalismo pega emprestados os contornos pesados e o layout direto do brutalismo e os combina com cores chapadas e vivas, tipografia robusta e sombras sólidas deslocadas. Ele é comum em landing pages de produtos e interfaces de apps que querem parecer ousadas e informais.
Como fazer uma sombra neobrutalista em CSS?
Use box-shadow com deslocamento em x e y, desfoque zero e uma cor sólida, por exemplo box-shadow: 6px 6px 0 #000. Combine com border: 3px solid #000. No hover, mova o elemento em direção à sombra e diminua o deslocamento para dar a sensação de clique.
O design brutalista é ruim para a acessibilidade?
Não por natureza. HTML simples, links de verdade e contornos fortes costumam ser muito acessíveis. Os problemas vêm de pares de cores com baixo contraste, texto padrão minúsculo e remoção dos estilos de foco, então confira isso como faria em qualquer site.
Onde o estilo funciona
O brutalismo combina com sites que querem transmitir personalidade ou uma atitude faça-você-mesmo: páginas pessoais, estúdios, publicações, sites de música e de eventos. A simplicidade também deixa as páginas leves, porque há poucas imagens e poucas fontes web para baixar.
Ele se encaixa com mais dificuldade onde os visitantes precisam de segurança, como saúde, finanças ou fluxos de checkout. Nesses casos, um layout mais calmo com um único detalhe brutalista, como uma chamada para ação com borda, pode ser um meio-termo melhor.
Deixando com a sua cara sem copiar
A maioria das páginas brutalistas compartilha um vocabulário, não um template, então raramente é preciso copiar alguém. Escolha um motivo estrutural, como um grid visível, seções numeradas ou um letreiro rolante, e repita-o com consistência.
Escolha uma paleta de preto, branco e no máximo dois tons de destaque chapados. Depois deixe o espaçamento, as bordas e o tamanho da fonte fazerem o resto, em vez de degradês, fotos ou sombras suaves.
Quatro exemplos originais
Página inicial em estilo documento cru
Monoespaçada do sistema, links no azul padrão e uma tabela simples. Todo o visual cabe em poucas regras.
Card de preços neobrutalista
Contorno grosso, preenchimento chapado e sombra dura tanto no card quanto no botão.
Galeria com grid visível
As bordas servem também como linhas do grid, então a estrutura é a decoração.
Formulário de newsletter brutalista
Um campo com rótulo e um botão com contornos pesados e um anel de foco grosso que combina com o estilo.
Gerador de botão neobrutalista
Ajuste a borda, o deslocamento da sombra, o preenchimento e o raio. Os valores iniciais geram este CSS: