03 Set 2026 Thiones Braz Criação de Sites

O que é um protótipo de site e por que aprovar o layout antes de programar

Você contratou alguém para fazer o seu site, respondeu algumas perguntas sobre o negócio, mandou o logotipo e as fotos. Duas semanas depois chega um arquivo com o título "protótipo para aprovação" — e nele o site aparece em caixas cinzas, sem cor, sem foto e com textos genéricos. A reação mais comum é a mesma: "mas é isso? Está muito sem graça".

Essa cena se repete todo dia, e ela não indica que o trabalho está mal feito. Indica que ninguém explicou o que é um protótipo de site, para que ele serve e por que ele é justamente a etapa mais barata de mudar de ideia. Aprovar um protótipo sem entender o que está aprovando é a origem da maior parte das discussões que aparecem no fim de um projeto.

Neste guia você vai entender o que é um protótipo, qual a diferença entre wireframe, layout e protótipo navegável, o que olhar quando ele chegar até você e quais perguntas fazer antes de escrever "aprovado" no WhatsApp.

O que é um protótipo de site

Um protótipo de site é uma versão de teste do site, feita antes da programação, para mostrar como as páginas vão ser organizadas e como o visitante vai navegar entre elas. Ele existe para responder a uma pergunta: a estrutura está certa? Não a cor do botão, não a fonte do título — a estrutura.

Pense em uma obra. Ninguém levanta a parede para depois descobrir onde vai a tomada. Primeiro vem a planta, que é barata de riscar e de refazer. O protótipo é a planta do seu site: enquanto ele é só um desenho, mover um bloco de lugar custa alguns minutos. Depois que o site está programado, o mesmo pedido pode custar dias de trabalho.

É por isso que profissionais sérios insistem nessa etapa mesmo quando o cliente tem pressa. Pular o protótipo não economiza tempo: adia o problema para o momento em que ele fica caro.

Wireframe, layout e protótipo navegável

Três palavras aparecem misturadas nessa conversa e confundem quem está contratando. Elas descrevem etapas diferentes do mesmo caminho:

Etapa	Como aparece	O que você deve avaliar
Wireframe	Caixas cinzas, sem cor e com texto de exemplo	Se a ordem das seções faz sentido e se nada essencial ficou de fora
Layout visual	Já com cores, fontes, logotipo e imagens reais	Se o visual combina com a marca e se o texto está legível
Protótipo navegável	Um link em que dá para clicar nos botões e trocar de página	Se o caminho até o contato é curto e óbvio
Site programado	O site de verdade, funcionando no navegador	Velocidade, celular, formulários e conteúdo final

Nem todo projeto passa pelas quatro etapas de forma separada — em sites menores, o wireframe e o layout costumam vir juntos. O importante é entender em qual delas você está quando alguém pede a sua aprovação, porque o tipo de comentário útil muda completamente.

Esteira das etapas de um projeto de site: briefing, wireframe, layout visual, aprovação e programação, mostrando que mudar antes da programação custa muito menos — O protótipo é a etapa em que mudar de ideia ainda é barato.

Por que aprovar antes de programar

Três motivos justificam a espera:

Erro cedo é erro barato. Descobrir no wireframe que faltou uma página de depoimentos custa uma caixa nova no desenho. Descobrir depois de pronto custa refazer o código, as imagens e os textos daquela seção.
Alinha o que cada um imaginou. Quando você diz "quero um site moderno e limpo", cada pessoa forma uma imagem diferente na cabeça. O protótipo transforma essa frase vaga em algo visível, que dá para discutir com objetividade.
Cria um combinado claro. Depois de aprovado, o protótipo vira a referência do projeto. Isso protege os dois lados: você sabe o que vai receber e quem executa sabe onde o trabalho termina — o que evita o famoso "só mais um ajustezinho" infinito.

Vale lembrar que essa etapa entra no cronograma e no orçamento. Se quiser entender melhor como o tempo do projeto se distribui, veja quanto tempo leva para fazer um site.

O que olhar quando o protótipo chegar

Reserve meia hora, abra em um computador e depois no celular, e passe por esta lista em vez de reagir só pela primeira impressão:

A primeira tela explica o negócio? Quem cai ali precisa entender em segundos o que você faz, para quem e onde. Esse ponto está detalhado em o que não pode faltar na página inicial.
Todas as páginas necessárias existem? Confira se serviços, sobre, contato e as demais páginas do seu plano estão previstas — e leia sobre como organizar as páginas do site se tiver dúvida na estrutura.
Dá para chegar ao contato de qualquer página? Conte quantos cliques separam o visitante do WhatsApp ou do formulário. Mais de dois já é sinal de alerta.
A ordem das seções segue a dúvida do cliente? Primeiro o que você resolve, depois como funciona, depois a prova de que funciona, e só então o convite para falar com você.
Cabe no celular? Peça para ver a versão mobile do protótipo. A maioria das visitas vem de lá, e uma seção que funciona no computador pode virar uma rolagem infinita no telefone.
Você consegue produzir o conteúdo previsto? Se o protótipo reserva espaço para seis depoimentos e você tem dois, é melhor ajustar agora do que deixar buracos no site publicado.

