Web Design Brutalista, Web Design Minimalista e o Futuro da Web UX

Publicados: 2022-03-11

Os sites estão se tornando mais caóticos, confusos e não refinados? As regras do bom design estão sendo quebradas? A web está ficando feia? Essa é uma nova tendência?

Se você é como a maioria dos designers e presta muita atenção ao que está acontecendo, já ouviu a palavra brutalismo sendo usada há algum tempo. Sites brutalistas estão se afastando das interfaces amigáveis que há muito são a melhor prática do setor e, em vez disso, se concentram em sites HTML imperfeitos e codificados à mão. Parece que os designers estão eliminando as regras do UX como as conhecemos, deixando tudo um pouco caótico.

Os princípios do design elegante e contemporâneo são tão comuns que dificilmente pensamos neles como uma escolha estilística. “Bom” web design geralmente significa aquele que obedece às regras do minimalismo. Interfaces limpas, simples e organizadas, mas nem sempre foi assim. Vamos voltar o relógio algumas décadas.

O nascimento da web

O design da Web percorreu um longo caminho desde 1991, quando o primeiro site foi publicado. A revolução da internet começou com seus primeiros sites sendo exclusivamente baseados em texto usando a primeira geração de HTML.

Primeiro site da World Wide Web em 1991 — O primeiro “design” de site que foi ao ar em 6 de agosto de 1991.

Então veio o Flash com todos aqueles sites animados malucos que todo mundo certamente se lembra. O desenvolvimento de CSS (Cascading Style Sheets) veio junto, fornecendo aos web designers ainda mais controle sobre melhorias como cor de fundo, tamanho do texto e estilos de texto no código. JavaScript nos deu menus suspensos, navegação avançada e formulários da web com verificação de erros.

No início, ninguém sabia o que “web design” realmente significava, e os pioneiros da web estabeleceram padrões de design por tentativa e erro. A era inicial do web design usava layouts que davam pouca atenção à semântica formal e acessibilidade, optando pela estética sobre a estrutura.

Site do Google de 1998 — Site do Google, 1998.

Para construir e estruturar seus projetos, os designers confiaram muito em elementos HTML, como tabelas, tabelas aninhadas e arquivos espaçadores invisíveis de 1 pixel, fornecendo a capacidade de criar layouts de várias colunas mais complicados. Isso criou algumas interfaces bem monótonas.

site CNN.com de 2000 — Site da CNN, 2000.

Site da Enron de 2004 — Site da Enron, 2004.

Em meados dos anos 2000, os sites nasceram com um pensamento mais cuidadoso por trás de sua estrutura. A navegação estava na parte superior do seu navegador e as categorias foram colocadas na barra esquerda. As páginas da Web foram mantidas curtas e estreitas, com conteúdo espalhado por muitas páginas para não forçar os usuários a rolar. Os designers aprenderam o que funcionava e começaram a construir sites melhores, estabelecendo padrões e melhores práticas ao longo do caminho.

Com mais e mais opções de layout veio uma mistura de UIs barulhentas repletas de imagens e texto em todos os lugares. Alguns designers disciplinados, no entanto, ainda optaram pelo minimalismo.

A estética minimalista

As tendências de design vêm e vão; no entanto, o minimalismo é uma linguagem de design que esteve presente ao longo do tempo. É uma filosofia de design que se concentra na simplificação da forma, alcançada através do uso dos elementos mais simples e essenciais de um design.

O minimalismo não é exclusivo do web design. Pense em todos os elementos ao seu redor que englobam esse ideal de design; é fácil conectar designs minimalistas com Nest, Apple, Herman Miller e muitos outros que inspiraram muitos designers minimalistas.

Dispositivos domésticos Nest com design minimalista — A Nest ostenta um design de produto simples e discreto.

Herman Miller Eames Rosewood 670/671 Lounge Chair e design minimalista otomano — A espreguiçadeira Eames clássica e insubstituível para escritório.

MacBook Pro do design minimalista da Apple — Um estilo elegante e minimalista é o cartão de visitas da Apple.

