PT
PortuguêsEnglishEspañol
Todas as ferramentas
Ferramentas para programador 100% grátis

Wireframe de site online

Adicione os blocos na ordem da página, arraste para o lugar e puxe o canto para mudar o tamanho. Clique num bloco para trocar o texto.

Como usar

Muito obrigado por ajudar!

Cada doação ajuda a pagar os servidores e mantém as ferramentas grátis para todo mundo. Escolha ou digite o valor:

Pagamento seguro pela Stripe. Abre em outra aba.

Voltar para CSS e design

O rascunho da página, bloco por bloco

Disponível em: Português

Publicidade

Wireframe de site online: para que serve

Monte o rascunho da página com blocos prontos (cabeçalho, banner, título, texto, imagem, botão, cards, formulário, vídeo, rodapé e caixa livre), arraste para o lugar e puxe o canto para mudar o tamanho, com alinhamento de 10 em 10 pixels.

Escolha a largura de computador (1200 px) ou de celular (390 px) e baixe o wireframe em PNG ou SVG para aprovar com o cliente.

Como usar

  1. Escolha a largura da página.
  2. Adicione e arraste os blocos.
  3. Baixe o wireframe em PNG ou SVG.

Quando usar

  • Aprovar o layout com o cliente.
  • Planejar uma landing page.
  • Aula de UX e design.

Perguntas frequentes

O que é um wireframe?

É o rascunho da estrutura de uma página, em cinza, sem cores, fotos ou textos finais. Mostra onde fica cada coisa (menu, banner, chamadas, formulário) para combinar o layout com o cliente ou a equipe antes de gastar tempo com o design.

Como mudar o tamanho de um bloco?

Clique no bloco e arraste o quadradinho azul do canto de baixo à direita. Os blocos se alinham de 10 em 10 pixels para ficar fácil deixar tudo reto. A tecla Delete apaga o bloco selecionado.

Faço uma versão para celular?

Sim. Troque a largura para Celular antes de começar: a página fica com 390 pixels de largura, como a tela de um celular comum, e os blocos novos já entram no tamanho certo.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas

As ferramentas são oferecidas como estão, sem garantia. Não nos responsabilizamos pelos resultados nem pelo uso que se faz deles.