Web Design \ 11 de abril de 2016

As Grandes Tendências do Web Design Para Colocar em Prática

As tendências do web design vão seguindo seu caminho e podem ser semelhantes – ou não. Todos os anos, modas desaparecem, outras aparecem, outras ainda continuam a progredir e cada uma delas contribui com seu pixel para a cara da web ser tal como nós a conhecemos.

É evidente que estas evoluções são fruto de alterações tecnológicas (o uso dos smartphones) ou gráficas (novas interfaces Microsoft, Apple, Google) e comportamentais (progressão da dependência nas redes sociais). No entanto, como veremos, são também a consequência indireta de um fator mais interessante ainda: refletem o estado de espírito em geral dos internautas.

Como vocês já sabem, o Wix oferece modelos de sites que seguem as tendências do web design. Nós vamos apresentar aqui as que vão dominar a Rede em 2016 – com exemplos para ilustrar:

Tendências Gerais

O Flat Design revisado pelo Google

Quem pensa Web pensa Google. O gigante decidiu adotar uma nova linguagem visual que influencia progressivamente os nossos hábitos como consumidores virtuais: o Material Design. E qual o princípio? Um design que é, ao mesmo tempo, minimalista e multidimensional e que permite a cada um se orientar com a ajuda de ícones, profundidade, animações discretas e formas coloridas. Os usuários podem se beneficiar de ferramentas mais intuitivas e dinâmicas. E diga-se de passagem, este novo design permite unificar a experiências em todos os meios.

O Flat Design, amplamente divulgado pela Microsoft, já tinha aberto o caminho para um novo modo de reflexão sobre a usabilidade de sites, priorizando os ícones aos menus de navegação e pondo um fim à ideia de que a Web deveria se parecer com a vida real.

Resumindo toda esta história meio sombria: os ícones e blocos de cores vão continuar a se aperfeiçoar e os internautas vão continuar a economizar em cliques. Adicione a isto um toque de profundidade e de animação e terá todo o “material” para navegar no Material Design. O Google já disse: “Materializar”, então vamos materializar e pronto.

Cores tranquilizadoras: que felicidade

Este ano tem sido particularmente pesado em termos emocionais e os internautas parecem que estão procurando a esperança mais do que nunca. Por isso, não é nenhuma surpresa que as cores suaves assumam a liderança na Web. As cores preta e branca nunca saem de moda, mas simplesmente estão ficando ofuscadas pelos tons pastel (para os sites mais suaves) e pelos mais vivos (para os sites mais dinâmicos). A escolha da sua paleta de cores deve ser condizente com a escolha da atmosfera do seu site. Não hesite em provar que você é otimista e tem pensamento positivo.

A seguir, aqui apresentamos um vídeo em inglês muito interessante sobre as cores para este ano.

“Play-Mobile” – um avanço para as e-Stores

Não, não é uma publicidade dos célebres bonequinhos que trocavam diversas peças. Quer dizer em outras palavras, vá mobile. Não importa qual a tendência que mais lhe agrada, você deve ter sempre em mente que os usuários de smartphones se multiplicam a uma velocidade incrível. Portanto, é fundamental otimizar seu site para fazer face às necessidades deste público. Vale lembrar que os motores de busca decidiram que este ano vão recompensar os sites adaptados para dispositivos mobile.

A evolução do Long Scrolling

Certamente você já reparou que nestes últimos tempos, os sites estão visivelmente se alongando. Na gíria da internet, esta tendência se chama Long Scrolling. O objetivo: oferecer aos internautas uma navegação na vertical, similar à que é usada nos seus smartphones e nas redes sociais. Uma vez que nós, progressivamente, estamos nos tornando viciados na nossa rodinha (ou melhor dizendo na rodinha do mouse) e que seguimos nosso feed de notícias com o dedo indicador, é natural que os sites se atualizem para nos facilitar a vida.

Inspire-se: Template Wix – Oculista

A seguir, algumas mini tendências derivadas do Long Scrolling que vão te ajudar a dar um grande passo adiante:

Rolagem Parallax: todo o mundo está falando a respeito

O “para” o quê? A rolagem parallax é um recurso que permite criar uma sensação de profundidade num site. Fazendo rolar, em velocidades diferentes, elementos que estão sobrepostos é possível dar às suas páginas na Web uma sensação de dinamismo semelhante ao 3D. Mais ainda? Nosso artigo sobre o efeito parallax esclarece todo o assunto.

Inspire-se: Site criado com Wix – Pesto Studio

Faixas na largura: uma organização melhor em termos visuais

Uma das armadilhas do Long Scrolling é o fato de ser difícil estruturar visualmente seu conteúdo. Se na época onde cada página ficava na tela o menu fazia uso de inserções, agora, na era da rolagem vertical (scrolling), é necessário destacar claramente cada seção, uma vez que cada página ficou mais longa e portanto mais rica de conteúdo. É aqui que entram as faixas em toda a largura do site. Permitem criar páginas compostas de diversas ”fatias”. Para este efeito é recomendado variar os estilos (vídeo / imagem / cor) para cada categoria / faixa de conteúdo (Homepage, Sobre, Contato, etc.)

Elementos fixos: onde for preciso, quando for preciso

A dificuldade com os sites de rolagem é o fato de rapidamente se perder de vista o objetivo de sua visita ao site justamente durante os segundos da rolagem. Uma técnica tão estética quanto prática para evitar este obstáculo consiste em “fixar na tela” alguns elementos estratégicos: cabeçalho, rodapé, botões sociais ou até, sem dúvida o nosso preferido, um menu de navegação interno composto de âncoras. Ainda não está certo de ter compreendido o princípio? Clique no Template a seguir!

