Referência

Glossário de Design e Desenvolvimento

Definições em linguagem clara para os termos que aparecem no nosso trabalho — design, desenvolvimento, estratégia e SEO. Escrito pela Developh, curto, com opinião, e datado. Se quiseres uma versão longa de qualquer um destes termos, pergunta.

Design

Design System: Uma biblioteca partilhada de componentes reutilizáveis, tokens, padrões e regras que permite a uma equipa desenhar e construir produto de forma consistente. Não é um style guide — entrega-se como código (ex. biblioteca React) E como bibliotecas Figma, sincronizadas. Útil quando mais que um designer ou developer toca no produto.
Design Tokens: Valores nomeados para cor, espaçamento, tipografia, raio, sombra e motion que substituem hex codes e pixels brutos no design system. Os tokens são o contrato entre as variáveis do Figma e as CSS custom properties: muda `--color-brand` uma vez e tudo atualiza. O W3C Design Tokens Format Module é o standard emergente.
UX (User Experience): A experiência ponta-a-ponta de usar um produto — descoberta, registo, primeira tarefa, uso recorrente, suporte. UX é mais amplo do que UI: cobre investigação, arquitetura de informação, copywriting, performance, acessibilidade e resposta emocional. Bom UX é invisível; mau UX é a fricção que os utilizadores descrevem nos tickets de suporte.
UI (User Interface): A superfície visual que o utilizador toca: botões, formulários, navegação, layout, tipografia, motion. O UI é os 20% visíveis do UX. Um UI polido sobre UX partido perde na mesma; UX excelente com UI mediano fica profissional mas esquecível. Os dois importam; a ordem importa mais.
Wireframe: Um esboço de baixa fidelidade do layout de um ecrã — caixas para conteúdo, sem copy real, sem estilo visual. É a forma mais rápida de alinhar stakeholders sobre estrutura antes de investir em design visual. Muitas vezes saltado por equipas seniores que vão direto ao Figma de alta fidelidade; útil para produtos novos com âmbito por definir.
Protótipo: Uma simulação clicável de um fluxo de produto — geralmente feita em Figma ou Framer — usada para testar usabilidade antes de desenvolver. Distinto de wireframe (sem estilo) ou mockup (sem interação). O bom protótipo responde a uma pergunta; protótipos sobre-construídos perdem-se a lutar contra os limites de interação do Figma.
Figma: Uma ferramenta de design colaborativa em browser — o standard de facto para design de produto desde 2022. Forças: multiplayer em tempo real, variantes de componentes, variáveis (design tokens), Dev Mode para handoff. Mais recentemente: Figma Make (geração de código com IA) e Figma Slides.
Branding: A construção deliberada de como uma empresa é percepcionada — nome, logo, voz, sistema visual, posicionamento. Branding não é só um logo: é a resposta a "quem são, para quem, e porque é que alguém deve quero saber". Marca sem estratégia é decoração; estratégia sem expressão é um deck.
Tipografia: A escolha e arranjo de tipos num design — selecção de fonte, escala de tamanhos, altura de linha, tracking, hierarquia. A tipografia é a decisão isolada com maior impacto numa identidade de marca: a fonte certa sinaliza indústria, época e seriedade antes de uma palavra ser lida.
Atomic Design: Uma metodologia do Brad Frost que organiza componentes UI em átomos (botões, inputs), moléculas (campos de formulário), organismos (formulários, headers), templates e páginas. Útil como modelo mental para estrutura de design system; demasiado prescritiva quando aplicada literalmente como hierarquia de pastas. A maioria das equipas adapta-a livremente.

Desenvolvimento

Next.js: Uma framework React da Vercel para sites e aplicações web em produção. Faz routing, server-side rendering, static generation, otimização de imagens e code splitting de raiz. Em 2026 vem com App Router (server components) e Turbopack como bundler default. É o stack default da Developh.
React: Uma biblioteca JavaScript para construir interfaces, originalmente da Facebook (agora Meta). O modelo de componentes do React — funções pequenas e composíveis que devolvem markup — tornou-se o paradigma dominante de UI dos anos 2010. O React moderno (18+) enfatiza Server Components, rendering concorrente e Suspense para streaming de dados.
TypeScript: Um superset tipado de JavaScript da Microsoft. Adiciona type checking em compile time ao JS, apanhando classes inteiras de bugs (typos, formas erradas, null derefs) antes do runtime. Standard na Developh: todos os projetos arrancam com strict mode on. O runtime é JS puro; os tipos são apagados no build.
Tailwind CSS: Uma framework CSS utility-first com classes pré-definidas para espaçamento, cor, layout e tipografia. O Tailwind v4 (2025) trouxe tokens de tema CSS-native via `@theme`, eliminando o ficheiro de config em JS. Combina naturalmente com bibliotecas React — escreves classes inline e extrais para componentes quando os padrões se repetem.
Convex: Uma plataforma backend reativa — base de dados, funções de servidor, file storage e subscrições em tempo real numa só. As queries do Convex são tipadas ponta-a-ponta (TypeScript em todo o lado), automaticamente reativas e correm dentro de transações. Substitui a canalização Postgres + Express + WebSocket para apps de produto.
Framer: Uma ferramenta de design e publicação que serve também como construtor de sites no-code. A força do Framer está em motion de alta fidelidade e protótipos interativos, com a opção de publicar diretamente para um URL alojado. Começamos muitas vezes em Framer pela velocidade, e migramos para Next.js quando o projeto precisa de lógica custom ou profundidade de conteúdo.
Server-Side Rendering (SSR): Renderizar HTML no servidor por cada request e enviá-lo já pronto para mostrar — em vez de mandar JavaScript e renderizar no cliente. SSR ganha em primeiro paint, SEO e previews em redes sociais. Trade-off: cada request bate no servidor. As frameworks modernas (Next.js) misturam SSR com static generation por rota.
Headless CMS: Um sistema de gestão de conteúdo que expõe conteúdo via API em vez de renderizar páginas. Os editores gerem conteúdo no dashboard do CMS; os developers vão buscar a partir de qualquer frontend (Next.js, app mobile, smart TV). Exemplos: Sanity, Contentful, Convex (quando usado como content store), WordPress em modo headless.

