iMasters | Por uma internet mais criativa e dinâmica

• Acessibilidade
• Gerência de Projetos
• Gerência de TI
• UML
• Usabilidade

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 3 comentários

Wireframes fazem parte da Arquitetura da Informação de um site e têm como finalidade mostrar a disposição dos elementos na tela assim como os tamanhos de fontes a serem utilizados.

Fidelidade

Existem três tipos de wireframe, baseados no grau de fidelidade dos mesmo: baixa, média e alta fidelidade. O wireframe do meu blog, por exemplo, foi elaborado em baixa fidelidade, o que significa que nela não constam os elementos gráficos, tonalidades das cores a serem utilizadas ou estrutura de navegação.

Os wireframes de média fidelidade já contêm elementos que o aproximam mais do produto final, enquanto que os de alta fidelidade são os mais próximos a estrutura de layout.

Wireframe de Baixa Fidelidade

A imagem acima é um exemplo de wireframe de baixa fidelidade feito para o desenvolvimento do meu blog (www.pauloeduardo.com)

Ferramentas

Algumas ferramentas podem ser muito úteis no desenvolvimento de wireframes.

Axure RP Pro

O Axure é uma ferramenta especializada na área de Arquitetura da Informação que permite desenvolver wireframes navegáveis e ainda gera documentação em DOC.

Visual Paradigm

É uma ferramenta para modelagem UML, porém algumas de suas versões também permitem a criação de modelos de interface.

Visio

Ferramenta da Microsoft que faz parte do pacote Office que permite criação de diagramas de todos os tipos, incluindo o wireframe. (Você pode baixar os stencils de Wireframe para o visio).

Omnigraffle

Semelhante ao Visio, só que para usuários de Mac.

Ferramenta de Desenho

Além das ferramentas especializadas você pode usar sua ferramenta de desenho favorita (Photoshop, Corel, Fireworks, etc) para desenhar seus wireframes. A imagem de exemplo do meu blog foi desenvolvida com Fireworks.

Papel e Caneta

Ótima opção também, pois permite edição rápida no meio de uma reunião por exemplo, assim como permite inserção rápida de comentários.

Todos os artigos de Paulo Rezende

3 comentários publicados

• 1. Importante.

  Segunda-feira, 11/08/2008, por Willian Costa
  

  Muito bom artigo, bastante importante. Depois que comecei a trabalhar com wireframes o tempo desenvolvendo layout tornou-se bem mais rápido.

  Responder comentário

• 2. 1º passo

  Quarta-feira, 20/08/2008, por Renato Troccoli
  

  O wireframe é o primeiro passo para um grande projeto de design. Ficar tentando encaixar o layout direto com as cores e posições pode levar muito tempo e não conduzir o projeto a um resultado positivo.

  Responder comentário

• 3. Muito bom

  Quinta-feira, 02/04/2009, por Thiago Morão
  

  ótima matéria e ótima explicação

  Responder comentário

Sobre o autor

Paulo Rezende é profissional da área de web, atuando nela profissionalmente desde 2005 com tecnologias como XHTML, CSS, Webstandards, PHP, JavaScript, Jquery, CodeIgniter, cursando atualmente faculdade de Sistemas de Informação na Unniversidade Anhembi Morumbi de São Paulo, Atuando. Mantém o blog pessoal (www.pauloeduardo.com) e a Psyco Media Development, empresa de desenvolvimento de Sistemas.

Indique para um amigo

Tags relacionadas

android linux windows web publicidade brasil apple yahoo celular seguranca mercado mobile google desenvolvimento lançamento youtube internet iphone tecnologia twitter ti microsoft 3g php criação crescimento

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!