Inspire-se: Template Wix – Professora de Yoga

Animações: Design em movimento

Atenção, perigo! As animações podem levar seu design para um nível superior assim como também podem destruí-lo em um piscar de olhos. Por exemplo, se você incluir animação aos seus textos para que os mesmos apareçam sutilmente à medida que você vai rolando a página você ganha duas vezes: seu site fica dinâmico e suas mensagens vão naturalmente chamar a atenção. Em compensação, se você começar a usar animação exageradamente vai acabar por ter uma página na Web que mais parece um jogo de Candy Crush onde deu tudo errado. As animações são para ser usadas com moderação e bom gosto.

Inspire-se: Site Wix – Jonathan Earley

Split Screen: duas vezes mais prazeroso

A último do grupo e que parece ter uma dimensão maior a cada ano que passa é a tendência do Split Screen – traduzindo, tela dividida. Separando certas seções do seu site em duas partes mais ou menos simétricas é possível conjugar o conteúdo visual e textual com um charme bem peculiar. Com efeito, os textos embutidos em blocos de cor são mais legíveis e as imagens junto aos parágrafos ilustram o propósito de forma natural e agradável. Um dos objetivos do “long scrolling” ou “rolagem longa”, como já dissemos, é apresentar o máximo de informação (de forma concisa!) numa só página. Esta técnica veio adicionar um toque visual sofisticado e oferecer uma leitura mais agradável. Ao final, os visitantes forçosamente já foram conquistados. É dividir para melhor reinar.

Inspire-se: Template Wix – Bicicletas Urbanas

Tela cheia, um clássico

Veja por inteiro! Um vídeo na tela cheia, uma bela imagem como plano de fundo, um fundo colorido com tipografia imponente; todas estas tendências existem há muito tempo e não estão nem perto de desaparecer de nossas telas. Seu objetivo é claro: transmitir uma mensagem poderosa (visual ou textual) aos visitantes desde o primeiro olhar. A questão que te atormenta: qual tendência usar e por quê?

Vídeo: coloque-o bem visível!

Seguramente, o vìdeo é o formato que mais atrai interesse na Web. E a prova é que se o Facebook teima em invadir o terreno do YouTube é porque muita coisa está em jogo. De uma maneira geral, veremos este ano um número crescente de sites com fundo de animação. Se esta é a sua escolha, certifique-se de que seu clip é visualmente irrepreensível. Os pixels são verdadeiros estraga prazeres, principalmente na tela cheia. A boa novidade é que com o Wix usar um vídeo como plano de fundo em seu site é de uma facilidade desconcertante – é um presente!

O diagnóstico de nossos designers:

  • Vantagem: mostra muito sobre a sua atividade e cativa o olhar instantaneamente.
  • Inconveniente: pode ser difícil de produzir e corre o risco de desviar a atenção dos visitantes do ponto principal da mensagem. E, para o site mobile, é preciso ter um plano B – uma imagem pode muito bem resolver a questão.

Inspire-se: Site Wix – Lofti Lamaali

Imagens autênticas: não ilustre, mostre

As grandes imagens como background têm sucesso garantido já há alguns anos. Com certeza, um bonito visual sempre faz efeito. No entanto, hoje em dia não dá mais para simplesmente recorrer a um banco de imagens para desencavar uma bonita ilustração. No momento em que os sites se multiplicam e a confiança dos internautas diminui, provar a autenticidade é um “must”. Por isso é absolutamente recomendado ter fotos profissionais de seus locais / equipes / produtos e usá-las em seu site. Para os artistas e fotógrafos isto não deve ser um problema. Em compensação, os outros internautas não devem hesitar em procurar se interessar a respeito do básico da fotografia ou chamar um profissional se seu orçamento permitir.

O diagnóstico de nossos designers:

  • Vantagem: é muito simples de adicionar, escolher e editar. Uma imagem é sempre um elemento estético e eficiente.
  • Inconveniente: realmente ela não ”fala”, mas basta sobrepor um texto para transmitir sua mensagem.

Se você decidiu escolher esta opção, preste atenção que mesmo as fotografias também têm tendências. Veja a seguir as duas mais recentes:

  • Close-up: as fotografias tiradas de perto valorizam os produtos nos seus mínimos detalhes.
  • Vista aérea: este tipo de fotos mostra uma visão mais global de seus serviços / produtos e uma perspectiva original da sua empresa.

Inspire-se: Template Wix – Veterinário

A tipografia deslumbrante

Uma bela tipografia ou uma fonte com caracteres originais não são apenas possibilidades visuais à escolha. Eles são o centro da imagem da sua marca e permitem transmitir a sua mensagem com extrema eficiência. Da mesma maneira que as cores, as fontes também devem ser escolhidas e usadas com o máximo cuidado. Você pode decidir que quer associá-las às imagens, casá-las com uma textura colorida ou integrá-las a um vídeo. Desde que você respeite as regras, seu site só tem a ganhar.

O diagnóstico de nossos designers:

  • Vantagem: permitem transmitir uma mensagem clara.
  • Inconveniente: é delicado usá-las já que podem atrapalhar o restante do design se forem muito ostensivas.

Inspire-se: Template Wix – Profissional de Fitness

 

A aventura digital te atrai? Crie seu próprio site grátis!