O que torna o design da Herman Miller ainda ótimo hoje? São simplesmente objetos bem desenhados com um visual atemporal. Seus projetos se encaixam muito bem em casas e interiores contemporâneos - eles ainda parecem frescos e modernos hoje. Muitas de suas peças são projetadas com um visual minimalista e não podem ser vinculadas a uma moda específica. Eles ainda resistem ao teste do tempo.

Os designs minimalistas de um dos designers gráficos mais renomados de sua época, Josef Muller-Brockmann, são muito semelhantes aos de Herman Miller: atemporais . Muller-Brockmann abraçou e dominou o minimalismo durante as décadas de 1940 e 1950 na forma do estilo suíço de design.

Qualquer decoração estranha ou supérflua foi retirada de seu design gráfico; cada elemento em seus layouts tinha um propósito. O pensamento de design por trás dessa abordagem é o que faz com que os designs digitais minimalistas funcionem muito bem hoje.

Pôsteres de Josef Muller Brockmann — Tipografia limpa e moderna e design de pôsteres de Josef Muller Brockmann.

Como o minimalismo se estabeleceu na era digital

A história sempre encontra uma maneira de nos alcançar. Assim como no design de impressão, o minimalismo e a filosofia por trás dele alcançaram o design da web e outros artefatos digitais. Pense em como os sites pareciam apenas alguns anos atrás com seus botões brilhantes, linhas e parágrafos de texto, tudo gritando por atenção.

Então veio a tendência skeuomórfica onde os designers projetaram elementos que imitavam objetos da vida real no espaço digital. Lembre-se do estofamento de couro no iCal da Apple?

Os designs mínimos são realmente intencionais. É uma abordagem de design que elimina tudo o que é desnecessário e se concentra em elementos que deveriam atrair o máximo de atenção – enfatizando o conteúdo.

Tela inicial de design web minimalista — Concentrando-se na força central de uma agência digital usando três palavras simples. (Comboio)

Site da tela inicial da Chylak — Este design minimalista de comércio eletrônico enfatiza a roupa, removendo todas as distrações desnecessárias. (Chylak Vestuário)

Design minimalista do aplicativo iOS — Sem confusão extra, os usuários são feitos para se concentrar nos principais elementos da interface do usuário com o design de aplicativo minimalista da Invstr.

Os benefícios do design minimalista

A abordagem de design minimalista pegou por muitas outras razões do que simplesmente sua aparência. Nossa maior compreensão dos comportamentos do usuário, processos de design thinking e o surgimento de processos de design que priorizam o conteúdo ajudaram a levar esse pensamento adiante. O recente crescimento maciço de usuários móveis tem sido um forte ponto de aceleração em direção ao minimalismo, com maior foco em UX e usabilidade.

Com os usuários agora acessando a internet em qualquer lugar, os designers de produtos devem se concentrar em fornecer o que é absolutamente essencial no contexto do momento: as coisas certas da maneira certa e na hora certa, onde o design é reduzido para suas características mais fundamentais.

O uso de dispositivos móveis agora representa mais da metade de todas as visitas à web, e essa taxa só aumentará. O design responsivo mudou o jogo e forçou os designers a “pensar diferente”. Hoje, mais do que nunca, o design responsivo ou adaptável é uma necessidade no mundo móvel, onde uma abordagem de design minimalista é de importância crucial.

Para o usuário médio, o minimalismo provavelmente parece ser a coisa mais fácil de projetar. Alcançar o equilíbrio perfeito usando a menor quantidade de conteúdo visual e focando apenas nos elementos fundamentais com a máxima elegância é realmente muito, muito difícil.

O futuro do minimalismo

Devemos pensar no minimalismo como um conceito atemporal, irradiando elegância e sofisticação, ao invés de uma tendência real ou uma simples fase passageira. Apesar de intemporal e clássico, irá evoluir e melhorar, como já vimos desde a sua implementação no início do século XX.

Por exemplo, o Material Design do Google foi uma das primeiras grandes evoluções na abordagem de design “plano” inspirada no minimalismo. Os designers do Google mantiveram as coisas simples e minimalistas, mas aprimoraram sua linguagem de design com o uso de efeitos de sombra e os conceitos de movimento e profundidade. O material abraça o design plano com um toque específico: imitando os materiais do mundo real.

