Nosso processo de criação: da copy ao Figma e ao site no ar

Site diferenciado não nasce de template. Nasce de processo. Cada projeto da Fysi passa pelas mesmas etapas, da primeira conversa até a página no ar, e é isso que faz um site de advogado não parecer com o de uma dermatologista, e nenhum dos dois parecer com o do concorrente.

Vou te mostrar como a gente cria, do texto ao visual, do Figma à publicação.

Por que os nossos sites não parecem template

A maioria dos sites que você vê por aí começa assim: escolhe um tema pronto, troca o logo, troca as fotos, cola o texto onde cabe. O resultado funciona, mas é igual a outros mil. E o seu cliente percebe, mesmo sem saber explicar.

Aqui a ordem é outra. Primeiro a gente entende o negócio, depois escreve, depois desenha, e só então constrói. O visual nasce do que a marca precisa comunicar, não do que o tema permite.

Advocacia criminal

Medicina fetal

1. Imersão e estratégia

Tudo começa entendendo o negócio, não a página. O cliente preenche o nosso briefing (um portal próprio, onde dá até pra mandar áudio em vez de escrever) e a gente mergulha:

• Quem é o público e o que ele precisa ouvir pra confiar.
• Qual a oferta, qual a ação principal e de onde vem o tráfego.
• O que os concorrentes fazem, pra saber onde se diferenciar.
• O que já existe de prova: resultados, depoimentos, credenciais.

Sem essa etapa, qualquer layout bonito é chute.

2. A copy vem antes do design

Essa é a parte que mais surpreende quem chega: a gente escreve a página inteira antes de desenhar qualquer coisa.

É o texto que decide a ordem das seções, o tamanho da página, o que precisa de destaque e onde entra cada prova. A promessa da primeira tela, as objeções que precisam ser respondidas, a chamada pra ação. Tudo isso é decidido no texto.

Desenhar primeiro e “encaixar o texto depois” é o jeito mais rápido de ter uma página bonita que não vende.

3. Direção visual

Com a mensagem definida, a gente decide como ela vai parecer. Referências, paleta, tipografia, estilo de imagem, o clima da marca. Um escritório de advocacia criminal pede sobriedade e autoridade. Uma clínica de medicina fetal pede acolhimento. Uma dermatologista de alto padrão pede elegância e critério.

É aqui que se define se a página vai ter foto profissional, imagem tratada, elementos 3D ou ilustração, e qual sensação a pessoa precisa ter nos primeiros segundos.

4. Layout no Figma: liberdade pra criar

O layout é desenhado no Figma, do zero, antes de qualquer linha ser construída. E esse é o grande diferencial do processo.

No Figma não existe “o tema não deixa”. Dá pra pensar a página como ela deveria ser, e não como a ferramenta de construção permite. Testar três versões de uma primeira dobra, mudar a hierarquia de uma seção, experimentar uma composição diferente, tudo em minutos.

• Liberdade criativa: cada seção é pensada pro conteúdo que ela carrega, não encaixada num bloco pronto.
• Desktop e celular desenhados juntos: a versão mobile não é “o desktop espremido”, é pensada à parte.
• O cliente vê a página de verdade antes de construir: aprova com o visual final na frente, não imaginando.
• Ajuste barato: mudar no Figma leva minutos. Mudar depois de construído leva horas.

Cliente pedindo ajuste na fase do Figma, e não depois de publicado:

5. Desenvolvimento, fora do ar

Com o layout aprovado, a página é construída em WordPress com Elementor, fiel ao que foi desenhado. E aqui tem um cuidado que ninguém vê: a gente não constrói direto no site que está no ar.

O desenvolvimento acontece num ambiente de teste, separado do domínio do cliente. Isso evita:

• Site quebrado ou fora do ar enquanto é mexido.
• Google indexando o que não está pronto: texto provisório, imagem de teste, página vazia.
• Bloqueio pela hospedagem ou por plugins de segurança, por excesso de alterações e uploads em sequência.
• Anúncio rodando pra uma página em obras.

O cliente acompanha por um link de visualização, e o site antigo continua funcionando normalmente até a troca.

6. Revisão e testes

Antes de publicar, a gente testa:

• Todos os botões, formulários e links de WhatsApp.
• Celular e tablet, onde está a maior parte do tráfego.
• Velocidade de carregamento.
• Pixel, Analytics e rastreamento de conversão, pra que o primeiro clique do anúncio já seja medido.
• SEO: título, descrição, estrutura de títulos e texto alternativo nas imagens.

7. Publicação e acompanhamento

Só agora o site vai pro domínio do cliente, na hospedagem que está no nome dele, de uma vez, pronto e testado. Quem acessa vê a página nova completa, sem período de obra.

E o trabalho não termina aí. Com a página no ar, os dados mostram o que funciona: onde as pessoas clicam, até onde rolam, onde desistem. É assim que uma boa página vira uma página que converte cada vez mais. Eu falo disso no post sobre mapa de calor.

Se você ainda não tem domínio e hospedagem, explico como funciona e qual eu indico aqui.

E se você quer aprender a fazer?

Esse é exatamente o processo que eu ensino na Formação LPS. Se você está pensando em entrar, essas são as dúvidas que mais aparecem:

Preciso saber programar?

Não. O processo usa Figma pro layout e WordPress com Elementor pra construção, ferramentas visuais. O que faz diferença não é código, é saber decidir o que entra na página e em que ordem.

Vou aprender a criar no Figma do zero?

Sim. A ideia é justamente sair do template: pensar o layout a partir da copy e da marca, e ter liberdade pra criar páginas que não parecem com as de todo mundo.

E a copy?

Também. A página começa pelo texto, então a estrutura de copy é parte do método, não um extra.

Serve pra quem está começando do zero?

Serve. O curso começa pela estratégia e pela estrutura de uma landing page, antes de qualquer ferramenta. Quem já faz páginas aproveita pra organizar o processo e parar de vender “página solta”.

Consigo vender o serviço depois?

A proposta do curso é essa: parar de vender página e passar a vender estratégia. Isso muda o valor que você consegue cobrar e o tipo de cliente que chega.