As 10 Mais Deslumbrantes Tendências do Web Design para 2019
Atualizado: 11 de nov. de 2019
Queremos começar esclarecendo de imediato dois mitos. O primeiro é que você precisa ser formado em uma faculdade de design ou ser um mago da programação para criar um site com design de alta qualidade e recursos poderosos. Simplesmente não é verdade, e neste artigo vamos lhe mostrar como fazer. O segundo mito é que criar um site é necessário, mas não é divertido. Exatamente como uma dessas tarefas das quais você tenta escapar, como lavar a louça ou dobrar uma pilha de roupas. Estamos aqui para mostrar como criar seu próprio site pode ser fantástico, acessando seu lado criativo e deixando sua imaginação correr solta. A seguir você encontra nossa lista de dez das tendências mais influentes que você vai encontrar por aí neste próximo ano.
Claro que como ressalva devemos dizer que isso não significa que você precisa usar todos os itens desta lista na sua página. Como escreveu o especialista em design UX (experiência do usuário), Aarron Walter, no seu livro “Design for Emotion”, “Se tudo está gritando pela atenção de quem está visualizando, nada é escutado”. Resumindo: sobrecarregar seus visitantes com excesso de escolhas ou de elementos que estão na sua cara, não é “uma dentro”. Ao invés disso, certifique-se que sua lista está cheia de escolhas de design intrigantes que possam hipnotizar seu público e fazer sua parte para ampliar sua marca. Por isso, sendo você um web designer ou não, continue lendo para saber mais sobre as tendências de web design que devem ser seguidas em 2019, incluindo maneiras concretas de incorporá-las ao seu próprio site.
01. Micro-animações
Não há necessidade de transformar todo o seu site em um projeto totalmente tecnológico que vai competir com o mais recente filme da Disney. A animação é uma tendência que vem crescendo ao longo dos últimos anos, com recursos como rolagem parallax (usando movimento e a percepção da profundidade para atrair seu público para a história da sua página), que veio para ficar. No entanto, para 2019, a animação aparece em uma dimensão diferente. Menor, na realidade, chamada de micro-animação.
Estes são pequenos movimentos que aparecem quando os visitantes realizam uma ação específica em seu site. Eles ainda preenchem suas páginas com energia, mas têm um impacto menor no tempo de carregamento da página, e não distraem nem desviam seus visitantes do caminho que você traçou para eles. Você pode pensar nas micro-animações como sinais em uma estrada, que indicam ao visitante para onde se direcionar à medida que passeiam pelo seu site. Por exemplo, alterar o design do seu botão – o texto ou preencher a cor – quando o mouse passa por cima, sinaliza aos usuários que estão no caminho certo.
Além de funcionarem como guias para as suas páginas, estas interações animadas podem ser usadas simplesmente para adicionar brilho à sua página, e impressionar os visitantes do seu site. Isso também pode incluir a sutil e cativante cinemagrafia como background, ou em uma coleção maior, principalmente de imagens estáticas mostradas de forma bonita em uma refinada galeria de imagem. Ou então se jogar no mundo delicioso de adicionar efeitos aos seus vídeos, o que você consegue facilmente realizar com a VideoBox. Esta ferramenta te permite melhorar as cenas do seu vídeo com uma variedade de diferentes efeitos e comportamentos para levar a qualidade dos seus elementos visuais dinâmicos um passo além do GIF. Qualquer que seja a direção que você queira seguir, é garantido que estes movimentos em escala menor têm um efeito dramático no seu web design.
02. Otimização “mobile-first”
Com o lançamento do mobile-first index do Google, em março de 2018, e uma atualização para a velocidade de carregamento em mobile alguns meses depois, podemos afirmar oficialmente que há novas regras para o SEO (Search Engine Optimization, ou Otimização para Motores de Busca no idioma de Renato Russo). Agora os robôs vão verificar a versão mobile do seu site antes da versão para desktop quando forem decidir como classificar seu site nos resultados de busca. Além disso, a velocidade de carregamento é um fator na forma como é calculado o ranking dos sites em dispositivos móveis. Tradução: Um site mobile totalmente otimizado e carregando na velocidade de um raio é a sua chave para melhorar seu ranking nos resultados de busca e ser encontrado no Google por mais seguidores e clientes em potencial.
Felizmente para os usuários Wix, otimizar a versão desktop do seu site para mobile pode ser riscado da lista, uma vez que qualquer site criado com Wix automaticamente gera uma versão amigável a mobile e totalmente otimizada para os requesitos do Google. Uma vez que você tiver a estrutura, livre-se de todo o conteúdo desnecessário, já que telas pequenas ficam rapidamente lotadas. Ryan Warrender, que trabalhou como Gerente de UX Mobile no Google, define o sucesso mobile como “Um usuário deve saber em um relance o que fazer e porque deve ficar no seu site mobile”.
Uma boa maneira para descobrir o que deve e o que não deve ficar, é se colocar no lugar do seu visitante: Alguém acabou de chegar na sua página. Será que esse elemento é realmente necessário para que a pessoa tome a ação desejada? Se a resposta for “não”, você pode removê-lo da sua versão mobile (não se preocupe, não vai afetar a versão desktop). Esta é uma das melhores práticas para site mobile entre as muitas que você vai encontrar nesta preciosa checklist.
03. Formas geométricas
Teste surpresa! Quantos graus dá a soma dos ângulos de um triângulo? Brincadeirinha, não vamos te fazer reviver a aula de geometria do ensino fundamental (mas se quer saber, dá 180 graus). 2019 é o momento para você se divertir arrumando as figuras geométricas através do seu site, tirando proveito de simplesmente colocar formas básicas no background da sua página ou cortando imagens em formatos geométricos. As linhas claras dos triângulos clássicos, dos círculos – até mesmo de um losango ou hexágono se você está se sentindo meio fora do convencional – contribuem para uma distribuição uniforme e esteticamente agradável na sua página, te permitindo cumprir facilmente o princípio do equilíbrio do design.
Há três caminhos para este estado de equilíbrio: equilíbrio simétrico, assimétrico e radial. Veja a seguir uma análise do que está implicado em cada um:
Equilíbrio simétrico: Nesta abordagem clássica, os elementos de uma metade de uma composição são perfeitamente espelhados na segunda metade.
Equilíbrio assimétrico: Apesar das duas metades da página não serem iguais, ambas carregam o mesmo “peso” visual. Você alcança esse equilíbrio usando cores, texturas, formas e posições dos itens mostrados.
Equilíbrio radial: Este estilo posiciona igualmente todos os elementos do design ao redor de um ponto central de forma a ficarem irradiando para fora. Você pode imaginar uma roda de cor.
Para 2019, gostamos especificamente da ideia de ter alguma assimetria. O estilo de quebra de padrão é um símbolo do modernismo e da vitalidade; duas qualidades atuais que valem a pena trazer para seu web design. Como mencionamos acima, formas são uma das maneiras para conseguir um aspecto assimétrico nas suas páginas. Digamos que o lado direito da sua página está carregado com texto. Uma solução para equilibrar o peso é dar forma a um design fascinante usando triângulos do lado esquerdo. Quando você escolhe formas geométricas para este propósito, isto significa que a aparência e o brilho da sua página ainda continuam fortes. Você pode ter um design de ponta e ainda manter os visitantes focados na respectiva missão.
04. Respingos de cor
Há um motivo para as cores fortes estarem na lista das tendências ano após ano. Em uma Internet lotada de conteúdo, a cor é uma forma confiável para marcar sua posição em relação à sua presença online. Claro que isso não significa largar a psicologia das cores e partir direto para a cor mais brilhante que possa encontrar. A escolha da paleta de cores para a sua marca ainda deve ser guiada pelas emoções que você quer transmitir, os padrões do seu mercado, além da mensagem que você espera comunicar através da identidade visual da sua empresa. No entanto, uma vez que você compreender e tiver uma ideia aproximada das cores que fazem todo o sentido para a sua empresa, explore a forma como fazer funcionar sua impressionante capacidade. Especificamente, como a cor pode ajudar os visitantes a focarem nas seções mais importantes da sua página?
Há diversos caminhos a tomar. Blocos de cores fortes são a grande referência do web design no momento. Você pode cobrir a área “acima da dobra” da sua página inicial (a parte que é visível de imediato na tela do visitante antes que ele tenha que rolar para qualquer outro local) numa cor sólida e surpreendente (será que ousamos sugerir a Living Coral, a Cor do ano Pantone 2019?). Se essa cor não combina muito com o estilo da sua empresa, há outras formas mais sutis para realçar a sua página com o mesmo brilho como, por exemplo, incorporar essa cor para o texto dos seus botões de chamada de ação (CTA) ou usá-la enquanto cria seu logo.
Esquemas de cores complementares também estão na crista da onda. Esta abordagem se refere a pegar duas cores que estejam posicionadas diametralmente opostas uma da outra na roda de cores, como o vermelho e o verde, ou o amarelo e o roxo. O contraste resultante faz cada cor se destacar mais na página do que se cada uma estivesse sozinha. Para criar um esquema completo, adicione uma cor neutra a essa dupla complementar. Cores neutras são aquelas que você não vê na roda de cores padrão, como o bege, tons claros de marrom ou cinza, além dos básicos preto e branco. Uma vez que tiver suas cores, pode aplicá-las nos mesmos locais mencionados acima, seja em áreas acentuadas como CTAs ou como uma série de blocos de cor adjacentes que ajudam o visitante a diferenciar entre o conteúdo da página.
05. Tipografia encantadora
Sabemos que é muito confortável ficar com o trio Arial, Times New Roman e Calibri. No entanto, em 2019 é a hora de pensar fora da caixa (de texto). As fontes propriamente ditas podem ser declarações intencionais, com as versões mais artísticas e detalhadas tendo a capacidade de transmitir uma mensagem de seriedade ou descontração. Em outro local do “Design for Emotion”, Aarron Walter declara: “Um excelente design que usa contraste cognitivo e visual, não só faz você se destacar, mas também pode influenciar a forma como as pessoas usam sua interface”. Na realidade, tudo se conecta à identidade da sua marca. O que você espera comunicar aos visitantes? Usando essa resposta como sua diretriz, aí você pode escolher a melhor fonte para seu site.
Uma tendência que está surgindo são as fontes exclusivas, que vão do charme vintage da letra manuscrita até a desordem exposta dos traços em negrito e a curva graciosa do alfabeto escrito à mão. Estes estilos funcionam como peças artísticas, fazendo das suas palavras peças centrais para atrair a atenção. Se você quer ir para o negrito, recomendamos partir para uma fonte elaborada para conseguir esse efeito impactante e depois equilibrá-la com uma fonte mais tradicional. Para ver algumas duplas que comprovadamente funcionam bem juntas, veja nosso guia sobre exemplos e indicadores dos melhores pareamentos de fontes.
A dança sincronizada de diversas fontes (no entanto, nunca mais de três!) na sua página te permite designar cada uma para um aspecto específico usando, por exemplo, a mais artística para seu ousado cabeçalho e outra de uma linha mais clara para as explicações sobre a sua empresa, que incluem textos mais longos. É só mais uma forma como a fonte pode ajudar a criar uma hierarquia visual no seu site e deixar tudo muito mais fácil e organizado para o visitante.
06. Cabeçalhos em vídeo
Ok, vamos começar pela necessidade básica de ter um vídeo no seu site. Esta é uma das tendências anteriores que já passou a ser um padrão do mercado. Se você está confuso pelo fato de que não faz muito sentido adicionar um elemento pesado como esse ao seu site, isso é muito bom – significa que está prestando atenção à ideia geral de que itens muito ricos em dados, por mais espetaculares que possam ser, podem ter o lamentável efeito de fazer seu site ficar mais lento. Mas o que acontece é que a capacidade de engajamento imediato dos visitantes acaba por compensar a presença dos dados mais pesados do vídeo. E o fato de ficar mais tempo na página significa uma maior chance de completar seus objetivos, além de enviar excelentes sinais de feedback para seu SEO.
Em especial o mundo do vídeo está partindo direto para os cabeçalhos em vídeo, que ou são de tela inteira ou em faixas de vídeo que funcionam como um background dinâmico. Você pode ter uma sobreposição de texto, seu logo, menu e mais. Digamos que você é proprietário de um café e quer mostrar algumas boas imagens da atmosfera movimentada que os clientes podem encontrar por ali. Você pode simplesmente fazer upload do vídeo através do Gerenciador de Mídia do Wix, e depois personalizar a partir daí. Para minimizar o impacto do vídeo no tempo de carregamento do site, opte por um pequeno clipe com tamanho máximo de arquivo de 6MB, que funcione em loop, reproduzindo-se continuamente em períodos curtos de tempo de cinco a dez segundos. Esta repetição faz parecer como uma apresentação mais longa do que é na realidade, mas te economiza o espaço de arquivo adicional necessário para um vídeo mais longo. Também é uma boa ideia o vídeo estar no mudo. Faça esse favor aos seus visitantes, uma vez que ninguém gosta de passar pela situação constrangedora do barulho do vídeo em um escritório tranquilo e sossegado.
07. Cantos arredondados e linhas suaves
Em 2019 veremos um aumento no uso de cantos arredondados e mais linhas naturais nos sites por todo o lado, em elementos como caixas de texto, quadros de imagem, botões e até em formas abstratas no background. Esta é uma mudança que está se afastando das arestas mais pontudas do passado. É como a diferença entre um colchão extra firme e aquele colchão de espuma especial que se molda ao corpo. O segundo transmite facilmente a sensação de conforto, já o primeiro transmite uma sensação mais distante e austera. Este é um grande exemplo de como uma mudança sutil no design pode realmente alterar a percepção que o público tem da sua marca.
Como conseguir isso? Você pode recortar os formatos da suas imagens para quadros arredondados, adicionar uma variedade de formas amorfas de cores brilhantes, trocar o formato retangular dos seus botões por outro com curvas. E, se está partindo para as deliciosas micro-animações com a VideoBox que mencionamos no início, você pode verificar as linhas suaves disponíveis em algumas das molduras de vídeo. Quer você mesmo criar o formato destes pequenos vídeos animados? Você pode usar a ferramenta de contorno para ter o formato exato e dar o tipo de aspecto orgânico que você deseja.
08. Tela dividida
Uma nova tendência que está surgindo no cenário é o site com tela dividida, o que significa que seu conteúdo está dividido na vertical entre os dois lados da página. Esta é uma outra forma de inserir uma hierarquia visual, além de visualmente “acalmar as coisas” para as pessoas que descobrem seu site. Por exemplo, se você é um fotógrafo de moda ou um artista da culinária e está procurando uma forma para separar seu texto das suas imagens, este pode ser um excelente aspecto para seu site.
A divisão tem o efeito de deixar respirar cada elemento da sua página ao invés de ter todos os elementos em camadas, umas por cima das outras. Da perspectiva de quem visualiza, ajuda a processar um componente por vez, ao invés de tentar processar uma variedade de tipos de conteúdo de uma só vez. Tirar proveito do ponto onde as duas colunas se juntam como o ponto focal ideal, é uma forma para ainda manter alguma harmonia entre as duas seções. Coloque bem na frente e centrado o seu logo, CTA ou seja lá o que você achar que possa roubar a cena quando o visitante chegar na sua página exatamente nesse ponto. O resultado é uma aparência unificada mesmo quando o olhar do visitante se afasta do ponto. Ser criativo com seu layout não significa jogar a harmonia pela janela.
09. O fim da grade clássica
Você não precisa olhar longamente para a Internet para ver que o ser humano gosta de coisas totalmente aleatórias. Pense nos inúmeros memes com os quais você se acabou de rir, ou os testes do BuzzFeed que você fez e para descobrir seu estilo musical preferido a partir do sabor de sorvete que você mais gosta. Um padrão que tem atraído a nossa atenção é o uso de componentes inesperados do web design. Temos visto isto se refletir em algumas das outras tendências, como as formas geométricas, cores fortes no background e micro-animações. Agora queremos enfatizar como este elemento surpresa pode aparecer no seu site em uma escala maior.
Para o olhar pouco focado do visitante, ser recebido por um layout assimétrico é incomum o bastante para quebrar esse passeio aleatório pela internet e convencê-lo a se inclinar para olhar mais de perto. A aparência ligeiramente desequilibrada, quando feita corretamente, pode acertar em cheio o ponto certo do fascínio, sem descambar para o “bagunçado”. Caos organizado, se preferir assim. Uma possibilidade seria transformar uma forma geométrica ou uma micro-animação em uma peça que se destaque, e fique localizada ligeiramente para a direita ou para a esquerda de onde a lógica simétrica naturalmente a posicionaria, ou então também poderia ficar ligeiramente sobreposta sobre um outro elemento. Uma outra possibilidade é contrabalançar uma imagem grande com espaço em branco. Dê para a foto 40% do espaço e preserve os outros 60% como uma pausa visual, para incluir apenas um CTA ou um pequeno título escrito em uma fonte poderosa.
O único vestígio do layout de grade que ainda permanece, por mais irônico que possa parecer, é a própria grade. Sim, aquelas mesmas linhas que normalmente te guiam como designer, mas no entanto são invisíveis para seu público, agora estão competindo pelo seu tempo em evidência. Temos visto mais sobreposições de grade em vídeo e backgrounds. Para os leitores aventureiros, é possível jogar com o efeito de grade para realmente conseguir um aspecto retrô com um toque artístico remetendo aos dias iniciais da internet. Para aqueles que estão procurando apenas um diferencial sem precisar mergulhar a fundo no assunto, é possível experimentar usar algumas linhas desconcertadas e expostas através do seu site. Elas quebram o peso do que está na página e mostram os tamanhos diferenciados de suas colunas e caixas de texto enquanto mantêm, ao mesmo tempo, uma sensação de controle devido à sua simplicidade e firmeza de estrutura. Supomos que é uma ruptura um pouco confusa com a grade, mas o que podemos dizer?
10. Minimalismo
Se você é como nós, já está com a mão coçando para se jogar no seu site e começar a dar vida a cada uma destas tendências. No entanto, também vamos lembrar do bom senso, uma navegabilidade clara é um princípio do web design que nunca deixa de ter seu estilo. Porque ao final, se seus visitantes não têm a certeza sobre o que seu site quer que façam ou se não conseguem encontrar o que procuram, o fato de ter a animação mais legal não vai ajudar em nada. Na realidade, o fundamental nas nove tendências mencionadas anteriormente é estarem comprometidas com a UX (experiência do usuário), por isso, o melhor mesmo é declararmos bem alto nossa conclusão final sobre o que vai ser realmente importante no próximo ano.
A essência do UX é identificar as tendências que transmitem de imediato a mensagem da identidade da sua marca e a chamada de ação desejada. Explore como cada uma tem a capacidade de enfatizar a mensagem central das suas páginas. Mais ainda, se você conseguir engajar seu público-alvo com um design empolgante, há uma chance maior dos visitantes ficarem na sua página. Um tempo maior de navegação é a receita para melhorar seu SEO. Uma vez que tiver escolhido as tendências de web design que deseja, atenha-se a elas e foque a sua energia para manter uma estrutura organizacional hermética, inserindo bastante espaço para que cada elemento do design possa respirar – porque essas tendências em 2019 vão deixar seus visitantes imediatamente sem fôlego.
Deixe seus visitantes extasiados com estas fantásticas tendências do web design! Para começar crie um site ainda hoje!
Por Equipe Wix
