Wireframes E Protótipos De Websites: As Melhores Ferramentas Para O Design Do Seu Site

Serviços para wireframing e protótipos de sites podem ajudá-lo a delinear o seu projeto e fazer a arquitetura global do seu site sem a necessidade de contratar um web designer para isso. Por esta razão, o wireframing é o primeiro passo a ser considerado quando se projeta um novo site. Neste guia da MasterNewMedia, você encontrará as melhores ferramentas disponíveis do mercado para fazer wireframes e protótipos para o seu site.

Crédito da foto: WebDesigner Depot

De modo geral, um wireframe deve ser um protótipo visual em rascunho de design da interface para esboçar a arquitetura de um website e as relações entre suas páginas, tudo isso sem precisar se preocupar com as especificidades do seu projeto gráfico. É por isso que é chamado de "wireframe", porque descreve apenas as áreas-chave e componentes do futuro site, sem detalhamento de cores, elementos gráficos e detalhes específicos.

No entanto, historicamente, o wireframing se origina no mundo da computação gráfica, onde o termo descreve um módulo de representação de objetos 3D, dispondo apenas a wireframe, a fim de ter uma exibição rápida de imagens mais complexas sem muita demora.

Mas os wireframes não são apenas simplificadores excelentes da complexidade do design e poupadores de tempo, mas seus benefícios vão muito além da redução na exibição do design e tempo de produção.

Aqui estão algumas outras vantagens práticas da utilização de wireframes e protótipos para o design do seu site:

• Consistência: Ferramentas de wireframing tornam mais fácil testar e experimentar diversas variações de uma solução de design sem exigir muito tempo e recursos. É fácil de experimentar designs e layouts diferentes sem ir à falência.
• Planejamento: Fazer o design de sites usando wireframes também é extremamente útil quando se tem a necessidade de comunicar ideias no projeto inicial, com colegas, clientes e desenvolvedores. O protótipo de um site pode funcionar como uma base sólida sobre a qual considerar melhorias e aperfeiçoamentos para o projeto, bem como a estrutura do conteúdo, layout geral, posicionamento dos elementos-chave, e outros requisitos.
• Facilidade de navegação: Um wireframe ajuda o designer a planejar o posicionamento de elementos de navegação para fornecer uma melhor experiência aos visitantes do site. Através do desenvolvimento de wireframes e da impressão das páginas do protótipo pode-se facilmente fazer um pré-teste e analisar com antecedência quais os tipos de soluções mais apropriadas a adotar.
• Undo infinito: Os serviços para protótipos de sites permitem reverter e rastrear o histórico completo das alterações do projeto anterior e voltar a qualquer um deles.
• Realismo: As maquetes podem ser criadas para ser usadas em testes iniciais com usuários e que se parecem a um site web normal.
• Colaboração e compartilhamento: Qualquer um pode se envolver. Engajar a outros designers ou colegas para obter feedback. Você pode compartilhar seu projeto em wireframe facilmente com clientes e consumidores para ilustrar o andamento do trabalho de design.
• De graça: Economize dinheiro. Sim: você não precisa pagar nada para utilizar estes serviços para protótipos de sites gratuitos listados neste guia.

Para ajudá-lo a selecionar e identificar o serviço de wireframing gratuito ou prototipagem de websites, aqui estão selecionados e organizados todos os dados relevantes para você comparar e selecionar o serviço online mais adequado para suas necessidades.

Aqui abaixo, você encontrará um mindmap interativo, um quadro comparativo e um conjunto de mini-resenhas para tornar sua avaliação tão eficaz quanto possível.

Estes são os critérios usados para essa comparação:

• Tipo de software: Download / ferramenta baseada na web (se baixado, o sistema operacional aceito é especificado).
• Biblioteca de símbolos GUI: Gratuita, botões prontamente disponíveis, barras de rolagem, menus e outros objetos para desenhar wireframes.
• Wireframes interativas: Maquetes clicáveis que simulam a navegação entre páginas web.
• Colaboração em tempo real: Interação com os clientes e colaboradores para receber feedback ao vivo.
• Formatos de exportação: Os formatos suportados para exportar projetos em wireframes.
• Limitações de contas: Restrições dentro de conta gratuita (se houver), como tempo de uso, número de wireframes que você pode criar, etc

NB: O presente artigo de ferramentas para wireframing gratuitas ainda está incompleto. Você pode querer favoritar esta página (basta pressionar CTRL + D no seu teclado Windows ou CMD + D no Mac), conforme novos serviços forem adicionados nas próximas semanas.

Aqui está o guia completo em detalhes:

Ferramentas Para Wireframing E Prototipagem De Sites - Tabela De Comparação

Ferramentas Para Wireframing E Prototipagem De Sites

1. Gliffy

   

   Gliffy é uma ferramenta de wireframing web-based que permite traçar um protótipo para o seu site, você pode criar wireframes estáticos e interativos para simular a navegação entre páginas web e tirar proveito de uma extensa biblioteca de símbolos GUI. Você também pode colaborar com outras pessoas para receber feedback em tempo real e comentários sobre seu trabalho. Quando terminar, pode exportar seus wireframes para arquivos SVG, Gliffy XML, ou formatos de imagem JPG ou PNG. A conta gratuita do Gliffy permite tirar até cinco wireframes sem criptografia, mas suporta anúncios.
   
   http://www.gliffy.com/
   
   
   
   
   
   

