11 tendências de design de sites que você precisa conhecer

O site da sua empresa é a base para tudo o que você faz online. Todo o seu trabalho de mídia social, seu marketing por e-mail, sua postagem de convidado – tudo deve voltar para o seu site.

Como seu site é tão importante para o sucesso do marketing, faz sentido acompanhar as tendências que o afetam. Falamos muito sobre tendências e práticas recomendadas de otimização de mecanismos de pesquisa. Certamente são importantes, mas a aparência do seu site para os visitantes também é importante. A facilidade de navegação e uso do seu site é ainda mais importante.

As práticas recomendadas de design de sites mudam de tempos em tempos, e a maneira como as pessoas esperam que seu site pareça e se comporte também muda. Mesmo que você não esteja planejando uma reformulação agora, é bom conhecer as tendências atuais. Dessa forma, você será capaz de dizer quando seu site passou de “bom o suficiente” para realmente precisar de uma reformulação.

Essas 11 tendências variam de abordagens de design amplas a recursos de design menores. Muitos deles se sobrepõem ou se complementam. Você não precisa – e talvez nem deva – implementá-los todos, mas é bom reconhecê-los quando os vir.

1. Celular

Esta é uma tendência de design tão grande que afeta todas as outras tendências que mencionarei aqui. A pesquisa móvel já ultrapassou a pesquisa de desktop. Isso tem grandes implicações não apenas para o design, mas também para o conteúdo e até mesmo para os tipos de software que definem o design e o conteúdo.

2. Minimalismo

Há muitas razões pelas quais isso é mais do que apenas uma moda passageira de design. Primeiro, seus visitantes estão sobrecarregados e distraídos. Reduzir suas opções com um design super clean concentra sua atenção. E isso os torna mais propensos a agir.

O minimalismo também funciona bem com o celular. Isso ajuda a interface a caber em uma tela pequena mais facilmente. Ele também deve tornar o download do seu site mais rápido.

O Nielsen Norman Group fez uma pesquisa incrível de 112 sites minimalistas recentemente. Eles descobriram que as características definidoras são:

• design plano
• esquemas de cores limitados
• poucos elementos de interface do usuário
• uso de espaço negativo
• tipografia dramática
• layouts de grade

Este site abaixo implementa muitos desses elementos minimalistas. Observe também a seta no lado esquerdo – é um elemento de design que aparece em muitos sites recém-projetados.

3. Design responsivo e conteúdo adaptável

Acho que todos pelo menos já ouvimos falar de design responsivo. Se você não tem certeza do que é, o design responsivo é como codificar e fazer o layout de uma página da Web para que ela fique bem em todos os dispositivos. Se o seu site ainda não está usando um design responsivo, deveria estar.

Mas também existe algo chamado conteúdo adaptativo. Isso basicamente faz com que textos, imagens e outros ativos de conteúdo se ajustem a diferentes dispositivos. Isso geralmente significa comprimento do texto e tamanho da imagem, mas também existem outras opções.

Todos nós já conversamos e escrevemos muito sobre design responsivo, mas acho que estamos apenas começando a criar conteúdo adaptativo. Uma das maiores ideias no web design atual é não mais criar um design primeiro e depois fazer com que o conteúdo se encaixe nele. Em vez disso, você pega o conteúdo que possui e cria um design que o complementa.

4. Design plano

Quase todos vocês devem saber o que é flat design. Se não, é hora de aprender. Aqui está um exemplo:

Observe como as imagens, ícones e elementos de navegação não tentam parecer tridimensionais? E como não há sombras projetadas e muito poucas gradações de cores ou cinzas? Essas são todas as características do design plano.

Mas isso não significa que você não pode ter uma fotografia. Aqui está outro exemplo de um site considerado de design plano.

5. Projeto de grade

Essa tendência foi gerada principalmente pelo Pinterest, embora uma abordagem de grade para design em qualquer meio exista há décadas. Às vezes chamado de “Pinteresty” ou “cartões”, a abordagem de design de grade pode ser uma maneira elegante de oferecer uma variedade de opções. É bom para páginas de listagem de produtos, e-books e páginas de listagem de white paper e, muitas vezes, até mesmo como um design de página inicial.

Veja como estamos pensando em usar o design de grade na página inicial do blog Act-On:

6. Imagens e vídeos de fundo

Tenho certeza que você já viu isso. Eles estão por toda parte… eles são uma das tendências de design que alguns designers dizem que todos os sites estão começando a ficar parecidos. Mas eles podem ser tão onipresentes por um motivo: eles fazem as pessoas olharem por mais tempo do que poderiam.

Se o vídeo se mover da maneira certa ou a imagem for cortada da maneira certa, pode chamar a atenção para uma determinada área da página. Como uma caixa de opt-in. Veja a página inicial da PeopleHr como um exemplo de fundo de vídeo que direciona sua visualização para o formulário de inscrição.

Então, é melhor usar uma imagem ou um vídeo, ou uma imagem grande e um monte de imagens menores? Na verdade, não parece importar muito, pelo menos de acordo com um teste que a Huge Inc fez. Eles viram taxas de rolagem suprimidas apenas quando uma imagem animada foi usada:

Uma coisa a observar sobre os visuais de plano de fundo … geralmente eles usam sobreposições de texto em tipo branco vazado. Enquanto os designers adoram o tipo “reverso” ou “nocauteado”, os especialistas em conversão e as pessoas de resposta direta não gostam disso.

O tipo reverso que é mais do que um título curto ou um slogan é difícil de ler. Também suprime muito a compreensão da leitura, como descobriu um editor australiano ao fazer um teste.