Estratégia

MVP (Minimum Viable Product): A versão mais pequena de um produto que entrega valor real a utilizadores reais — utilizável para validar se há mercado. Não é um protótipo, nem uma beta. Um MVP é a primeira coisa pela qual estarias disposto a cobrar. Mal usado para significar "v1"; MVPs verdadeiros são desconfortavelmente pequenos.
CRO (Conversion Rate Optimisation): A disciplina de aumentar a percentagem de visitantes que faz uma ação desejada (registar, comprar, marcar call) através de testes sistemáticos de copy, layout, fricção e sinais de confiança. CRO é mais próximo de investigação UX do que de marketing — mensurável, iterativo e limitado pelo volume de tráfego.
Product-Market Fit: O estado em que um produto satisfaz uma procura real e dolorosa de mercado com força suficiente para o crescimento se tornar auto-sustentável. Cunhado por Marc Andreessen. PMF não é um checkbox: a maioria dos sinais (NPS, retenção, word-of-mouth orgânico) só fica inequívoca em retrospetiva.
A/B Testing: Um método experimental para comparar duas variantes de uma página, feature ou copy distribuindo utilizadores aleatoriamente entre elas e medindo resultados. Útil só com tráfego suficiente para chegar a significância estatística — abaixo de ~10k visitantes semanais, os testes A/B costumam ser ruído. Abaixo desse threshold, prefere investigação qualitativa.
User Research: O estudo estruturado de objetivos, comportamentos e frustrações dos utilizadores através de entrevistas, surveys, testes de usabilidade e analytics. O evitador de erros mais barato em trabalho de produto. Cinco entrevistas de 30 minutos com os utilizadores certos revelam 80% dos problemas que descobririas pós-lançamento.

SEO & Pesquisa em IA

SEO (Search Engine Optimisation): A prática de estruturar um site para que motores de busca (Google, Bing, DuckDuckGo) o consigam crawlar, indexar e ranquear para queries relevantes. SEO moderno divide-se em técnico (crawlabilidade, performance, schema), on-page (títulos, headings, conteúdo) e off-page (backlinks, menções de marca). Cada vez mais convergente com AEO.
AEO (Answer Engine Optimisation): Otimizar conteúdo para ser citado por motores de respostas com IA (ChatGPT, Claude, Perplexity, Gemini, Google AI Overviews). Alavancas: dados estruturados (FAQ, HowTo, DefinedTerm), formato pergunta-resposta claro, llms.txt, opiniões originais com autoria. Mais próximo de posicionamento de PR do que de link-building tradicional.
Schema.org / Dados Estruturados: Um vocabulário partilhado (Schema.org) para marcar conteúdo da página de forma a que motores de busca entendam o que a página É, não só o que diz. Emitido como blocos `<script>` em JSON-LD. Tipos comuns: Organization, Article, FAQPage, Product, Service, BreadcrumbList. Necessário para a maioria dos rich results do Google.
Open Graph: Um protocolo de meta-tags (originalmente do Facebook) que diz às plataformas sociais como renderizar o preview de um link — título, descrição, imagem. Implementado como tags `<meta property="og:title">`. A maioria das superfícies de partilha (LinkedIn, Slack, WhatsApp, iMessage) lê tags OG; o Twitter tem o seu protocolo gémeo com prefixos `twitter:`.
Core Web Vitals: As três métricas do Google para experiência real de página: LCP (Largest Contentful Paint, < 2.5s), INP (Interaction to Next Paint, < 200ms) e CLS (Cumulative Layout Shift, < 0.1). Falhar uma das três puxa rankings para baixo. Medidas por URL no Search Console; correlacionam fortemente com conversão.
llms.txt: Um índice em texto plano (Markdown) em `/llms.txt` que diz aos crawlers de LLMs (Claude, ChatGPT, Perplexity) o que está num site e onde está. Adotado pela Anthropic, Vercel, Stripe e Mintlify. Companheiro do robots.txt e do sitemap.xml — mas curado para consumo de IA em vez de indexação por motores de busca.
hreflang: Um sinal HTML/HTTP que diz aos motores de busca qual a versão de uma página a servir para uma dada língua e região. Implementado via tags `<link rel="alternate" hreflang="pt-PT">`. Crítico para sites bilingues — sem hreflang, o Google pode indexar a língua errada e fazer cair tráfego num dos dois mercados.