Zonas seguras nas redes sociais: o que a app tapa no teu design

As zonas seguras das redes sociais são as partes de um post que nenhuma interface tapa. Nos formatos verticais, o perigo está no topo, onde ficam nomes e barras de progresso, no fundo, onde ficam legendas e campos de resposta, e, nos Reels, no TikTok e nos Shorts, na margem direita, por onde correm os botões de gostar e partilhar. Deixa o fundo preencher o enquadramento todo e mantém cada palavra, logótipo e rosto dentro da área segura.

Zonas seguras para vídeo vertical e stories

Todos estes formatos partilham o enquadramento de 1080×1920, mas as sobreposições diferem. Os valores abaixo são margens de trabalho, arredondadas por excesso de propósito, tiradas da forma como cada app organiza a interface e das indicações que as plataformas dão aos anunciantes. Não são medições oficiais, e todas as apps mexem nisto entre versões e formatos de ecrã.

Se só fores lembrar uma regra, que seja esta: em qualquer vídeo vertical, mantém o conteúdo importante dentro de uma caixa central com cerca de 800 píxeis de largura e 1150 de altura, a começar a uns 250 píxeis do topo. Essa caixa respeita todas as margens da tabela. Há mais detalhe por plataforma em tamanho do story do Instagram, tamanho da capa do TikTok e tamanho da capa do YouTube Shorts.

O que ocupa cada zona

Saber o que tapa cada margem ajuda a decidir o que pode ficar perto dela. Fundos, texturas e a cauda de um gradiente podem ficar por baixo da interface. Palavras, preços, logótipos e rostos não.

A legenda é a traiçoeira. Uma legenda curta ocupa duas linhas, mas quando o espectador toca nela, expande-se para cima, sobre o vídeo. Se o teu texto estiver baixo no enquadramento, uma legenda longa vai tapá-lo.

Zonas seguras em banners e cabeçalhos

Os banners largos não têm botões por cima, mas têm outros dois problemas: uma foto de perfil que cobre parte da imagem e cortes diferentes em telemóveis e computadores.

O YouTube é o caso extremo: a arte de canal é uma imagem enorme de 2560×1440, mas os telemóveis mostram apenas uma faixa estreita do meio. Os nossos guias do banner do LinkedIn e do banner do YouTube mapeiam as áreas exatas.

Os posts do feed e as miniaturas também têm zonas seguras

• Grelha do perfil do Instagram: os posts aparecem como mosaicos 3:4 cortados a partir do centro. Um post de 1080×1350 perde uma tira de cada lado; a capa de um Reel perde cerca de 240 píxeis em cima e em baixo. Vê o corte da grelha do Instagram.
• Miniaturas do YouTube: a duração do vídeo fica no canto inferior direito, por isso mantém rostos e texto longe dela.
• Carrosséis: os pontos ficam mesmo por baixo da imagem, mas algumas apps sobrepõem um contador de diapositivos no canto superior direito.
• Pins do Pinterest: os botões de guardar e o título do pin aparecem ao passar o rato e por baixo do pin, por isso deixa a margem inferior calma.

Como incluir as zonas seguras no teu fluxo de trabalho

1. 1

   Cria uma camada de guia uma vez

   Em cada modelo, desenha a caixa segura como uma camada de guia bloqueada. Mantém-na visível enquanto desenhas e esconde-a antes de exportar.

2. 2

   Desenha para a plataforma mais exigente

   Se um design vertical for para Stories, Reels e TikTok, usa as margens do TikTok. Fica seguro em todo o lado.

3. 3

   Deixa o fundo sangrar

   As zonas tapadas continuam a mostrar o teu fundo. Leva cor e textura até todas as margens para o enquadramento nunca parecer encaixotado.

4. 4

   Deixa um espaço para autocolantes

   Se fores acrescentar um autocolante de ligação ou de sondagem na app, deixa uma área vazia no meio inferior da caixa segura.

5. 5

   Pré-visualiza com a interface ligada

   Publica para um público privado ou para amigos chegados, ou guarda um rascunho e vê-o em ecrã inteiro. É a única verificação verdadeira.

O Gradiently ajuda em duas frentes. Quando redimensionas um design para outros formatos com o Pro, cada cópia é reorganizada para a sua forma em vez de cortada, por isso só tens de empurrar o texto para dentro da caixa segura. O Mark por trás preenche o enquadramento todo, incluindo as zonas da interface, e mantém a sua área mais calma e de melhor contraste atrás do teu texto, para onde quer que o mudes. O texto sobre gradiente trata do lado da legibilidade em detalhe.