Sebenta · Conceber e produzir suportes gráficos de comunicação digital (UC00286)

Introdução

Esta sebenta ensina a conceber, produzir, publicar e manter os suportes gráficos digitais de uma organização: o website, os posts e stories das redes sociais, os banners de publicidade, as newsletters, as apresentações digitais e os vídeos curtos. Não é um manual de um programa específico — é um manual de método. As ferramentas mudam de três em três anos; o raciocínio que aqui aprendes dura uma carreira.

A diferença fundamental entre o digital e o físico é esta: o digital é corrigível, mensurável e infinitamente variável. Um cartaz impresso é o mesmo cartaz para toda a gente e não se corrige. Um banner pode ser trocado às 11h da manhã porque as métricas da manhã não estavam boas, pode aparecer diferente num telemóvel e num portátil, e pode ser servido só a mulheres dos 25 aos 34 anos da área de Setúbal. Isto traz duas consequências para quem desenha: nunca sabes exatamente onde a tua peça vai ser vista (que ecrã, que tamanho, que luz, que velocidade de ligação) e és responsável por provar que resultou.

O percurso desta sebenta é o de um profissional real. Primeiro percebemos o que são os suportes digitais e como se ligam à estratégia da empresa. Depois dominamos a matéria-prima — píxeis, cor-luz, tipografia de ecrã, grelhas, imagem. A seguir entramos no desenho de interfaces e experiência (UI/UX): fluxos, arquitetura de informação, protótipos e testes com pessoas. Depois produzimos as peças concretas para web e redes sociais, garantimos acessibilidade e conformidade legal, e terminamos com o que quase todos esquecem: medir o impacto e atualizar os suportes.

Objetivos de aprendizagem (referencial): colaborar na definição da estratégia de comunicação digital da empresa; colaborar no desenvolvimento dos suportes de comunicação digital; produzir suportes de comunicação digital; avaliar o impacto da comunicação digital na estratégia da empresa; e atualizar os suportes de comunicação digital da empresa.

No fim desta UC deves conseguir: analisar os suportes digitais que uma empresa já tem e dizer o que está mal e porquê; transformar um pedido vago num briefing com métrica; desenhar e produzir um conjunto coerente de peças digitais; entregá-las nos formatos e pesos corretos; verificar a acessibilidade; e apresentar um relatório de impacto com uma proposta de melhoria.

1. O que é um suporte de comunicação digital

Um suporte de comunicação digital é qualquer peça de comunicação que existe em ficheiro e é consumida através de um ecrã ligado — telemóvel, computador, tablet, televisão, ecrã de montra, quiosque.

Três elementos definem qualquer suporte, digital ou não:

No digital acrescentam-se três características que não existem no papel:

1. Interatividade — o utilizador pode clicar, deslizar, escrever, comprar. A peça não é só vista: é usada.
2. Mensurabilidade — cada visualização, clique e conversão fica registada. Deixa de haver desculpa para não saber se funcionou.
3. Mutabilidade — a peça pode ser corrigida, substituída ou personalizada em minutos, sem custo de reimpressão.

Ideia-chave. No papel, o design termina quando o ficheiro vai para a gráfica. No digital, o design começa quando a peça é publicada — porque a partir daí há dados, e os dados obrigam a decidir outra vez.

O mapa dos suportes digitais

O referencial elenca os tipos principais. Vale a pena arrumá-los por função, porque é a função que determina o desenho:

Esta arrumação corresponde a uma distinção clássica que deves saber nomear:

• Meios próprios (owned): site, blog, lista de email, perfis sociais. Custo baixo, controlo total, alcance limitado a quem já te procura.
• Meios pagos (paid): anúncios display, social ads, vídeo pré-roll. Alcance imediato e segmentável, desaparece quando o orçamento acaba.
• Meios ganhos (earned): partilhas, menções, notícias, comentários. Credibilidade máxima, controlo zero.

Uma estratégia digital saudável usa os três: os pagos trazem gente nova, os próprios convertem e fidelizam, os ganhos multiplicam.

Exemplo resolvido 1.1 — arrumar os suportes de uma empresa

Situação. Um ginásio de bairro tem: página de Facebook (posts esporádicos), Instagram (1 post/semana), um site feito há 6 anos, um grupo de WhatsApp com sócios e cartazes na montra.

Análise.

Conclusão. Não falta presença, falta coerência e função. Antes de criar mais peças, há que arranjar o site (responsivo + marcação) e definir um sistema visual que sirva todos os suportes. Criar um TikTok agora seria acrescentar mais uma peça solta a um conjunto que já não encaixa.

2. Da estratégia da empresa ao briefing digital

Um suporte gráfico nunca é um fim em si. Existe porque há um objetivo, e o objetivo existe porque há uma estratégia. Quem desenha sem esta cascata está a decorar o vazio.

A cascata

Estratégia de negócio      →  "Aumentar 20% as inscrições de manhã"
Estratégia de comunicação  →  "Posicionar as aulas da manhã como o hábito
                              de quem trabalha por turnos"
Objetivo do suporte        →  "Levar residentes 25–45 a marcar uma aula
                              experimental nas próximas 4 semanas"
Peça digital               →  Landing page + 6 posts + 2 stories + anúncio
                              social segmentado a 3 km

