Ok, então o que realmente é o neubrutalismo?
Amigos (ou inimigos) da tendência de web design brutalista saberão que é um estilo que ganhou esse nome devido à sua afinidade com o brutalismo na arquitetura, ou seja, rejeita a pompa decorativa e a cerimônia em favor de superfícies ásperas e inacabadas, formas incomuns, materiais sólidos e pequenos recursos contrastantes. O Barbican, de concreto pesado, em Londres, é um exemplo clássico de arquitetura brutalista.
Certamente não será do agrado de todos, mas o web design brutalista pode ser visto como uma rejeição da web mais popular e mais suave e, em vez disso, adotando formas duras, cruas ou desconfortáveis. Para ver mais exemplos de sites brutalistas, confira brutalistwebsites.com.
O neubrutalismo leva as tendências recentes de sites para o próximo nível – ele mantém sua vantagem ao mesmo tempo que combina o estilo incomum com padrões mais modernos de animação, ilustração e texto. Embora neubrutalismo seja um termo não oficial no momento, já está sendo falado no mundo do web design e é o tipo de coisa que pega, então é ótimo estar à frente da curva!
Se você é novo no neubrutalismo, aqui estão algumas características a serem observadas:
- Feio (ish): Quer você ame ou odeie esse estilo, ele adiciona variedade ao ga-analytics#sendElementsClickEvent”>mínimo moderno estilo que é popular há muitos anos. O neubrutalismo favorece imagens que parecem “um pouco estranhas” – seja por meio de cores incomuns ou escolhas de design. Em última análise, ele chama a atenção ao se destacar das tendências modernas de web design que surgiram antes.
- Cores conflitantes: Esta é uma tendência de site que não tem medo de se destacar – as cores costumam ser conflitantes, mas suaves. Certamente não segue a filosofia “menos é mais”.
- Sem gradientes: Esta tem sido uma grande tendência nos últimos anos, mas o neubrutalismo favorece cores planas num estilo quase pop-art.
- Tipografia moderna: Embora o brutalismo muitas vezes opte por uma tipografia estranha, esticada ou complicada, o neubrutalismo tende a seguir regras tipográficas modernas para permitir uma legibilidade mais fácil. Pense que fundos e cores estranhos combinam com texto geométrico e legível. Mais sobre isso em um momento.
- Animações: Apesar do estilo voltar ao passado em sua ingenuidade geral, a adição de animações modernas ajuda a modernizar mais uma vez o visual.
Uma palavra sobre tipografia nebrutalista
Ao percorrer os exemplos de sites neubrutalistas abaixo, você provavelmente notará a tipografia usada nos títulos – quase todos eles usam fontes grotescas e peculiares.
“Uma fonte grotesca sem serifa não tem serifa, que é um pequeno traço extra comumente visto no final de algumas fontes. Em vez disso, tem uma vantagem mais abrupta.”- Daisy Ein
Exemplos do mundo real de neubrutalismo
Continue lendo para mais de 10 exemplos de design neubrutalista que estão chegando à web agora. Qual é seu favorito?
1. Mozilla: o acordo superoficial de tecnologia familiar
A dor de educar as crianças sobre a tecnologia e seu lugar no mundo tecnológico de hoje é real. E cansativo! A Mozilla tem usado o neubrutalismo como forma de conversar com adultos e crianças, abordando temas como mídia social, privacidade online, comunicação online, dados, trolls – e funciona.
2. Estrada de goma
Confira as cores suaves, contrastantes e sem gradiente combinadas com contornos pretos grossos. A tipografia é moderna e fácil de ler, diferenciando-a dos estilos muitas vezes mais desajeitados preferidos no design brutalista. As animações também ajudam a modernizar o design brutalista.
3. Figura
Um dos exemplos mais famosos de web design neubrutalista, Figma (que em breve será Adobe Figma) evita sombras em todas as imagens, optando por linhas pretas mais nítidas e escuras ao redor das formas. Tons conflitantes como laranja e amarelo também são um pouco desafiadores para os olhos, o que os ajuda a se destacar.
4. Agência Goodkids
Assim que você errar no site da Goodkids, é impossível perder as enormes animações 404 que se acumulam de maneira desigual umas sobre as outras para preencher a tela. Os emojis sorridentes têm um tom semelhante ao fundo bege do site, fazendo com que pareçam um pouco chocantes e, portanto, estranhamente atraentes.
5. Readymag
Canalizando tendências de design retrô, você seria perdoado por pensar que o site da Readymag veio direto dos anos 90. Animações sutis ajudam a lembrar ao usuário que esta é, na verdade, uma escolha de design moderno! Os botões de navegação cinza planos chamam a atenção por sua simplicidade.
6. Pizzaria
Confiante em sua simplicidade, Pizza Pizza opta por um vermelho liso contra o preto – parece um pouco difícil para os olhos, mas você não pode deixar de continuar olhando. A falta de imagens na página inicial também vai contra a maioria dos sites ricos em imagens.
7. Guiacirugiacardiaca.com
Imagens planas e suaves em contraste com uma tipografia minimalista e moderna, o Cardiac Surgery Guide é um exemplo clássico de web design neubrutalista. A simplicidade impressionante encontra toques modernos, como o cursor quando você rola sobre as partes do conteúdo e o logotipo que gira quando o usuário rola.
8. Christou 1910 dias
O texto branco em negrito contra blocos coloridos conflitantes é difícil de ler – por isso você presta atenção extra! Animações modernas, como nuvens alegres, preenchem este site divertido, uma ótima justaposição com o esquema de cores plano.
9. Mais
Laranja e lilás? Amarelo limão e azul royal? Combinações ousadas, mas o site da Plus combina todas elas para um visual inegavelmente neubrutalista. Animações ousadas e cursores de novidades quase gamificam este site ousado.
10. Mafanfa
Conforme você rola, animações divertidas entram em ação neste site neubrutalista. Muito se pensou sobre como o usuário interage com o site – quando o mouse passa sobre certos elementos, muitos mudam de cor ou se movem. Até certo ponto, o usuário cria o site que gostaria de ver.
11. Castor e Pólux
Um site com muito texto, o Castor & Pollux é salpicado de cores conforme o usuário rola. Até mesmo os botões de compartilhamento social evitam a iconografia clássica que você esperaria em favor de uma sinalização de texto simples.
Modelos da Web inspirados no Neubrutalismo
1. ga-analytics#sendMarketClickEvent”>Remake – Tema Mínimo
Com mais de 10 skins pré-fabricados para mostrar seu trabalho, Remake é um tema versátil de web design. O tema Kyona, por exemplo, usa uma pitada de cores brilhantes contra tons mais suaves. Os modelos também vêm com páginas de projetos únicos e estudos de caso – perfeitos para exibir seu trabalho com estilo.
ga-analytics#sendMarketClickEvent”>Refazer demonstração do WordPress
2. ga-analytics#sendMarketClickEvent”>Trito – Modelo Figma de Site de Portfólio Pessoal
Cores planas combinam com imagens modernas e ilustrações contemporâneas neste modelo de web design neubrutalista. Um modelo de portfólio pessoal de uma página, foi projetado especialmente para desenvolvedores ou designers mostrarem suas habilidades. Ele vem com modo claro e escuro, para que você possa editar seu modelo de acordo com seu gosto. Lançado em maio de 2022, está claro que o Trito foi projetado com as últimas tendências de web design em mente.
3. ga-analytics#sendMarketClickEvent”>Orido – Modelo Figma de Site de Portfólio Pessoal
Também lançado em maio deste ano, Orido vem com modo claro e escuro, além de fontes e ícones gratuitos. O vibrante esquema de cores amarelo e roxo e as opções de fontes legíveis são uma referência às últimas tendências de web design.
4. ga-analytics#sendMarketClickEvent”>Khulna – modelo HTML mínimo colorido de agência digital
Um modelo de web design simples e fácil de seguir, confira as cores escolhidas na seção portfólio. Este modelo vem com recursos que incluem a revolução do Slider para conteúdo heróico de forma rápida e fácil, bem como um design de layout responsivo. As páginas do blog também são bem projetadas.
É com você!
Agora que você aprendeu tudo sobre a tendência de sites de neubrutalismo e explorou alguns dos meus principais temas e modelos da web, é hora de ser criativo! Escolha um tema desta postagem que funcione para você ou vá para ga-analytics#sendMarketClickEvent”>Tema Floresta e encontre ou crie o seu próprio. Quais tendências de sites são suas favoritas no momento?
