Glossário rápido

A

Agente de IA

Sistema que recebe um objetivo e executa ações para alcançá-lo: planeja, usa ferramentas e ajusta o percurso conforme avança. É diferente do chatbot, que só responde ao que você pergunta. O agente age. Ver no curso →

API (Application Programming Interface)

Conjunto de regras que define como um programa pode pedir informações ou serviços a outro programa. É o "garçom" que leva o pedido do front-end para o back-end e traz a resposta de volta. Ver no curso →

ARIA (Accessible Rich Internet Applications)

Conjunto de atributos extras que o dev adiciona ao HTML para dar contexto às tecnologias assistivas quando as tags comuns não bastam: dizer que um ícone é um botão, que uma região se atualiza sozinha, que um menu está aberto. A regra da comunidade: primeiro HTML semântico; ARIA só quando necessário. Ver no curso →

A/B test

Teste que compara duas versões de um design (A e B) para medir qual performa melhor com usuários reais. Fundamental para tomar decisões baseadas em dados, não em opinião. Ver no curso →

Atomic Design

Metodologia criada por Brad Frost que organiza componentes de interface em cinco níveis: átomos, moléculas, organismos, templates e pages. Ajuda a pensar em sistema em vez de tela isolada. Ver no curso →

B

Back-end

A parte do sistema que o usuário não vê. É onde a lógica do produto vive: receber pedidos, processar dados e consultar o banco de dados. Na analogia do restaurante, é a cozinha. Ver no curso →

Bounce rate (taxa de rejeição)

No GA4, é a porcentagem de sessões não engajadas: que duraram menos de 10 segundos, não geraram evento principal (key event, o antigo "conversão") e não passaram de uma página. Uma bounce rate alta pode indicar problemas de conteúdo, performance ou expectativa do usuário. Ver no curso →

Breakpoint

O ponto de largura de tela onde o layout decide se reorganizar. Exemplos comuns: 375px (celular), 768px (tablet), 1440px (desktop). O conteúdo guia o breakpoint, não o contrário. Ver no curso →

C

Cache

Cópia local de arquivos que o navegador guarda para não precisar buscar tudo de novo no servidor a cada visita. É a gaveta onde você anota números de telefone para não precisar ligar toda vez. Ver no curso →

CLI (Command Line Interface)

Interface onde você digita comandos em texto para falar com o computador, em vez de clicar em botões e menus. Ferramentas como Git, npm e as de design tokens rodam pela CLI. Ver no curso →

Container Query

Recurso do CSS que permite que um componente se adapte ao tamanho do seu container pai, não da página inteira. Em vez de regras do prédio, são regras do apartamento. Ver no curso →

Cookie

Pequeno arquivo de texto que os sites salvam no seu navegador para lembrar informações sobre você: login, preferências, itens no carrinho. Também usado para rastreamento e publicidade. Ver no curso →

Core Web Vitals

Conjunto de métricas do Google que medem a experiência real do usuário: LCP (tempo até o maior elemento carregar), CLS (quanto a página pula) e INP (tempo de resposta a interação). Influenciam o ranking de SEO e são diretamente afetadas por decisões de design. Ver no curso →

CSS (Cascading Style Sheets)

A tecnologia que controla como as coisas parecem na tela: cores, tipografia, espaçamentos, sombras, posicionamento. Se o HTML é a planta baixa, o CSS é a decoração de interiores. Ver no curso →

D

Deploy

O ato de publicar código no ar. É levar o que estava rodando no computador do time para o servidor onde os usuários de verdade acessam. Quando alguém diz "deu deploy", significa que a mudança já está valendo para todo mundo.

Design System

A gramática visual e interativa de uma plataforma. Não é só um kit de componentes: define como eles se comportam, se relacionam, e qual a lógica de espaçamento, tipografia, cores e movimento. Ver no curso →

Design Token

Decisão de design traduzida em valor reutilizável. Em vez de dizer "aquele azul do botão", você define um valor uma vez, por exemplo --blue-600: #1976D2, e reusa em todo lugar. Muda em um lugar, muda em todos. Ver no curso →

