Skip to:

O jeito mais fácil de criar um wireframe online

Crie wireframes para sites e apps rapidamente, desenvolva ideias com bloquinhos de notas, mapeie o fluxo do usuário e reúna referências. Faça tudo isso com seu time em tempo real em um único quadro branco online, gratuitamente.
accenture.svgbumble.svgdelloite.svgdocusign.svgcontentful.svgasos.svgpepsico.svghanes.svghewlett packard.svgdropbox.svgmacys.svgliberty mutual.svgtotal.svgwhirlpool.svgubisoft.svgwalt disney.svgyamaha.svgwp engine.svg
accenture.svgbumble.svgdelloite.svgdocusign.svgcontentful.svgasos.svgpepsico.svghanes.svghewlett packard.svgdropbox.svgmacys.svgliberty mutual.svgtotal.svgwhirlpool.svgubisoft.svgwalt disney.svgyamaha.svgwp engine.svg

Poupe tempo ao criar novos wireframes

Os modelos e exemplos de wireframe e a biblioteca de UI da Miro ajudam a criar protótipos de baixa fidelidade para páginas de sites e telas de produtos em questão de minutos. Sem precisar ter conhecimento de design.

Integrações para acelerar a criação

Use as integrações da Miro com IconFinder e Unsplash para fazer wireframes de apps e sites mais detalhados e de fácil compreensão em uma única ferramenta.

Wireframing em tempo real

Em um mesmo board, crie wireframes em tempo real enquanto faz uma sessão de brainstorming com seu time. Ou, se preferir, planeje o wireframe de seu aplicativo ou página de site e, em seguida, compartilhe-o com o restante da equipe em poucos cliques.

Por que é melhor criar wireframes na Miro

Brainstorm

Onde a inovação acontece

Mapeie sua visão - e faça iterações rapidamente - com ferramentas intuitivas e uma tela infinita para explorar a vontade. O criador de wireframes da Miro é flexível, permitindo que as equipes criem qualquer tipo de wireframe que precisarem.
categorization

Facilite o processo de receber feedbacks de stakeholders

Trabalhe na criação de wireframes para sites ou apps, compartilhe e recolha feedbacks de stakeholders de forma assíncrona em um único board. Use as notas adesivas, comentários e mais para receber feedbacks.
papers

Salve e adione designs do Web page e Adobe XD

Simplifique a colaboração ao criar layouts adicionando artboards do Adobe XD à lousa online da Miro. Para iterações mais rápidas, capture e adicione referências ou reutilize páginas existentes e telas de produtos em seu wireframe na Miro.
collaboration

Frames, linhas de conexão e links

Use a funcionalidade de "Frames" da Miro para mostrar diferentes telas da web ou produtos. Conecte-as com setas e use a funcionalidade de "Ligar a" para visualizar o fluxo dos usuários mais facilmente.

Mais do que só uma ferramenta para fazer wireframes

Vá da pesquisa de usuário, a criação de wireframes em equipe, gestão de projetos visuais, implementação da nova página e apresentação de resultados – tudo em um único espaço de trabalho online.

Modelos editáveis prontos para uso

Como criar um wireframe online?

1. Selecione o dispositivo

Escolha o dispositivo que você deseja criar o wireframe. Pode ser mobile, tablet ou para desktop Coloque o componente no board.
Usar esse modelo

Wireframes online - Perguntas Frequentes

O que é um wireframe?

Um wireframe ou protótipo é uma demonstração visual inicial de uma tela de um site ou aplicativo. São usados diagramas online, como formas geométricas e elementos que criam um "rascunho" da versão da interface da página. Isso ajuda a ter uma visão da usabilidade e eficiência da página, antes mesmo de iniciar a criação do layout e do desenvolvimento de código do site ou app. É possível criar wireframes online com a ferramenta da Miro gratuitamente e ainda convidar os colegas de trabalho para dar feedbacks e colaborar em um mesmo local, ao mesmo tempo.

Como fazer um wireframe online?

O primeiro passo para fazer um bom wireframe online é entender o objetivo da página ou tela que irá criar, qual objetivo final que você espera que o usuário realize nessa página? Após entender o fluxo do usuário esperado, comece a esboçar a página usando grades e proporções para uma boa usabilidade. Lembre-se de criar uma história e respeitar a hierarquia das informações na página. Pesquise outros sites e apps para criar seu wireframe observando o que pode já estar funcionando para outras empresas. Após finalizar o mockup do seu wireframe, convide colegas de equipe para avaliar e validar seu protótipo de página.

Qual a diferença entre um wireframe para app e para site?

A principal diferença ao montar um wireframe para app ou site está no formato de cada. Wireframes de aplicativos geralmente são feitos com textos e elementos menores, já que os dispositivos móveis possuem telas menores e uma experiência do usuário diferente. Ao criar um wireframe para site, você tem mais liberdade quando se pensa nesses elementos. O fluxo do usuário também muda de acordo com o dispositivo. Com a Miro, você consegue facilmente criar do zero um wireframe para app ou site usando nossa biblioteca de UI.

A ferramenta para criar wireframes da Miro é gratuita?

Sim, a ferramenta de wireframes da Miro é 100% grátis. Após se cadastrar, você pode adicionar da nossa biblioteca de templates os exemplos de wireframes para app e site ao seu board ou usar formas geométricas para criar seu próprio wireframe do zero. Em seguida, convide gratuitamente ao seu board quantos colegas de equipe quiser e comece a colaborar.

A criação de wireframes faz parte da área de UX ou UI?

Dos dois! O processo de desenvolvimento de wireframes para sites ou aplicativos faz parte do estágio inicial de pesquisa das áreas de UX (User Experience, em português Experiência do Usuário) e UI (User Interface, em português Interface do Usuário). Eles são importantes porque influenciam diretamente no resultado final de um produto, demonstrando a usabilidade e eficiência da interface, que são essenciais para qualquer site, produto ou serviço.

Crie um board em segundos

Junte-se a milhares de equipes que usam a Miro para impulsionar seu trabalho.
accenture.svgbumble.svgdelloite.svgdocusign.svgcontentful.svgasos.svgpepsico.svghanes.svghewlett packard.svgdropbox.svgmacys.svgliberty mutual.svgtotal.svgwhirlpool.svgubisoft.svgyamaha.svgwp engine.svg
accenture.svgbumble.svgdelloite.svgdocusign.svgcontentful.svgasos.svgpepsico.svghanes.svghewlett packard.svgdropbox.svgmacys.svgliberty mutual.svgtotal.svgwhirlpool.svgubisoft.svgyamaha.svgwp engine.svg