Cada nível explica o seguinte. Se não consegues subir a cascata a partir da peça, a peça não devia existir.

O briefing digital — as 10 perguntas

O briefing físico tem 9 perguntas. O digital acrescenta uma décima, decisiva:

1. Quem é a empresa e o que a distingue?
2. Qual é o objetivo de negócio por trás?
3. A quem falamos? (idade, contexto, momento do dia, dispositivo)
4. Qual é a mensagem principal, numa frase?
5. Que ação queremos? (o call to action)
6. Que suportes e em que plataformas?
7. Que restrições? (manual de marca, tom, legais)
8. Que orçamento?
9. Que prazo?
10. Como se mede o sucesso? — que métrica, com que valor-alvo e recolhida onde.

A pergunta 10 é a que separa o amador do profissional. "Fazer um post bonito" não é objetivo. "Conseguir 40 marcações através do link da bio em 4 semanas" é.

Objetivos SMART aplicados ao digital

Um objetivo útil é SMART: eSpecífico, Mensurável, Atingível, Relevante, Temporizado.

Público-alvo e persona

Uma persona é uma personagem-síntese que representa o público. Não é ficção decorativa: é uma ferramenta de decisão.

Marta, 34 anos, técnica de laboratório, Barreiro. Entra às 8h, sai às 16h30. Usa o telemóvel no comboio (dados móveis, som desligado). Segue contas de comida e ginásio, nunca comenta. Decide em 2 segundos se guarda ou passa à frente.

Desta persona saem decisões de design concretas: o post tem de ser legível a 5 cm de largura; o vídeo tem de ter legendas; a página tem de carregar em rede móvel lenta; o texto tem de ser digerível no meio de uma viagem de comboio.

Exemplo resolvido 2.1 — de pedido vago a briefing

Pedido do cliente: "Preciso de mexer nas redes sociais, aquilo está parado."

Cinco perguntas a fazer: (1) O que é que ganhas se as redes melhorarem — vendas, marcações, notoriedade? (2) Quem são os teus melhores clientes atuais? (3) Qual é a coisa que a concorrência não pode dizer sobre si própria e tu podes? (4) Quem produz o conteúdo no dia a dia e com que tempo? (5) O que consideras um bom resultado daqui a três meses?

Briefing resultante: Clínica de fisioterapia no Montijo. Objetivo de negócio: encher os horários das 14h–17h (30% de ocupação). Objetivo de comunicação: ser reconhecida como a clínica que explica e previne, não só a que trata. Público: adultos 30–55, trabalho sedentário, dor lombar recorrente, decidem por confiança e proximidade. Mensagem: "A tua dor de costas tem explicação — e tem solução." Ação: marcar avaliação inicial gratuita. Suportes: 12 posts educativos (formato carrossel), 8 stories com perguntas, 1 landing page com formulário, 1 anúncio segmentado a 5 km. Restrições: paleta e logótipo do manual; sem imagens de bancos de imagens genéricos; linguagem sem promessas de cura. Orçamento: 300 € de anúncios + 20h de produção. Prazo: 6 semanas. Métrica: 25 marcações de avaliação atribuídas à campanha (link exclusivo + pergunta "como nos conheceu").

3. Ecrãs, píxeis e cor-luz

Píxel, resolução e densidade

Um ecrã é uma grelha de píxeis — pequenos pontos que emitem luz. Um ficheiro raster (uma fotografia, por exemplo) é também uma grelha de píxeis. Quando os dois coincidem bem, a imagem parece nítida.

Três conceitos que se confundem sempre:

Nos ecrãs modernos, um "píxel CSS" pode corresponder a 2 ou 3 píxeis físicos — é o DPR (device pixel ratio). Por isso uma imagem que ocupa 400 px de largura numa página deve ser exportada com 800 px (2×) para ficar nítida num ecrã Retina.

Regra prática. Exporta as imagens de web a 2× o tamanho de exibição, e comprime bem. Uma imagem 2× muito comprimida fica melhor do que uma imagem 1× pouco comprimida.

Os 300 ppi da impressão não se aplicam ao ecrã. No digital, o que conta é o número absoluto de píxeis; o campo "ppi" do ficheiro é ignorado pelo browser.

Cor: RGB, HEX, HSL

O papel usa CMYK (tinta que absorve luz — síntese subtrativa). O ecrã usa RGB (luz emitida — síntese aditiva): vermelho + verde + azul a 100% dá branco.

O HSL é o mais útil para desenhar sistemas: fixas o matiz e mexes só na luminosidade para obteres a versão clara e a escura da mesma cor. É assim que se constrói uma paleta que não desafina.

Construir uma paleta digital

Uma paleta de trabalho tem tipicamente:

• 1 cor primária — a da marca, usada em botões e elementos de ação.
• 1 cor secundária/acento — para destaques pontuais.
• 1 escala de neutros — 5 a 7 cinzentos, do quase-branco ao quase-preto. É onde vive 80% da interface.
• 4 cores de estado — sucesso (verde), erro (vermelho), aviso (amarelo), informação (azul).

Erro típico do principiante: paletas com seis cores fortes e nenhum cinzento. Resultado: interface aos gritos onde nada se destaca porque tudo se destaca.