Como dar um retorno que ajuda

Comentários como "não gostei" ou "está estranho" travam o projeto porque não indicam o caminho. Em vez disso, aponte o efeito: "o botão de orçamento ficou escondido", "senti falta de explicar o preço aqui", "essa seção parece antes da hora". Descrever o problema é sua tarefa; propor a solução é a de quem projeta.

Junte todos os comentários em uma lista única também. Aprovação parcelada em vinte mensagens ao longo de dez dias é o jeito mais rápido de atrasar um projeto — e é um dos erros comuns ao criar um site que mais aparecem na prática.

Erros comuns nessa etapa

Julgar cor em wireframe. Se está tudo cinza, é de propósito: a intenção é você olhar a estrutura sem se distrair com o visual.
Aprovar sem ler. "Aprovado" enviado em cinco minutos costuma virar pedido de mudança grande três semanas depois.
Mostrar para dez pessoas. Opinião demais paralisa. Escolha no máximo duas pessoas que conheçam o negócio e decida.
Deixar o texto para depois. Conteúdo atrasado é a causa número um de projeto parado. Vá escrevendo enquanto o protótipo é revisado.
Copiar o site do concorrente. Você não sabe se aquele site vende. Copiar layout é copiar o problema junto.
Achar que protótipo é o site pronto. Ele não tem velocidade, formulário funcionando nem conteúdo final — e não deveria ter mesmo.

Conclusão

O protótipo é a etapa em que o site ainda é uma ideia negociável. Ele parece pouco porque é feito para parecer: sem cor e sem imagem, sobra atenção para o que realmente decide o resultado — a ordem das informações e o caminho até o contato. Toda mudança que você faz ali sai por uma fração do que custaria depois.

Se essa etapa nunca apareceu nos seus projetos anteriores, é um bom critério na hora de escolher quem vai fazer seu site. A TH Designer trabalha exatamente assim com negócios de Guarapari e região: você recebe o protótipo antes da programação, revisa com calma, pede os ajustes e só depois o site é construído — sem surpresa no fim. Veja nossos serviços e mande uma mensagem contando o que o seu site precisa resolver; a gente devolve a estrutura sugerida para você olhar.

Perguntas frequentes

O que é um protótipo de site, em palavras simples?

É uma versão de teste do site, feita antes da programação, que mostra como as páginas serão organizadas e como o visitante vai navegar entre elas. Funciona como a planta de uma obra: enquanto é só um desenho, mudar um bloco de lugar custa minutos; depois de programado, o mesmo pedido pode custar dias.

Qual a diferença entre wireframe e protótipo?

O wireframe é o rascunho em caixas cinzas, sem cor e sem imagem, feito para você avaliar apenas a estrutura e a ordem das seções. O protótipo navegável vem depois: é um link em que dá para clicar nos botões e trocar de página, para testar se o caminho até o contato é curto e óbvio. Em projetos menores, as duas etapas costumam vir juntas.

Por que o protótipo é cinza e sem imagens?

É de propósito. Sem cor, fonte e foto, sobra atenção para o que realmente decide o resultado: quais informações aparecem, em que ordem e quantos cliques separam o visitante do contato. As cores, as fontes e as imagens entram na etapa seguinte, o layout visual.

Posso pular o protótipo para o site ficar pronto mais rápido?

Dá para pular, mas raramente compensa. Sem essa etapa, os problemas de estrutura só aparecem quando o site já está programado, e aí a correção custa muito mais tempo do que a semana que você economizou. Pular o protótipo não elimina o retrabalho: apenas adia para o momento em que ele fica caro.

Como dar um retorno útil sobre o protótipo?

Aponte o efeito, não a solução: 'o botão de orçamento ficou escondido' ajuda muito mais do que 'não gostei'. Reúna todos os comentários em uma lista única em vez de mandar pedidos soltos ao longo de vários dias, e limite a consulta a duas pessoas que conheçam o negócio — opinião demais paralisa a decisão.

Thiones Braz

Web designer e desenvolvedor em Guarapari — ES. Cria sites profissionais, landing pages e sistemas sob medida na TH Designer, sempre com boas práticas e versionamento. Veja os serviços ou conheça o trabalho.

Comentários

Entre com o Google para deixar seu comentário.