Web Design \ 5 de janeiro de 2015

Dicas de Web Design – Adicione Um Efeito Mouseover nas Imagens do Seu Site

A plataforma do Wix é repleta de recursos de design incríveis, e enquanto alguns são óbvios, outros (como o efeito mouseover) dão um pouco mais de trabalho para achar. Por isso, estamos aqui para dar uma luz sobre estes recursos fantásticos que podem ter passados despercebidos!

A dica de hoje é sobre o efeito mouseover em imagens, como adicioná-lo e as razões que provavelmente vão levá-lo a querer incorporar este efeito ao design do seu site.

Adicionar este efeito às suas imagens vai dar um algo a mais ao fator interatividade do seu site. Os internautas vão querer ver o que acontece ao passar o mouse em suas imagens, botões e mais, na esperança de haver alguma reação. Ter um site interativo, em geral, vai manter as pessoas por mais tempo navegando no seu site – e quanto mais tempo as pessoas navegam, maior a chance de explorarem seu site mais a fundo, se tornarem fãs ou até mesmo fazer uma compra.

Um Exemplo Impressionante: www.naomikizhner.com

Não dá para negar: A Naomi Kizhner usou este recurso de forma perfeita. Se você é como nós, vai passar o mouse em cima de cada foto no site da Naomi para ver cada uma das imagens ficar colorida. Ela ainda levou este efeito ao extremo com a escolha minimalista do esquema de cores e do design do seu site, todo em diversos tons de cinza e usando um layout organizado. O paraíso para o mouseover.

Como Fazer Isto Em Seu Site

Agora a parte técnica! A seguir, o passo-a-passo:

No editor, clique no ícone Adicionar > Botões e Menus > Botão de Imagem:

Duplo clique em Botão de Imagem para ver as configurações:

Escolha sua visualização padrão e sua visualização mouseover. Pense como se fosse o “antes e o depois” do efeito mouseover:

Veja como vai ficar quando passa o mouse em cima da imagem:

E não esqueça! Como isto é um botão, ele deve ter um link para algum lugar. Os internautas vão estar prontos para clicar assim que passarem o mouse em cima da imagem, então é preciso estabelecer a visualização pós clique. Talvez uma página de um produto?

Dica Útil: Preparar suas imagens antecipadamente é uma grande ideia. Para que esta mágica do mouseover aconteça, você precisa ter duas versões da imagem. A escolha clássica é ter uma versão em preto e branco e a outra colorida. E o melhor de tudo? Você pode criar estas duas versões sem sair do Wix, usando o Editor de Imagem do Wix!

Efeitos ainda mais divertidos que podem ser feitos com este recurso

Agora que você já aprendeu a usar o mouseover, não precisa parar por aqui. Há tantas opções de design legais para usar este efeito que a seguir vamos mostrar mais alguns que nós simplesmente adoramos.

Usar textos em forma de pop-up é uma outra opção do efeito mouseover e mais uma excelente forma de interatividade para os visitantes de seu site:

Usar uma imagem que altera ligeiramente (ou altera muito) ao passar o mouse por ela:

Alternar entre modernas imagens vetoriais:

As possibilidades do recurso mouseover são infinitas, por isso agora é só usar!

Já criou o seu site? Escolha um template e comece já! >>

E gostou deste artigo? Digite seu email aqui e receba mais conteúdo como esse em sua caixa de email!