Projeto acadêmico · Individual · PUC Minas
Redesign da página inicial da Craigslist
De uma lista densa de links a uma navegação com hierarquia, e de volta à prancheta depois do feedback.
- Meu papel
- análise da página original, prompts de redesign com IA e ajustes de acessibilidade
- Ferramentas
- Claude, Figma Make, Figma
- Período
- setembro de 2026
- Equipe
- individual
Redesign conceitual, sem vínculo com a empresa. Imagens ilustrativas geradas por IA.
O problema
A página inicial da Craigslist é uma lista densa de links, sem hierarquia visual. Tudo tem o mesmo peso, e quem chega precisa ler a página inteira para encontrar o que procura. Para entender essa estrutura, fiz uma "cirurgia de interface": separei a página original em seus componentes, como cabeçalho, blocos de categorias, calendário e rodapé, e mapeei suas cores numa escala de roxos, azuis e cinzas.
O redesign com IA
A proposta da disciplina era refazer três telas do site com IA generativa, e coube a mim conduzir esse processo. Escolhi as telas do caminho de quem procura um lugar para morar: a página inicial, a categoria Imóveis e a página de um anúncio. A partir de uma versão da página inicial gerada na Claude, escrevi o prompt para refiná-la no Figma Make. A busca ganhou destaque, os termos mais buscados viraram atalhos e as categorias foram organizadas em cards com a contagem de anúncios.
O feedback que me fez voltar
Na avaliação, o professor apontou a atenção aos tamanhos de fonte e ao contraste para manter o produto acessível. Revisei o código do protótipo e encontrei textos de 10 e 11 px e um rodapé com contraste de 2,56:1. Ajustei tudo para que nenhum texto ficasse abaixo de 13 px, corrigi a hierarquia (títulos maiores que subtítulos) e levei o rodapé a 4,83:1, atendendo ao nível AA da WCAG.
Cuidados com o conteúdo
Por se tratar de um projeto acadêmico que seria divulgado, usei imagens geradas por IA nos anúncios. Também deixei apenas o anúncio em destaque navegável e acessível por teclado, sem cards que parecem clicáveis e não levam a lugar nenhum.
O que aprendi
- IA acelera, mas não revisa por mim. A primeira versão parecia pronta e ainda tinha textos de 10 px e contraste insuficiente.
- Medir é melhor que achar. Calcular o contraste e ler os tamanhos no código transformou uma impressão em correções concretas.
- Feedback é parte do processo. Voltar ao projeto depois da avaliação deixou o resultado melhor e mais coerente com o que defendo sobre acessibilidade.