Telas navegáveis
As páginas principais ligadas na ordem real do fluxo. Você clica e percorre a jornada de ponta a ponta.
Método YveTech de Web · Etapa 02
Design e protótipo
Você clica, navega e aprova o site inteiro antes de ele existir. Mudar um bloco de lugar no protótipo leva minutos; mudar depois de programado leva dias — e é essa diferença que a etapa aproveita.
Aprovar imagem estática é aprovar metade da história
Site é comportamento: o que acontece ao clicar, ao errar o formulário, ao abrir no celular no meio da rua.
A entrega clássica de design é um arquivo de imagem com as telas principais. Fica bonito na apresentação e esconde tudo o que importa: o que aparece quando a busca não traz resultado, como o menu se comporta no celular, o que o usuário vê enquanto o formulário está enviando, o que acontece quando ele esquece um campo.
Por isso entregamos protótipo navegável, não figura. Você recebe um link, abre no seu computador e no seu telefone, clica nos botões e percorre a jornada inteira. O que você aprova é o site se comportando — sem código por baixo, mas com o comportamento real.
O desenho também não parte do zero a cada tela. Montamos um pequeno sistema: tipografia, escala de espaçamentos, cores com contraste verificado e componentes — botão, cartão, formulário, cabeçalho — desenhados uma vez e reutilizados. É o que faz o site ficar coerente da primeira à última página, e o que permite criar uma página nova meses depois sem contratar design outra vez.
Mover um bloco no protótipo custa minutos. Mover o mesmo bloco depois de programado custa dias — e é sempre no fim do prazo que alguém pede.
O que o protótipo entrega
Seis frentes que saem desta etapa e seguem valendo durante toda a vida do site.
Celular desde o começo
Cada tela desenhada também na largura do telefone — onde costuma estar a maior parte do seu tráfego.
Sistema de componentes
Botão, campo, cartão e cabeçalho definidos uma vez, com todos os estados: normal, foco, erro, vazio, carregando.
Contraste e acessibilidade
Tamanho de fonte, contraste e área de toque verificados contra a norma, não no olho.
Hierarquia visual
O olho vai primeiro ao que importa. A chamada principal não disputa espaço com o rodapé.
Conteúdo real na tela
Textos verdadeiros no lugar de preenchimento — é o texto real que revela se o bloco cabe.
Como o protótipo se parece
O que você recebe no link de aprovação, e o que olhamos junto com você.
Como a etapa acontece
Duas a três semanas, com duas rodadas de ajuste já previstas no prazo.
Esqueleto sem cor
Primeiro o arranjo: o que vem antes, o que vem depois, o que cabe na primeira tela. Sem cor e sem imagem, para a conversa ser sobre a ordem e não sobre gosto.
Direção visual
Aplicamos identidade, tipografia e cor em uma página inteira. Você aprova o clima ali, e ele se estende ao resto sem repetir a discussão em cada tela.
Protótipo navegável
As telas viram um link clicável, no computador e no celular. Você navega, sua equipe navega, e os comentários ficam registrados sobre a própria tela.
Rodadas de ajuste e aceite
Duas rodadas de refinamento estão no escopo. Ao final, o protótipo aprovado vira a referência que a etapa de construção precisa seguir.
Problemas que esta etapa evita
Cada um deles custa caro quando aparece depois da programação.
- "Não era isso que eu imaginei" — descoberto no protótipo, não na entrega.
- O celular ficou para depois — e depois virou remendo em cima do desktop.
- Cada página com um estilo — sem sistema, o site desmonta na terceira página.
- O texto não coube — porque o desenho foi feito com frase inventada.
O que você recebe no fim
Arquivos e acessos seus, úteis inclusive fora deste projeto.
- Link do protótipo — navegável no computador e no celular, com histórico de versões.
- Sistema de componentes — a base visual reutilizável para as páginas futuras.
- Guia de marca aplicado — tipografia, cores e espaçamentos com uso documentado.
- Registro das decisões — o que mudou, quando e a pedido de quem.
O custo de mudar de ideia, por momento do projeto
A mesma alteração, pedida em etapas diferentes. É o argumento para levar a aprovação do protótipo a sério.
| Alteração | No protótipo | Depois de programado |
|---|---|---|
| Trocar a ordem dos blocos da página | minutos | horas de remontagem e novo teste em todas as larguras |
| Mudar a chamada principal de lugar | minutos | horas, e mede-se de novo o desempenho da página |
| Acrescentar um campo ao formulário | minutos | campo, validação, envio, armazenamento e teste |
| Trocar a tipografia do site | uma alteração no sistema | revisão página a página, mais nova medição de velocidade |
| Incluir uma página nova no menu | minutos | menu, endereço, redirecionamento e sitemap |
| Repensar a jornada inteira | dias | na prática, refazer o projeto |
Compromissos desta etapa
O que combinamos antes de começar — e cobramos de nós mesmos durante o projeto.
2–3 sem.duração típica da etapa
2 rodadasde ajuste já previstas no escopo
Celular juntocada tela desenhada nas duas larguras
WCAG AAalvo de contraste e acessibilidade
Perguntas frequentes sobre design e protótipo
As dúvidas que mais aparecem nesta etapa. Sobre prazo, forma de cobrança e contrato, veja as perguntas frequentes da YveTech.
Preciso ter identidade visual pronta?
Não precisa, mas ajuda. Se você tem manual de marca, seguimos. Se tem só um logotipo, construímos a partir dele a paleta, a tipografia e os componentes — o suficiente para o site ficar coerente, sem virar um projeto de rebranding que você não pediu.
Quantas telas entram no protótipo?
As que representam padrões diferentes, e não uma por página do site. Um site com quarenta páginas costuma ter seis ou sete padrões: inicial, serviço, caso, blog, artigo, contato, resultado de busca. Aprovado o padrão, as páginas daquele tipo seguem o mesmo desenho.
Minha equipe pode comentar direto no protótipo?
Pode, e é assim que preferimos. Damos acesso a quantas pessoas você quiser e os comentários ficam sobre a própria tela, com autor e data. Isso evita a versão mais cara de retorno: três e-mails contraditórios sem ninguém saber qual prevaleceu.
E se, ao ver pronto, eu quiser mudar bastante coisa?
É para isso que a etapa existe, e duas rodadas de ajuste já estão no escopo. Se a mudança for de rumo — outra jornada, outro público — voltamos à etapa de estratégia e reavaliamos o prazo com você, de forma transparente. O que não fazemos é seguir para a programação com o protótipo em disputa.
Quer ver o seu site antes de ele existir?
Montamos o protótipo navegável da sua jornada principal. Conte o seu cenário e retornamos em até 1 dia útil.
Continue explorando
As quatro etapas do método e os três recortes da operação — cada uma com o seu próprio detalhamento.
Criação de SitesVoltar à visão geral da área
Estratégia e conteúdoA jornada de quem compra virando a estrutura do site
Construção e otimizaçãoCódigo enxuto, imagens tratadas e SEO técnico desde o primeiro arquivo
Publicação e evoluçãoA virada de chave e os ajustes guiados pelos primeiros meses
Responsivo de verdadeComo testamos cada entrega em aparelho e rede reais
Layout adaptativoUm só projeto atendendo desktop, tablet e celular
Ambiente de Criação de SitesDomínio, hospedagem, certificado e backup — tudo no seu nome