Conhecer as tendências, técnicas e ferramentas de web design web para 2018 ajudará você a melhorar a apresentação do seu produto ou serviço no ambiente digital.

Sair dos padrões para aplicar novas tendências não é uma tarefa simples. A mudança poderá exigir redesign do site, possuir equipe própria e especializada, ou ter uma agência especializada em Growth-Driven Design para aplicar as tendências.

Quando uma empresa decide entrar no ambiente digital, é comum ela olhar para o lado e ver o que os concorrentes estão fazendo e seguir o que já esta pronto. Acreditando que aquela é a melhor solução, mesmo sem conhecimento dos resultados.

Tendências devem ser encaradas, primeiramente, como uma tentativa de se diferenciar, principalmente da concorrência. Inovar, ser criativo e se distanciar dos padrões pré-estabelecidos pode ser a melhor forma de se mostrar diferente em mercados iguais.

Em segundo, nenhuma tendência vai substituir as leis do web design. Que é oferecer aos visitantes condições claras de navegabilidade, responsividade e interatividade.

Se você é um web designer e pretende incluir novas tendências no desenvolvimento de seus projetos, esteja preparado para demonstrar isso aos seus clientes e matar as objeções que naturalmente vão surgir.

Conheça agora 10 Tendências de Web Design para 2018 que eu já estou aplicando nos meus trabalhos.

1. Layouts de Grade Quebrada

Se você já teve a oportunidade de folhear ou ler o livro “Layout”, de Gabvin Ambrose e Paul Harris, vai identificar que layouts de grade quebrada é algo comum no mundo do design gráfico.

Mas quando falamos de sites, em um contexto geral, estamos policiados a manter uma estrutura padrão. De alinhamento, de grid, que muitas vezes não agrada e não surpreende ninguém.

web design

Em sites nacionais, observamos que a regra é a harmonia e lógica da grade. Com todos os elementos textuais alinhados para a esquerda. De fato, nada errado. Mas é interessante observar que existe aceitação de caixas de texto em diferentes espaços, seja ele central ou à direita.

web design quantica

A grade quebrada possibilita destacar a atenção do visitante para pontos importantes do site (principalmente em telas grandes), destacando chamadas de ação, portfólio ou como no caso acima, a formação daquela autoridade.

2. Brutalismo

No final de 2017 recebemos dois orçamentos para desenvolvimento de sites. O fato curioso é que no briefing de ambos os projetos, havia referências de sites com claros sinais de brutalismo.

De forma geral, a tendência do brutalismo é a simplificação ao extremo, é abrir um espaço para que os web designers desenvolvam o conteúdo da forma mais simples possível. De fato, é algo que poucos negócios estão dispostos a fazer atualmente.

Longe de qualquer manual de “como fazer sites”, o brutalismo pode ser visto muitas vezes como o resultado de algo amador.

E quem pensaria em aplicar o brutalismo na concepção de seus sites? Gucci e Balenciaga.

Web designweb design

Caso queira conhecer mais sites com esta tendência, segue o link: http://brutalistwebsites.com/. Os desenhos de site são de impressionar.

A opção pelo brutalismo exige talento do designer. Pois não se trata apenas de um jogo desordenado e despreocupado com as leis básicas de navegabilidade e responsividade.

Se você visitar o link ali a cima, vai observar que o que design é desconcertante. Mas são sites muito bem estruturados onde você encontra as informações que precisa de forma simples.

3. Elementos Animados

Conheço web designers que defendem o uso de animações de elementos e outros que abominam tal prática. Estes, justificam que elementos animados afetam o carregamento de página e por consequência, prejudica o SEO do site.

O fato é que a anulação de elementos animados anula um importante elemento do web design: movimento e interação. Sites devem ser muito mais do que imagens e textos estáticos. Sites não precisam ser estáticos.

Elementos simples de animação podem ajudar os visitantes na compreensão e destaque de pontos importantes. Você mesmo lê todo o conteúdo de uma página ou procura os pontos principais?

web design

Animações podem criar experiências deliciosas, especialmente para aqueles com deficiências cognitivas ou sensibilidade ao movimento.

Uma animação sutil pode direcionar a atenção do visitante para o conteúdo certo no momento certo no web design. Ajudando a garantir que ele não perca aquela caixa de captura de lead ou a principal proposta de valor do seu negócio.

web design

Eu, sempre que possível, utilizo animações para destacar pontos importantes. Não apenas no slider principal, mas também para chamar a atenção do visitante para o que realmente interessa.

Lembre-se que a animação é fundamental, mas o excesso dela pode atrapalhar objetivos de conversão, se usado demasiadamente.

4. Ilustrações Centralizadas

