Bloco 1 · Suportes e estratégia

O que é um suporte digital

Peça de comunicação que vive em ficheiro e é consumida num ecrã ligado.

Três características que o papel não tem:

• Interatividade — a peça não é só vista, é usada (clique, formulário, compra).
• Mensurabilidade — cada visualização e clique fica registado. Não há desculpa para não saber.
• Mutabilidade — corrige-se em minutos, personaliza-se por público.

No papel o design acaba na gráfica. No digital começa na publicação — porque a partir daí há dados.

Físico vs digital

Não competem — complementam-se: flyer com QR → landing page → remarketing.

O mapa dos suportes

Owned · Paid · Earned

• Próprios — controlo total, custo baixo, alcance limitado.
• Pagos — alcance imediato e segmentável, morre com o orçamento.
• Ganhos — credibilidade máxima, controlo zero.

Uma estratégia saudável usa os três.

A cascata: nada existe por acaso

Estratégia de negócio      →  "+20% inscrições de manhã"
Estratégia de comunicação  →  "As aulas da manhã como hábito
                              de quem trabalha por turnos"
Objetivo do suporte        →  "Residentes 25–45 marcam aula
                              experimental em 4 semanas"
Peça digital               →  Landing page + 6 posts + 2 stories
                              + anúncio 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.
• "Fazer um post bonito" não é objetivo.

Briefing digital · as 10 perguntas

1. Quem é a empresa e o que a distingue?
2. Qual é o objetivo de negócio?
3. A quem falamos? (idade, momento, dispositivo)
4. Mensagem principal, numa frase.
5. Que ação queremos? (CTA)
6. Que suportes e plataformas?
7. Que restrições? (manual de marca, legais)
8. Que orçamento?
9. Que prazo?
10. Como se mede o sucesso? ← a que separa profissionais de amadores

Persona — ferramenta de decisão, não ficção

Marta, 34, técnica de laboratório, Barreiro. Entra às 8h. Usa o telemóvel no comboio, dados móveis, som desligado. Decide em 2 segundos se guarda ou passa à frente.

Desta persona saem decisões concretas:

Bloco 2 · A matéria-prima

Píxeis, resolução e densidade

• Ecrãs modernos: 1 píxel CSS = 2 ou 3 píxeis físicos.
• Imagem exibida a 400 px → exportar com 800 px (2×).
• Regra: exporta a 2× e comprime bem. Vale mais 2× muito comprimido que 1× pouco comprimido.

Os 300 ppi da impressão não se aplicam ao ecrã. O browser ignora o campo ppi — só conta o número absoluto de píxeis.

Cor: RGB, HEX, HSL

Papel = CMYK, tinta que absorve luz (subtrativa).
Ecrã = RGB, luz emitida (aditiva) → R+G+B a 100% = branco.

HSL é o segredo dos sistemas: fixas o matiz, mexes na luminosidade → versão clara e escura da mesma cor, sem desafinar.

Perfil de cor na web = sempre sRGB. Adobe RGB ou CMYK → cores baças no browser.

Anatomia de uma paleta digital

Exemplo construído a partir de #1F7A6B:

Erro típico: 6 cores fortes e zero cinzentos → nada se destaca porque tudo se destaca.

Tipografia para ecrã

• 16 px é o mínimo profissional para corpo de texto na web.
• Entrelinha 1,5–1,6 no corpo; 1,1–1,2 em títulos grandes.
• Largura de linha: 45–75 caracteres. 150 caracteres é ilegível.
• 2 a 3 pesos, não mais. Fontes finas desaparecem no ecrã.
• Web fonts: WOFF2, só os pesos usados, font-display: swap.

Licença desktop não cobre webfont. Verificar sempre.

Layout, grelha e espaçamento

• Grelha web padrão: 12 colunas (divisível por 2, 3, 4, 6).
• Goteiras 16–24 px; margens exteriores generosas.
• Espaçamento em múltiplos de 8: 8, 16, 24, 32, 48, 64 → elimina decisões arbitrárias.

Hierarquia visual — as cinco ferramentas:

1. Tamanho — o maior é visto primeiro
2. Peso e cor — o mais escuro salta
3. Espaço — o que respira ganha importância
4. Posição — canto superior esquerdo é lido primeiro
5. Contraste — a diferença chama, não a quantidade

Padrão F (muito texto) · Padrão Z (páginas simples → botão no canto inferior direito).

Design responsivo · mobile first

Mobile first: desenha primeiro o pequeno, depois acrescenta.
É mais fácil expandir que amputar — e obriga a hierarquizar desde o início.

Exemplo, secção de 3 cartões:

Alvo de toque mínimo: 44 × 44 px.

Raster vs vetor

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

Formatos de web

