Pular para conteúdo

Checklist de qualidade em projetos Framer

Design e layout

Design e layout

  • [x] Segue os princípios sólidos de design gráfico, como contraste, tipografia, layout, equilíbrio, hierarquias e proporção.
  • [x] Segue as tendências atuais de web design.
  • [x] Layouts e composição visualmente atraentes.
  • [x] Estrutura lógica de camadas e nomenclatura.
  • [x] Tem ótima aparência em todos os dispositivos e breakpoints (mobile e tablet).
  • [x] Tem contraste de cores acessível sempre que possível. (Avaliar contrast checker)
  • [x] Não possui textos fictícios ou Lorem Ipsum e outros conteúdos de preenchimento.
  • [x] A quantidade de breakpoints necessária para que o site seja dimensionado entre dispositivos é a menor possível.
  • [x] Adicione Open Graph, Favicon e Apple Touch nas configurações
  • [ ] Hero section: evitar excesso de whitespace em telas grandes — ajustar spacing para manter equilíbrio visual.
  • [ ] Spacing entre seções: padronizar gaps verticais para garantir um fluxo visual consistente.
  • [ ] Nav links: não podem estar muito próximos — adicionar espaçamento adequado para melhorar usabilidade e legibilidade.
  • [ ] Dropdown links: devem expandir para largura total, facilitando interação.
  • [ ] Border radius: aplicar escala unificada entre todos os componentes.

Efeitos e animações

  • [x] Mantenha a consistência nos efeitos e nas animações. Por exemplo, certifique-se de que os efeitos de aparência tenham curvas de animação e tempo comparáveis para estabelecer uma experiência de navegação uniforme.
  • [x] Aplique efeitos e animações somente a elementos que aprimorem a funcionalidade ou melhorem a experiência de navegação. Por exemplo, evite adicionar efeitos de foco ou pressionados a elementos que não tenham links ou que não forneçam informações adicionais ao passar o mouse sobre eles.
  • [x] Certifique-se de que a barra de navegação se feche quando você clicar no ícone
  • [ ] Entrance animations: não exagerar — reduzir frequência para manter propósito claro e evitar distrações.
  • [ ] Componentes animados (ex.: flow steps): garantir que as animações estejam sincronizadas e coerentes com a timeline.

Otimização

  • [x] Todos os links funcionam e apontam para um URL válido.
  • [x] As páginas listadas na navegação ou no rodapé do site precisam ter links para as páginas correspondentes, e devem aparecer na navbar na mesma ordem que aparecem na homepage/site.
  • [x] Todo e qualquer design que se repete está transformado em componente.
  • [x] Usa somente as fontes padrão ou do Google incluídas no Framer.
  • [x] Possui tags HTML claramente estruturadas nos elementos.
  • [x] As imagens têm texto alternativo quando necessário.
  • [x] O arquivo tem um título e uma descrição personalizados adicionados nas configurações do site.
  • [x] O arquivo não usa conteúdo protegido por direitos autorais, como imagens, vídeos ou fontes personalizadas.
  • [x] Seu site é publicado sem erros de otimização.
  • [x] O projeto não contém nenhum componente ou ativo não utilizado.
  • [x] Use nomes descritivos e significativos para os componentes que reflitam sua funcionalidade, em vez de nomes genéricos como "Component1" ou "Widget2". Os exemplos incluem "Cartão de perfil de usuário", "Carrossel de produtos" ou "Formulário de checkout".
  • [x] Todos os componentes externos do modelo estão atualizados.
  • [x] Transforme a barra de navegação e o rodapé em componentes
  • [x] Organize esses componentes em pastas para manter seu modelo limpo

CMS

  • [ ] Nomeie seus campos de CMS de forma que se correlacionem claramente com o item ao qual estão vinculados.
  • [ ] Adicione uma descrição em cada campo CMS
  • [ ] Remova os limites de qualquer coleção de CMS
  • [ ] A Index Page possui paginação para lidar com grandes quantidades de conteúdos

Código personalizado

  • [ ] Excluir exemplo.txt

Recomendações técnicas

Recursos visuais

  • [ ] Evite o uso excessivo de efeitos de desfoque (mais de 10px). Isso pode tornar seu site muito lento.
  • [ ] Desative os eventos de ponteiro em todos os elementos estáticos.
  • [ ] Use o recurso de tema nativo do Framer para configurar o modo claro e escuro.
  • [ ] Aplique os estilos de cores em todos os elementos de design no site.
  • [ ] Certifique-se de que os pesos das fontes não mudem ao passar o mouse ou ao clicar.
  • [ ] Evite pesos de fonte abaixo de 400 e acima de 800 para garantir um bom contraste.

Interatividade

  • [ ] Certifique-se de que todos os elementos interativos tenham um estado de passar o mouse e pressionar.
  • [ ] Adicione animações sutis a microinterações, como passar o mouse, para criar uma sensação de polimento.
  • [ ] Desative os estados de hover em dispositivos móveis para melhorar a experiência do usuário.
  • [ ] Garanta que todos os botões possuem um link válido.

Desempenho

  • [ ] Certifique-se de que todas as imagens sejam carregadas em @2x para telas de retina.
  • [ ] Use arquivos .svg para gráficos vetoriais.
  • [ ] Certifique-se de que seu site tenha um mínimo de 90 ao executar um teste do Google Lighthouse.

SEO

  • [x] Adicione um título e uma descrição de SEO a todas as páginas.
  • [x] Escolha as tags HTML apropriadas em todos os elementos, principalmente nas sections <section>.
  • [x] Adicione tags de acessibilidade na barra de navegação <nav> e no rodapé <footer>

Marketing & Usabilidade

  • [x] Adicionar o card personalizado para promover o desconto do Framer
  • [x] Adicionar videos tutoriais se necessário para explicar como funciona o template