1. O que é prototipação?

É criar uma representação da interface antes de desenvolvê-la.

Podemos representar:

• Telas
• Botões
• Navegação
• Formulários
• Fluxos
• Aparência

Prototipar é experimentar antes de construir.

2. Por que prototipar?

Imagine desenvolver um sistema inteiro e descobrir depois:

"Essa tela não faz sentido."

Alterar depois pode ser caro.

Com um protótipo podemos:

• testar ideias;
• encontrar problemas;
• receber feedback;
• alterar rapidamente.

Quanto antes descobrimos um problema, menor tende a ser o custo para corrigi-lo.

3. Uma analogia simples

Construir uma casa

PLANTA
  ↓
CONSTRUÇÃO

Desenvolver um sistema

PROTÓTIPO
  ↓
DESENVOLVIMENTO

O protótipo é como uma planta da aplicação.

4. A prototipação começou no papel

Antes das ferramentas digitais, designers utilizavam:

• Lápis
• Papel
• Esboços
• Modelos
• Diagramas

A ideia era simples:

Desenhar antes de construir.

5. A evolução

PAPEL
  ↓
WIREFRAME
  ↓
MOCKUP
  ↓
PROTÓTIPO INTERATIVO
  ↓
FIGMA
  ↓
IA

A tecnologia mudou.

A necessidade de experimentar continua.

6. Wireframe

É o esqueleto da interface.

Exemplo:

┌───────────────────────┐
│ LOGO             MENU │
├───────────────────────┤
│                       │
│       TÍTULO          │
│                       │
│     [ IMAGEM ]        │
│                       │
│       TEXTO           │
│                       │
│     [ BOTÃO ]         │
│                       │
└───────────────────────┘

O foco é a estrutura.

7. Mockup

Mostra a aparência da interface.

Agora podemos definir:

• Cores
• Tipografia
• Imagens
• Ícones
• Espaçamentos

┌──────────────────────┐
│      MEU APP         │
│                      │
│  Bem-vindo!        │
│                      │
│  [     ENTRAR     ]  │
└──────────────────────┘

O foco é o visual.

8. Protótipo interativo

Além de mostrar, permite experimentar.

LOGIN
  ↓
CLIQUE
  ↓
HOME
  ↓
PRODUTOS
  ↓
PRODUTO

Podemos simular:

• Cliques
• Navegação
• Formulários
• Estados
• Transições

É uma simulação da experiência.

9. Baixa e alta fidelidade

Baixa fidelidade

Papel
 ↓
Esboço
 ↓
Estrutura

Alta fidelidade

Design visual
 ↓
Interação
 ↓
Animação
 ↓
Experiência próxima do produto

Começamos simples e evoluímos.

10. Wireframe × Mockup × Protótipo

Pense:

ESTRUTURA
   ↓
APARÊNCIA
   ↓
INTERAÇÃO

11. A evolução das ferramentas

Durante muito tempo, designers utilizaram ferramentas gráficas para criar interfaces.

Depois surgiram ferramentas específicas para prototipação.

O processo evoluiu:

DESENHAR
   ↓
SIMULAR
   ↓
INTERAGIR
   ↓
COLABORAR

12. Figma

O Figma popularizou uma nova forma de trabalhar.

Ele permite:

• Criar interfaces
• Criar componentes
• Criar protótipos
• Compartilhar projetos
• Trabalhar em equipe
• Criar Design Systems

Design deixa de ser apenas uma imagem.

13. Design System

Em vez de criar cada botão novamente:

BUTTON
INPUT
CARD
MODAL
HEADER

Criamos componentes reutilizáveis.

DESIGN SYSTEM
      ↓
COMPONENTES
      ↓
TELAS

Isso aproxima Design e Frontend.

14. Protótipo e Frontend

O processo pode ser:

IDEIA
 ↓
PROTÓTIPO
 ↓
DESIGN
 ↓
HTML
 ↓
CSS
 ↓
JAVASCRIPT
 ↓
APLICAÇÃO

O frontend transforma o projeto visual em uma interface funcional.

15. E a Inteligência Artificial?

Agora podemos descrever uma interface usando linguagem natural.

Por exemplo:

"Crie uma tela de login moderna para um aplicativo financeiro, responsiva para celular."

A IA pode gerar uma primeira proposta.

O processo ficou muito mais rápido.

16. Prototipação com IA

Antes:

IDEIA
 ↓
DESIGNER
 ↓
PROTÓTIPO

Agora:

IDEIA
 ↓
PROMPT
 ↓
IA
 ↓
PROTÓTIPO
 ↓
DESIGNER

A IA ajuda a criar alternativas rapidamente.

17. A IA substitui o designer?

Não.

A IA pode ajudar a:

• gerar ideias;
• criar layouts;
• criar variações;
• acelerar tarefas;
• gerar componentes.

Mas alguém precisa decidir:

Isso resolve o problema?

É fácil de usar?

É acessível?

Faz sentido para o usuário?

18. Bonito não significa bom

Uma interface pode ser:

Bonita

Moderna

Animada

E ainda ser:

Confusa

Difícil de usar

Inacessível

Ruim para o usuário

19. O papel do profissional

O profissional de frontend moderno precisa entender mais do que código.

UX
 +
UI
 +
PROTOTIPAÇÃO
 +
DESIGN SYSTEM
 +
FRONTEND
 +
IA

A tecnologia ajuda.

Mas as decisões continuam sendo humanas.

20. Para guardar

Prototipação é:

Pensar antes de construir.

Testar antes de programar.

Errar antes de gastar.

Aprender antes de finalizar.

PROTOTIPAÇÃO

PAPEL
 ↓
WIREFRAME
 ↓
MOCKUP
 ↓
PROTÓTIPO
 ↓
FIGMA
 ↓
IA
 ↓
FRONTEND

A ferramenta muda.

O objetivo continua sendo criar uma experiência melhor.