Desenvolvimento de sites: o que acontece em cada etapa do projeto

Desenvolvimento de sites profissional passa por seis etapas, nesta ordem: briefing, arquitetura, design, desenvolvimento, testes e publicação. Cada uma entrega uma coisa concreta que você, como cliente, pode ver e aprovar antes da próxima começar. Quando uma etapa é pulada, o problema não some: ele aparece mais caro na etapa seguinte.

Este texto descreve o que acontece dentro de cada fase, o que você precisa entregar ao fornecedor, o que deve receber de volta e quais conferências separam um processo sério de um template com o texto trocado. Se a sua dúvida ainda é por onde começar ou quanto custa, ela está respondida em criação de sites e no pilar quanto custa criar um site. Aqui o assunto é o processo por dentro.

Neste artigo:

• Visão geral: as seis etapas em uma tabela
• Briefing: o que você precisa levar
• Arquitetura: quais páginas existem e por quê
• Design: aprovar no celular, não no monitor
• Desenvolvimento: o que muda na escolha técnica
• Testes: a lista do que conferir antes de publicar
• Publicação: o dia da virada e as semanas seguintes
• Para quem esse processo serve, e para quem é exagero

Quais são as etapas do desenvolvimento de um site?

O prazo total depende do tamanho do projeto. As faixas que usamos como referência (landing page em uma a duas semanas, institucional com SEO em três a seis, e-commerce em seis a doze) estão explicadas no pilar de preços. Essa estimativa é Leitura nossa, baseada nos projetos que fazemos, não um padrão de mercado.

1. Briefing: o que você precisa levar para a primeira reunião?

O briefing define para que o site existe. Sem essa resposta, cada decisão depois vira gosto pessoal.

Leve quatro coisas:

O objetivo principal, em uma frase. “Receber pedidos de orçamento pelo WhatsApp”, “vender pela internet”, “ser encontrado por quem procura o serviço na cidade”. Um site pode fazer várias coisas, mas precisa de uma prioridade.

Quem é o seu cliente e o que ele pergunta antes de comprar. As perguntas que chegam no telefone e no WhatsApp são a melhor matéria-prima de conteúdo que existe.

O que você já tem. Domínio, logo, fotos, textos, redes sociais, site antigo. E, principalmente, quem tem a senha de cada coisa.

Como você vai medir se deu certo. Contatos por mês, pedidos, ligações. Se ninguém define o número no começo, ninguém consegue dizer depois se o site funcionou.

O que você deve receber de volta: um documento curto de escopo, com objetivo, público, lista de entregas e o que está fora do projeto. O que não está escrito não está incluído.

2. Arquitetura: quais páginas o site precisa ter?

Arquitetura é a planta do site: quais páginas existem, como se ligam e o que cada uma diz. É a etapa mais barata para mudar de ideia, porque ainda não há nada desenhado nem programado.

Três decisões saem daqui:

A lista de páginas. Cada serviço importante merece página própria, porque é assim que ele pode ser encontrado em uma busca específica. Um único texto falando de tudo compete com tudo e não ganha em nada.

Os endereços das páginas. O guia de SEO para iniciantes do Google recomenda usar URLs descritivos, com palavras úteis para quem lê, e observa que um URL feito só de identificadores aleatórios é menos útil para os usuários (Confirmado). Na prática: /servicos/instalacao-de-ar-condicionado/ em vez de /pagina?id=4471.

O roteiro de conteúdo. Para cada página, o que ela precisa responder e qual ação ela pede. O texto final pode vir depois, mas o roteiro vem antes do design. Desenhar em volta de “lorem ipsum” gera layout que não comporta o texto real.

Se o site já existe, a arquitetura inclui o mapa de endereços antigos e novos. Esse mapa é o que vai sustentar os redirecionamentos na etapa 6.

3. Design: por que aprovar a versão de celular primeiro?

Porque é ela que o Google usa. A documentação sobre indexação que prioriza dispositivos móveis informa que o Google usa a versão para dispositivos móveis do conteúdo de um site, rastreada com o agente de smartphones, para indexação e classificação, e recomenda que ela tenha o mesmo conteúdo da versão para computador (Confirmado).

Isso tem consequência no design: conteúdo escondido no celular “para ficar mais limpo” é conteúdo que pode não contar para o Google.

O que conferir ao aprovar o layout:

• Veja as telas no seu celular, não só no monitor da reunião.
• Contraste de texto. A norma internacional de acessibilidade, o WCAG, pede no critério de contraste mínimo uma razão de pelo menos 4,5:1 entre texto e fundo, e de 3:1 para texto grande (Confirmado). Cinza claro sobre branco costuma reprovar.
• Botão de contato visível sem rolar a tela na página que recebe anúncio.
• Fotos reais do seu negócio sempre que existirem. Banco de imagem genérico se reconhece de longe.

Acessibilidade não é enfeite. A Lei Brasileira de Inclusão (Lei 13.146/2015), no art. 63, diz que é obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no país, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente (Confirmado). O WCAG é a principal dessas diretrizes; a versão 2.2 foi publicada pelo W3C em 5 de outubro de 2023 (Confirmado). Este texto não é orientação jurídica: o ponto é que contraste, texto alternativo em imagem e navegação por teclado entram no escopo desde o design, e não como remendo depois.