Site de diretrizes de design de materiais do Google — Site de diretrizes do Google Material Design.

A desvantagem do minimalismo

Tal como acontece com outros elementos da vida, sempre temos que olhar os prós e os contras. Muitos argumentam que os sites de hoje não têm sabor e são quase todos iguais. Você sabe - uma grande imagem de herói ou vídeo com sobreposição de texto, uma linha de ícones com texto e assim por diante. Qualquer um pode tirar alguns minutos do seu tempo e criar 10 sites que parecem muito semelhantes entre si. Isso é o reflexo de nosso comportamento e preferências on-line em constante mudança?

A consistência do design e o design para o comportamento comum do usuário são extremamente importantes em cada design, mas não podemos esquecer o valor de ser único. Nos tornamos preguiçosos ou mudamos nossos pensamentos da singularidade para uma estratégia de experiência do usuário mais eficaz?

Landing pages com design minimalista — Bem executado, mas sem originalidade. Grande imagem de herói do produto, algum texto e miniaturas com texto.

Brutalismo no Web Design

Em sua robustez e falta de preocupação em parecer confortável ou fácil, o brutalismo pode ser visto como uma reação de uma geração mais jovem à leveza, otimismo e frivolidade do web design minimalista onipresente de hoje.

Alguns adoram, alguns odeiam e muitos outros simplesmente não entendem: sites brutalistas.

Tome Craigslist como um exemplo. Craigslist tem que ser considerado o “avô” dos sites brutalistas. Não é esteticamente agradável e nunca seria apresentado em www.awwwards.com. Texto preto, links azuis, fundo branco. Não é bonito. Não precisa ser porque funciona – e funciona muito bem. Você encontra o que precisa para comprar ou vender sem qualquer confusão ou confusão, e sem peças móveis estranhas.

Web design de estilo brutalista do site Craigslist — Craigslist é uma massa de links azuis. Uma interface de usuário básica e funcional.

Desde sua fundação em 1996, o Craigslist manteve sua popularidade apesar – ou talvez por causa – de seu design extremamente utilitário. O design não mudou de forma significativa nos últimos 20 anos.

Talvez inspirado no exemplo do Craigslist, o estilo brutalista está voltando. A seguir estão ótimos exemplos de projetos bem executados usando o estilo brutalista.

Adquira o site do tipo brutalista da Design School — A Purchase Design School apresenta uma galeria de trabalhos como uma pilha desordenada de cartões em um fundo gradiente e granulado.

Exemplo de um design de site brutalista — Konsept83 se inspirou nos primeiros dias da internet.

Exemplo de design de site brutalista — Creative Show-off Utrecht usa cores fortes com um estilo de design brutalista.

Exemplo de site de design de site brutalista — Layout de design não convencional e brutalista no site do Slugz.

Esses sites brutalistas estão se popularizando em grande estilo. Por que esses sites de repente são tão populares? É porque alguns designers se cansaram da homogeneização da web?

Nos dias em que o design de UX é de importância primordial, onde o comportamento do usuário e uma abordagem de conteúdo em primeiro lugar são reis, o UX nesses sites é ruim (intencionalmente). Ao contrário dos princípios do minimalismo, esses designs são in-your-face com colagens de texto e imagens onde o layout está em todo o lugar (novamente, intencionalmente).

Uma Breve História do Brutalismo

O estilo de design brutalista não é novo. Uma rápida pesquisa na Wikipedia lhe dirá que o estilo realmente vem da arquitetura brutalista da década de 1950 até meados da década de 1970. Engraçado que o brutalismo foi seguido pelo movimento arquitetônico modernista, onde o minimalismo era a chave.

Le Corbusier foi um dos maiores pioneiros desse movimento. Sua carreira durou cinco décadas com edifícios projetados na Europa, Japão, Índia e América do Norte e do Sul.

O termo se origina da palavra francesa “ brut ” para “cru”, como Le Corbusier descreveu sua escolha de material “ beton brut ”, concreto bruto. O design hiperfuncionalista parecia projetado apenas para fornecer utilidade - não para agradar - como se estivesse dando o dedo ao modernismo.