DOM (Document Object Model)

A árvore de elementos da página que vive dentro do navegador: a mesma hierarquia de tags do HTML, só que ao vivo. Quando o JavaScript "atualiza o DOM", ele muda essa árvore em tempo real: um texto troca, um modal aparece, uma animação roda. Ver no curso →

DP (Density-independent Pixel)

Unidade usada no Android que se ajusta automaticamente à densidade da tela. 1 dp = 1 pixel em uma tela de 160 PPI. Em telas mais densas, o sistema multiplica o valor para manter o tamanho físico consistente. Ver no curso →

E

Empty state

Estado de uma interface quando não há dados para exibir: lista vazia, busca sem resultados, conta recém-criada. Um bom empty state guia o usuário para a próxima ação em vez de deixá-lo perdido. Ver no curso →

Endpoint

O endereço específico de um recurso dentro de uma API REST. Se a API é o restaurante, o endpoint é o balcão certo para aquele pedido: /users/1 traz o usuário de número 1. Cada recurso tem o seu. Ver no curso →

F

Flexbox

Sistema de layout CSS que organiza elementos em uma direção (horizontal ou vertical). É a versão "código" do Auto Layout do Figma: direção, gap, padding e alinhamento funcionam da mesma forma. Ver no curso →

Fork

Cópia paralela de um componente ou arquivo que segue vida própria, fora da versão oficial. No design system, o fork escondido nasce quando alguém duplica um componente em vez de propor a mudança pelo fluxo de contribuição. Em pouco tempo, ninguém sabe qual é o oficial. Ver no curso →

Framework

Fundação de código pronta sobre a qual os devs constroem o produto, para não começar tudo do zero. Next.js (sobre a biblioteca React) e Nuxt (sobre o Vue) são os mais comuns na web. Pense em uma planta baixa com paredes e encanamento já no lugar: o time só precisa decorar e mobiliar. Ver no curso →

Front-end

Tudo que o usuário vê e toca na interface: botões, cores, tipografia, animações. É o seu território como designer. Na analogia do restaurante, é o salão. Ver no curso →

G

GET

Tipo de pedido HTTP que só lê informação, sem alterar nada no servidor. Quando você abre uma página, rola o feed ou pesquisa um produto, o front-end faz um GET. É olhar a vitrine sem comprar nada. Ver no curso →

GraphQL

Linguagem de consulta para APIs criada pelo Facebook onde o front-end especifica exatamente quais dados quer em cada pedido. Um único endpoint, uma resposta precisa. É como pedir à la carte em vez de buffet por quilo. Ver no curso →

H

Handoff

O processo de passagem do design para o desenvolvimento. O handoff moderno usa Figma Dev Mode, tokens e specs em vez de PDFs e screenshots anotados. Ver no curso →

Hash

Transformação irreversível aplicada às senhas antes de guardá-las no banco. Nem o próprio sistema consegue ler a senha original, só comparar. É por isso que, quando você esquece a senha, ele não te mostra a antiga: gera uma nova. Ver no curso →

HTML (HyperText Markup Language)

Linguagem de marcação que diz ao navegador o que cada coisa é na página: título, parágrafo, botão, imagem. Não é programação, é estrutura. Se o CSS é a decoração, o HTML é a planta baixa. Ver no curso →

HTML Semântico

Uso de tags HTML com significado (<header>, <nav>, <main>) em vez de tags genéricas (<div>). Melhora acessibilidade e SEO. É a diferença entre um prédio com placas e um sem nenhuma sinalização. Ver no curso →

Heatmap (mapa de calor)

Visualização que mostra onde os usuários mais clicam, rolam ou passam o mouse em uma página. Áreas quentes (vermelho) indicam alta interação; áreas frias (azul) indicam pouca atenção. Ferramenta essencial para validar decisões de layout. Ver no curso →

I

IoT (Internet of Things)