4. Desenvolvimento: o que muda conforme a escolha técnica?

É a etapa em que o layout aprovado vira código. Para o cliente, ela parece uma caixa-preta, mas três escolhas feitas aqui definem o custo dos próximos anos:

Plataforma. WordPress, plataforma de loja, construtor mensal ou código sob medida. Cada uma tem prós e contras, e a comparação dos caminhos está em criação de sites.

Construtor visual e plugins. Montar o site com construtor visual e dezenas de plugins acelera a entrega, mas pesa a página e cria licenças anuais que passam a ser suas. Na nossa operação, os sites são entregues em WordPress sem construtor visual e sem pilha de plugins, com nota de performance acima de 90 no PageSpeed. É uma escolha com custo maior de desenvolvimento e custo menor de manutenção, e vale você perguntar qual caminho o seu fornecedor segue.

Painel de edição. Você vai querer trocar um preço, uma foto ou um telefone sem pagar hora técnica. Peça para ver o painel antes da entrega e teste uma edição simples.

Também entram nesta etapa: formulários ligados ao e-mail ou ao WhatsApp da empresa, dados estruturados, texto alternativo das imagens e a medição de conversão (sem ela, ninguém sabe de onde vêm os contatos).

Onde isso é feito: em um ambiente de teste, separado do site oficial. Esse ambiente não deve aparecer no Google. A documentação sobre noindex explica que a regra exclui a página dos resultados, e avisa que, se a página estiver bloqueada no robots.txt, o Google nunca vê o noindex, e ela ainda pode aparecer nos resultados quando outras páginas têm link para ela (Confirmado). Um jeito mais simples e seguro é proteger o ambiente de teste com senha.

5. Testes: o que conferir antes de publicar?

“Está tudo funcionando” não é teste. Teste é uma lista com resultado anotado. A mínima:

Sobre a velocidade, as faixas vêm do web.dev: para uma boa experiência, o LCP (tempo até o maior elemento aparecer) deve ocorrer em até 2,5 segundos, o INP (resposta ao toque ou clique) deve ficar em 200 milissegundos ou menos, e o CLS (o quanto a página “pula” enquanto carrega) em 0,1 ou menos. A página recomenda medir no 75º percentil das visitas, separando celular e computador (Confirmado). Um teste de laboratório antes da publicação é a prévia; o dado de campo, com visitas reais, só aparece depois que o site está no ar.

O porquê de velocidade virar dinheiro, com os números, está em velocidade do site e conversão.

6. Publicação: o que acontece no dia em que o site vai ao ar?

A publicação tem três partes, e a terceira é a que mais se esquece.

A virada. O domínio passa a apontar para o novo site. Faça fora do horário de pico e, se houver anúncio rodando, acompanhe as campanhas durante a janela.

Os redirecionamentos, quando existe site antigo. Cada endereço antigo precisa levar para o novo equivalente. A documentação do Google sobre mudança de site com alteração de URL recomenda redirecionamentos permanentes do lado do servidor, como 301 e 308, evitar redirecionamentos em cadeia e mantê-los pelo maior tempo possível, geralmente por pelo menos um ano (Confirmado). Pular esse passo é o jeito mais rápido de perder as posições que o site antigo tinha. O passo a passo completo está em como migrar um site WordPress.

Avisar o Google e conferir o que fica com você. O sitemap lista as páginas que você quer que o Google conheça. A documentação de sitemaps observa que um CMS como o WordPress provavelmente já gera o sitemap sozinho (Confirmado); ele é enviado pelo Search Console. E, antes de dar o projeto por encerrado, confirme em nome de quem ficam o domínio, o Search Console e a ferramenta de medição. Em hospedagem gerenciada ou compartilhada é comum o cliente não ter acesso ao servidor; nesse caso, pergunte por escrito como é o backup e como você leva o site se trocar de fornecedor.

As quatro semanas seguintes. Acompanhe os erros no Search Console, confira se os contatos continuam chegando e compare com o número definido no briefing. O dado de velocidade de campo começa a se formar nesse período.

Para quem esse processo completo serve, e para quem é exagero?

O critério que usamos: o site precisa gerar contato ou venda, ou só precisa existir?

Serve para empresa que vai investir em anúncio, que depende de ser encontrada no Google, que vende pelo site ou que já tem um site com posições a preservar. Nesses casos, cada etapa pulada custa clique pago desperdiçado ou posição perdida.

É exagero para quem só precisa de um cartão de visitas online por alguns meses, para validar uma ideia antes de investir. Aí um construtor pronto, feito em um fim de semana, resolve, desde que o domínio seja próprio e esteja claro em nome de quem ele fica. Quando o site passar a ter a obrigação de trazer cliente, vale refazer com processo.

Leitura nossa: a etapa que mais separa um projeto bom de um ruim é a 2, arquitetura. Ela é barata, invisível no resultado final e, por isso mesmo, a primeira a ser cortada quando o orçamento aperta.

Perguntas frequentes