Design brutalista

O brutalismo é um estilo arquitetônico que surgiu em meados da década de 1920, embora sua ascensão tenha ocorrido um pouco mais tarde, nas décadas de 1950 e 1960. Caracterizou-se por ser um estilo simples e sincero. No brutalismo, a forma segue a função .

Edifícios brutalistas são geralmente construídos com elementos modulares repetitivos formando massas que representam zonas funcionais específicas, distintamente articuladas e agrupadas em um todo unificado. O concreto é usado por sua honestidade crua e despretensiosa, contrastando dramaticamente com os edifícios altamente refinados e ornamentados construídos no estilo Beaux-Arts de elite.

Legal certo? Mas você deve estar se perguntando por que estamos falando de arquitetura se este blog é sobre tecnologia e WordPress. Bem, a razão é simples: o brutalismo é uma tendência de design que também podemos aplicar no mundo da web…

A Origem da Web e sua Evolução Gráfica

Para nossos leitores mais jovens, a web parece algo que sempre existiu, mas nada mais distante da realidade. A primeira página web da história foi publicada “recentemente”, em 1991 ? e, como você pode ver, foi muito simples:

As primeiras páginas da web eram simplesmente textos com hiperlinks. Mas à medida que a tecnologia avançava, o número de recursos que podiam ser adicionados aumentava e as possibilidades de inovação se expandiam rapidamente.

Naqueles primórdios da Internet, ninguém sabia exatamente o que era um “bom design” (apesar de toda a bagagem que tínhamos do mundo da impressão), e os primeiros webmasters fizeram “o que podiam” para criar layouts de página eficazes para mostrar o contente. Lembra dos designs do início dos anos 90, todos baseados em tabelas?

Claro, esses designs mais ou menos “funcionaram” em um nível visual, mas foram um desastre absoluto internamente. A estrutura HTML focava apenas na aparência final da página e ignorava completamente o conteúdo em si, então o resultado não era acessível. Mas estávamos todos aprendendo a “construir a web…”

Paletas de cores, ícones planos ou realistas, animações… todos os detalhes mais sutis que, quando combinados, se tornam uma “tendência de design” vêm e vão. Mas há uma tendência que parece uma constante hoje: simplicidade, que Ruth discutiu alguns dias atrás quando olhou para a Apple e seus princípios de design.

Mas a realidade é mais complexa do que tudo isso. Nem todos os sites seguem as mesmas tendências. Há pessoas que se afastam das tendências globais e exploram outros caminhos. Eles quebram o molde. Talvez até criem a próxima tendência…

Brutalismo na web

O termo brutalismo vem do francês “Beton brut”, ou “concreto bruto”. Então, se estamos falando de brutalismo na web, fica claro que não estamos falando de “concreto”, mas de “crueza”. A arquitetura brutalista quer ser fiel aos materiais que usa como blocos de construção, e é isso que nós, como desenvolvedores da web, também devemos buscar. Pelo menos, se quisermos criar sites brutalistas.

Isso levanta a questão: quais são os “materiais” que usamos para construir uma web? Você pode pensar que são HTML e CSS, mas observe que HTML e CSS são para a web o que uma betoneira ou um guindaste são para a construção: são as ferramentas que usamos para “construir” nosso projeto. Portanto, a “matéria-prima” com a qual trabalhamos na web é o conteúdo . E isso não deve surpreendê-lo, porque falamos muito sobre isso neste site toda vez que mencionamos que o conteúdo é rei.

O brutalismo é fiel aos seus materiais, então, como desenvolvedores e designers da web, também temos que ser honestos com nosso trabalho e saber o que é um site e o que não é. Webs não são revistas. Não são aplicativos. Não são outdoors. Então, por que eles deveriam se assemelhar a qualquer um desses?

Princípios de Design Brutalistas na Web

Aqui você tem alguns princípios básicos que você deve ter em mente ao projetar um site brutalista:

1 – O conteúdo deve funcionar em qualquer lugar

Se você criar uma página web sem nenhum estilo CSS e se esforçar para estruturá-la corretamente usando apenas tags HTML, você sabe que este site funcionará perfeitamente em todos os navegadores do mundo. Não será o site mais bonito, mas funcionará. Ele funcionará até mesmo em navegadores sem tela (sim, estou falando de acessibilidade). E, se o conteúdo é rei, isso é incrível !

O Conteúdo tem que funcionar e fazer sentido em um mundo sem CSS. Estilizar uma página da web definitivamente pode ajudá-lo a ter sua própria marca, mas também pode quebrá-la e afastá-lo dos princípios brutalistas.

2 – As interações do usuário com a Web são limitadas e bem definidas pelo HTML

Com CSS e JavaScript, podemos criar sites que parecem aplicativos nativos, com interações que antes pareciam impossíveis, animações incríveis e transições de tirar o fôlego. Mas tudo isso não tem absolutamente nada a ver com o conteúdo... Então, como projetamos interfaces úteis em um site brutalista?

Por padrão, os usuários só podem interagir com seu site por meio de botões, links e formulários. E apenas links e botões podem ser “clicados”. É por isso que é importante mostrá-los crus:

Desde o início da web, os hiperlinks seguiram um padrão claro. Eles são como texto normal, mas sua cor é azul e seu estilo é sublinhado. Quando o hiperlink é visitado, sua cor muda para roxo para que o visitante saiba que já o visitou. Devemos realmente nos afastar dessa pureza?

Os botões , por outro lado, representam um elemento que existe na vida real: um botão. Um botão é algo que podemos apertar tanto na vida real quanto na web e, portanto, esperamos que eles se comportem da mesma forma. Certifique-se de que seus botões se parecem com botões e sua aparência muda quando interagimos com eles. Além disso, use-os quando precisar usá-los: ao lado de um formulário, por exemplo, eles prometem ao usuário que as informações que ele digitou serão enviadas ao servidor e depois serão levados para outra página com uma resposta.

3 – Sites existem em navegadores da Web, então deixe seus usuários “navegarem” em seu site

Você sabia que os navegadores têm botões para voltar e avançar? Eu sei que sim, porque estamos todos acostumados com esse padrão…. e ainda, alguns sites estão quebrando esse padrão hoje! Aplicativos de página única (SPA) usam JS para carregar conteúdo dinamicamente, e alguns deles fazem isso ignorando que há uma opção no navegador para voltar a um estágio anterior. Um design brutalista permanece fiel à web e nunca quebra os padrões e as regras que um usuário está acostumado.

4 – Os usuários podem rolar o conteúdo verticalmente

Um site não é uma revista ou livro, portanto não há necessidade (em princípio) de paginar o conteúdo. A única razão pela qual muitos sites fazem isso é aumentar artificialmente as visitas, já que, para ler um artigo, o leitor é obrigado a visitar várias páginas. Não faça isso!

Em um site brutalista, o conteúdo é apresentado de uma só vez e o leitor pode consumi-lo em seu próprio ritmo, rolando conforme lhe convier. Não há necessidade de incomodar o usuário com interações desnecessárias para visualizar e usar o que realmente importa: o conteúdo.

O que você acha?

Gosto de princípios brutalistas. Se você não é um designer, aplicar esses princípios é bem fácil: apenas deixe as coisas como estão por padrão (ou ajuste-as um pouco). Mas o que você acha? Você gosta disso? Você acha feio e desatualizado? Deixe-nos saber na seção de comentários abaixo!

Imagem em destaque por berenice melis no Unsplash.