Ah, eu me lembro bem dos dias ... quando tudo era um gradiente brilhante, com pelo menos 6 pedaços de clip art, e uma foto de estoque de 5 trabalhadores de escritório comemorativos. Nós amamos fotos de teclados com botões sem sentido, e pessoas de palitos de efeito 3D segurando símbolos brilhantes.

E depois o que aconteceu? iOS 7 veio junto. A ferramenta de gradiente em nossas Photoshops começou a acumular poeira e excluímos nossa enorme biblioteca de fotos.

Design plano assumiu em 2013 . Tudo precisava ser brilhante, caricatural e, claro, plano. Da mesma forma que o design plano foi uma reação ao skeuomorphism, estamos começando a ver as coisas de outra maneira.

Então, qual é o novo sabor do ano? Fico feliz por você ter perguntado: Sites parecidos com a página de downloads de uma empresa de software de código aberto que foi encerrada no final dos anos 90.

Isto foi documentado por Sites brutalistas , que pegou tração e marcou cobertura em Washington Post e Co rápido para citar um casal. Mas, certamente, estes são apenas sites de agências de design pretensioso e artistas experimentais? No showcase Brutalist Websites, isso é verdade, mas estamos começando a ver esse estético vazamento para o mainstream. Agradável! Não podemos olhar para o design plano e elegante para o resto dos nossos dias, podemos?

Pessoalmente, amo essa tendência. Eu não sou o web designer mais afiado por aí, e nem quero usar uma estrutura banal - o que eu posso fazer é o melhor que posso fazer.

Eu costumava passar o tempo vasculhando a internet em busca de um desatualizado web design, deliciando-me com desajeitados Times New Roman e conjuntos de quadros desajeitados. Provavelmente porque me lembrou de um tempo mais simples, onde as pessoas se chamavam de webmasters e tudo estava permanentemente "Em construção".

Mas, buscando aprender web design a partir do zero em vez de adotar um tema WP ou framework CSS, eu sempre tive vergonha de criar o site simples e feio dos meus sonhos. "Qual seria o objetivo?", Pensei. Mostrar isso me faria parecer ridícula. Eu não posso usá-lo como um portfólio para qualquer coisa sem parecer uma bagunça.

Vendo sites CSS-light sem JavaScript em vista me deu a confiança que eu preciso para parar de trabalhar em sites de outras pessoas e fazer o meu próprio, em seu lugar.

Olhando para a seleção de novos sites minimalistas, notei vários temas-chave que parecem estar criando suas cabeças lindamente feias.

Monocromático

O design monocromático faz exatamente o que o bom design deve fazer: chama a atenção para o conteúdo.

001

Sem CSS extravagante

Lembra dos velhos tempos? Quando todos possuíam um site e tinham algo a provar? O não (ou pequeno) método CSS traz de volta aqueles dias, e, pessoalmente, me deixa extremamente nostálgico em tempos mais simples, onde um site poderia ser apenas uma pequena biografia e uma coleção de links.

002

Texto inclinado / sobreposto

Texto inclinado expulsa o usuário um pouco, e não de uma maneira surpreendente . Em vez disso, é algo que o usuário não está acostumado a ver, causando uma forte impressão.

Confira o texto experimental que o Loïc usa o site dele . O total desrespeito pela legibilidade dá aos visitantes a sensação de uma loja de alta moda que não possui etiquetas de preços. É tão pouco informativo (e, neste caso, distante) que é elegante.

004

Pouco respeito pela escala ou preenchimento

Bloomberg's ficando muito experimental hoje em dia, e eu amo isso. Imagine as provações e tribulações que o projetista teve que passar para obter aprovação com o grande chefe.

A razão disso é que é tão diferente. Não se preocupa muito com as regras de projeto: deixar espaço suficiente entre os elementos, manter as coisas em escala semelhante e até mesmo garantir que tudo seja adequadamente legível em todos os dispositivos.

005

Referências à tecnologia legada

