Diretrizes para envio de layout do hotsite da Campanha Promocional

2 anos atrás

Se você está acessando esta página, significa que sua empresa necessita desenvolver um layout para sua campanha promocional a ser implementada na plataforma idPlugger.

Por favor, siga as instruções específicas para o formato de arquivo em que você criará seu layout, e esteja atento(a) ao formato exigido para o envio da versão final.

Requisitos

As informações a seguir representam os requisitos mínimos necessários para que nossa equipe de desenvolvimento possa trabalhar na criação do hotsite com o material que você nos fornecerá. Veja abaixo:

Download

Para começar o processo, clique aqui e faça o dowload do arquivo em formato .XD

Se você não tem Adobe XD e deseja apenas saber quais são as páginas que o seu criativo vai visualizar, clique no botão Referencias.

Download .XD

Referência

Gabarito

Por favor, leia cuidadosamente as instruções fornecidas no Artboard Gabarito. É importante usar exclusivamente a área designada para o hotsite, aderindo a todas as diretrizes estabelecidas. Este documento contém informações essenciais sobre as páginas padrão da plataforma e as variações de tela. É importante notar que, para visualizações em desktop, a largura padrão é de 1366px; e em mobile a largura padrão é de 460px áreas além dessa medida são consideradas margens adicionais. Em telas maiores que o padrão, o hotsite se ajustará de modo a exibir os elementos de forma adequada. Além disso, o texto explica como certos conteúdos se tornarão acessíveis no hotsite após serem devidamente cadastrados através do módulo de administração da plataforma.

Objetos inteligêntes

Este arquivo foi desenvolvido utilizando objetos inteligentes com o objetivo de otimizar o tempo necessário para aplicar elementos e cores. Ao editar os objetos inteligentes, as alterações serão automaticamente aplicadas a todas as páginas nas quais eles estiverem incorporados.

Fontes

Priorize o uso de fontes disponíveis no catálogo do Google Fonts. Se houver necessidade de utilizar uma fonte específica que não esteja disponível, por favor, separe-a e anexe-a ao enviar o arquivo final.

Responsividade

O arquivo XD contém todas as páginas da plataforma idPlugger nos formatos para dispositivos móveis e desktop. Siga as regras estabelecidas para posicionar os elementos corretamente dentro das áreas de conteúdo designadas.

Arquivo final

Após concluir sua criação, compartilhe o link com o fluxo de todas as páginas para que o time de implatanção e a equipe de qualidade realize a validação do trabalho. Uma vez aprovado, o arquivo será encaminhado este mesmo link para a equipe de desenvolvimento.

Lembre-se de:

Garantir que todas as páginas estão sendo listadas no fluxo do link que irá compartilhar;
Habilitar a opção Mark for Export para que o time de desenvolvimento possa baixar todos os elementos do layout;
Ao criar o link de compartilhamento, selecione a opção Development e marque a opção Downloadable Assets;
Enviar por e-mail as Fonts utilizadas no projeto. Case tenha utilizado Fonts Google ou Adobe não precisa enviar o arquivo.

Requisitos

As informações a seguir representam os requisitos mínimos necessários para que nossa equipe de desenvolvimento possa trabalhar na criação do hotsite com o material que você nos fornecerá. Veja abaixo:

Download

Para começar o processo, clique aqui e faça o dowload do arquivo em formato .PSD

Se você não tem Photoshop e deseja apenas saber quais são as páginas que o seu criativo vai visualizar, clique no botão Referencias.

Download .PSD

Referência

Gabarito

Por favor, leia cuidadosamente as instruções fornecidas no Artboard Gabarito. É importante usar exclusivamente a área designada para o hotsite, aderindo a todas as diretrizes estabelecidas.

Este documento contém informações essenciais sobre as páginas padrão da plataforma e as variações de tela. É importante notar que, para visualizações em desktop, a largura padrão é de 1366px; áreas além dessa medida são consideradas margens adicionais. Em telas maiores que o padrão, o hotsite se ajustará de modo a exibir os elementos de forma adequada.

Além disso, o texto explica como certos conteúdos se tornarão acessíveis no hotsite após serem devidamente cadastrados através do módulo de administração da plataforma.

Objetos inteligêntes

Este arquivo foi desenvolvido utilizando objetos inteligentes com o objetivo de otimizar o tempo necessário para aplicar elementos e cores. Ao editar os objetos inteligentes, as alterações serão automaticamente aplicadas a todas as páginas nas quais eles estiverem incorporados.

Fontes

Priorize o uso de fontes disponíveis no catálogo do Google Fonts. Se houver necessidade de utilizar uma fonte específica que não esteja disponível, por favor, separe-a e anexe-a ao enviar o arquivo final.

Responsividade

O arquivo PSD contém todas as páginas da plataforma nos formatos para dispositivos móveis e desktop. Siga as regras estabelecidas para posicionar os elementos corretamente dentro das áreas de conteúdo designadas.

Arquivo final

Após concluir sua criação, faça o upload no diretório fornecido pelo time de implementação. Isso permitirá que a equipe de qualidade realize a validação do trabalho. Uma vez aprovado, o arquivo será encaminhado para a equipe de desenvolvimento.

Separe sua criação em 3 pastas conforme exemplo abaixo:

Arte Final (.PSD)
Referências (Salve nesta pasta arquivos em formato .PNG para que os demais envolvidos possam validar o layout)
Fonts

Se você está interessado em ver um exemplo prático de como os designs conceituais em Photoshop ou Adobe XD são transformados em hotsites dinâmicos e interativos, temos uma demonstração perfeita para você. Na plataforma idPlugger, desenvolvemos um hotsite que exemplifica essa conversão, mantendo a fidelidade ao design original e incorporando funcionalidades interativas.

Este showcase é uma excelente oportunidade para compreender como as ideias de design se materializam em projetos web funcionais na idPlugger. Para acessar esta demonstração e explorar os detalhes do hotsite conforme projetado em nossos modelos de Photoshop ou Adobe XD, basta clicar no botão abaixo:

Ambiente de demonstração