2. Jumpchart

   

   Jumpchart é um aplicativo de planejamento baseado em navegador que permite desenhar um wireframe para o seu site. Você pode criar wireframes estáticos e interativos para simular a navegação entre as páginas web de sua maquete. Jumpchart também permite que você compartilhe seus projetos de wireframing com os clientes para receber feedback e comentários sobre o seu trabalho sem a utilização de anexos de email. Se precisar, você pode exportar seus wireframes em arquivos CSS / XHTML ou em um formato compatível com o WordPress. Jumpchart é gratuito para até dois wireframes com um máximo de dois colaboradores para o compartilhamento. Não disponibiliza biblioteca de símbolos GUI.
   
   http://jumpchart.com/
   
   
   
   
   
   

3. MockFlow

   

   MockFlow é um serviço para protótipos de sites, disponível como aplicativo baseado na web e como software para Windows e Mac. Os wireframes criado com MockFlow são interativos e simulam a navegação do usuário através de páginas web. Para desenhar os seus wireframes, você pode usar a grande biblioteca de símbolos GUI. A colaboração na partilha de wireframes também é totalmente suportada. Quando terminar, você pode exportar seus projetos para PPT, PDF ou PNG. Observe que, com a conta gratuita, todos os seus arquivos exportados serão filigranas. As contas gratuitas de MockFlow permitem construir um wireframe com até quatro páginas, e até dois colaboradores para o compartilhamento.
   
   http://www.mockflow.com/
   
   
   
   
   
   

4. iPlotz

   

   iPlotz é uma ferramenta de wireframing que permite criar protótipos navegáveis de sites e aplicações de software. iPlotz está disponível como serviço web-based e como software pode ser baixado para Windows e Mac. O serviço tem uma biblioteca grande de símbolos GUI que fornece botões prontos para o uso, barras de rolagem, barras de menus e outros objetos que você pode usar para desenhar suas maquetes. Você também pode compartilhar o seu projeto em tempo real e receber feedback ao vivo, além de comentários. Quando terminar, você pode exportar seu wireframe para PDF, PNG, JPG e arquivos HTML. A conta gratuita de iPlotz permite que você crie um wireframe com até cinco páginas navegáveis.
   
   http://www.iplotz.com/
   
   
   
   
   
   

5. Mocklinkr

   

   Mocklinkr é um serviço baseado na web para criar protótipos para o seu site, desenhando wireframes interativos que você pode navegar como se fosse em um site de verdade. Você também pode compartilhar seu wireframing com outros colaboradores que possam fornecer feedback diretamente usando Mocklinkr. A conta gratuita permite desenhar até dez wireframes, sem limite de páginas. Nenhum recurso de exportação, nem biblioteca para símbolos GUI estão disponíveis.
   
   http://www.mocklinkr.com/
   
   
   
   
   
   

6. Pencil Project

   

   The Pencil Project é um add-on de código aberto livre do Firefox que permite a você criar wireframes e protótipos dentro do Firefox. Você pode criar um wireframe interativo que simula a navegação na web e também usar a biblioteca de símbolos GUI para adicionar objetos, botões, barras de rolagem e outros dispositivos para tornar seu wireframe mais realista. Todos os wireframes que você criar podem ser exportados para HTML, PDF, PNG ou MS Word e formatos compatíveis de arquivos OpenOffice.org. Não há novas funcionalidades de colaboração disponíveis.
   
   http://www.evolus.vn/Pencil/Home.html
   
   
   
   
   
   

7. Lumzy

   

   Lumzy é uma ferramenta de criação livre baseada em maquete que permite que você desenhe o protótipo do seu site. Uma extensa biblioteca de símbolos GUI está disponível para adicionar elementos gráficos para o seu protótipo, a fim de adicionar mais realismo ao seu projeto. Além disso, você pode convidar outras pessoas para colaborar em seu projeto de maquete e receber feedback. Os formatos de exportação disponíveis são: PDF, PNG, JPG. Maquetes interativas não são suportadas.
   
   http://www.lumzy.com/
   
   
   
   
   
   

8. Mockingbird

   

   Mockingbird é uma ferramenta de wireframing gratuita baseada na web que permite criar protótipos interativos do seu site. Você pode criar seu site direto dentro do seu navegador, aproveitando-se de uma grande biblioteca GUI com vários objetos para personalizar a sua maquete. Assim que o trabalho estiver pronto, você pode compartilhar seu projeto com outros colaboradores ou exportar o wireframe para PDF e formatos de arquivo JPG.
   
   http://gomockingbird.com/
   
   
   
   
   
   

9. FluidIA

   

   FluidIA é uma ferramenta de wireframing baseada na Web para sites e prototipagem de interfaces de usuário. Ainda numa fase inicial de desenvolvimento, FluidIA funciona corretamente apenas usando o Firefox 2.5. Os recursos de colaboração estão disponíveis no FluidIA, assim você pode compartilhar e interagir com outras pessoas em sua maquete. Nenhuma biblioteca GUIestá disponíveis, nem a exportação de recursos ou wireframes interativos são suportados.
   
   http://www.fluidia.org/
   
   
   
   
   
   

10. Balsamiq Mockups

    

    Balsamiq Mockups é uma ferramenta de wireframing que permite que você desenhe protótipos e wireframes interativos. Balsamiq Mockups está disponível como aplicativo baseado na web e como software pode ser baixado para Windows, Mac e Linux. O serviço tem uma biblioteca grande de símbolos GUI com botões prontos para o uso, as barras de rolagem e outros objetos que você pode usar para desenhar suas maquetes. Os recursos de colaboração também permitem que você compartilhe seu projeto para receber feedback e comentários em tempo real. Quando terminar, você pode exportar seu wireframe para arquivos XML, PDF, PNG. A conta gratuita permite criar wireframes ilimitados durante sete dias.
    
    http://www.balsamiq.com/products/mockups