7 tendências de web design para 2015 e 2016

Conheça as principais tendências de web design que você deve considerar em seus próximos projetos de sites para o 2º semestre de 2015 e para 2016.

 

1. Gestos são os novos cliques 

Quem não lembra, a não muito tempo atrás, de usuários não muito familiarizados com navegação em sites se esforçando para clicarem, bem no canto direito da página, para utilizarem as barras de navegação? E também não faz muito tempo, sites “long pages” não eram considerados uma boa solução… Tudo tinha que caber na tela.

 

Tendencias Web Design 2016

 

Claro, que, sendo você um expert no assunto, provavelmente já estaria usando a rodinha do mouse, deslizando o dedo no air mouse ou no track pad, ou mesmo usando as teclas do teclado. Só isso já colocaria você muito a frente da média dos usuários comuns.

 

Agora em 2015, tudo está muito mais fácil. Além da grande maioria dos usuários já ter se acostumado com esse padrão de navegação, os celulares contribuíram muito para esse novo comportamento. Tudo está a uma rápida rolagem de distância, a navegação é fluída e fácil. De fato, usando um smartphone, o que ficou mais difícil é justamente clicar no ponto exato que queremos da tela. Veja só, completamente o oposto do que estamos acostumados ao usar um desktop.

 

Site-Long-Page-Exemplo

 

Considerando a explosão no uso de dispositivos móveis, é mais do certo que esta tendência seja cada vez mais forte e presente. Sites modernos e bem projetados em termos de usabilidade têm cada vez menos pontos para clicar e tocar e se valem muito mais da rolagem e deslizamento horizontal. Resumindo, vamos ver cada vez menos links e mais botões e áreas clicáveis bem grandes, e páginas bem longas, só esperando para serem roladas e roladas.

 

Websites, portais e blogs que distribuem seus artigos e notícias em várias páginas irão ter que se adaptar. O novo padrão que o usuário cada vez mais espera é o scroll infinito ou, pelo menos, páginas cada vez mais longas. Dois bons exemplos de portais que surfam essa nova tendência são a revista Time e o Terra:

 

Scroll-Infinito-Pagina-Exemplo

 

Scroll-Infinito-Pagina-Exemplo

 

Ainda é muito cedo para saber se a web irá se espalhar para dispositivos com telas menores, como os smart watches, mas se isso acontecer, pode ter certeza: gestos e rolagens serão o padrão.

Ainda sobre scroll infinito: por mais que seja tendência, não me agrada. Me deixa louco não conseguir chegar no rodapé do site! Nos meus projetos, sempre prefiro usar páginas longas, mas com carregamento dinâmico via botão “ver mais”. Pra mim, as páginas (ainda) tem que ter um fim. 😉

 

2. A dobra superior de página morreu

Para quem não sabe, a dobra superior é a porção da página que o usuário visualiza assim que um site começa a ser exibido na tela, sem precisar fazer rolagem alguma. É a zona mais nobre de um site, digamos assim.

 

O ponto é: agora que a rolagem de tela é cada vez mais comum e assimilada pelos usuários, além da grande variedade de tamanhos de telas e dispositivos, pode-se afirmar com segurança que o conceito de dobra superior de página começa a ficar cada vez mais irrelevante.

 

Exemplo-Sites-Dobra-Superior

 

Com páginas compridas e a rolagem, os designers agora podem explorar o que as revistas já fazem há muito tempo: preencher as páginas com fotos grandes e lindas. Daqui para a frente, espere ver cada vez mais projetos fazendo uso de imagens que ocupam quase toda a área da tela, principalmente na vertical, e usando cada vez mais imagens.

 

3. Usuários cada vez mais rápidos, sites cada vez mais simples

Hoje em dia, o usuário adulto médio é quase um especialista em navegação. E mesmo os mais amadores já estão incorporando os hábitos mais avançados, como usar múltiplas abas e deslizando o dedo para voltar uma página.

 