Alvos de peso: imagem de conteúdo < 200 KB · hero < 300 KB · banner < 150 KB · ícone SVG < 10 KB · página < 2 MB.

Otimizar uma imagem · exemplo resolvido

Dado: DSC_0421.jpg · 6000 × 4000 px · 8,4 MB · exibida a 1200 px.

8,4 MB → 180 KB = 46× mais leve, visualmente idêntico.

O erro mais comum de todos: carregar uma foto de 4000 px para a mostrar a 600 px.

Software — famílias, não marcas

• Identidade e interface → vetorial + Figma resolvem quase tudo.
• Conteúdo diário → Canva com modelos da marca: não-designers publicam sem estragar a identidade.
• Não há prestígio na ferramenta cara — há resultado na ferramenta certa.

Bloco 3 · UI/UX

UI vs UX

Analogia da casa: o UX é a planta (a cozinha ao lado da sala, 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.

Oito princípios de interface

1. Consistência — o mesmo elemento comporta-se sempre igual
2. Visibilidade do estado — mostrar o que está a acontecer
3. Feedback imediato — resposta em < 100 ms
4. Prevenção de erros — melhor impedir que explicar depois
5. Reconhecer > recordar — opções visíveis, nada de memorizar
6. Controlo do utilizador — há sempre "anular" e "voltar"
7. Economia de esforço — menos campos, menos passos
8. Hierarquia clara — uma ação principal por ecrã

Arquitetura de informação

Organizar e nomear os conteúdos para que as pessoas encontrem.

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

• Menu principal: 5 a 7 entradas, máximo.
• Usa as palavras dos utilizadores: "Marcar consulta", não "Área de agendamento clínico".
• Card sorting: dá as páginas em cartões a 5–8 pessoas e pede que agrupem. Revela que a tua lógica não é a delas.

Fluxos de utilizador

Vê anúncio no Instagram
        ↓
Landing page (proposta + prova social)
        ↓
Clica "Marcar avaliação"
        ↓
Formulário — 3 campos, não 9
        ↓
Confirmação no ecrã + SMS
        ↓
Lembrete 24h antes

Em cada passo: o que faz esta pessoa desistir aqui?

• Cada campo a mais custa conversões.
• Cada dúvida não respondida ("quanto custa?", "onde é?") custa conversões.
• Desenha-se o fluxo antes de qualquer ecrã.

Formulário que não converte · caso resolvido

9 campos · 78% de abandono

Abandono esperado: 35–45%.

Morada e data de nascimento? Recolhem-se na chamada — no momento em que já não custam conversão.

Prototipagem por níveis

Do barato para o caro. Sempre.

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

Teste de usabilidade · como se faz

1. Recruta 5 pessoas do público-alvo → encontram ≈ 85% dos problemas
2. Dá uma tarefa, não instruções:
   "Queres marcar para terça de manhã. Mostra-me como farias."
3. Pede que pense em voz alta
4. Não ajudes — cada vez que tens vontade de ajudar, encontraste um problema
5. Regista hesitações, cliques errados, desistências
6. Classifica por gravidade (impede / atrasa / irrita) e corrige por essa ordem

Bloco 4 · Produzir, publicar, medir

Formatos das redes sociais

• Trabalha em proporções, exporta ao tamanho recomendado.
• 4:5 ocupa mais ecrã que o quadrado → mais atenção. É a escolha por omissão no feed.
• Zonas seguras dos stories: ~250 px em cima e em baixo são tapados pela interface. Conteúdo essencial no retângulo central.

Banners display · formatos IAB

Regras: um objetivo, uma mensagem, um botão · logótipo sempre visível · contraste alto · < 150 KB · se animado, máx. 3 ciclos e o último quadro contém a mensagem completa.

Anatomia de um post que funciona

1. Paragem — travar o polegar: contraste, rosto, movimento, número, pergunta
2. Promessa — em 3 segundos percebe-se o que se ganha em ficar
3. Corpo — informação dosada; nos carrosséis, uma ideia por cartão
4. Ação — explícita: "Guarda este post", "Link na bio"

Sistema, não peças soltas:

• 3–5 modelos reutilizáveis (citação, dica, produto, testemunho, anúncio)
• Regras fixas: paleta, tipografia, posição do logótipo, margens
• Editáveis entregues ao cliente

→ Marca reconhecível antes de se ler o nome; produção de 40 min → 5 min por peça.

Vídeo sem legendas = vídeo sem mensagem. A maioria vê sem som.

Escolher plataforma é escolher público

Segmentação paga: geográfica · demográfica · interesses · lookalike · remarketing.
Para negócio local, um raio de 5 km vale mais que qualquer interesse sofisticado.

Email marketing — o público que é mesmo teu

Nenhum algoritmo pode tirar a lista de email à empresa.

RGPD: consentimento explícito, sem caixas pré-marcadas.

Acessibilidade · POUR

Requisito legal (DL 83/2018 para o setor público) · 1 em 6 pessoas vive com alguma deficiência.

Contrastes mínimos (WCAG AA):

As sete regras que dependem de ti

1. Contraste 4,5:1 no texto — verifica antes de aprovar qualquer cor
2. Nunca informação só por cor — 8% dos homens tem daltonismo; junta ícone ou texto
3. alt em todas as imagens informativas; alt="" nas decorativas
4. Evita texto dentro de imagem — não é lido, nem pesquisado, nem traduzido
5. Tudo utilizável por teclado, com foco visível
6. Legendas e transcrições em vídeo e áudio
7. 16 px mínimo e página utilizável a 200% de zoom

Nada que pisque mais de 3× por segundo (risco de convulsões).

Texto cinzento-claro sobre branco é o erro de acessibilidade mais comum do mundo.

Medir o impacto · o funil

Referências (ordem de grandeza):

Vaidade vs valor: mil seguidores que nunca compram valem menos que cem que compram.

Diagnóstico por camadas

Poucas impressões?             → distribuição / orçamento / segmentação
Muitas impressões,
  poucos cliques?              → criativo (imagem, título, oferta)
Muitos cliques,
  poucas conversões?           → página de destino (lentidão, formulário,
                                 promessa que não corresponde)
Muitas conversões,
  pouco valor?                 → público errado

Nunca mudes cinco coisas ao mesmo tempo — ficas sem saber o que funcionou.

Teste A/B: uma variável de cada vez · ~100 conversões por variante · regista a conclusão.
Ordem de impacto: oferta > título > imagem > texto do botão > cor.

Ler um relatório · caso resolvido

Escola de línguas · 4 semanas · 400 €
180 000 impressões → 2 700 cliques → 900 visitas → 18 inscrições

Cálculo	Valor	Leitura
CTR	1,5%	Acima da referência — o criativo funciona
Cliques → visitas	−67%	Página lenta ou link mal medido
Visitas → inscrições	2,0%	Limiar inferior do normal
CPA	22,20 €	Caro para o setor

Diagnóstico: o problema não é o anúncio — é a página de destino.

Ação, por ordem: 1) medir e corrigir a velocidade · 2) verificar link e UTM · 3) encurtar formulário e mostrar preços · 4) só depois, testar criativos.

