Animações em temas prontos
-
Comprei um tema pronto do wordpress e montei meu site (sobdepressao.com.br)
Em várias partes há textos (em “história”, alguns boxs dentro de outros tópicos e etc) que coloquei como imagens, mas gostaria de alguma opção animada. É possível fazer isso?
-
Boa tarde Juliana Araujo,
O tema já é bem animado. Mas não é responsivo, como você pode observar em http://www.responsinator.com/?url=http%3A%2F%2Fsobdepressao.com.br%2F – uma tendência de design, especialmente por estar agora presente quase que como uma exigência pelo Google para aparecer nos melhores resultados.
Como designer, o que eu lhe questionaria ao dizer que “gostaria de alguma opção animada”, é: Qual seu público-alvo?
Porque veja bem, eu sou designer, então eu navego pelo seu site com a maior facilidade. Mas olhando pelos olhos de seu potencial público, um adulto (depressão não é bem uma doença de crianças e jovens, apesar de haver casos nessa faixa também, mas o que normalmente acontece é os pais, adultos, irem atrás de informação), que pode estar com depressão ou querendo conhecimento para ajudar alguém, seu site tem um design que “se mexe demais”.
Por exemplo, em “Panoramas > A doença”, o site fica com o slide rodando. Você clica com o mouse/mão para “segurar” o slide, mas assim que solta o botão as informações voltam a se movimentar. Ou seja, enquanto não clicar no botão Stop não tem como acessar as páginas, pois o slide não pára. A solução correta aqui que o desenvolvedor devia ter escolhido era que quando eu clicasse no slide ele parasse, para eu poder ler os conteúdo ou clicar no botões + para entrar nas páginas.
Então eu sugeriria ao invés de “alguma opção animada”, antes que você parasse com o excesso de animação do site. Nós, ocidentais, vemos tudo de cima para baixo, da esquerda para a direita. Então seu site tem um belo e grande botão Play do lado esquerdo que todo mundo vê, mas para parar o site é um botão Stop “escondido” do lado direito (eu sei, tá visível, é vermelho, mas você vai ouvir muita gente dizendo, “ei como paro esse site para ler o conteúdo?”).
Design é a união de forma + função, a forma de seu site já é lindo, no sentido de que a escolha de fotos e essas “caixas” passa um ar de que “estou no lugar” para esse assunto. MAS a função de seu site é possibilitar o acesso ao conhecimento sobre este tema e ajudar as pessoas a “saírem dessa”. Facilite a vida dessa pessoa, ainda mais se é alguém com depressão.
Eu sugiro então que deixe o slide desativado, se a pessoa quiser ela vai clicar no botão Play. Função muito legal, site com um visual show, você não precisa de mais. Quer dizer, seria legal ser responsivo, para que as pessoas tivessem acesso pelo celular e tablet, um meio que só cresce no Brasil de se acessar a internet. Mas já que seu tema não terá isso, sigamos em frente.
Mas se ainda assim quiser “animar” ainda mais o site, diga mais ou menos o que seria essa animação, se poder exemplificar com algo que viu em outro site e gostaria de ter no seu, a gente vÊ no que pode lhe ajudar.
Abraços e boa sorte,
Olá Ralden!
Obrigada pela respostas e as dicas que você deu.A questão da animação é uma caracteristica do gênero jornalístico que essa reportagem foi feita, que é o 360º.
Como exemplo, posso citar um dos pioneiros, que é o El País: http://www.elpais.com.co/reportaje360/ediciones/cali-ciudad-que-no-duerme/
Essas animações servem para ajudar na interação e tentar segurar mais a atenção.
Não que eu queira um site todo animado (acho que em Cali até tem animações demais).
Mas eu queria uma solução esteticamente mais bonita do que ter que criar imagens em jpg com textos.A questão de onde ficam os botões eu sei que isso causa uma grande trabalhada, mas eu não consigo alterar, porque já veio assim no tema 🙁
Mas concordo que desabilitar o autoplay das imagens 360 é uma melhor solução.Boa noite Juliana Araujo,
Concordo com o uso do 360° para seu objetivo, ajuda a concentrar no conteúdo por sair do trivial, “sair da caixa”.
Quando você diz “Mas eu queria uma solução esteticamente mais bonita do que ter que criar imagens em jpg com textos.”, eu fui ver seu tema para entender o caso – http://themeforest.net/item/360-panoramic-wordpress-theme-/3027251. E vendo o demo desse tema, deu para entender o problema. Essa versão 360° é apenas imagens mesmo. Se você quiser texto, tem que ser Página ou Blog, mas aí virá um layout comum. Eu considero um erro de concepção ou de divulgação do tema, tipo um layout fantástico apenas na home, para um layout comum nas demais páginas.
Por exemplo, no mesmo ThemeForest tem o tema Acid – http://themeforest.net/item/acid-unique-horizontal-blog-and-portfolio-theme/4508779. Agora veja a concepção do Blog deles como é fantástica para seu projeto:
http://dark.acid.themevillage.net/blog/
A rolagem é horizontal, como você deseja para um projeto 360°. Você pode colocar imagens relevantes por tema, sendo que ao colocar o mouse sobre a imagem aparece o título, que justamente pode ser o tema que você deseja, o conhecimento que estará ali. Se seu mouse tem a rodinha de rolagem, você verá que se rodar a rodinha do mouse a rolagem horizontal funciona perfeitamente – no seu tema tem que “segurar” com mouse e arrastar. Ao clicar sobre a imagem, abre uma página de texto, e você perceberá que ao longo de toda a página fica a seta para o lado esquerdo e direito, sendo que ao colocar o mouse sobre a seta aparece qual é a postagem anterior e a próxima postagem – ou seja, você poderia ordenar o conteúdo até para auxiliar o usuário o que ler antes e depois.
Ou seja, o Acid é que seria o tema ideal para seu projeto. Tem uma concepção horizontal ao longo de TODO o tema, e não apenas na home, como é o caso do seu tema, que de 360° só tem o nome do tema e a home, home essa limitada a imagens.
Sobre os botões de seu tema, é possível mudar a posição, nem que seja indo no código e dá um pouco de trabalho (não é para iniciantes, a não ser que peça o código direto para o suporte do tema). Mas pode ser que essa configuração inclusive esteja no painel de controle do tema, pois é um senhor painel com muitas configurações, pelo menos vendo a imagem que eles disponibilizam do painel – http://themes.siiimple.com/360/ad/options.png.
E infelizmente quanto a texto, no seu tema atual, você tem que fazer uma dificil escolha: ou mantém o 360° da página inicial e aí realmente só dá textos em forma de imagem, ou aceita mantem o 360° lindo apenas na página inicial, mas quando for mostrar conteúdo, texto, vai para o layout comum do blog do tema. Uma pena.
Abraços e fico à disposição,
- O tópico ‘Animações em temas prontos’ está fechado para novas respostas.