Tendência de design: fotos que ganham vida
Uma foto ao vivo. Cinemagraph. Imagens em movimento. Ainda movimento. Existem tantos nomes para essa tendência no design da web, identificados por uma imagem de herói que parece ganhar vida de maneira sutil.
Não é exatamente uma foto, mas também não é um vídeo. O movimento geralmente é restrito a uma ação na imagem para ajudar a chamar a atenção do usuário e atraí-lo para a imagem. Independentemente do que você chama, essa tendência está causando impacto e aparecendo em todos os lugares no design da web, como gifs compartilháveis e nas mídias sociais.
Evolução da tendência
É difícil dizer onde a idéia para fotos "ao vivo" começou, mas você pode argumentar que a Apple ajudou a torná-la mais popular. A empresa introduziu fotografias que incluíam toques de movimento com o iPhone 6S. Esse pequeno momento extra de prazer é o mesmo conceito para fotos vivas em sites. Há algo extra em uma imagem estelar que mantém você olhando para ela um pouco mais.
Esse mesmo conceito de imagens em movimento começou a aparecer em mais lugares. Aparentemente, anúncios com quadros fixos em outdoors digitais incluem alguém que pisca ou pisca para você. Até as formações do Sunday Night Football incluem tiros na cabeça do jogador que piscam após um segundo, mostrando que é realmente ação ao vivo.
Por que usar essa técnica? Ele mantém a atenção do usuário por mais tempo e fornece um ponto de referência visual mais interessante. A Flixel, uma empresa que cria imagens cinemagraficas para os clientes, diz que a foto em movimento média mantém a atenção dos usuários por 9 segundos, em comparação com 1 segundo na imagem estática média.
Fotos ou ilustrações
Imagens vivas ou cinemagraphs podem trabalhar com fotografias ou ilustrações. Não existe uma regra que diga que você precisa usar um tipo de imagem ou outro. Observando as duas imagens acima, você pode ver que qualquer um dos estilos pode ser bastante eficaz.
Outra consideração é que o movimento não precisa continuar acontecendo em loop. A Hillmann Living, acima, lança luz sobre os produtos na página inicial à medida que carrega. Esse é o único movimento e, em seguida, a foto é apenas isso, uma foto estática. O que é legal sobre o efeito aqui é que ele faz você olhar diretamente para as cadeiras que a empresa está vendendo imediatamente. A técnica mostra aos usuários o que importa na página e o que eles devem focar de maneira sutil e interessante.
Bar Z Wines adota outra abordagem. A página inicial ilustrada parece bastante simples a princípio, mas um pequeno avião voa pelo centro superior da tela em um loop. A moção ajuda a direcionar o usuário a olhar para palavras importantes na tela: "Nossos vinhos não são filtrados". O usuário imediatamente sabe alguma coisa sobre as mensagens neste site porque elas são atraídas para o idioma mais importante graças ao movimento na tela.
Dicas para o Sucesso
Essa técnica pode funcionar de várias maneiras e para uma variedade de aplicativos de design. Alguns dos melhores exemplos vêm de cenas ou paisagens simples, onde uma bela fotografia é o ponto de partida.
A grama pode se mover ao vento ou a uma paisagem. Uma pessoa pode piscar quando exibida e com um tiro na cabeça de grandes dimensões. Um produto pode inclinar ou virar ou concluir a ação para a qual foi projetado.
A coisa mais importante quando se pensa nessa tendência é a simplicidade. Se houver muito movimento, você provavelmente deve optar por um vídeo. O elemento surpresa é o que o faz funcionar; os usuários esperam uma imagem estática, mas ela ganha vida.
- Atenha-se a uma coisa e a um uso por site.
- Precisa parecer realista.
- O movimento precisa seguir as leis da física.
- O movimento deve ser sutil, mas perceptível.
- Não exagere, adicionando som ou várias ações de clique.
- Considere o controle sutil do usuário, como movimentos que acontecem com os movimentos do mouse.
- Desenvolva uma imagem em movimento que possa ser usada em várias campanhas, não apenas no seu site.
Como você faz isso?
Existem várias maneiras de criar esse efeito em seus designs. O método realmente determina em seu nível de habilidade, como você planeja usar as imagens e o orçamento vivos.
Algumas das opções para criar movimentos sutis incluem:
- Crie um gif.
- Use uma ferramenta online (há um número disponível com custos variáveis.
- Crie a imagem como vídeo com movimento limitado.
- Use um aplicativo ou até seu iPhone.
- Junte imagens estáticas em um formato de vídeo.
Experimente este tutorial do YouTube para ajudá-lo a planejar e criar uma imagem viva.
Um Exemplo Perfeito
O site da Monochrome Paris é um exemplo perfeito dessa tendência em ação. A página inicial é uma imagem aparentemente simples de um registro, mas o elemento rígido quase parece derretido e assume o movimento do tecido que se move ao vento. O efeito é envolvente, atraente e atrai os usuários para o design.
O efeito ajuda a criar interesse de maneira sutil. O visual imaginado parece um pouco mais real por causa do movimento. Role a página e outros elementos móveis cumprimentam o usuário, incluindo uma exibição normal da rotação do registro.
Este site é um ótimo estudo de caso de maneiras eficazes para usar essa tendência. Cabeça e clique ao redor para ajudar a inspirar.
Conclusão
Independentemente do que você chama, as imagens vivas são uma daquelas tendências que provavelmente permanecerão por aí. É mais uma maneira de adicionar animação a um design sem necessariamente ter que produzir um vídeo real. É eficaz e pode ser muito mais barato que a produção de vídeo.
O truque dessa tendência é garantir que ela pareça intencional e real. Incorporar um pouco de movimento tolo não necessariamente dará o efeito desejado. Volte e veja realmente os exemplos acima, acesse os sites e clique ao redor. Veja o que essa animação leva você no design. Em cada um dos exemplos, o movimento ajuda o usuário a chegar a um elemento específico ou a executar uma determinada ação. Esse uso intencional e direcionado do movimento é a chave para o projeto eficaz de cinemagraph.
