O wireframe no desenvolvimento de sites
Canal: Desenvolvimento | Autor: Jonathan Lamim Antunes | Publicado em: 22/05/2009 | Views: 3.356Quando começamos o desenvolvimento de um site a primeira coisa ue deve ser pensada é na arquitetura de informação, pois com uma arquitetura de informação bem consistente é possível desenvolver o projeto dentro do prazo e conforme o desejo do cliente.
Umas das partes da arquitetura de informação que é de suma importância dentro do desenvolvimento de um site é o wireframe. Ele tem como objetivo ajudar o desenvolvedor a compreender o que o cliente realmente deseja, e assim mostrar os requisitos funcionais do site.
Um wireframe nada mais é do que um desenho do site, onde serão delimitados os espaços em que cada informação será colocada, mostrando ao cliente como será feita a disposição do conteúdo solicitado por ele dentro do site. Ao montar o wireframe deve se observar toda a arquitetura de informação desejada pelo clietne e já definida em um primeiro momento, pois o wireframe também deve retratar a usabilidade do site.
Ao produzir o wireframe, não encha-o de detalhe, faça-o de forma básica, resumida, sem muitos detalhes, informando apenas o que for necessário, e de preferência em tons de cinza, para não dar a entender que este já é o layout do site.
O wireframe pode ser considerado a parte mais importante da avaliação e aceite de um projeto pelo cliente, pois se o wireframe for bem desenvolvido, o cliente não irá recusar o layout que será desenvolvido posteriormente, evitando assim o atraso no desenvolvimento do site por causa de alterações de layout.
Veja abaixo alguns modelos de wireframe:



Notaram alguma diferença ou semelhança entre os wireframes apresentado acima?
Os dois primeiros foram feitos usando software de desenho, o úlitmo foi feito à mão, com uma simples caneta. Essa é a melhor forma de se conceber um wireframe, mas não é a forma como este deve ser apresentado ao cliente.
Para apresentar um wireframe para o cliente utilize programas como Fireworks, Photoshop, Corel Draw, entre outros, para poder transformar aquilo que você fez usando uma caneta.
Até a próxima...
Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado
crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra.
Você não pode criar obras derivadas.
Vinculando Imagens no Word 200.
O recurso de vínculo de imagens é ótim. Próximo artigo
Métodos ágeis: Scrum
O Scrum é um método ágil para Gerencia.
Veja matérias relacionadas com o assunto:
| 11/03/2010 | Acessibilidade Web: Uma responsabilidade de todos |
| 11/03/2010 | Os 5 grandes desafios no processo de Desenvolvimento de Soft... |
| 04/03/2010 | A importância dos testes |
| 02/03/2010 | Introdução ao Silverlight - Parte 1 |
| 23/02/2010 | Redes Sociais e Desenvolvimento de Negócios |
| 08/02/2010 | Desenvolvedor Profissional… Será? |
| 05/02/2010 | Melhores práticas pra um iniciante PHP |
| 04/02/2010 | O que é On-Site SEO? |
| 03/02/2010 | Novo PHP versão 6 promete ser polêmico |
| 22/01/2010 | CGI - Formulário de Pedidos On-line |









Realmente wireframe é uma necessidade no desenvolvimento de um projeto.
Uma idéia de um ótimo progrma é o Axure. Ele facilita muito a construção de wireframe.
Abraços.
Uma necessidade que devemos sempre abordar...
Abraço!