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 usarO rascunho da página, bloco por bloco
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
- Escolha a largura da página.
- Adicione e arraste os blocos.
- 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.