Planeje a relação entre ideia e imagem
O que é
Antes de selecionar capturas, liste o que o artigo precisa explicar. Para cada argumento, indique que evidência visual ajudaria o leitor. O plano visual pode conter ideia, timestamp candidato, detalhe essencial e posição prevista.
Por que aprender
Capturar primeiro e escrever depois costuma gerar uma coleção de imagens soltas. Começar pela função didática evita inserir um dashboard apenas porque ele é colorido. Às vezes uma tabela ou um diagrama autoral explica melhor.
Conceitos-chave
Ideia: a revisão encontrou dois erros.
Visual: tela com resultados dos testes.
Detalhe: dois casos falhos e o resumo.
Posição: após explicar os critérios de avaliação.
✓ Faça assim
Escreva a função antes de escolher o frame.
✗ Evite este erro
Usar o mesmo frame para afirmações diferentes sem explicação.
Pratique antes de revelar
Que visual explica melhor a diferença entre regra e julgamento?
Ver resposta comentada
Um comparativo lado a lado com cálculo exato e escolha editorial. Uma foto decorativa de um computador não mostra essa diferença.
Escolha frames estáveis e completos
O que é
Uma captura precisa fazer sentido como imagem estática. Confira se uma transição terminou, se o cursor não cobre o dado e se os rótulos importantes estão presentes. Volte alguns instantes na fonte quando necessário para recuperar contexto.
Por que aprender
O leitor do artigo não viu os segundos anteriores. Uma caixa sem título ou um número sem unidade exige adivinhação. Esse é um dos problemas mostrados na comparação do vídeo: capturas que pertencem à fonte, mas não funcionam isoladas.
Conceitos-chave
Reprovar: metade da tabela ainda fora da tela.
Reprovar: score visível, mas sem nome da métrica.
Aprovar: resultado + rótulo + contexto suficiente.
Do conceito à ação
- Transição: identificar a condição inicial.
- Frame estável: aplicar a decisão descrita.
- Detalhe completo: conferir o efeito no exemplo.
- Captura aprovada: registrar a evidência de saída.
✓ Faça assim
Compare pelo menos dois frames quando o momento estiver ambíguo.
✗ Evite este erro
Aceitar um recorte só porque foi retirado do vídeo correto.
Pratique antes de revelar
Um número “94” isolado explica uma melhora de qualidade?
Ver resposta comentada
Não. É necessário mostrar ou explicar a métrica, a escala e a relação com a avaliação anterior. O número sozinho pode significar qualquer coisa.
Recorte para explicar sem distorcer
O que é
Um bom recorte aumenta a informação relevante e preserva contexto. Um destaque pode guiar o olhar, mas não deve esconder valores que mudariam a interpretação. Em material sensível, use ocultação opaca quando a remoção for necessária e autorizada.
Por que aprender
Zoom excessivo remove títulos; zoom insuficiente torna o texto ilegível. A escolha precisa ser conferida no tamanho de leitura real. Nunca declare que a privacidade foi resolvida só porque um efeito de blur foi aplicado.
Conceitos-chave
Checklist de recorte
[ ] O dado central está legível.
[ ] O título ou a legenda explica a métrica.
[ ] Nenhum rótulo essencial foi cortado.
[ ] Campos sensíveis não aparecem na saída final.
✓ Faça assim
Inspecione o arquivo final após exportar a imagem.
✗ Evite este erro
Confundir um destaque visual com prova de que o conteúdo está correto.
Pratique antes de revelar
Se remover o cabeçalho torna o número ambíguo, qual é a solução?
Ver resposta comentada
Ampliar o recorte ou acrescentar uma legenda fiel e suficiente. Se a legenda precisa inventar contexto que a fonte não fornece, a imagem não serve.
Posicione imagens junto da explicação
O que é
A sequência de texto e imagem constrói entendimento. O leitor deve encontrar a imagem perto da afirmação que ela sustenta. Quatro capturas agrupadas no final podem indicar que a inserção falhou ou que a revisão não examinou a ordem final.
Por que aprender
O vídeo mostra esse problema ao comparar saídas: ter as imagens no documento não basta. A verificação precisa percorrer o artigo já montado, incluindo o espaço entre blocos e o vínculo com os parágrafos.
Conceitos-chave
Bom: explicar os três filtros → mostrar os três filtros.
Ruim: explicar o relatório → mostrar a tela inicial.
Ruim: terminar o artigo com capturas sem legenda.
✓ Faça assim
Leia a sequência final como alguém que não viu a fonte.
✗ Evite este erro
Aprovar pela contagem de arquivos inseridos.
Pratique antes de revelar
Uma imagem relevante aparece três seções depois do parágrafo. O que revisar?
Ver resposta comentada
Reposicionar a imagem perto do parágrafo ou reorganizar a sequência textual. A correção é de montagem; não exige regenerar todo o artigo.
Inspecione desktop, celular e estados da interface
O que é
Uma página precisa ser vista renderizada para confirmar geometria, contraste e leitura. Abra larguras diferentes, teste navegação por teclado e confira estados expandidos, temas e painéis. Capturas são evidências de estados específicos, não de todas as possibilidades.
Por que aprender
Ler o código não revela necessariamente texto cortado, foco escondido pelo menu ou um botão coberto por outro elemento. A revisão deve ligar observações visuais a ações concretas e preservar o conteúdo enquanto corrige o layout.
Conceitos-chave
Passo 1: abrir a página e a primeira seção.
Passo 2: reduzir para largura de celular.
Passo 3: usar Tab e abrir o painel.
Passo 4: verificar texto, foco e rolagem.
Do conceito à ação
- Desktop: identificar a condição inicial.
- Celular: aplicar a decisão descrita.
- Teclado + temas: conferir o efeito no exemplo.
- Registro de defeitos: registrar a evidência de saída.
✓ Faça assim
Registre largura, página e estado do defeito observado.
✗ Evite este erro
Chamar uma captura única de auditoria completa de acessibilidade.
Pratique antes de revelar
Uma tabela é larga no celular. Como preservar legibilidade?
Ver resposta comentada
Use um recipiente com rolagem horizontal identificada, mantendo a página dentro da tela. Não reduza a fonte até torná-la ilegível nem esconda colunas importantes.
Transforme um defeito visual em regra testável
O que é
Feedback visual útil identifica local, sintoma e efeito. “A segunda imagem cortou o título e ficou incompreensível” é mais acionável do que “as imagens ficaram ruins”. A regra nova deve atacar a causa e entrar na revisão seguinte.
Por que aprender
Se você apenas corrige o arquivo final, o processo pode repetir o erro na próxima execução. Atualize a instrução de seleção, acrescente um caso e confira se a mudança também funciona em um vídeo diferente.
Conceitos-chave
Defeito: frame capturado durante transição.
Regra: escolher estados visuais completos e estáveis.
Teste: vídeo com animação longa na explicação principal.
Aceite: nenhum frame depende de conteúdo ainda oculto.
✓ Faça assim
Preserve exemplos bons como contraprova da correção.
✗ Evite este erro
Proibir todos os frames com movimento por causa de um caso.
Pratique antes de revelar
Escreva um feedback para quatro imagens soltas ao final.
Ver resposta comentada
“As quatro últimas capturas não têm ligação clara com os parágrafos. Relacione cada uma a uma afirmação, reposicione e confira a sequência renderizada. Remova as que não acrescentam explicação.”
Confira seu entendimento
Um frame foi capturado no meio de uma animação e cortou a conclusão. Qual é a menor correção?
O que você leva deste módulo
Construir um plano visual e inspecionar a saída renderizada.
- Planeje a relação entre ideia e imagem.
- Escolha frames estáveis e completos.
- Recorte para explicar sem distorcer.
- Posicione imagens junto da explicação.
- Inspecione desktop, celular e estados da interface.
- Transforme um defeito visual em regra testável.
Próxima ação: guarde o exercício no seu laboratório e registre o que ainda precisa de revisão.