Web

Roteiro da animação – Lei dos 9×1

Por em

Pretendemos colocar em produção o site de pré-lançamento. Conforme nosso post anterior sobre o assunto, iríamos fazer uma animação que resumisse, rapidamente, o projeto da SON (School of Net).

Primeiramente antes de criamos qualquer coisa, temos que optar, querendo ou não pela “Lei dos 9×1”.

Ou você desenvolve 9 ou 90 minutos e pensa 1 ou 10, ou você pensa 9 ou 90 e desenvolve em 1 ou 10.

Ou seja, pense muito mais, para evitar retrabalho e se desgaste menos colocando a “mão na massa”. Nesse caso, utilizamos de um pequeno roteiro para fazer tal animação:

Layout Pré-lançamento com animação

Roteiro das frases:

Requisitos:

  • Todo instante da animação estar escrito “pré-lançamento”.
  • Utilizar elementos com perspectiva (profundidade, etc)
  • Possuir um pré-loading verde com linha de 0-100%.

Passo-a-passo (Frases):

  1. O maior centro de treinamento de alta tecnologia está para nascer
  2. tudo Online
  3. Apoio pedagógico e metodologia exclusiva
  4. Assista, Entenda, Desenvolva e Teste
  5. A cada mês um novo treinamento
  6. tudo para Web
  7. Alta qualidade e valores acessíveis
  8. todas as formas de pagamento…e parcelamento
  9. Acompanhe em nosso Blog cada etapa de nosso desenvolvimento
  10. Indique amigos e ganhe treinamentos.
  11. Garanta 25% de desconto, cadastrando-se abaixo.
  12. School of Net – Aprender, é na prática. A Work in progress

Animação:

  • Um flash, como um estrobo de luz e risquinhos como se fosse começar um filme
  • Entrada do Logo e Frase 1 e logo abaixo do Logo, Frase 2.
  • Frase 3 chegando e frase 4 como um grafico 3D pizza como um ciclo mostrando nossa metodologia
  • Pegar ícones de todas as tecnologias web colocar, efeito de espelho, como no logo da SON, e embaixo frase 5. Representar que cada mês, cada uma daquelas tecnologias (que tem o ícone) vão estar disponíveis como treinamento (selecionando ou contornando, ícone por ícone, sugerindo que cada seleção será o tempo de um mês.
  • Depois dar opacidade em todos os icones das tecnologias e escrever a frase 6.
  • Cifrões em perspectiva no fundo e vem a frase 7.
  • Fade out nas frases e mostrar icones com efeito espelho de todas as formas de pagamento e nos cartoes de crédito colocar (12x) e frase 8.
  • Frase 9 com screenshot do blog com efeito espelho e em perspectiva lateral.
  • Mostrar o computador enviando mensagens ou eails (cartinhas como gmail) para outros computadores e quando chegarem aos computadores eles dão Ok (de alguma forma, ex: sinal de joia, piscam, etc..) e frase 10.
  • Depois da um crop no footer do hotsite apontando para o campo de texto e clicando em GO com a mãozinha do mouse e frase 11. Quando a mãozinha clicar em Go. Aprece um tipo de um balãozinho (25% de desconto).
  • Finaliza aparecendo o Logo da SON sem o efeito espelho e logo abaixo frase 12 e um ícone de reload (como os dos banners da adobe para a pessoa assistir novamente a apresentação).