No Figma, a tela é uma imagem. Bonita, mas parada: o botão não clica, o campo não guarda nada, a lista não muda. Protótipo funcional é outra coisa: ele responde. E tudo que responde na web é feito de só três camadas. Sabendo o nome e a responsabilidade delas, o nosso caminho para a prototipação funcional vai ficar mais fácil e certeiro.
Toda essa área dos alunos nasceu de um Protótipo Funcional. Então não é apenas texto e vídeo: terão widgets imersivos, perguntas e áreas de feedback para aumentar os estímulos e ajudar no aprendizado. Vamos usar juntos todo o valor de criar experiências direto no código — até na nossa jornada de aprendizado!
As três camadas
Pensa numa pessoa.
- A camada de estrutura é o esqueleto;
- o estilo é a aparência (roupa, cor, postura);
- o comportamento é o que ela faz quando algo acontece.
Um protótipo funcional é igualzinho:
Estrutura: HTML
Define o que existe e o significado de cada parte: um título, um
botão, um campo, uma lista. É o esqueleto do conteúdo.
Estilo: CSS
Define como aparece: cor, espaçamento, tipografia, layout. É a
camada que mais conversa com o nosso olhar de designer.
Comportamento: JavaScript
Define o que acontece quando a pessoa usuária age: clicar, digitar,
enviar. É aqui que mora a interatividade, o estado e os dados.
A ideia-chave: as camadas se empilham. Você cria um botão com HTML, veste ele com CSS e dá comportamento com JavaScript. Cada uma resolve uma preocupação separada.
Explore o botão abaixo: ligue e desligue cada camada para ver, na prática, o papel de cada uma.
Repara no que cada chave revela: sem estrutura não existe nem botão; sem estilo ele funciona, mas fica com a cara crua do navegador; sem comportamento ele é bonito, mas clicar não faz nada. As três juntas é que viram experiência.
"Um protótipo funcional simula o comportamento real do produto: não só a navegação, mas manipulação de dados, mudanças de estado e conteúdo dinâmico."
— adaptado de UXPin, Functional Prototype: A Short Guide for Digital Product Designers (inglês)
Por que isso importa pra nossa missão
Nosso objetivo é usar a IA para tirar o mato alto da codificação — então precisamos saber conversar com ela. Quando você pede "deixa o botão mais suave", está falando de CSS. "Quando clicar, salva e mostra na lista" é comportamento e estado. "Preciso de um campo de e-mail aqui" é estrutura. Esse vocabulário é o volante. Sem ele, você só consegue empurrar o carro.
Sua vez: recap rápido dessa aula
Olhe o exemplo visual de cada pergunta e responda de memória. Puxar da cabeça é o que fixa de verdade.
Sobre esta lista, você pede à IA: "aumente em 8px o espaço entre os itens e troque a cor do título para azul". Que camada você está mexendo?
Tarefas de hoje
- Revisar protótipo
- Mandar pro time
- Testar no celular
Nesse formulário, você pede: "quando clicar em enviar, guarde o texto e mostre na tela". Que camada faz isso acontecer?
Esta tela ainda não tem estilo, só os elementos crus. Você pede: "preciso de um campo de texto e um botão". Que camada define isso?
O que você ganhou aqui: o vocabulário das três camadas (estrutura, estilo e comportamento), que é o volante pra dirigir a IA com precisão.
Próxima aula: Reconhecendo as camadas. Vamos achar estrutura, estilo e comportamento no código real da lista de tarefas.