Modo escuro

Muitos utilizadores usam o telemóvel em modo escuro. Duas regras:

• Não inverter simplesmente. Preto puro (#000) com branco puro (#FFF) cansa a vista e provoca halo. Usa #121212–#1E1E1E para fundo e #E8E8E8 para texto.
• Reduzir a saturação das cores fortes em fundo escuro, senão vibram.

Exemplo resolvido 3.1 — do logótipo à paleta

Dado: o logótipo da clínica é verde-azulado #1F7A6B.

Construção:

Verificação obrigatória: texto branco sobre #1F7A6B dá contraste 4,7:1 → passa no mínimo de 4,5:1 (ver capítulo 10). Texto branco sobre #E08A3C dá 2,1:1 → chumba; nesse botão o texto tem de ser escuro.

4. Tipografia para ecrã

Por que é diferente do papel

O papel tem resolução altíssima e não muda de tamanho. O ecrã tem menos resolução, brilha, e o mesmo texto tem de funcionar num telemóvel de 5 cm e num monitor de 27".

Consequências:

• Fontes com traço muito fino desaparecem no ecrã, sobretudo em fundo escuro.
• Corpos pequenos (abaixo de 14 px) são penosos no telemóvel.
• A largura da linha tem de ser controlada: 45 a 75 caracteres por linha é a zona confortável. Linhas de 150 caracteres num monitor grande são ilegíveis.

Escala tipográfica

Não escolhas tamanhos ao acaso. Define uma escala e usa só esses valores:

16 px é o mínimo profissional para texto corrente na web. O corpo de 16 px no ecrã é o equivalente ao 10–11 pt no papel.

Outros valores que definem legibilidade:

• Entrelinha (line-height): 1,5 a 1,6 para texto corrente; 1,1 a 1,2 para títulos grandes.
• Espaçamento entre letras: ligeiramente negativo em títulos grandes; positivo em maiúsculas pequenas.
• Peso: usa 2 ou 3 pesos (por exemplo Regular 400, Semibold 600, Bold 700). Mais do que isso é ruído.

Fontes de sistema, web fonts e desempenho

• Fontes de sistema (a system stack): carregam instantaneamente, não custam nada em peso, mas cada dispositivo mostra a sua.
• Web fonts (Google Fonts, Fontshare, ficheiros próprios): identidade consistente, mas pesam. Cada peso e cada estilo é um ficheiro.

Boas práticas: usa formato WOFF2 (o mais leve), carrega só os pesos que usas, e usa font-display: swap para o texto aparecer imediatamente com uma fonte de recurso enquanto a definitiva carrega.

Licenças. Nem toda a fonte pode ser usada num site. Uma licença desktop não cobre webfont. Confirma sempre — é um erro caro e comum.

Pares tipográficos que funcionam

Regra: contraste sim, conflito não. Duas fontes muito parecidas parecem um erro; duas muito diferentes em género (uma serifada e uma não-serifada) funcionam quase sempre.

5. Layout, grelha e design responsivo

A grelha

Uma grelha é o esqueleto invisível que alinha tudo. Na web, a convenção é a grelha de 12 colunas (divisível por 2, 3, 4 e 6 — logo, flexível).

Elementos da grelha: colunas, goteiras (o espaço entre colunas, tipicamente 16–24 px) e margens exteriores.

Ao lado da grelha vive o sistema de espaçamento: escolhe uma base (8 px é o padrão) e usa só múltiplos — 8, 16, 24, 32, 48, 64. Isto elimina as decisões arbitrárias e faz com que tudo pareça propositado.

Hierarquia visual

O olho não lê tudo: percorre. As ferramentas para o guiar:

1. Tamanho — o maior é visto primeiro.
2. Peso e cor — o mais escuro/saturado salta.
3. Espaço — o que tem espaço à volta ganha importância.
4. Posição — o canto superior esquerdo é lido primeiro (em português).
5. Contraste — a diferença chama a atenção, não a quantidade.

Dois padrões de leitura úteis: o padrão F (páginas com muito texto — o utilizador varre as primeiras linhas e depois desce pela esquerda) e o padrão Z (páginas simples e cartazes digitais — canto superior esquerdo → superior direito → diagonal → inferior direito, onde deve estar o botão).

Design responsivo

Um suporte digital é visto em ecrãs de 320 px a 2560 px. Há três abordagens; só uma é aceitável hoje:

Mobile first: desenha primeiro para o ecrã pequeno e depois acrescenta. É mais fácil expandir do que amputar — e obriga a hierarquizar a informação desde o início, porque no telemóvel não cabe tudo.

Pontos de rutura (breakpoints) típicos:

Regra prática do toque: qualquer elemento clicável no telemóvel deve ter pelo menos 44 × 44 px de área de toque. Botões mais pequenos geram erros e frustração.

Exemplo resolvido 5.1 — adaptar uma secção de 3 colunas

Situação. Uma secção "Os nossos serviços" com 3 cartões lado a lado no computador.

Solução responsiva:

O erro comum seria manter as 3 colunas no telemóvel: cada cartão ficaria com 100 px de largura, com o texto a partir palavras ao meio.

6. Imagem digital: raster, vetor e otimização

As duas naturezas

Regra de ouro: o logótipo é sempre vetorial. Quem entrega um logótipo em JPG está a entregar um problema.

Formatos de web — qual usar quando

Otimizar para web

O peso das imagens é a principal causa de páginas lentas — e páginas lentas perdem visitantes. Um estudo repetido em vários setores mostra que a probabilidade de abandono cresce fortemente a partir dos 3 segundos de carregamento.

Processo de otimização, por ordem:

1. Redimensionar ao tamanho real de exibição (× 2 para ecrãs de alta densidade). Carregar uma foto de 4000 px para a mostrar a 600 px é o erro mais frequente de todos.
2. Escolher o formato certo (WebP para quase tudo).
3. Comprimir: qualidade 75–85 é normalmente indistinguível do original e corta metade do peso. Ferramentas: Squoosh, TinyPNG, ImageOptim, cwebp.
4. Verificar o peso final. Alvos: imagem de conteúdo < 200 KB; imagem principal (hero) < 300 KB; ícone SVG < 10 KB; página inteira < 2 MB.
5. Nomear bem o ficheiro (cabaz-legumes-outono.webp, não IMG_2831.jpg) — conta para SEO e para a organização.
6. Escrever o texto alternativo (ver capítulo 10).

Exemplo resolvido 6.1 — preparar uma fotografia para o site

Dado: DSC_0421.jpg, 6000 × 4000 px, 8,4 MB, tirada com máquina reflex. Vai ser a imagem principal de uma página, exibida a 1200 px de largura.

Passos:

1. Recortar para a proporção do desenho — 16:9 → 6000 × 3375 px.
2. Redimensionar para 2400 × 1350 px (2× os 1200 px de exibição).
3. Ajustar exposição e cor; converter o perfil para sRGB (obrigatório na web — um ficheiro em Adobe RGB aparece dessaturado no browser).
4. Exportar em WebP, qualidade 80 → ≈ 180 KB.
5. Exportar também um JPG de recurso, qualidade 78 → ≈ 260 KB.
6. Renomear: estufa-produtores-locais.webp.
7. Texto alternativo: "Produtor a colher alfaces numa estufa ao amanhecer".

Resultado: de 8,4 MB para 180 KB — 46 vezes mais leve, visualmente idêntico no ecrã.

Direitos de imagem

Nunca uses uma imagem sem saber a licença. Três origens seguras:

• Fotografia própria (ideal — e diferenciadora).
• Bancos gratuitos com licença clara (Unsplash, Pexels, Pixabay) — atenção: são usadas por toda a gente, tornam a marca genérica.
• Bancos pagos (Shutterstock, Adobe Stock, iStock) — licença por utilização, guardar sempre o comprovativo.

Se houver pessoas identificáveis, é preciso autorização escrita de uso de imagem (e, no contexto do RGPD, uma base legal para o tratamento). Fotografias com menores exigem autorização dos representantes legais.

7. Software: o que usar para quê

O referencial fala de softwares de web design e de ferramentas de edição de imagem, vetores e diagramação. O que importa é perceber as famílias — dentro de cada uma, a lógica é a mesma.

Como escolher. Para trabalho de identidade e interface, uma ferramenta vetorial + Figma resolvem quase tudo. Para conteúdo diário de redes sociais, o Canva com modelos da marca é a escolha racional: permite que pessoas não-designers publiquem sem estragar a identidade. Não há prestígio em usar a ferramenta cara — há resultado em usar a certa.

Organização de ficheiros

O que distingue um profissional não é o software, é a arrumação:

projeto-clinica/
├── 01-briefing/
├── 02-pesquisa/            (moodboard, referências)
├── 03-design/
│   ├── logo/               (SVG, AI, PNG em vários tamanhos)
│   ├── ui/                 (ficheiro Figma / exportações)
│   └── social/             (modelos editáveis)
├── 04-exportacoes/
│   ├── web/                (WebP otimizados)
│   └── social/             (PNG/JPG por formato)
└── 05-entrega/             (manual, guia de utilização)

Nomes com versões explícitas (landing_v01, landing_v02, landing_final) e camadas nomeadas. Daqui a seis meses, quem abre o ficheiro (talvez tu) agradece.

8. Design de interfaces e experiência (UI/UX)

UI vs UX

• UX (User Experience, experiência do utilizador): a experiência global de usar o produto. Inclui a facilidade, a rapidez, a confiança, a frustração. Trabalha-se com investigação, fluxos e testes.
• UI (User Interface, interface do utilizador): a camada visível e interativa — botões, cores, tipografia, ícones, espaçamento.

Analogia: numa casa, o UX é a planta (a cozinha fica ao lado da sala de jantar, a casa de banho não dá para a cozinha); o UI é o acabamento (torneiras, tinta, puxadores). Uma casa lindíssima com a planta mal feita é uma má casa.

Princípios de design de interfaces

1. Consistência — o mesmo elemento comporta-se sempre da mesma maneira. Os botões primários são todos iguais.
2. Visibilidade do estado — o sistema mostra sempre o que está a acontecer (carregamento, sucesso, erro).
3. Feedback imediato — toda a ação tem resposta visível em menos de 100 ms.
4. Prevenção de erros — é melhor impedir o erro (desativar o botão, validar em tempo real) do que explicá-lo depois.
5. Reconhecer em vez de recordar — as opções estão visíveis; o utilizador não tem de memorizar nada.
6. Controlo do utilizador — há sempre saída, "anular" e "voltar".
7. Economia de esforço — menos campos, menos passos, menos decisões.
8. Hierarquia clara — em cada ecrã há uma ação principal.

Arquitetura de informação

Arquitetura de informação (AI) é a organização e nomeação dos conteúdos para que as pessoas encontrem o que procuram.

Ferramentas:

• Inventário de conteúdos — lista de tudo o que existe.
• Card sorting — dar as páginas em cartões a 5–8 utilizadores e pedir que as agrupem e nomeiem. Revela que a tua arrumação lógica não é a deles.
• Mapa do site (sitemap) — o diagrama da hierarquia.

Regra: menu principal com 5 a 7 entradas, no máximo. E usa as palavras dos utilizadores, não as da empresa ("Marcar consulta", não "Área de agendamento clínico").

Início
├── Serviços
│   ├── Fisioterapia
│   ├── Osteopatia
│   └── Reabilitação desportiva
├── Equipa
├── Preços
├── Blog
└── Marcar consulta      ← ação principal, destacada

Fluxos de utilizador

Um fluxo (user flow) é o caminho da pessoa desde a entrada até completar a tarefa. Desenha-se antes de qualquer ecrã.

Vê anúncio no Instagram
        ↓
Landing page (proposta + prova social)
        ↓
Clica "Marcar avaliação"
        ↓
Formulário (nome, telefone, preferência de horário)   ← 3 campos, não 9
        ↓
Confirmação no ecrã + SMS/email
        ↓
Lembrete 24h antes

Em cada passo pergunta: o que faz esta pessoa desistir aqui? Cada campo a mais no formulário custa conversões. Cada dúvida não respondida ("quanto custa?", "onde é?") custa conversões.

Prototipagem

Trabalha-se por níveis de fidelidade, do barato para o caro:

Erro caríssimo: saltar direto para o mockup a cores. Discute-se a cor do botão durante uma hora quando o problema é que o fluxo tem um passo a mais.

Testes de usabilidade

Um teste de usabilidade é simples e brutalmente eficaz: dá uma tarefa a uma pessoa e observa em silêncio.

Como fazer:

1. Recruta 5 pessoas do público-alvo. (Cinco chegam para encontrar cerca de 85% dos problemas — está demonstrado desde os anos 90; mais pessoas repetem os mesmos achados.)
2. Dá uma tarefa, não instruções: "Queres marcar uma avaliação para a próxima terça de manhã. Mostra-me como farias."
3. Pede que pense em voz alta.
4. Não ajudes. Cada vez que sentes vontade de ajudar, acabaste de encontrar um problema.
5. Regista: onde hesitou, onde clicou no sítio errado, onde desistiu, o que disse.
6. Classifica os problemas por gravidade (impede a tarefa / atrasa / irrita) e corrige por essa ordem.

Métricas úteis: taxa de sucesso (% que completou), tempo até completar, número de erros, e o SUS (System Usability Scale, questionário de 10 perguntas com resultado de 0 a 100 — acima de 68 é considerado acima da média).

Exemplo resolvido 8.1 — corrigir um formulário que não converte

Situação. Formulário de marcação com 9 campos: nome, apelido, email, telefone, data de nascimento, morada, código postal, serviço, mensagem. Taxa de abandono: 78%.

Diagnóstico. Cada campo é uma barreira. Metade não é necessária naquele momento: a morada e a data de nascimento só interessam quando a pessoa chega à clínica.

Solução:

Resultado esperado: abandono a cair para 35–45%. Os dados em falta recolhem-se na chamada de confirmação — no momento em que já não custam conversão.

9. Produzir para web e redes sociais

Formatos das redes sociais

Os formatos mudam; a lógica não. Trabalha sempre em proporções e exporta ao tamanho recomendado.

O formato vertical 4:5 ocupa mais ecrã no telemóvel do que o quadrado — por isso rende mais atenção. É a escolha por omissão para posts de feed.

Zonas seguras dos stories: os primeiros ~250 px do topo e os últimos ~250 px do fundo são tapados pela interface da aplicação (nome de utilizador, barra de resposta). Todo o conteúdo essencial fica no retângulo central.

Banners de publicidade display

Formatos padrão IAB mais usados:

Regras de um banner eficaz: um objetivo, uma mensagem, um botão; logótipo sempre visível; contraste alto; peso abaixo dos 150 KB; se animado, no máximo 3 ciclos e o último quadro contém a mensagem completa (porque é o que fica).

Anatomia de um post que funciona

1. Paragem — a primeira meia dúzia de píxeis tem de travar o polegar: contraste, rosto humano, movimento, número ou pergunta.
2. Promessa — em 3 segundos percebe-se o que se ganha em ficar.
3. Corpo — a informação, dosada. Nos carrosséis: uma ideia por cartão.
4. Ação — o que fazer a seguir, explícito ("Guarda este post", "Link na bio").

Legendas obrigatórias no vídeo: a maioria do consumo é com o som desligado. Vídeo sem legendas é vídeo sem mensagem.

Sistemas e modelos, não peças soltas

O erro de quem começa é desenhar cada post de novo. O profissional constrói um sistema:

• 3 a 5 modelos (templates) reutilizáveis: citação, dica, produto, testemunho, anúncio.
• Regras fixas de paleta, tipografia, posição do logótipo e margens.
• Ficheiros editáveis entregues ao cliente (Canva ou Figma) para o dia a dia.

Resultado: a marca fica reconhecível antes de se ler o nome, e a produção passa de 40 minutos a 5 por peça.

Plataformas e segmentação

Escolher plataforma é escolher público, não seguir moda:

Segmentação na publicidade paga combina: geográfica (raio, cidade), demográfica (idade, sexo), por interesses e comportamentos, por públicos semelhantes (lookalike) e por remarketing (quem já visitou o site). Para um negócio local, um raio de 5 km costuma valer mais do que qualquer interesse sofisticado.

Email marketing

A lista de email é o único público que a empresa realmente possui — nenhum algoritmo o pode tirar.

Regras de produção: largura de 600 px; layout de uma coluna (as duas colunas partem-se no telemóvel); imagens com texto alternativo, porque muitos clientes de email bloqueiam imagens por omissão; nunca pôr a mensagem essencial só dentro de uma imagem; botão bem contrastado com 44 px de altura; assunto com 30–50 caracteres; e link de cancelamento de subscrição visível — obrigatório por lei.

10. Acessibilidade digital

A acessibilidade não é um extra ético opcional: é requisito legal para organismos públicos (Decreto-Lei n.º 83/2018, que transpõe a diretiva europeia), é cada vez mais exigida em concursos, e alarga o público. Cerca de 1 em cada 6 pessoas vive com alguma deficiência — e a acessibilidade beneficia toda a gente: legendas servem quem está no comboio, contraste alto serve quem está ao sol.

A referência técnica são as WCAG (Web Content Accessibility Guidelines), organizadas em quatro princípios — POUR:

As regras que mais dependem de quem desenha

1. Contraste. Rácio mínimo (nível AA):

Verifica com o WebAIM Contrast Checker, o verificador do Figma ou o painel do browser. Texto cinzento-claro sobre branco é o erro de acessibilidade mais comum do mundo.

2. Nunca codificar informação só por cor. "Os campos a vermelho estão errados" exclui quem tem daltonismo (≈ 8% dos homens). Acrescenta sempre ícone, texto ou padrão.

3. Texto alternativo. Toda a imagem informativa precisa de alt descritivo e útil:

4. Texto em imagem. Evita: não é lido por leitores de ecrã, não é pesquisável, não é traduzível e fica pixelizado ao ampliar. Se for inevitável (posts sociais), repete o conteúdo na legenda.

5. Teclado e foco. Tudo o que se faz com rato tem de se poder fazer com Tab e Enter, e o elemento focado tem de ser visível.

6. Legendas e transcrições em todo o vídeo e áudio.

7. Tamanho mínimo e ampliação. 16 px de corpo; a página tem de continuar utilizável com 200% de zoom.

8. Movimento. Nada que pisque mais de 3 vezes por segundo (risco de convulsões); respeitar a preferência de "reduzir movimento" do sistema.

Exemplo resolvido 10.1 — auditoria rápida de um post

Peça: post 1080 × 1080 com fotografia escura, texto branco fino por cima, e "Saber mais" a amarelo-claro no canto.

11. Publicar, medir e atualizar

Publicação — a lista de verificação

Antes de publicar qualquer suporte:

• Formato e dimensões corretos para a plataforma
• Peso otimizado (imagens < 200 KB, banners < 150 KB)
• Ortografia revista por outra pessoa
• Links testados um a um, com parâmetros de medição
• Texto alternativo escrito
• Contrastes verificados
• Testado em telemóvel real, não só no monitor
• Licenças de imagens e fontes confirmadas
• Aprovação do cliente registada por escrito

Medir o impacto

O referencial pede explicitamente que se avalie o impacto da comunicação digital na estratégia da empresa. Não é opinião: são números.

O funil e as métricas de cada etapa:

Valores de referência úteis (variam muito por setor, servem de ordem de grandeza):

Instrumentos: analítica do site (Google Analytics 4, Plausible, Matomo), estatísticas nativas de cada rede, parâmetros UTM nos links (?utm_source=instagram&utm_medium=social&utm_campaign=cabaz-outono) e mapas de calor (Hotjar, Clarity) para ver onde as pessoas clicam e até onde descem.

Vaidade vs valor. Seguidores e gostos são métricas de vaidade se não estiverem ligados ao objetivo. Mil seguidores que nunca compram valem menos que cem que compram. Pergunta sempre: que decisão de negócio muda em função deste número?

Diagnóstico por camadas

Quando um resultado é mau, não mudes tudo ao mesmo tempo. Desce o funil e encontra a camada que falha:

Poucas impressões?      → problema de distribuição/orçamento/segmentação
Muitas impressões,
  poucos cliques?       → problema de criativo (imagem, título, oferta)
Muitos cliques,
  poucas conversões?    → problema da página de destino (promessa não corresponde,
                          formulário longo, lentidão, falta de confiança)
Muitas conversões,
  pouco valor?          → problema de público (atraímos quem não compra)

Testes A/B

Um teste A/B mostra duas versões a públicos equivalentes e compara. Regras: mudar uma coisa de cada vez (senão não sabes o que causou o quê), correr até haver volume suficiente (mínimo indicativo: ~100 conversões por variante para confiar) e registar a conclusão.

O que vale a pena testar, por ordem de impacto: oferta > título > imagem > botão (texto) > cor. Trocar a cor do botão é o teste favorito dos artigos de blogue e um dos que menos rende.

Atualizar os suportes

A última realização do referencial é atualizar os suportes de comunicação digital da empresa — a parte invisível e a que mais valor gera a longo prazo.

Um calendário de manutenção realista:

Fadiga criativa (ad fatigue): quando a mesma pessoa vê o mesmo anúncio muitas vezes, o desempenho cai. Sinal típico: a frequência passa de 3–4 e o CTR desce. Solução: renovar o criativo, não subir o orçamento.

Um registo de alterações simples (data, o que mudou, porquê, resultado) transforma o trabalho em conhecimento acumulado — e é a prova documental do valor do teu trabalho perante a gerência.

Normas de qualidade, segurança e ambiente

O referencial inclui três blocos normativos que se aplicam também ao trabalho digital:

• Qualidade — procedimentos documentados, aprovações registadas, versões controladas, coerência com o manual de marca. Se a empresa é certificada (ISO 9001), a comunicação está abrangida.
• Segurança e saúde no trabalho — o trabalho de design digital é sedentário e intensivo em ecrã. Ergonomia do posto (topo do monitor à altura dos olhos, distância de um braço), pausas de 5 minutos a cada hora, regra 20-20-20 (a cada 20 minutos, olhar 20 segundos para 6 metros de distância), iluminação sem reflexos no ecrã, cadeira e apoios ajustados. Fadiga visual e lesões músculo-esqueléticas são os riscos reais da profissão.
• Proteção ambiental — o digital tem pegada: cada MB transferido consome energia. Otimizar imagens, evitar vídeos de fundo desnecessários e escolher alojamento com energia renovável são decisões ambientais concretas. Menos peso é simultaneamente mais rápido, mais barato e mais limpo.

E ainda o RGPD, incontornável em comunicação digital: consentimento explícito para newsletters (nada de caixas pré-marcadas), política de privacidade acessível, banner de cookies com opção real de recusar, minimização dos dados recolhidos nos formulários e autorização escrita para uso de imagem de pessoas identificáveis.

Erros comuns

• Desenhar sem briefing e sem métrica. A peça fica bonita e ninguém sabe se resultou.
• Copiar o layout do papel para o ecrã. O ecrã tem outra escala, outro modo de leitura e outra cor.
• Trabalhar só no monitor grande. A maioria vê no telemóvel. Testa sempre no dispositivo real.
• Carregar imagens gigantes. Uma foto de 5 MB numa página é um visitante perdido.
• Exportar em CMYK ou Adobe RGB para a web. As cores saem baças. É sempre sRGB.
• Logótipo em raster. Fica desfocado assim que muda de tamanho.
• Texto cinzento-claro sobre branco. Falha o contraste e exclui gente.
• Meter toda a mensagem dentro da imagem. Invisível para leitores de ecrã e para quem tem imagens desligadas.
• Vídeo sem legendas. A maioria vê sem som.
• Formulários longos. Cada campo extra custa conversões.
• Ignorar as zonas seguras dos stories. A interface tapa o essencial.
• Cada post desenhado de novo. Sem sistema, não há marca reconhecível.
• Usar imagens sem verificar a licença. É risco jurídico real.
• Confundir métricas de vaidade com resultados. Gostos não pagam salários.
• Mudar cinco coisas ao mesmo tempo quando os resultados são maus. Fica-se sem saber o que funcionou.
• Publicar e esquecer. Preços desatualizados e links partidos custam credibilidade todos os dias.
• Discutir a cor do botão quando o problema é o fluxo ter um passo a mais.

Glossário

Síntese

1. Um suporte digital tem mensagem, suporte e contexto — e acrescenta interatividade, mensurabilidade e mutabilidade.
2. Arruma os suportes em próprios, pagos e ganhos; cada um tem uma função diferente.
3. Nenhuma peça existe sem cascata: estratégia de negócio → estratégia de comunicação → objetivo do suporte → peça.
4. O briefing digital tem 10 perguntas; a décima — como se mede — é a que separa profissionais de amadores.
5. O ecrã é RGB/sRGB; exporta a 2× para ecrãs densos; esquece os 300 ppi.
6. Constrói paletas com neutros e verifica sempre o contraste antes de aprovar uma cor.
7. Tipografia de ecrã: 16 px mínimo, entrelinha 1,5, linhas de 45–75 caracteres, poucos pesos.
8. Trabalha com grelha de 12 colunas, espaçamento em múltiplos de 8 e mobile first.
9. Vetor para logótipos e ícones; raster para fotografia; WebP por omissão; otimizar sempre.
10. UX é a planta, UI é o acabamento. Fluxos e arquitetura de informação antes de cores.
11. Prototipa por níveis (esboço → wireframe → mockup → protótipo) e testa com 5 pessoas — encontram a maioria dos problemas.
12. Redes sociais: trabalha por proporções, respeita as zonas seguras, legenda os vídeos e cria modelos, não peças soltas.
13. Acessibilidade é obrigação: contraste 4,5:1, nunca informação só por cor, alt em todas as imagens, tudo utilizável por teclado.
14. Mede por camadas (alcance → atenção → interesse → ação → valor) e diagnostica onde o funil parte.
15. Atualizar é parte do trabalho: calendário de manutenção, combate à fadiga criativa e registo de alterações.

Exercícios resolvidos

Exercício A · Escolher formato e plataforma

Enunciado. Uma pastelaria em Almada quer divulgar o novo pequeno-almoço servido das 7h30 às 10h30, dirigido a quem vai trabalhar. Orçamento: 150 €. Indica plataforma, formatos e segmentação, justificando.

Resolução.

Plataforma: Instagram + Facebook (mesma gestão de anúncios). Instagram para o escalão 25–44, Facebook para 40–60, ambos com forte presença local. TikTok fica de fora: o público que passa a caminho do trabalho não descobre uma pastelaria de bairro por lá, e o custo de produção de vídeo não cabe no orçamento.

Formatos: - 1 Reel 9:16 de 12 segundos: café a ser tirado, tosta a sair, preço no ecrã, legendas (som desligado). - 4 posts 4:5 (1080 × 1350): produto, preço, horário, mapa. - 6 stories 9:16 com autocolante de localização e ligação para o Google Maps.

Segmentação: raio de 3 km da loja; 25–55 anos; exclusão de quem já visitou nos últimos 7 dias; horários de exibição concentrados entre as 6h30 e as 9h30 de segunda a sexta — é a janela em que a decisão acontece.

Orçamento: 100 € no Reel (melhor alcance por euro), 50 € no melhor post estático. Distribuído por 4 semanas.

Métrica: cupão com código MANHA mencionado no balcão + leituras do QR nos stories. Alvo: 60 cupões em 4 semanas → CPA de 2,50 €, aceitável para um consumo médio de 4,50 € com repetição provável.

Exercício B · Corrigir uma paleta que chumba na acessibilidade

Enunciado. Uma marca usa: fundo #FFFFFF, texto #9E9E9E, botão #FFD54F com texto branco. Diagnostica e corrige.

Resolução.

Correções: - Texto corrente passa a #4A4A4A → 9,0:1. Continua a parecer "cinzento suave", mas legível. - O amarelo mantém-se como cor de marca, mas com texto escuro: #2B2B2B sobre #FFD54F → 9,6:1. Passa. - Se a marca insistir em texto branco no botão, muda-se o fundo para #A8730A (âmbar escuro) → 4,8:1 com branco. Passa, mas perde-se o amarelo característico. - Acrescentar contorno e ícone ao botão, para não depender só da cor.

Recomendação ao cliente: manter o amarelo como cor de marca e usar texto escuro. A identidade não se perde; a legibilidade ganha-se.

Exercício C · Otimizar uma página lenta

Enunciado. A página inicial de um restaurante demora 9 segundos a carregar no telemóvel. Tem: vídeo de fundo de 24 MB, 12 fotografias em PNG (média 3 MB), 6 pesos de duas web fonts, e um carrossel com 20 imagens carregadas de uma vez. Propõe um plano.

Resolução.

Resultado esperado: de ~60 MB para menos de 2,5 MB; tempo de carregamento a passar de 9 s para 1,5–2,5 s em rede móvel.

Verificação: correr o PageSpeed Insights/Lighthouse antes e depois e registar as métricas (LCP — tempo até o maior elemento aparecer — deve ficar abaixo de 2,5 s). E, sobretudo, testar num telemóvel real com dados móveis, não em Wi-Fi de fibra.

Exercício D · Ler um relatório e decidir

Enunciado. Campanha de 4 semanas de uma escola de línguas. Resultados: 180 000 impressões, 2 700 cliques (CTR 1,5%), 900 visitas registadas na landing page, 18 inscrições. Investimento: 400 €. Diagnostica e propõe.

Resolução.

Cálculos: - CTR 1,5% → acima da referência de 0,9–1,5%. O criativo funciona. - Cliques 2 700 → visitas 900: perda de 67% entre o clique e o carregamento da página. Sinal clássico de página lenta ou de link mal configurado. - Visitas 900 → 18 inscrições: conversão de 2,0%. Está no limiar inferior do normal (2–5%). - CPA = 400 € ÷ 18 = 22,20 € por inscrição.

Diagnóstico. O problema não é o criativo nem a segmentação — é a camada da página de destino, em dois pontos: a página perde dois terços dos cliques antes sequer de carregar, e depois converte no mínimo.

Propostas, por ordem de impacto: 1. Medir e corrigir a velocidade da landing page (é aqui que estão as maiores perdas: recuperar metade dos 67% valeria ~300 visitas extra sem gastar mais um euro). 2. Verificar o link e os UTM — parte da perda pode ser erro de medição, não de desempenho. 3. Encurtar o formulário e pôr preço e horários visíveis sem scroll. 4. Só depois: testar variações de criativo.

Se a conversão subisse para 4% com as mesmas 900 visitas, seriam 36 inscrições e um CPA de 11 € — metade. É na página, não no anúncio, que está o dinheiro.