Dimensões dos Banners para o APP Commerce 🖼️
- Lukas Burda Ferreira
O que são banners? 🤔
Banners são campos de imagens (jpeg, png, gif) que servem como mídia de comunicação para ações de marketing, promoções, divulgação de produtos e lançamentos.
Nos aplicativos da Neomode, temos alguns campos de banners, sendo eles:
Banners de Carrossel;
Banners de Corpo;
É importante ter em mente que banners são uma das formas mais visuais e fáceis de chamar a atenção dos seus clientes no aplicativo, seja pela beleza de imagens, seja pelos valores de promoções, ou pela identificação de produtos chave de sua marca.
Os aplicativos da Neomode possuem algumas medidas definidas para cada tipo de banner, sendo assim, é importante lembrar que os banners devem respeitar principalmente a proporção entre altura e largura para não existirem distorções dentro do APP.
Relembramos que alguns formatos de banners estão disponíveis apenas para clientes Top Account, sendo importante informar isso de forma clara aos clientes.
Qual o melhor tipo de arquivo para seus banners? 📐
Os apps Neomode aceitam diferentes extensões de imagem, sendo elas: JPEG, JPG, PNG e GIF. Mas qual a diferença delas e qual é a mais indicada para garantir a performance no aplicativo?
Extensão | Características | Indicações | Em resumo |
|---|---|---|---|
JPEG | Mais adequado para imagens com fotos. O peso dos arquivos tende a ser menor, porque a imagem é comprimida, nesse processo perde um pouco de definição. | Exportar no modo “exportação para web” em qualidade de 72dpi, para garantir a definição da imagem em diferentes dispositivos digitais. |
|
PNG | Possui modos de transparência. Mais indicado para imagens com vetores e fontes. O tamanho das imagens tende a ser maior, o que pode impactar o seu carregamento no aplicativo. | Utilizar para imagens vetoriais. Exportar no modo “exportação para web” em qualidade de 72dpi, para garantir a definição da imagem em diferentes dispositivos digitais. |
|
GIF | Tem suporte para animações e transparência, sendo ideal para pequenos vídeos e imagens vetoriais animadas. Seu formato não tem compressão de arquivo, sendo que a imagem não perde informações no salvamento. | Limite o arquivo a 15s, idealmente tendo entre 1~5s para melhor performance. Recomendamos uma resolução de 480p, para evitar longos carregamentos, podendo ter no máximo 720p. Reduza a quantidade de frames entre 100-200. |
|
A figura abaixo, do site Ignition Drawing, demonstra muito bem o comportamento dos três tipos de imagem aos quais nos referimos na tabela.
Sendo assim, para melhor carregamento e performance do APP, nós recomendamos a utilização de imagens no formato .jpg, salvas para web. No Adobe Photoshop, Adobe Illustrator e editores similares de imagens, existe o modo “exportação para web”, que reduz o tamanho das imagens, mantendo sua qualidade. Sendo assim, sugerimos que ao exportar seus arquivos para web, selecione o formato formato JPG e qualidade 72dpi, a não ser que se trate de uma imagem vetorial.
Banners de Carrossel 🎠🎠
Os banners de Carrossel ficam no topo da tela inicial do app, fixos. São um conjunto de banners em carrossel horizontal, em que o usuário puxa para o lado para ver as demais promoções.
Esse tipo de banner é ideal para apresentar promoções, novas coleções, lançamentos etc. A seguir, estão presentes as proporções de cada um dos banners de carrossel disponíveis, suas proporções e tamanhos sugeridos para melhor qualidade e desempenho.
Tipo | Proporção | Tamanho (em pixels) | Margens |
|---|---|---|---|
Vertical | 10:16 | 1200x1920 | 120px (em cada lado) |
Vertical | 3:4 | 1080x1440 | 120px (em cada lado) |
Horizontal | 4:3 | 1440×1080 | 120px (em cada lado) |
O exemplo abaixo demonstra como uma mesma imagem pode ser afetada pelos diferentes tipos de proporção de banner, além de apresentar como cada tipo de carrossel preenche a tela do aplicativo
Margens de Segurança ⛑️
Para garantir que seu banner funcione em todos os tipos diferentes de smartphones, sugerimos algumas boas práticas, que reduzem as possibilidades de cortes indesejados de imagens e de má leitura dos materiais. Além disso, existe um marcador de quantidade de banners fixo na parte inferior de cada banner, sendo importante evitar inserir informações escritas nessa área.
Por conta disso, sugerimos que haja uma margem de segurança (em azul) de 120px (para os tamanhos sugeridos) em cada lado do banner, sem informações relevantes para o usuário. A área segura (em cinza), é onde todo o conteúdo escrito ou relevante do banner deve estar contido. Os exemplos, com um “quadrado laranja”, demonstram a aplicação da nossa indicação, apresentando todas as informações dentro da área segura.
Banners de Corpo 💎
Os banners de corpo, diferente dos banners de carrossel, ficam “fixos” ao corpo da página, na posição escolhida pelo painel. Eles se apresentam de modo a “um ficar embaixo do outro”. São ideais para apresentar coleções, descontos, promoções e categorias principais da sua marca.
Abaixo consta uma tabela dos tipos de banners de corpo disponíveis para utilização, com suas proporções e tamanhos mais adequados para uma boa performance e definição no app.
Tipo | Proporção | Tamanho (em pixels) | Margens |
|---|---|---|---|
Horizontal | 4:3 | 1024×768 | 90px (em cada lado) |
Vertical | 3:4 | 768x1024 | 90px (em cada lado) |
Quadrado | 1:1 | 1024x1024 | 90px (em cada lado) |
Horizontal (Tarja) | 8:3 | 1024x384 | 90px (em cada lado) |
O exemplo abaixo demonstra como uma mesma imagem pode ser afetada pelos diferentes tipos de proporção de banner, além de apresentar como cada variação preenche a tela do aplicativo
Margens de Segurança ⛑️
Para garantir que seu banner funcione em todos os tipos diferentes de smartphones, sugerimos algumas boas práticas, que reduzem as possibilidades de cortes indesejados de imagens e de má leitura dos materiais.
Por conta disso, sugerimos que haja uma margem de segurança (em azul) de 90 pixels em cada lado do banner (para os tamanhos sugeridos acima), que não deve conter informações relevantes para o usuário, ou seja, informações que podem ser cortadas ou perdidas dependendo da tela do usuário.
A área segura (em cinza), é onde todo o conteúdo escrito ou importante do banner deve estar contido. Os exemplos, com um “quadrado laranja”, demonstram a aplicação da nossa indicação, apresentando todas as informações dentro da área segura.
Afinal, como fica isso no app? 📱
Por enquanto, temos apenas algumas combinações de banners disponíveis no app, mas nas próximas atualizações será possível combinar tamanhos diferentes de banners de corpo no aplicativo.
Ou seja, atualmente é possível escolher apenas um tipo de banner de carrossel e apenas um tipo de banner de corpo por home, o que são cerca de doze combinações de home possíveis!
Ao escolher uma combinação de banners, é MUITO importante manter as proporções das imagens de acordo com as definições apresentadas. Não use tamanhos diferentes para banners diferentes.
ex: Se optou pela medida de banner de carrossel 10:16, crie todas as artes na mesma proporção e, se a opção 3:4 foi a selecionada para banner de corpo, todas as artes devem ter as mesmas proporções.
Banner Carrossel 3:4 e Banner Corpo 3:4 | Banner Carrossel 3:4 e Banner Corpo 1:1 | Banner Carrossel 3:4 e Banner Corpo 4:3 | Banner Carrossel 3:4 e Banner Corpo Tarja |
|---|---|---|---|
|
|
|
|
Banner Carrossel 10:16 e Banner Corpo 3:4 | Banner Carrossel 10:16 e Banner Corpo 1:1 | Banner Carrossel 10:16 e Banner Corpo 4:3 | Banner Carrossel 10:16 e Banner Corpo Tarja |
|---|---|---|---|
|
|
|
Banner Carrossel 4:3 e Banner Corpo 3:4 | Banner Carrossel 4:3 e Banner Corpo 1:1 | Banner Carrossel 4:3 e Banner Corpo 4:3 | Banner Carrossel 4:3 e Banner Corpo Tarja |
|---|---|---|---|
|
|
|
|
Outras configurações 🔧
Além dos diferentes modelos de banners, é possível ainda selecionar outras opções para banners de corpo, como:
Margem: uma margem para os banners em relação às extremidades da tela do dispositivo e ao banner que está acima e/ou abaixo, de 16px;
Distância: pode-se também selecionar uma distância entre os banners, sendo: (0px - 16px - 24px - 32px)
Distância 0px Sem margem | Distância 16px Sem margem | Distância 24px Sem margem | Distância 32px Sem margem | Distância 0px 16px de margem | Distância 16px 16px de margem |
|---|---|---|---|---|---|
|
|
|
|
|
Por hoje é isso! Esperamos que este guia tenha sido útil!
Com carinho, Equipe de Produto ❤️