Internet das Coisas: dispositivos físicos conectados que coletam e trocam dados entre si e com a nuvem. Relógios, câmeras, sensores, geladeiras. Cada um desses aparelhos tem uma interface, e alguém precisa projetá-la. Ver no curso →

J

JavaScript

A linguagem de programação da web. É ela que faz as coisas acontecerem na tela: menus que abrem, formulários que validam, feeds que carregam infinitamente. Se HTML e CSS são o cenário, JavaScript é a atuação. Ver no curso →

JSON (JavaScript Object Notation)

Formato de texto leve usado para trocar dados entre sistemas. É o "idioma" em que APIs enviam e recebem informações. Também é usado na especificação de design tokens do DTCG (Design Tokens Community Group, grupo comunitário ligado ao W3C), que ganhou sua primeira versão estável em 2025. Ver no curso →

L

Lazy loading (carregamento preguiçoso)

Técnica em que as imagens (e outros recursos) fora da tela só começam a carregar quando o usuário rola até elas. Acelera a primeira impressão da página, priorizando o que aparece acima da dobra. Ver no curso →

LGPD (Lei Geral de Proteção de Dados)

Lei brasileira de proteção de dados pessoais (Lei nº 13.709/2018) que regula como empresas e órgãos públicos coletam, usam, guardam e compartilham dados pessoais, dentro e fora da internet. O consentimento é uma das bases legais previstas na lei, e é por causa dele (e das orientações da ANPD sobre cookies) que sites exibem banners pedindo permissão para usar cookies não essenciais. Alguém precisa projetar esse banner. Ver no curso →

Lighthouse

Ferramenta do Chrome DevTools que audita performance, acessibilidade e SEO de qualquer página web. Roda em menos de um minuto e dá uma nota de 0 a 100. Designers que sabem interpretar um relatório Lighthouse se diferenciam. Documentação oficial. Ver no curso →

M

Material Design

Design system do Google, atualmente na versão 3, cuja iteração mais recente é o Material 3 Expressive (2025), evolução do Material You. Padrão para Android, Flutter e ecossistema Google. Introduziu dynamic color e, no Expressive, animações com física de molas e formas mais orgânicas. Ver no curso →

MCP (Model Context Protocol)

Padrão aberto criado pela Anthropic que define como uma IA se conecta diretamente a ferramentas e serviços externos: Figma, Google Drive, bancos de dados. A IA passa a fazer os pedidos direto às ferramentas, com a sua permissão; por baixo, as APIs ainda levam e trazem. Ver no curso →

Media Query

Instrução no CSS que diz ao navegador "quando a tela tiver essa largura, aplique essas regras". É o mecanismo técnico por trás dos breakpoints. Cada breakpoint no Figma vira uma media query no código. Ver no curso →

P

PM / Product Manager

Quem responde pelo "o quê" e pelo "por quê" do produto. Prioriza o que o time vai construir e cruza três olhares: negócio, usuário e tecnologia. Não é seu chefe, é seu par: você traz a visão de experiência, ele traz a de produto.

POST

Tipo de pedido HTTP que envia informação nova para o servidor. Quando você cria uma conta, publica uma foto ou envia uma mensagem, o front-end faz um POST. É entrar na loja e comprar algo. Ver no curso →

PPI (Pixels Per Inch)

A densidade de pixels em uma tela, ou quantos pixels cabem em uma polegada. Um monitor de desktop pode ter 96 PPI; um iPhone pode passar de 460. Mais PPI = mais nitidez, mas cada pixel fica fisicamente menor. Ver no curso →

Prompt

A instrução em linguagem natural que você dá a uma IA. É você explicando, em português mesmo, o que quer que ela faça. A qualidade do prompt determina a qualidade do resultado: quanto mais claro o pedido, melhor a resposta. Ver no curso →

PWA (Progressive Web App)

Web app com superpoderes: pode ser "instalado" no celular, funcionar offline e enviar notificações push. Combina a acessibilidade da web com recursos de apps nativos. Exemplo: X (antigo Twitter). Ver no curso →