O brutalismo tenta enfrentar uma sociedade de produção em massa e arrancar uma poesia áspera das forças confusas e poderosas que estão em ação. Até agora o brutalismo foi discutido estilisticamente, enquanto sua essência é ética. – Alison & Peter Smithson, The New Brutalism, Architectural Design (abril de 1957)

Desenhos brutalistas rejeitam redondamente a aparência, optando pela função sobre a forma. Os designers brutalistas se orgulham de executar projetos com o mínimo esforço e os materiais mais baratos disponíveis, para alcançar um resultado mais honesto e anti-burguês.

Habitat 67 complexo habitacional em Montreal construído em estilo brutalista — Em 27 de abril de 1967, o complexo habitacional urbano de Safdie, apelidado de Habitat 67, foi apresentado na Expo 67, a feira mundial que acontece em Montreal.

Brutalismo na era digital

A Bloomberg adotou o estilo à sua maneira para seu site de notícias. O design é quase berrante e claramente se concentra na funcionalidade bruta.

site brutalista Bloomberg — A página inicial da Bloomberg.

O brutalismo está fazendo um retorno sólido. Feios, crus, libertando-se do design convencional, efeitos de hover malucos e ornamentos superficiais estão por toda parte. Muitos puristas consideram essa tendência dura, áspera, áspera, desconfortável, confrontadora e cínica. Isto é. De propósito.

The Outline - design de site brutalista — The Outline, uma revista online, opta por um estilo brutalista brilhante e espalhafatoso que desmente seu estilo editorial ousado.

O brutalismo tem uma abordagem mais primitiva de design e coloca o foco de volta no cerne do design da web: seu código. O brutalismo é frequentemente descrito como uma tendência de design “feia”, mas temos que olhar além disso. A filosofia por trás do movimento brutalista não é tornar as coisas “feias”, mas cruas e sem adornos.

Poderíamos dizer que os sites brutalistas de hoje são baseados na web DIY dos anos 90, focando em uma abordagem de dentro para fora em vez de esconder a funcionalidade por trás de uma bela fachada.

O design da interface do usuário para o popular site de compartilhamento social Reddit é assumidamente cru e quadrado, repleto de tipografia da web do final dos anos 90, controles pesados não refinados e quase sem espaço para respirar verticalmente.

O designer Pierre Buttin levou o brutalismo a um novo extremo com uma série de aplicativos móveis redesenhados. Em seu projeto mais recente, intitulado Redesenhos Brutalistas, Buttin renderiza o Facebook, Instagram, Twitter e outros aplicativos populares em um estilo brutalista, com layouts pesados de texto e designs achatados.

Exemplo de design de aplicativo de estilo brutalista do Facebook — Aplicativo móvel do Facebook redesenhado em <a href=”https://www.theverge.com/2017/5/31/15717534/brutalist-web-design-app-facebook-google-pierre-buttin

Exemplo de design de aplicativo de estilo brutalista do Twitter — O estilo de design limpo e leve do Twitter, uma reforma brutalista.

Brutalismo x Minimalismo

Brutalismo e minimalismo não devem ser vistos de forma comparativa, mas como uma nova maneira de ver as coisas e outra abordagem ao design. O brutalismo é um empurrão contra a homogeneização dos sites e aplicativos de hoje, mas antes que os designers possam começar a projetar um site usando a abordagem brutalista, eles primeiro devem saber quais regras vão quebrar.

O design convencional e minimalista não será substituído pelo brutalismo. Devemos olhar para o brutalismo como uma cultura de design que desafia o status quo – uma cultura que está cansada de ouvir o que é “melhor”.

Não há certo ou errado ao escolher entre esses estilos para o seu próximo projeto. No entanto, antes de esgotar e projetar seu próximo site ou aplicativo em um estilo de design brutalista, certifique-se de conhecer seu público. Assuma o risco se achar que a empresa e seu público vão gostar.

O web design brutalista atrai a atenção e o reconhecimento da marca está crescendo tremendamente rápido. Regras são feitas para serem quebradas. Atreva-se a deixar a web ser a web. Atreva-se a se destacar e ser um pouco ousado, mesmo que um pouco estranho.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •