# OS 18 TIPOS DE VISUALIZACAO — Catalogo Completo

Cada tipo resolve UM problema especifico. Usar tipo errado = confusao. Esse catalogo lista os 18, agrupados em 5 categorias funcionais.

---

## CATEGORIA A — EXPLICAR CONCEITO / METODO

### 1. DIAGRAMA SIMPLES (Sujeito-Verbo-Objeto)

**Quando usar:** mostrar relacao entre 3-5 elementos de forma linear.

**Estrutura:**
```
[Causa] → [Mecanismo] → [Resultado]
```

**Exemplo aplicado:**
```
[Enzima X elevada] → [Protocolo 3R] → [Perda de 6,3kg em 60d]
```

**Ferramentas:** Figma, Whimsical, Excalidraw

**Formato ideal:** horizontal wide (site hero, slide 16:9)

---

### 2. VENN (CIRCULOS SOBREPOSTOS)

**Quando usar:** mostrar intersecao entre 2-3 conceitos.

**Estrutura:** 2 ou 3 circulos que se sobrepoem no centro — intersecao e o diferencial.

**Exemplo aplicado:**
```
Schwartz ∩ Bencivenga ∩ Adaptacao BR = Metodo Imperatriz
```

**Ferramentas:** Figma, Canva

**Formato ideal:** quadrado ou vertical

---

### 3. PIRAMIDE

**Quando usar:** mostrar hierarquia, niveis, prioridades.

**Estrutura:** base larga (fundamento) → topo estreito (meta).

**Exemplo aplicado:**
```
          [Imperio]
       [Mentoria]
    [Produto High]
  [Produto Entrada]
[Audiencia organica]
```

**Ferramentas:** Canva tem templates prontos

**Formato ideal:** vertical

---

### 4. MATRIZ 2x2

**Quando usar:** classificar 4 quadrantes por 2 eixos.

**Estrutura:** cruz dividindo plano em 4 zonas, eixos nomeados.

**Exemplo aplicado:**
```
     Alto ticket
Baixo     ┼     Alto
volume    │    volume
          ↓
     Baixo ticket
```

Usado pra Matriz Eisenhower, Matriz BCG, decisao de produto.

**Ferramentas:** Figma, Miro

**Formato ideal:** quadrado

---

## CATEGORIA B — CONTAR PROCESSO

### 5. FLOWCHART (FLUXOGRAMA)

**Quando usar:** processo com decisoes (se-entao).

**Estrutura:** caixas retangulares (acao), losangos (decisao), setas conectando.

**Exemplo aplicado:**
```
[Lead entra]
    ↓
{Qualificado?}
 ├─ Sim → [Para comercial]
 └─ Nao → [Para nutricao]
```

**Ferramentas:** Whimsical, Miro, Mermaid (codigo)

**Formato ideal:** vertical ou horizontal conforme complexidade

---

### 6. TIMELINE

**Quando usar:** sequencia cronologica, historia, storyline.

**Estrutura:** linha horizontal com marcos em pontos especificos.

**Exemplo aplicado:**
```
2019 ─── 2021 ─── 2023 ─── 2026
 |         |         |         |
Saiu     Primeira  Primeiro  Mentoria
 CLT    aluna      lancamento  Imperio
```

**Ferramentas:** Figma, Canva

**Formato ideal:** horizontal wide

---

### 7. JOURNEY MAP

**Quando usar:** jornada emocional + acoes do cliente.

**Estrutura:** linha horizontal de estagios, por baixo: emocoes, acoes, pensamentos.

**Exemplo aplicado:**
```
Descoberta → Consideracao → Decisao → Uso → Resultado
Emocao:   curiosa  →  esperancosa → ansiosa → confiante → feliz
Acao:     googla   →  entra site → compra  → usa       → indica
```

**Ferramentas:** Miro, Figma

**Formato ideal:** horizontal wide

---

### 8. STEPPER (PASSOS NUMERADOS)

**Quando usar:** processo de 3-5 etapas simples.

**Estrutura:** caixas numeradas em sequencia, cada uma com titulo + icone.

**Exemplo aplicado:**
```
 1         2          3          4
Agenda  Preenche   Conversa   Recebe
 call    briefing   30min     plano
```

**Ferramentas:** Canva, Figma

**Formato ideal:** horizontal ou grid

---

## CATEGORIA C — COMPARAR

### 9. BEFORE/AFTER (SPLIT)

**Quando usar:** mostrar transformacao direta.

**Estrutura:** tela dividida ao meio, esquerda (antes) / direita (depois), ou cima/baixo.

**Exemplo aplicado (copy):**
```
ANTES:                   DEPOIS:
"Transforme sua vida"    "Saia do CLT em 90 dias sem
                          precisar saber vender"
Vago, generico           Especifico, com tempo, objetivo
CTR: 0,8%                CTR: 2,7%
```

**Ferramentas:** Figma, Canva

**Formato ideal:** horizontal ou vertical dividido

---

### 10. TABELA COMPARATIVA

**Quando usar:** comparar voce vs concorrentes em multiplos criterios.

**Estrutura:** tabela com colunas (opcoes) e linhas (criterios).

**Exemplo aplicado:**
```
                | Meu metodo | Mentoria X | Curso Y |
Duracao         |   90 dias  |   12 meses |  indef. |
Acompanhamento  |   Grupo    |   Grupo    |  Nenhum |
Preco           |   R$ 2.997 |   R$ 9.997 |  R$ 997 |
Garantia        |   30 dias  |   7 dias   |  Nenhuma|
```

**Ferramentas:** Webflow, Framer (responsiva), Figma

**Formato ideal:** horizontal wide

---

### 11. PROS / CONS VISUAL

**Quando usar:** contrapor beneficios vs problemas.

**Estrutura:** 2 colunas, check verde vs X vermelho.

**Ferramentas:** qualquer editor

**Formato ideal:** vertical dividido

---

## CATEGORIA D — MOSTRAR DADOS / PROVA

### 12. DASHBOARD DE NUMEROS

**Quando usar:** 3-6 metricas de prova em destaque.

**Estrutura:** grid com cada numero em fonte gigante, label pequena abaixo.

**Exemplo aplicado:**
```
  347         6,3kg        89%
alunas      media perda   satisfacao

  14         R$12M        98%
meses ops   faturamento   conclusao
```

**Ferramentas:** Figma, Flourish

**Formato ideal:** grid 3x2 ou horizontal

---

### 13. GRAFICO DE BARRAS

**Quando usar:** comparar quantidades entre categorias.

**Estrutura:** barras verticais ou horizontais, escala numerica.

**Ferramentas:** Flourish.studio (gratuito, excelente), Datawrapper, Excel

**Dica:** cor saturada na tua metrica + cinza nas outras (hierarquia visual).

**Formato ideal:** horizontal wide

---

### 14. GRAFICO DE LINHA

**Quando usar:** evolucao no tempo.

**Estrutura:** linha ascendente/descendente ao longo do eixo X (tempo).

**Exemplo aplicado:** faturamento de aluna por mes durante a mentoria.

**Ferramentas:** Flourish, Canva

**Formato ideal:** horizontal wide

---

### 15. ISOTYPE (REPETICAO DE ICONE)

**Quando usar:** humanizar numeros, tornar estatistica visualmente impactante.

**Estrutura:** repetir icones representando a unidade (pessoa, item).

**Exemplo aplicado:**
```
9 em 10 alunas aplicam o metodo:
👤👤👤👤👤👤👤👤👤👥
(9 coloridos + 1 cinza)
```

**Ferramentas:** Figma, Canva

**Formato ideal:** horizontal

---

## CATEGORIA E — STORYTELLING / NARRATIVA

### 16. CARROSSEL DE SLIDES

**Quando usar:** revelar informacao progressivamente (Instagram, LinkedIn).

**Estrutura:** 7-10 slides, cada um 1 ideia, ultimo = CTA.

**Anatomia do carrossel vencedor:**
- Slide 1: hook visual + pergunta/promessa
- Slide 2-N-1: valor progressivo
- Slide N-1: prova/case
- Slide N: CTA

**Ferramentas:** Figma, Canva, Bannerbear

**Formato ideal:** 1:1 (Instagram) ou 4:5 (LinkedIn)

---

### 17. ILUSTRACAO NARRATIVA

**Quando usar:** criar conexao emocional, representar avatar.

**Estrutura:** ilustracao de personagem em situacao especifica.

**Exemplo aplicado:** mulher 40+ em home office no notebook, xicara de cafe, sorrindo.

**Ferramentas:**
- **IA:** Midjourney, Ideogram, Gemini Nano Banana (rosto BR natural)
- **Humano:** ilustrador freelancer (Behance, Dribbble)
- **Banco de ilustracoes:** Storyset, unDraw (gratuitos)

**Formato ideal:** varia conforme canal

---

### 18. MOOD BOARD VISUAL

**Quando usar:** estabelecer identidade/atmosfera de marca.

**Estrutura:** grid de 6-12 imagens que comunicam juntas a essencia da marca.

**Exemplo aplicado:** paleta de cores + 3 fotos de publico + 2 fontes + 2 elementos graficos + 1 textura.

**Ferramentas:** Pinterest + Figma

**Formato ideal:** grid quadrado ou retangular

---

## MATRIZ DE DECISAO RAPIDA

Se a ideia-ancora responde...

| Pergunta | Tipos recomendados |
|---|---|
| **Quem/O que?** | Ilustracao narrativa (17), retrato, icone |
| **Quanto?** | Dashboard (12), barras (13), isotype (15) |
| **Onde?** | Mapa, diagrama espacial |
| **Quando?** | Timeline (6), Journey Map (7) |
| **Como?** | Flowchart (5), Stepper (8), Diagrama SVO (1) |
| **Por que?** | Diagrama causa-efeito, Venn (2) |
| **Versus?** | Before/After (9), Tabela (10), Pros/Cons (11) |
| **Hierarquia?** | Piramide (3), Matriz 2x2 (4) |
| **Progressao?** | Carrossel (16), Timeline (6) |

---

## COMBINACOES QUE FUNCIONAM

Em paginas de vendas de alta conversao, combinar tipos em sequencia:

1. **Hero:** Ilustracao narrativa + headline
2. **Metodo:** Diagrama simples (1) ou Flowchart (5)
3. **Proof:** Dashboard de numeros (12) + Before/After (9)
4. **Comparativo:** Tabela (10)
5. **Jornada:** Stepper (8) ou Journey Map (7)
6. **Bonus/Stack:** Grid de cards com ilustracao (17)

---

## CHECKLIST DE ESCOLHA

Para cada ideia-ancora, pergunte em ordem:

1. Que pergunta Dan Roam ela responde? (Quem/Quanto/Onde/Quando/Como/Por que)
2. Qual dos 18 tipos e mais adequado?
3. Esse tipo cabe no canal destino? (mobile, proporcao)
4. Tenho ferramenta pra produzir?
5. 1 ideia = 1 visual? (nao misturar)

Se responde sim pras 5 → tipo aprovado.