R

React

A biblioteca JavaScript mais usada para construir interfaces web. É uma base de código pronta: em vez de escrever cada comportamento do zero, o dev monta a interface com componentes reutilizáveis. Ferramentas como Framer e v0 geram React por baixo dos panos. Ver no curso →

REM / EM

Unidades relativas da web. 1 rem = o tamanho da fonte raiz do documento (geralmente 16px). 1 em = relativo ao tamanho da fonte do próprio elemento (que, por sua vez, herda do pai). Existem para que seu design respeite o contexto do usuário, não force o usuário a se adaptar ao layout. Ver no curso →

Responsivo vs. Adaptativo

Responsivo: o layout é fluido, se ajusta continuamente como água enchendo qualquer recipiente. Adaptativo: você cria layouts fixos para tamanhos específicos e o sistema alterna entre eles. A maioria dos projetos combina os dois. Ver no curso →

REST (Representational State Transfer)

Arquitetura de API onde cada recurso tem seu próprio endereço (URL). Quer dados de um usuário? Vai no /users/1. Quer produtos? /products. É o buffet por quilo: um balcão para cada coisa. Ver no curso →

S

Servidor

Computador potente, conectado à internet 24 horas, pronto para receber e responder pedidos. Quando alguém fala "o servidor caiu", significa que essa máquina parou de responder. Ver no curso →

Skeleton screen

Formas cinzas que imitam o layout do conteúdo enquanto ele ainda está carregando. Em vez de uma tela em branco ou um spinner girando, o usuário já vê o contorno do que vem aí. Comunica "estou carregando" sem precisar de texto. Ver no curso →

Spec (especificação)

Descrição precisa do comportamento, dos estados e das regras de uma funcionalidade. Funciona como um contrato entre design, engenharia e IA: todo mundo consulta o mesmo documento para saber o que é para acontecer em cada situação. Ver no curso →

Sprint

Ciclo curto e fixo de trabalho dos times de produto, em geral de uma a duas semanas. É a unidade de tempo em que o time se compromete a entregar um conjunto de coisas. Quando alguém diz "leva duas sprints", está falando de cerca de um mês de fila.

Stakeholder

Qualquer pessoa com interesse direto no resultado do projeto: cliente, liderança, áreas de negócio, jurídico. É quem você precisa convencer ou alinhar antes de seguir. Mapear os stakeholders certos evita retrabalho e reunião surpresa lá na frente.

SVG (Scalable Vector Graphics)

Formato de imagem vetorial que não perde qualidade em nenhuma escala. Ideal para ícones, logos e diagramas na web. Diferente de PNG e JPG, o SVG é feito de formas matemáticas, não de pixels. Ver no curso →

T

Token primitivo

Valor de design cru, sem contexto. Descreve o que o valor é, não para que serve. Exemplo: --blue-500: #3b82f6. São os ingredientes da receita. Ver no curso →

Token semântico

Valor de design com significado contextual. Descreve o papel que ele desempenha na interface e referencia um token primitivo. Exemplo: --color-primary: var(--blue-500). São as receitas feitas com os ingredientes. Ver no curso →

U

UX Honeycomb

Modelo criado por Peter Morville que organiza as facetas da experiência do usuário em sete qualidades: útil, usável, desejável, encontrável, acessível, credível e valioso. Ajuda a avaliar UX além de "bonito ou feio". Ver no curso →

V

Vibe Coding

Forma de criar software descrevendo o que você quer em linguagem natural para uma IA, sem escrever código. O ciclo é: descrever, ver, ajustar, repetir. Designers têm vantagem porque já sabem explicar comportamento e estados. Ver no curso →

W

WCAG (Web Content Accessibility Guidelines)

Diretrizes internacionais de acessibilidade para conteúdo digital. A versão 2.2 trouxe critérios como tamanho mínimo de alvo (24x24px), aparência de foco visível e alternativas para movimentos de arrastar. Ver no curso →