Projeto final: auditoria técnica

Escolha seu produto

Antes de começar, escolha um produto digital que você usa com frequência. Pode ser o site do seu banco, um app de delivery, uma plataforma de streaming, ou qualquer ferramenta web que você conheça bem. Quanto mais familiar, melhor, porque você já conhece os fluxos e vai conseguir focar na análise técnica em vez de gastar tempo entendendo a interface.

Se estiver sem ideia, pode usar este próprio curso como objeto de análise. Funciona perfeitamente.

Roteiro de auditoria em 6 passos

Passo 1: Identifique a tecnologia front-end

Abra o DevTools (F12 ou Ctrl+Shift+I) e olhe o código-fonte. Algumas pistas:

• O HTML parece limpo e semântico, com tags como <header>, <main>, <article>? Ou é uma sopa de <div>s sem significado?
• Framework é uma fundação pronta sobre a qual os devs constroem o produto, para não começar do zero. Next.js (sobre a biblioteca React) e Nuxt (sobre o Vue) são os mais comuns, e dá para reconhecê-los pelas pistas que deixam no código: aparece algo como __next, _nuxt ou um <div id="root"> quase vazio seguido de vários arquivos JavaScript? Isso indica que o site usa um framework moderno como Next.js ou Nuxt.
• O JavaScript é minificado (código comprimido, ilegível)? Quase todos os sites profissionais fazem isso.

Não se preocupe em acertar com certeza. O exercício é observar e levantar hipóteses. Anote o que encontrou.

Passo 2: REST ou GraphQL?

Vá para a aba Network no DevTools. Recarregue a página e observe as requests que aparecem. Filtre por "Fetch/XHR" para ver apenas as chamadas de API.

• Se você vê URLs como /api/users, /api/products/123, provavelmente é REST. Cada endpoint tem uma URL específica.
• Se você vê requests todas indo para /graphql com diferentes payloads no body, é GraphQL.

Clique em algumas requests e olhe o que volta na aba "Response". São dados JSON. Esses são os dados que alimentam a interface que você vê.

Passo 3: Tem design tokens?

No DevTools, vá para a aba Elements. Selecione qualquer elemento visual (um botão, um título, um card) e olhe os estilos aplicados no painel à direita.

• Procure por var(-- nos valores de CSS. Se você vê coisas como color: var(--color-primary) ou padding: var(--spacing-md), o produto usa design tokens (ou pelo menos CSS custom properties, que é a base técnica dos tokens).
• Se todos os valores são números diretos (color: #3b82f6, padding: 16px), o produto provavelmente não tem um sistema de tokens estruturado.

Lembre-se: design tokens são decisões de design traduzidas em variáveis reutilizáveis. Encontrar var(-- no CSS é um bom sinal de maturidade técnica.

Passo 4: Teste a acessibilidade

Largue o mouse. Sério. Navegue pelo site usando apenas a tecla Tab para avançar entre elementos e Enter para ativar.

• O foco visual é claro? Você consegue ver em qual elemento está? Tem um contorno (outline) visível?
• Consegue chegar em todos os botões e links? Ou fica preso em algum lugar?
• Os menus dropdown abrem com Tab/Enter? Ou só funcionam com hover do mouse?

Esse teste simples de 2 minutos revela muito sobre a qualidade de acessibilidade de um produto. E você não precisa instalar nada.

Passo 5: Rode o Lighthouse

No DevTools, vá para a aba Lighthouse. Selecione as categorias "Performance" e "Accessibility" e clique em "Analyze page load". Se travar em alguma etapa, a documentação oficial do Lighthouse mostra o passo a passo com telas.

• Qual o score de Performance? Acima de 90 é excelente. Abaixo de 50 indica problemas sérios.
• Qual o score de Accessibility? Olhe os problemas listados. Faltam alt texts nas imagens? Os contrastes de cor são insuficientes?
• O LCP (Largest Contentful Paint) é menor que 2.5 segundos? Se não, a página está lenta para o usuário.

Anote os números. Eles contam uma história sobre as decisões de design e engenharia daquele produto.

Passo 6: Desative o Wi-Fi

Desconecte a internet (desative o Wi-Fi ou coloque o celular em modo avião) e tente usar o produto.

• O que acontece? Aparece uma mensagem? O conteúdo anterior continua disponível?
• Tem um banner de "Você está offline"?
• Se você tenta enviar um formulário, o erro é claro?

Lembre-se do que vimos em estados de erro: os melhores produtos são aqueles que tratam o caminho triste com a mesma atenção do caminho feliz.

Como apresentar sua auditoria

Se você quiser transformar esse exercício em algo para o portfólio, organize assim:

• Produto analisado: nome, tipo, público-alvo.
• Metodologia: os 6 passos que você seguiu.
• Achados: o que você descobriu em cada passo. Screenshots ajudam.
• Recomendações: se você fosse o designer desse produto, o que melhoraria?

Esse tipo de análise é exatamente o que fazem em processos seletivos de Product Design. Mostrar que você sabe olhar para um produto com olho técnico, identificar gaps e propor melhorias te posiciona muito à frente de quem só entrega layouts.