A 4% de conversão → 36 inscrições, CPA de 11 €. O dinheiro está na página, não no anúncio.

Atualizar — a parte que quase todos esquecem

Fadiga criativa: frequência sobe acima de 3–4 e o CTR desce → renovar o criativo, não subir o orçamento.

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

Normas: qualidade, SST e ambiente

• Qualidade — procedimentos documentados, aprovações registadas, versões controladas, coerência com o manual de marca (ISO 9001 abrange a comunicação).
• Segurança e saúde — trabalho sedentário e intensivo em ecrã: topo do monitor à altura dos olhos, distância de um braço, pausas de 5 min/hora, regra 20-20-20, sem reflexos. Fadiga visual e LMERT são os riscos reais da profissão.
• Ambiente — cada MB transferido consome energia. Otimizar imagens, evitar vídeos de fundo, alojamento com energia renovável. Menos peso = mais rápido, mais barato e mais limpo.
• RGPD — consentimento explícito, política de privacidade, cookies com recusa real, minimização de dados, autorização de uso de imagem.

Os erros que custam mais caro

• Desenhar sem briefing e sem métrica
• Trabalhar só no monitor — a maioria vê no telemóvel
• Imagens gigantes → visitantes perdidos
• Exportar em CMYK ou Adobe RGB para a web
• Logótipo em raster
• Texto cinzento-claro sobre branco
• Mensagem toda dentro da imagem
• Vídeo sem legendas
• Formulários longos
• Ignorar as zonas seguras dos stories
• Cada post desenhado de novo, sem sistema
• Imagens sem licença verificada
• Confundir gostos com resultados
• Publicar e esquecer

Síntese em 8 linhas

1. Estratégia → comunicação → objetivo → peça. A cascata primeiro.
2. Briefing com 10 perguntas; a 10.ª é como se mede.
3. Ecrã é sRGB, exporta a 2×, esquece os 300 ppi.
4. 16 px, entrelinha 1,5, 45–75 caracteres, grelha de 12, espaços de 8.
5. Vetor para logo, WebP para foto, otimizar sempre.
6. UX é a planta, UI é o acabamento. Fluxos antes de cores. Testa com 5 pessoas.
7. Acessibilidade é obrigação, não extra: 4,5:1, alt, teclado, legendas.
8. Mede por camadas e atualiza com calendário.