# Ferramentas para criação de wireframes

> Melhores ferramentas para criação de wireframes profissionais. Compare opções gratuitas e pagas para prototipagem e design de interfaces. Escolha a ideal!

URL: https://dpw.dev/ui-ux/ferramentas-criacao-wireframes/  
Publicado em: 2010-04-19  
Categoria: ui-ux  
Tags: layout, planejamento  
Autor: Tárcio Zemel

Ao iniciar um novo projeto web é sempre uma boa ideia para começar com um **wireframe**. A finalidade de um _wireframe_ é comunicar o layout de uma página sem se ater a cores e elementos de design. _Wireframes_ são grandes "salvadores de tempo" e ajudam todas as partes envolvidas no projeto a chegar a acordos sobre a colocação dos principais elementos de página, como cabeçalhos, áreas de conteúdo, menus de navegação e rodapés.

> Artigo baseado em [10 Excellent Tools for Creating Web Design Wireframes](http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes).

## Lucidchart

[![Lucidchart](/images/blog/ferramentas-criacao-wireframes/lucidchart.webp)](https://www.lucidchart.com/pages/pt/wireframe-online)

[Lucidchart](https://www.lucidchart.com/pages/pt/wireframe-online) é uma das ferramentas para criação de wireframes mais completas e intuitivas que se pode encontrar atualmente.

Facilita muito ser em português, ter uma interface prática (arrastar e soltar), armazenamento na nuvem, colaboração em tempo real e Integração com G Suite e Microsoft Office, fora já contar com vários modelos prontos para editar.

## MockFlow

[![Ferramenta para criação de wireframes: MockFlow](/images/blog/ferramentas-criacao-wireframes/ferramentas-criacao-wireframes-mockflow.webp)](http://www.mockflow.com/)

[MockFlow](http://www.mockflow.com/) permite que você projete, com colaboração em tempo real, mockups de user interfaces para seu software ou web sites. Ele vem com vários componentes internos e ícones.

## Axure

[![Ferramenta para criação de wireframes: Axure](/images/blog/ferramentas-criacao-wireframes/ferramentas-criacao-wireframes-axure.webp)](http://www.axure.com/)

[Axure](http://www.axure.com/) permite criar wireframes, diagramas de fluxo, protótipos e especificações para aplicações e web sites. Ele conta com uma série de widgets, incluindo botões, campos de formulário, formas e elementos dinâmicos que você pode editar e formatar. Também é possível a criação de bibliotecas de widgets personalizado.

## Balsamiq Mockups

[![Ferramenta para criação de wireframes: Balsamiq Mockups](/images/blog/ferramentas-criacao-wireframes/ferramenta-criacao-wireframes-balsamiq-mockups.webp)](http://www.balsamiq.com/products/mockups)

Usando [Balsamiq Mockups](http://www.balsamiq.com/products/mockups) você se sente como se estivesse desenhando, mas é digital, então você pode ajustar e reorganizar controles facilmente e o resultado final é muito mais limpo! Com 75 controles pré-definidos para escolher, você pode projetar qualquer coisa, desde uma caixa de diálogo super-simples a um aplicativo RIA completo.

## HotGloo

[![Ferramenta para criação de wireframes: HotGloo](/images/blog/ferramentas-criacao-wireframes/ferramenta-criacao-wireframes-hotgloo.webp)](http://www.hotgloo.com/)

[HotGloo](http://www.hotgloo.com/) é totalmente baseado na web e possui muitas features que permitem interações drag&drop bem simples e fáceis de se realizar. Essa á outra ferramenta para criação de wireframes que com suporte a colaboração em tempo real.

## Mockingbird

[![Ferramenta para criação de wireframes: Mockingbird](/images/blog/ferramentas-criacao-wireframes/ferramenta-criacao-wireframes-mockingbird.webp)](http://gomockingbird.com/)

[Mockingbird](http://gomockingbird.com/) é outro aplicativo web com foco na colaboração. Ele permite que você faça link entre vários mockupts e os visualize de forma interativa para ter ideia do fluxo de sua aplicação.

## Cacoo

[![Ferramenta para criação de wireframes: Cacoo](/images/blog/ferramentas-criacao-wireframes/ferramenta-criacao-wireframes-cacoo.webp)](http://cacoo.com/)

[Cacoo](http://cacoo.com/) é uma ferramenta online de desenho que permite que você crie mapas de site, wireframes, diagramas UML e diagramas de rede.

## ProtoShare

[![Ferramenta para criação de wireframes: ProtoShare](/images/blog/ferramentas-criacao-wireframes/ferramenta-criacao-wireframes-photoshare.webp)](http://www.protoshare.com/)

A ferramenta web [ProtoShare](http://www.protoshare.com/) é bem fácil de usar. Com foco na prototipagem e colaboração, os membros da equipe podem rever o trabalho e fornecer feedback em tempo útil, ideias e sugestões em wireframes clicáveis ou conteúdo criativo.

## iPlotz

[![Ferramenta para criação de wireframes: iPlotz](/images/blog/ferramentas-criacao-wireframes/ferramenta-criacao-wireframes-iplotz.webp)](http://iplotz.com/)

Com [iPlotz](http://iplotz.com/) é possível criar rapidamente mockups e wireframes navegáveis e clicáveis para a prototipação de  sites e aplicativos, em geral.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml