Quem trabalha com apresentação de projetos web, já está acostumado com o termo wireframe. Ele é utilizado para cunhar o desenho básico (?esqueleto?) que serve de guia para a interface que estamos projetando ? seja um site ou aplicativo, por exemplo ? e para organizar visualmente os elementos fundamentais do projeto antes de desenvolver. Existem ferramentas que ajudam a criar esboços rápidos e que permitem a colaboração de outros membros do projeto. Seguem algumas dicas de ferramentas incríveis.
Primeiramente vamos entender melhor o que é um Wireframe?
Wireframes são desenhos com estruturas básicas de um projeto, que pode transmitir uma ideia de como será a arquitetura daquele produto quando pronto. Em outras palavras, seria um “esqueleto” inicial, disposto a mostrar como aquele projeto será quando pronto. Os wireframes são muito utilizados para que o desenvolvedor possa ter um entendimento de todos os requisitos solicitados pelo cliente no desenvolvimento do projeto, seja este um software, um site ou até uma casa ou carro. Através desse esboço inicial, o desenvolvedor consegue analisar junto ao cliente todos os elementos que estarão, possivelmente, na versão final do produto e evita perda de tempo com reconstruções posteriores quando o projeto já estiver na fase final de construção.
*O wireframe é a etapa essencial para visualizar projetos, estruturar informações e desenvolver a interface gráfica.
1. MockFlow
A melhor ferramenta online que eu testei. Fácil de usar, com diversos recursos e componentes. Permite o compartilhamento do wireframe, utilização de grid, guias, régua e exportação como blueprint (formato semelhante àquelas plantas azuis de engenharia) e preto e branco. Infelizmente a versão gratuita permite criar apenas um mockup, porém, com múltiplas páginas. Possui também a versão stand-alone.
LINK DA FERRAMENTA - Clique aqui para acessar
2. Mockingbird
O Mockinbird é uma ferramenta online que facilita a criação, visualização e compartilhamento dos wireframes de seu site ou aplicação.
LINK DA FERRAMENTA - Clique aqui para acessar
3. Lovely Charts
É uma ferramenta online disponível para instalação no Chrome que permite não somente a criação de wireframes, mas também de sitemaps, fluxogramas, organogramas, e muito mais. A única desvantagem é que nessa versão gratuita você pode salvar apenas 1 gráfico editável, mas pode exportar ilimitadamente.
LINK DA FERRAMENTA - Clique aqui para acessar
4. HotGloo
O HotGloo é 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.
LINK DA FERRAMENTA - Clique aqui para acessar
Cacoo é uma ferramenta com interface amigável, uma boa quantidade de recursos e versão em português. Assim como o Lovely Charts, ele também permite a criação de diversos tipos de diagramas, inclusive UML e é completamente free.
LINK DA FERRAMENTA - Clique aqui para acessar
6. iPlotz
Com iPlotz é possível criar rapidamente mockups e wireframes navegáveis e clicáveis para a prototipação de sites e aplicativos, em geral.
LINK DA FERRAMENTA - Clique aqui para acessar
7. Axure
Axure 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.
LINK DA FERRAMENTA - Clique aqui para acessar
8. Balsamiq
Usando Balsamiq 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.
\4
LINK DA FERRAMENTA - Clique aqui para acessar
9. PhotoShare
A ferramenta web ProtoShare é 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.
LINK DA FERRAMENTA - Clique aqui para acessar
10. Illustrator, Corel Draw, Photoshop e outros
Você não necessariamente precisa utilizar programas específicos para desenvolver wireframes; eles podem ser desenvolvidos utilizando ferramentas gráficas como o Illustrator e o Corel, por exemplo. Mas às vezes os prazos são curtos e algumas das ferramentas listados acima oferecem recursos que permitem mais rapidez na produção e na avaliação do wireframe por membros da equipe.
Em resumo, os wireframes são grandes “salvadores de tempo” e ajudam todas as partes envolvidas no projeto, em especial o web, ao 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.
Sucesso a todos!
_______________________________________________________________
Autor: Adriano Oliveira
Fundador e Editor-chefe do Acervo Publicitário, formado em Publicidade e Propaganda
pelas Faculdades Integradas de Bauru (FIB), trabalha como Profissional de Marketing B2B no segmento de engenharia mecânica, tem especializações em Design,
Marketing Digital e eventos industriais. "Compartilhar o torna mais do que você é. Quanto mais você der para o mundo, mais a vida poderá retribuir." (Jim Rohn)
_______________________________________________________________
Ficaremos honrados se você "Curtir" nossa page do Facebook:
