Loja Virtual - Imagens » Histórico » Versão 4
Versão 3 (Anônimo, 24/10/2017 19:30 h) → Versão 4/44 (Anônimo, 28/11/2017 21:10 h)
h1. Loja Virtual - Imagens
h2. Introdução
Este documento visa orientar na criação das imagens que irão compor o site B2B ou B2C - informe-se com o responsável do projeto sobre o tipo de loja.
Em caso de dúvida sobre como estas imagens serão aplicadas, segue dois exemplos de loja:
Exemplo de e-commerce (B2C): https://loja.ibtech.inf.br
Exemplo de B2B: https://b2b.ibtech.inf.br
h2. Considerações
As imagens geradas serão usadas somente para o site, então as mesmas devem ser otimizadas para web. O perfil de cor deve ser estritamente RGB # Logo cabeçalho e no caso dos arquivos JPG recomendamos compactação entre 75~90%.
A loja restringe o uso rodapé: *Máx 41px de imagens grandes, por isso observe na documentação sempre se foi especificado o tamanho máximo. Este cuidado com tamanhos é importante, pois, muitas pessoas acessarão o site via celular (3G/4G) e o acesso deve ser o mais otimizado possível.
h2. Logo da Empresa
Responsivo: *não* altura*
Tipo # Banner de Arquivo: *PNG* (pode ser com fundo transparente) galeria: *2040 x 450 px*
Altura: *Recomendado 41px*
Largura: *Máximo 200px*
h2. Banner(s) de Galeria
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 2040px*
Largura: *Recomendado 450px*
Carrossel: *Sim*
Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*
h2. Banner(s) # Banner da Tela tela de Login (somente B2B)
Responsivo: *sim* B2B): *2550 x 720 px*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 2550px*
Largura: *Recomendado 720px*
Carrossel: *Sim*
Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*
h2. # Imagens de produtos
Responsivo: *sim* produtos: *600 x 900 px*
Tipo de Arquivo: *JPG*
Altura: *900px*
Largura: *600px*
Limite de Tamanho do Arquivo: *300KB*
Observação 1: *Procure manter um padrão de tamanho para todos as imagens de produtos para evitar disparidade de altura.*
Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*
O produto pode ter várias imagens organizadas por *cor*. Por isso este tipo de imagem tem uma nomenclatura especial:
<pre>
Imagens da tela de produto:
839103_213_00.jpg
| | | +--- extensão obrigatória
| | +------- numero sequencial para mais de uma imagem por produto/cor
| +---------- código da cor do produto
+---------------- código do produto
</pre>
O produto também pode ter uma imagem especial para uso na galeria. Neste caso o nome da imagem é o próprio código do produto.
_Esta imagem é opcional._
<pre>
Imagem da galeria (opcional):
839103.jpg
| +--- extensão obrigatória
+--------- código do produto
</pre>
Exemplo de e-commerce: https://loja.ibtech.inf.br
*Exemplo Exemplo de imagens de produto:*
Código do Produto: *10082*
Código da Cor: *AZU*
Sequência da Foto: *01*
Nome da Imagem: *10082_AZU_01.jpg*
!cor1.png!
Código do Produto: *10082*
Código da Cor: *SAL*
Sequência da Foto: *01*
Nome da Imagem: *10082_SAL_01.jpg*
!cor2.png!
B2B: https://b2b.ibtech.inf.br
h2. Introdução
Este documento visa orientar na criação das imagens que irão compor o site B2B ou B2C - informe-se com o responsável do projeto sobre o tipo de loja.
Em caso de dúvida sobre como estas imagens serão aplicadas, segue dois exemplos de loja:
Exemplo de e-commerce (B2C): https://loja.ibtech.inf.br
Exemplo de B2B: https://b2b.ibtech.inf.br
h2. Considerações
As imagens geradas serão usadas somente para o site, então as mesmas devem ser otimizadas para web. O perfil de cor deve ser estritamente RGB # Logo cabeçalho e no caso dos arquivos JPG recomendamos compactação entre 75~90%.
A loja restringe o uso rodapé: *Máx 41px de imagens grandes, por isso observe na documentação sempre se foi especificado o tamanho máximo. Este cuidado com tamanhos é importante, pois, muitas pessoas acessarão o site via celular (3G/4G) e o acesso deve ser o mais otimizado possível.
h2. Logo da Empresa
Responsivo: *não* altura*
Tipo # Banner de Arquivo: *PNG* (pode ser com fundo transparente) galeria: *2040 x 450 px*
Altura: *Recomendado 41px*
Largura: *Máximo 200px*
h2. Banner(s) de Galeria
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 2040px*
Largura: *Recomendado 450px*
Carrossel: *Sim*
Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*
h2. Banner(s) # Banner da Tela tela de Login (somente B2B)
Responsivo: *sim* B2B): *2550 x 720 px*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 2550px*
Largura: *Recomendado 720px*
Carrossel: *Sim*
Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*
h2. # Imagens de produtos
Responsivo: *sim* produtos: *600 x 900 px*
Tipo de Arquivo: *JPG*
Altura: *900px*
Largura: *600px*
Limite de Tamanho do Arquivo: *300KB*
Observação 1: *Procure manter um padrão de tamanho para todos as imagens de produtos para evitar disparidade de altura.*
Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*
O produto pode ter várias imagens organizadas por *cor*. Por isso este tipo de imagem tem uma nomenclatura especial:
<pre>
Imagens da tela de produto:
839103_213_00.jpg
| | | +--- extensão obrigatória
| | +------- numero sequencial para mais de uma imagem por produto/cor
| +---------- código da cor do produto
+---------------- código do produto
</pre>
O produto também pode ter uma imagem especial para uso na galeria. Neste caso o nome da imagem é o próprio código do produto.
_Esta imagem é opcional._
<pre>
Imagem da galeria (opcional):
839103.jpg
| +--- extensão obrigatória
+--------- código do produto
</pre>
Exemplo de e-commerce: https://loja.ibtech.inf.br
*Exemplo Exemplo de imagens de produto:*
Código do Produto: *10082*
Código da Cor: *AZU*
Sequência da Foto: *01*
Nome da Imagem: *10082_AZU_01.jpg*
!cor1.png!
Código do Produto: *10082*
Código da Cor: *SAL*
Sequência da Foto: *01*
Nome da Imagem: *10082_SAL_01.jpg*
!cor2.png!
B2B: https://b2b.ibtech.inf.br