Quando criamos a apresentação de uma oferta de produto ou serviço em nosso site com web design, é comum adicionar ao lado do texto uma fotografia real. Que procura representar uma determinada pessoa (ou um conjunto delas) adquirindo ou gozando dos benefícios da oferta.

O fato é que nós conseguimos criar uma identificação forte com alguns visitantes que olhando a foto, consegue rapidamente se identificar nela.

E para os outros visitantes que não se identificaram com as fotografia, mas que encontrariam no seu produto/serviço a solução para seus problemas?

Eu por exemplo, sou uma pessoa simples. São raras as ocasiões onde me apresento formalmente em algum

É por este motivo que a tendência da Ilustração tem tomado conta de diversos sites. Principalmente de startups.

Observe esta imagem.

web design

Com um único desenho, a Shopify esclarece que o sistema de design Polaris pretende servir de luz guia – uma estrela norte. A pessoa ali pode ser eu, você, minha mãe, não importa. Boa parte das pessoas consegue se ver naquela representação de ser humano.

E se eu tivesse colocado um casal sentado, observando uma estrela, com altas doses de “imagem-de-stock”? A identificação teria sido muito menor, já que eu não costumo fazer isso e passa a sensação de que é “para as outras pessoas”.

Acredito que essa mudança possa ocorrer para negócios que atendem diferentes nichos, cuja quantidade de personas identificadas seja superior a cinco.

5. Formas Orgânicas e Oblíquas

Fugir do ângulo reto, dos 90 graus, tem sido explorado por muitos web designers de uns tempos para cá. Eu mesmo tenho procurado fugir das linhas do grid apostando em mais curvas. Mas não é um processo fácil de adaptar para o responsivo.

web design obliquo

O site da Stripe é um belo exemplo de como aplicar essa tendência, optando por substituir as quebras de linhas do site aplicando um ângulo de linha e inserindo elementos em 3D ou imagens de mockup simples.

Esse recurso é muito bonito para telas maiores, sem dúvidas, mas é possível aplicar com menos intensidade para telas menores.

Web design orgânico

 

6. Transição de Páginas

A transição de páginas no site é quase sempre igual. As coisas ficam em branco por um segundo, então a nova página é carregada. Nada extravagante.

Algumas agências tem apostado em incluir uma dinâmica diferente na troca de página, inserindo efeitos visuais simples, tornando a experiência do visitante diferente.

Eu acredito que esta tendência tem relação direta com a falta de paciência dos usuários da internet em aguardar o carregamento de uma página. Ficar olhar para o branco não é algo que prenda a atenção, muito pelo contrário.

Mas estamos começando a ver mais e mais sites fazer essa mudança no estado algo bonito de se ver. Por exemplo, essas transições no site da agência 3drops:

Web design

 

7. Vídeos e Gifs

Lendo até aqui, você deve ter observado alguns gifs que exemplificaram muitos exemplos em três, quatro e cinco segundos de duração. Isso ocorre porque uma imagem estática não seria capaz de representar de forma rápida, por exemplo, a transição de vídeo do item acima.

Essa tendência é focada na experiência, uma forma de exemplificar para o usuário como executa uma determinada tarefa que muitas vezes uma imagem estática ou texto não poderia fazer com tanta eficiência.

Web design

O uso de vídeos é adequado porque se adapta perfeitamente ao grid do site, sem o padrão reto e botões intrusos de vídeos embedados um YouTube ou Vimeo (em menor escala).

Ele permanece de alta qualidade, mesmo com muitas cores. Gradientes e detalhes na imagem – algo que GIFs luta para fazer sem expansão exponencial de tamanho, o que prejudica em versões responsivas e de grande tamanho.

Eu diria que essa tendência veio muito forte. Principalmente em sites onde o usuário precisa interagir com diferentes funções do seu site.

E uma forma fácil de aplicar isso é o web designer gravar a execução ou orientação pelo Camtasia e exportar em formado adequado, já adicionando ao site.

Conclusão

Existem várias outras tendências em web design na qual eu vou falar separadamente. E outras que não vou entrar em detalhes.

Existem várias tendências que exigem uma infraestrutura de produção, mais direcionadas para empresas que possuem capacidade de investimento para executar.

Minha intenção com estas 7 tendências é mostrar que elas são fáceis de serem aplicadas por webdesigners, sem necessitar de um investimento em ferramentas, produção, plugins entre outros.

Se você gostou, não deixe de compartilhar ou deixar seu recado aqui embaixo. Fique a vontade para comentar.

Fontes de Pesquisa: https://99designs.com.br / https://webflow.com / https://www.forbes.com – Consultados pela última vez em 27/01/2018 às 16h48.