Para Criação

De MAGTAB Wiki
Ir para: navegação, pesquisa
Wiki-01.png

A peça criada para o anúncio que vinculamos nas revistas tem um formato bastante simples. Neste sentido, queremos dizer que as especificações para criação das peças consiste em duas dimensões, sendo estas, telas grandes ou pequenas. Além disto, esta é inserida entre as páginas de cada edição de uma determinada revista.

A campanha consistem no desenvolvimento de um projeto de anúncio interativo em HTML5. Além disto, a plataforma disponibiliza duas modalidade de peças, sendo estas, para telas grandes ou pequenas. Embora, não precise, necessariamente, uma peça para cada modalidade, desde que seja responsiva, basta apenas uma peça.

As Dimensões dos Dispositivos

Wiki-02.png
Wiki-03.png

Sua peça sempre deve ser responsiva. Neste sentido, queremos dizer que a nossa plataforma distribui a sua peça para dispositivos com tamanho de telas que variam em altura e largura.

A criação da peça deve ser moldada na dimensão 768px X 1024px quando for para telas grandes e 320px X 480px para telas pequenas. Lembramos que é possível aplicar a peça produzida para telas grandes (não o inverso) em telas pequenas desde que seja aplicado as técnicas descritas no quarto parágrafo desta seção.

Outro ponto muito importante é: como as dimensões acima é para orientação vertical, recomendamos que haja uma imagem alertando para virar na vertical o dispositivo, caso esteja na horizontal. Outro ponto é, caso o conceito da peça for concebido na horizontal, as dimensões são 1024px X 768px para telas grandes e 480px X 320px para telas pequenas, com uma imagem vertical. O wireframe a seguir demonstra o fluxo:


Admagdimensoes.png


Caso a ADMAG seja responsável pela produção da peça, deve ser enviado todas as imagens de todos os componentes do layout separadamente em .png (com fundo transparente) mantendo a proporção da arte conceitual final.

Algumas soluções para que a sua peça seja responsiva esta disponível em Para Produção. O objetivo é abordar algumas técnicas que proporcionem o ajuste automático para dispositivos que interpretem a linguagem HTML corretamente.

O Peso do Arquivo Final

Quanto mais animações a peça tem maior será o peso do arquivo final. Neste sentido, normalmente, quando criamos uma animação para alguma cena necessitamos de uma imagem em PNG (sem fundo), contudo, este formato deixa a mesma mais pesada, e por fim o arquivo final fica mais pesado. Dito isto, é extremamente importante que o peso máximo não ultrapasse os 15MB para tablets e 15MB para smartphones (a mesma pode veicular em ambos) totalizando 30MB suportados pela nossa plataforma. Além disto, outro cuidado é com as outras plataformas de publicação, tais como, Abril e Globo que suportam no máximo 5MB (vertical e horizontal).

É importante também ler o tópico "Cuidados importantes" para que seu anúncio performe da melhor maneira possível.

ADMAG Vai Produzir

Quando a produção da peça é executada pela ADMAG alguns dados são necessários. Neste sentido, para minimizar possiveis reparos ou alterações ao decorrer da produção, o material recebido será avaliado e caso não esteja em conformidades, entraremos em contato o mais rápido possível. Sendo assim, os seguintes tópicos abordam as informações que devem ser enviados.

Os Arquivos

Os arquivos que devem ser enviados fazem parte da transformação da arte final para HTML5. Sendo assim, o conjunto de dados devem ser compactados utilizando alguma ferramenta como o zip, winrar, etc. Com isto, os seguintes arquivos que devem ser recebidos são:

1 - As imagens em PNG (sem fundo) de cada elemento que compõem a arte final.

2 - O arquivo .psd (photoshop) com toda a arte final. Lembrando que outro formato não será aceito.

O Formulário

O preenchimento do formulário tem como intuito descrever algumas informação da peça que será produzida em HTML5. Com isto, possibilitando uma maior visão do escopo para o grupo responsável pelo desenvolvimento e, posteriormente, qualidade superior no resultado final - entregando o que realmente o cliente deseja. Além de diminuir a quantidade de reparos durante ou após a implementação.

Acesse o formulário neste link [1] para preencher o formulário.

O Storyboard

O storyboard é fundamental para a produção da peça em HTML5. Neste sentido, queremos dizer que a base para os efeitos que serão aplicados no anuncio será extraído do documento (em formato de informação). Este documento visa prevenir futuros reparos ou divergências de animações, efeitos, cores, etc. Desta maneira, recomendamos que seja composto de uma sequencia de imagens ilustrado o processo desde o inicio ao fim do anuncio. Caso não seja possível, recebemos também um excel, word, video ou gif, desde que auxilie a compreender o escopo do anuncio.

Este documento deve ser enviado junto com os arquivos de seção 3.3.1, além do preenchimento do formulário da seção 3.3.2.

Cuidados importantes

Algumas dicas para sua campanha ficar legal:

Deixe áreas de troca de página

A peça será inserida entre outras páginas de conteúdo e vai se comportar como uma página normal. O leitor poderá passar ela e ir para a próxima página tocando e arrastando a página horizontalmente. Se sua peça possui interatividades que retêm o toque (áreas de arrasto), é bem importante que se deixe algum espaço livre de toque que o leitor possa usar para passar para a próxima página. Concentre sua interação no centro da peça e não terá problemas.

Cuidado com o tamanho final do arquivo

O limite de tamanho do arquivo final não deve ultrapassar 15MB, mas recomendamos manter o arquivo o menor possível, de 4 a 8MB é um bom tamanho. Se for usar vídeos deixe-os o menor possível, e se quiser usar vídeos longos, prefira um vídeo por streamming, online, como do youtube.

Animações chamam a atenção

Com HTML5 e CSS3 você consegue criar animações bastante complexas e importantes utilizando canvas, translate3d, scale, rotate, entre outros é possível criar um anúncio rico em efeitos.

Dê preferência pela vertical

As revistas têm um conteúdo todo construído para ser melhor visualizado na vertical. Então os anúncios que seguem esse padrão tem mais sucesso.

A peça deve abrir rápido

Se a peça demorar muito para mostrar alguma coisa na tela pode ser que o usuário passe direto pelo anúncio. Então é importante mostrar alguma imagem logo de cara, e carregar o restante do conteúdo mais pesado depois disso. De preferência mostrar junto com essa imagem inicial alguma animação, que chame o usuário para a interação.