O resultado é que tudo está mais rápido agora. E cada vez ficamos mais e mais impacientes. Se você quiser aborrecer o usuário, basta fazer sua página ou site carregar lentamente, faça-o esperar mais de 10 segundos e veja o que acontece.

 

Tempo-de-Carramento-de-Pagina

 

Agora, sites estão sendo forçados a não somente serem cada vez mais rápidos e otimizados (o que envolve questões mais técnicas), mas sim, a ficarem mais rápidos de se entender. Designs complicados, que retardam o entendimento da interface, tem o mesmo efeito que sites que demoram a carregar. A impaciência impera, seja simples.

 

Designs clean e simples são mais fáceis de entender numa passada de olhos, o que significa que são mais rápidos de serem apreciados. Um exemplo? Qual dos designs abaixo é mais recente, mais rápido e mais fácil de entender e apreciar?

Tendencias-Webdesign-2016-dont-do

 

Tendencias-Webdesign-2016-Exemplo

 

Essa é uma das principais razões para a morte do skeuomorphic design: os usuários estão mais perceptivos, menos pacientes e a desordem e complexidade só os deixam mais lentos.

 

A grande maioria dos Apps fazem os sites passarem vergonha quando comparamos com suas interfaces super limpas, minimalistas e lindas. O Apps estão fazendo isso porque já aprenderam que interfaces minimalistas apresentam desempenho muito superior. Um exemplo? Instagram e AirBnb!

 

Tendencias-Webdesign-2016-Apps

 

Adotar o conceito de Flat Design é apenas o começo, quase um requisito. A tendência real é a busca pela simplicidade e fluidez. Espere ver isso cada vez mais em 2015 e 2016.

 

4. O pixel também morreu

Num desktop, um pixel era um pixel. E você conseguia ter uma ideia bem precisa de quantos pixels haviam em uma tela: 72 dpi. Hoje em dia, em tempos de densidade de pixels, poucas pessoas sabem o que é um pixel. Tendencias-Webdesign-2016-pixels

Com o design responsivo, temos visto o movimento em direção a grids e percentuais. Mas uma enorme área segue incontestável: imagens bitmap.

 

Quase toda a web é constituída por imagens que hoje têm metade da resolução de um monitor moderno. E elas não são escaláveis. Com monitores retina display e navegadores modernos, é o momento mais que ideal para gráficos vetoriais se tornarem mais populares.

 

Esta tendência já está em franco andamento com a utilização de ícones baseados em fontes e com o conceito de Material Design do Google. O website carrega mais rápido e os ícones conseguem se redimensionar e se ajustar em qualquer tamanho de tela e resolução, sem perder a definição e qualidade. É isso que os faz extremamente práticos para designers e para os navegadores modernos.

 

Tendencias-Webdesign-2016-resolucao

Apesar de toda a técnica já estar disponível agora, ainda vai levar algum tempo até os profissionais mudarem seus hábitos e se acostumarem a criar para telas maiores. Uma vez que a média de tamanho de tela/resolução seja o padrão Retina Display, é certo que todos vão seguir o exemplo.

 

5. As animações voltaram

Se você quiser fazer um site com um visual bem ultrapassado, use e abuse daqueles GIFs e Flashes animados dizendo “Em construção. Novo site em breve”. No entanto, existe uma conjunção de fatores que estão trazendo as animações para o centro das atenções novamente.

 

Tendencias-Webdesign-2016-animacoes

 

Os aplicativos mobile é que têm definido o que os usuários esperam em termos de experiência. Os Apps estão usando motion para transmitir significado e, só agora, os websites estão começando a fazer o mesmo.

 

Tendencias-Webdesign-2016-Motion

 

Novas tecnologias, como animação CSS estão se tornando mais fáceis de usar e mais populares, além de funcionarem sem a necessidade de plugins e sem os tradicionais problemas de velocidade e compatibilidade. O uso de Componentes Web (ver mais abaixo) vai acelerar ainda mais essa tendência.

 

Os GIFs animados também estão de volta, temos visto usos bastante criativos e efetivos, e nunca foi tão fácil de criar e compartilhar.

 

