Crie uma estrutura limpa: Layout > Seção > Conteiner > Colunas.
Nomeie a estrutura.
Use apenas 3 breakpoints (1200 / 810 / 390)
Transforme tudo que se repete em componentes.
Defina padding vertical nas seções.
Evite camadas invisíveis e elementos duplicados.
Teste o layout redimensionando a tela.
Aplique Text Styles com breakpoints.
Garanta que todos os textos dentro de containers usem Auto Height.
Utilize tags: H1–H6 para títulos e P para textos.
Teste a leitura em telas pequenas e grandes. (Mín. 14px para mobile)
Trabalhe com Full Width Frames, nunca fixed.
Aplique max width: 800px tablet / 480px mobile.
Equilibre margens e paddings, não usar valores aleatórios. (Dica: 48, 32, 24, 20, 16)
Teste contraste de texto e fundo com ferramenta de acessibilidade.
Mantenha consistência de tamanhos entre seções e cards.
Remova sombras e gradientes desnecessários que pesam o layout.
Centralize e alinhe todos os elementos visualmente no grid.
Use 90% de posicionamento relative e uns 10% absolute.
Elimine animações com blur acima de 15.
Teste performance no PageSpeed ou Lighthouse.
Otimize imagens e exporte em JPG com tinypic.com.
Desative efeitos em excesso para manter o site leve.
Verifique se nenhum componente está fora da viewport inicial.
Simplifique a estrutura: quanto menos layers, maior o desempenho.
Priorizar a biblioteca de ícones do Framer no menu Insert.
Usar apenas 1 biblioteca de Ícones (Minha number 1: Phosphor)
Adicione ALT text em todas as imagens.
Configure title, description e social image em cada página.
Use tags corretas: nav para o menu, footer para rodapé, a para links, button para ações.
Adicione aria-label nos botões sem texto.
Verifique que todos os links e botões sejam clicáveis.
Não usar imagens como texto.
Priorizar SVG se o elemento for VETOR, se for uma imagem NÃO FAÇA ISSO.
Revise nomes de todos os layers e componentes.
Confira todos os links e ações clicáveis. (Também no mobile usando o CELULAR)
Teste em telas reais: desktop, tablet e celular. (Publique o projeto, não use o editor do Framer para isso)
Confira o comportamento de altura total em seções com 100vh.
Valide imagens e metadados no painel de publicação do Framer.
Confira se colocou o idioma para português em configurações.
Confira se tem favicon.
Apague todos os code overrides, estilos, cores e componentes não utilizados.
Garanta fluidez no scroll e sem cortes de layout.
Colocou seu Logo no Rodape?
Verificar se nenhuma página ou CMS está em Draft
Conferir se o layout está respeitando os limites e alinhamentos em uma tela gigante (acima de 2500 pixels).
Conferir todos os links das redes sociais no rodapé.
Depois de publicar testar o recebimento do formulário no domínio do CLIENTE.