# Zonas seguras das redes sociais: onde o app cobre seu design

[Canonical HTML page](https://gradiently.design/pt-br/guide/social-media-safe-zones)

Cada plataforma pinta botões, nomes e legendas por cima do seu design. Esta é uma referência única de onde eles caem, com margens que você pode embutir em todo template.

## The short version

- As zonas seguras das redes sociais são as áreas de um design que a interface do próprio app nunca cobre, em qualquer celular.
- Num quadro vertical de 1080×1920, uma regra prática comum é manter o texto fora de cerca de 250 pixels do alto e 250 pixels da base de um story.
- Reels, TikTok e YouTube Shorts levam uma legenda ao longo da base e botões na lateral direita, então pedem uma margem inferior mais funda e também uma margem direita.
- Os banners têm suas próprias zonas cobertas: a foto de perfil sobrepõe a parte inferior esquerda dos cabeçalhos do LinkedIn e do X, e os celulares cortam as laterais das capas do Facebook.
- As interfaces mudam com as atualizações dos apps e variam entre celulares, então trate qualquer medida de zona segura como um guia generoso e confira postando em privado primeiro.

As **zonas seguras das redes sociais** são as partes de um post que nenhuma interface de app cobre. Nos formatos verticais, o perigo está no alto, onde ficam nomes e barras de progresso, na base, onde ficam legendas e campos de resposta, e, em Reels, TikTok e Shorts, na borda direita, onde correm os botões de curtir e compartilhar. Deixe o fundo preencher o quadro inteiro e mantenha cada palavra, logo e rosto dentro da área segura.

## Zonas seguras para vídeo vertical e stories

Todos esses formatos compartilham o quadro de 1080×1920, mas as sobreposições diferem. As medidas abaixo são margens de trabalho, arredondadas para cima de propósito, tiradas de como cada app organiza sua interface e das orientações que as plataformas dão aos anunciantes. Não são medidas oficiais, e todo app muda as coisas entre versões e formatos de tela.

| Formato | Alto | Base | Laterais |
| --- | --- | --- | --- |
| Story do Instagram | 250 px | 250 px | Cerca de 60 px de cada lado |
| Stories do Facebook e do WhatsApp | 250 px | 250 px | Cerca de 60 px de cada lado |
| Reel do Instagram | 250 px | Cerca de 420 px | Cerca de 120 px à direita |
| TikTok | Cerca de 150 px | Cerca de 480 px | Cerca de 140 px à direita |
| YouTube Shorts | Cerca de 150 px | Cerca de 420 px | Cerca de 140 px à direita |
| Story do Snapchat | Cerca de 250 px | Cerca de 300 px | Cerca de 60 px de cada lado |

Margens de trabalho num quadro de 1080×1920. Generosas de propósito: o custo de ser cuidadoso demais é um pouco de espaço vazio, o de ser descuidado é um título escondido.

Se você lembrar de uma só regra, que seja esta: em qualquer vídeo vertical, mantenha o conteúdo importante dentro de uma caixa central de cerca de 800 pixels de largura e 1.150 de altura, começando a uns 250 pixels do topo. Essa caixa respeita todas as margens da tabela. Mais detalhes por plataforma estão em [tamanho de story do Instagram](https://gradiently.design/pt-br/guide/instagram-story-size), [tamanho de capa do TikTok](https://gradiently.design/pt-br/guide/tiktok-cover-size) e [tamanho de capa do YouTube Shorts](https://gradiently.design/pt-br/guide/youtube-shorts-cover-size).

- Quadro inteiro 1080×1920: 1080 × 1920
- Seguro em todo app 800×1150: 800 × 1150
- Corte da grade 1080×1440: 1080 × 1440

O quadro vertical inteiro, a caixa que é segura em todo lugar e a fatia 3:4 que o Instagram mostra na grade do perfil. Planeje para as três ao mesmo tempo.

## O que fica em cada zona

Saber o que cobre cada borda ajuda a decidir o que pode ficar perto dela. Fundos, texturas e a ponta de um gradiente podem ficar sob a interface. Palavras, preços, logos e rostos, não.

### Alto e base de um story

- Barra de progresso e foto de perfil
- Nome da conta e hora da postagem
- Botões de fechar e de menu
- Campo de resposta e botão de compartilhar
- Stickers de link que você acrescenta no app

### Base e direita de um Reel ou TikTok

- Legenda, que cresce quando tocada
- Nome da conta e botão de seguir
- Rótulo de áudio ou som
- Botões de curtir, comentar, compartilhar e salvar
- A própria barra de navegação do app

A legenda é a traiçoeira. Uma legenda curta ocupa duas linhas, mas quando o espectador a toca, ela se expande para cima sobre o vídeo. Se o seu texto fica baixo no quadro, uma legenda longa vai cobri-lo.

Um post vertical com o título no meio superior do quadro, bem longe das bordas

Palavras na caixa segura, mais ou menos no meio superior. Nada importante perto da base ou da direita.

Um post vertical com uma lista curta mantida à esquerda e ao centro do quadro

Um layout de lista mantido à esquerda e ao centro, deixando livre a borda direita para os botões do app.

## Zonas seguras em banners e cabeçalhos

Banners largos não têm botões por cima, mas têm outros dois problemas: uma foto de perfil que sobrepõe parte da imagem e cortes diferentes em celulares e desktops.

| Banner | Tamanho | Mantenha livre |
| --- | --- | --- |
| Banner de perfil do LinkedIn | 1584×396 | Parte inferior esquerda, onde fica a foto de perfil |
| Cabeçalho do X | 1500×500 | Parte inferior esquerda e as bordas de cima e de baixo |
| Capa do Facebook | 1640×624 | Laterais externas em celulares e a faixa de baixo |
| Arte de canal do YouTube | 2560×1440 | Tudo fora da faixa central mostrada em todos os dispositivos |
| Capa de página de empresa do LinkedIn | 2256×382 | Parte inferior esquerda, onde fica o logo da empresa |

Banners são quase só fundo. Ponha palavras no centro e à direita, longe do avatar.

O YouTube é o caso extremo: a arte do canal é uma imagem enorme de 2560×1440, mas os celulares mostram só uma faixa estreita do meio. Nossos guias do [banner do LinkedIn](https://gradiently.design/pt-br/guide/linkedin-banner-size) e do [banner do YouTube](https://gradiently.design/pt-br/guide/youtube-banner-size) mapeiam as áreas exatas.

## Posts de feed e miniaturas também têm zonas seguras

- **Grade de perfil do Instagram:** os posts aparecem como blocos 3:4 cortados do centro. Um post de 1080×1350 perde uma lasca de cada lado; a capa de um Reel perde cerca de 240 pixels em cima e embaixo. Veja o [corte da grade do Instagram](https://gradiently.design/pt-br/guide/instagram-profile-grid-crop).
- **Miniaturas do YouTube:** a duração do vídeo fica no canto inferior direito, então mantenha rostos e palavras fora dele.
- **Carrosséis:** os pontos ficam logo abaixo da imagem, mas alguns apps sobrepõem um contador de slides no canto superior direito.
- **Pins do Pinterest:** os botões de salvar e o título do pin aparecem ao passar o mouse e abaixo do pin, então deixe a borda inferior calma.

## Como embutir as zonas seguras no seu fluxo de trabalho

1. **Faça uma camada-guia uma vez** Em cada template, desenhe a caixa segura como uma camada-guia travada. Deixe-a visível enquanto cria e oculte-a antes de exportar.
2. **Crie para a plataforma mais exigente** Se um design vertical vai para Stories, Reels e TikTok, use as margens do TikTok. Assim ele é seguro em todo lugar.
3. **Deixe o fundo sangrar** As zonas cobertas ainda mostram seu fundo. Leve cor e textura até todas as bordas para o quadro nunca parecer encaixotado.
4. **Deixe uma folga para o sticker** Se você vai acrescentar um sticker de link ou de enquete no app, deixe uma área vazia no meio inferior da caixa segura.
5. **Veja a prévia com a interface ligada** Poste para um público privado ou de melhores amigos, ou salve um rascunho e veja em tela cheia. É a única verificação de verdade.

O Gradiently ajuda em duas frentes. Quando você redimensiona um design para outros formatos com o Pro, cada cópia é diagramada de novo para a sua forma em vez de cortada, e você só ajusta as palavras para dentro da caixa segura. O Mark por trás preenche o quadro inteiro, zonas da interface incluídas, e mantém sua área mais calma e de melhor contraste atrás das palavras onde quer que elas se movam. O [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) trata do lado da legibilidade em detalhe.

## FAQ

### O que são zonas seguras das redes sociais?

São as partes de um post que nenhuma interface de app cobre. Texto, logos e rostos pertencem a elas; os fundos podem passar além.

### Qual é a zona segura dos Reels do Instagram?

Como regra prática num quadro de 1080×1920, mantenha o texto fora dos 250 pixels de cima, dos 420 pixels de baixo e dos 120 pixels da direita, onde ficam a legenda e os botões.

### Qual é a zona segura do TikTok?

O TikTok cobre a base com a legenda e o rótulo do som e a direita com seus botões. Manter o texto fora de cerca de 480 pixels da base e 140 da direita de um quadro de 1080×1920 é um guia seguro.

### Existe uma zona segura que funcione em todas as plataformas verticais?

Mais ou menos. Uma caixa central de cerca de 800 pixels de largura e 1.150 de altura, começando a uns 250 pixels do topo de um quadro de 1080×1920, fica livre em Stories, Reels, TikTok e Shorts.

### As zonas seguras mudam?

Mudam. Os apps redesenham suas interfaces e os celulares têm formas diferentes, então trate as medidas como guias generosos e veja a prévia de cada post com a interface à mostra.