6. Componentes são os novos frameworks

A tecnologia para a web está cada vez mais complexa e menos semântica. Designers precisam incorporar códigos confusos em suas páginas mesmo para as tarefas mais simples, como, por exemplo, os scripts do Google Analytics e do botão Like do Facebook. Seria mais legal se bastasse escrever algo assim:

 

<google-analytics key=”UA-12345–678″>

 

E isso é possível com os Web Components, mas eles ainda não estão 100% prontos para serem absorvidos pela maioria dos projetistas. A virada de 2015 para 2016 parece muito promissora nesse sentido.

 

O Material Design do Google já está entre nós e é recém o começo desse movimento. Com a força do Polymer e o suporte dos browsers mais recentes, ele fornece animações elaboradas e componentes de interação para aplicativos Android, com tags simples como essas:

Tendencias-WebDesign-2016-Web-Components

 

Se essa onda pegar, não seria surpresa alguma vermos mais frameworks baseados em componentes ainda em 2015. Um Bootstrap 4.0 talvez?

 

7. A saturação do Social e a ascensão do Email Marketing

Veja só: as mídias sociais são um sucesso monumental para os consumidores, já os produtores de conteúdo não estão tão felizes assim.

 

O grande problema – enorme – é a saturação. Com bilhões de mensagens ao dia, o Facebook aprende os tipos de mensagens que realmente interessam aos usuários e só exibe essas. Infelizmente isso significa que, ao longo do tempo, os conteúdos que você postar da sua marca, serão cada vez menos vistos por seus seguidores – problema que você resolve fácil, desde que pague para conseguir alcance (Facebook Ads).

 

O Social não vai desaparecer, mas desde o final de 2014, temos visto um monte de blogueiros de destaque, como Tim Feriss, tirando o foco do social e concentrando atenção na boa e velha lista de emails. Eles perceberam que o email tem uma tremenda vantagem sobre as mídias sociais: um percentual muito maior de pessoas irá receber os seus conteúdos e a sua oferta.

 

Tendencias-WebDesign-2016-Email

 

Eu espero ver esta tendência pós-social continuar bem forte em 2016. E também espero ouvir falarem bastante sobre as Notificações Web, que funcionam bem parecidas como as notificações nos smartphones.

 

Notificacoes-Animadas

 

O que esperar de 2015

No início do ano vimos o uso de dispositivos móveis ultrapassar o desktop, mas a grande massa do público ainda não foi nem atingida. A grande maioria das empresas ainda prioriza que o seus sites sejam ótimos no desktop e só então vão pensar no mobile.

 

Manter essa abordagem em 2015 é o caminho para parecer desatualizado. Considerando que o mobile já é o principal dispositivo para a navegação na internet, a estratégia “Mobile First” passa a ser muito menos uma modinha, mas sim uma exigência.

 

O Flat Design já está por toda a parte e você pode até pensar que está se esgotando. Mas quando você olha além dos “ghost buttons”, a tendência real é que sites mais simples são mais rápidos e gratificantes para os usuários.

 

Simplicidade não é apenas uma moda: é o futuro. E vai ficar ainda mais forte.

 

Animações em posts vão ser cada vez mais comuns, tanto para transmitir significado e qualidade premium, como para apoiar a experiência do usuário.

 

Hoje você vê o melhor do webdesign vindo dos Apps móveis para os sites mobile. Muito breve, essa diferença deixará de existir.

 

E você, o que pensa dessas tendências? Está vendo mais alguma tendência que vale ser observada?

 

Traduzido e adaptado do artigo original de Jowita Ziobro.

Autor

Felipe M. Maia Diretor de planejamento e projetos digitais da Praetzel. #BeQuickOrBeDead Me siga no Facebook ou Linkedin

VAMOS JUNTOS FAZER ALGO INCRÍVEL!

Visite
Fernando Gomes, 128
10º Andar
Moinhos de Vento
Porto Alegre
90510-010
Google Maps