Isso é tanto tipo reverso quanto você deseja ter:

7. Rolagem infinita

Isso é tão amplamente usado que quase não é mais uma tendência. É uma convenção padrão de web design. Isso nem sempre é bom. Verdade seja dita, eu não gosto muito de rolagem infinita. É porque, conforme eu rolo, a página pula – então não vejo todas as informações, vejo apenas segmentos delas. Quando estou procurando algo em uma página de rolagem, tenho que rolar para cima e para baixo, pouco a pouco, com muito cuidado. É preciso muito esforço para garantir que não perdi nada quando o pergaminho infinito decide pular.

Acaba que não estou sozinho em minha frustração. O Nielsen Norman Group publicou recentemente um artigo que resume o problema:

A rolagem infinita evita que as pessoas tenham que prestar atenção à mecânica da paginação nas tarefas de navegação, mas não é uma boa opção para sites que oferecem suporte a tarefas de localização orientadas a objetivos.

Eu rolo como uma tarefa de busca orientada para um objetivo. A rolagem infinita torna isso difícil.

8. Conteúdo interativo

Percorremos um longo caminho desde o “brochureware” de uma década atrás, mas muitos sites não chegaram tão longe quanto poderiam.

Existem razões comerciais para adotar o conteúdo interativo. Primeiro, aumenta o tempo no local. No caso de enquetes e questionários, também pode fornecer informações valiosas sobre seu público.

Essa é uma tendência que vale a pena acompanhar. Se for bem implementado, adicionar conteúdo interativo pode gerar um bom aumento na receita e em outras métricas importantes.

O melhor conteúdo interativo para profissionais de marketing B2B pode ser calculadoras e ferramentas de autoavaliação. Estes são ideais para os estágios finais do processo de compra. Eles podem ajudar os clientes em potencial a descobrir qual serviço é apropriado para eles e até mesmo fornecer uma estimativa aproximada do custo.

A Calculadora de ROI de Otimização de Sites ClickZ é um belo exemplo de conteúdo interativo:

9. Movimento

Esta é a tendência irmã do conteúdo interativo. O movimento assume muitas formas, sendo a mais óbvia o vídeo. Outro exemplo seriam os gifs animados que você vê em alguns blogs. Embora alguns deles possam ser muito ousados ​​para um blog B2B, é bom alongar um pouco de vez em quando. Especialmente se o gif animado mostrar um ponto de uma maneira que as palavras – ou mesmo uma imagem estática – nunca conseguiriam. Basta usá-los com alguma habilidade. Você quer um efeito tão elegante quanto um cinemagraph, não algo como uma placa de néon piscando em uma loja de bebidas.

via GIPHY

ou

via GIPHY

10. Fotografia e ilustrações personalizadas

Há muitas vozes no mundo do design apenas protestando contra as fotos de estoque. Não tenho certeza se eles são tão ruins quanto algumas pessoas dizem, mas definitivamente há riscos no uso de banco de imagens. Primeiro, outras pessoas poderiam usar as mesmas fotos que você. Em segundo lugar, fotos de pessoas reais demonstraram obter conversões mais altas. Por que? Porque eles são mais críveis.

Uma ideia paralela a isso são as ilustrações personalizadas. Isso pode fazer muito para tornar seu site original. Um dos grandes problemas com muitas dessas tendências de design é que elas foram amplamente adotadas. Muitos sites estão começando a ter a mesma aparência, ou pelo menos como se estivessem usando o mesmo modelo, apenas trocando texto e imagens. Sites desenhados à mão mudam isso. Assim como as fontes personalizadas.

11. Navegação oculta

Este é outro resultado da influência que o celular está tendo em todo o web design. Esses menus de navegação ocultos parecem um pequeno ícone até que você passe o mouse sobre eles ou clique neles. Em seguida, eles aparecem e mostram seu conteúdo.

Alguns sites, como o da Act-On, usam a navegação oculta de forma responsiva. Se alguém vir o site em um dispositivo móvel ou tiver uma janela estreita do navegador de desktop, verá a navegação recolhida:

Se clicarem nas três barras, verão a navegação disposta como se fosse uma barra lateral:

Se a janela do navegador for larga o suficiente, eles verão a navegação completa:

Há outra tendência relacionada a isso: navegação ancorada. Isso se refere a uma barra de navegação que segue você conforme você rola a página. As sobreposições são um exemplo de navegação ancorada. Esses botões de mídia social que seguem você enquanto você rola uma postagem no blog também são ancorados.

De volta para você

Essas são as principais tendências em web design a partir de agora. Mas o design evolui e o web design evolui rapidamente. Se você está pensando em redesenhar seu site ou está apenas coletando ideias até estar pronto para um redesenho, certifique-se de seguir as tendências de design da web que oferecem suporte à usabilidade e conversões. Sempre foque em seus usuários – seus clientes e prospects. Só porque um elemento de design está na moda não o torna necessariamente bom para os negócios.

E como disse Steve Jobs: “ Design não é apenas o que parece. Design é como funciona .”

Uma última coisa.

O design evolui e o web design evolui rapidamente. Se você está pensando em redesenhar seu site, ou está apenas coletando ideias até que esteja pronto para um redesenho, certifique-se de seguir as tendências de web design que suportam usabilidade e conversões e leia o e-book da Act-On, Transforme seu site em um lead Generation Machine, para garantir que você não perca oportunidades de gerar leads ao alterar o design do seu site.

E o mais importante, sempre foque em seus usuários – seus clientes atuais e potenciais. Só porque um elemento de design está na moda não o torna necessariamente bom para os negócios.