Muitos de nós terão boas lembranças do Windows 98 ou dos primeiros sistemas operacionais Mac. Alguns sites incutem uma sensação de nostalgia - e talvez de humor - ao fazer referências a softwares antigos. Afinal, um monte de web design brutalista vem dos "velhos tempos".

Confira este exemplo de Post HTML (essas pastas contêm arte experimental).

006

O que isso significa para designers

Nós pensamos que flat = simplicidade, mas, obviamente, ainda precisava de uma tonelada de trabalho de design para acertar.

Com a estética brutalista se destacando, os designers precisarão confiar menos nos frameworks CSS tradicionais e nos sites de código do zero.

No entanto, não parece que as empresas estejam empregando essa tendência em seus sites. O design brutalista - além da Bloomberg e de alguns outros nomes maiores - está, agora, confinado a agências de design, sites experimentais e blogs pessoais.

Se você quiser criar seu próprio site brutalista, aqui estão algumas dicas ...

Retire o CSS do seu site atual

Embora alguns sites dependam muito de CSS para posicionamento horizontal, é possível copiar todos os estilos de alguns sites e ainda exibi-los "corretamente". Aqui está um exemplo:

Se o seu site contar com animações chamativas, JavaScript ou CSS sofisticado, provavelmente será necessário refazer o processo se você quiser adotar esse estilo. Na verdade, a razão pela qual descartei o WordPress foi porque não consegui encontrar um tema que se encaixasse na minha visão. No final, acabei aprendendo HTML / CSS editando um modelo antigo do início dos anos 2000. Depois disso, eu me senti confiante em ir em frente e começar de novo, rabiscar meu próprio CSS bagunçado e fazer a coisa mais distante de um site polido e 'moderno'.

Cortar de volta para monocromático

Às vezes, design brutalista significa design simples. E isso é sempre ótimo para a experiência do usuário. Reduzir a sua paleta de cores atual para apenas 2 cores (preto e outro - branco, tecnicamente), pode ajudar a reduzir a sobrecarga do usuário e dar a ele uma direção mais clara para onde ir. Afinal, você não vê sites com muitas cores diferentes na área de texto, porque é difícil se concentrar.

Seja criativo com o posicionamento de texto

Quem disse que você tem que ter tudo alinhado bem? O site de Loïc Dupasquier acima, por exemplo, é uma declaração ousada que diz algo sobre o designer. Parecer exatamente o mesmo que qualquer outro contratado potencial não é uma boa olhada.

A menos que você seja o designer mais famoso nesse campo, você sempre será o segundo melhor. Ao evitar as "regras" tradicionais sobre tipografia, você está se destacando da multidão.

Reaprenda os conceitos básicos e antigos

Para mim, não foi uma questão de adaptar um design ou conjunto de habilidades a uma nova mentalidade. Aprendi o básico sobre o design da web quando os sites realmente se pareciam com os que eu mostrei para você, então tudo o que precisei fazer foi dar uma rápida atualização e começar a trabalhar.

Eu recomendaria verificar o código-fonte em sites antigos e aqueles exibidos em sites brutalistas, tutoriais antigos em HTML ou esta mina de ouro que apresenta uma lista dos sites mais antigos que ainda estão vivos.

Onde esse estilo funciona bem (e onde não funciona)

No final, um site é sempre um equilíbrio entre a autoexpressão e a criação da melhor experiência para seus usuários.

Em um blog, é provavelmente melhor se concentrar em tornar o corpo do texto fácil de digerir. Você notará que enquanto o artigo de Bloomberg no Yahoo começa muito estranho, o corpo principal do texto é fácil de ler.

Então, quando você está construindo um blog, é melhor seguir as convenções para o corpo do artigo. Por exemplo, WIRED O design é bastante distinto, mas quando se trata dos artigos em si, eles usam uma fonte agradável e a mantêm legível.

Para um designer que trabalha principalmente com corporações abafadas, um portfólio experimental pode colocar o cliente no momento mais importante - primeiro contato.

No final, tudo se resume a conhecer o seu público e se você pode ignorar totalmente as convenções.

Vá em frente e faça algo repugnantemente brilhante.