O wireframe no desenvolvimento de sites

Canal: Desenvolvimento  |  Autor: Jonathan Lamim Antunes  |  Publicado em: 22/05/2009  |  Views: 3.356

Quando 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...

Creative Commons 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.
Vote no artigo:

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Thiago Antonio
Publicado em:
22/05/2009 - 11:25
Parabéns pelo post Jonathan.
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.
Paulo
Publicado em:
26/05/2009 - 08:31
Paulo
Muito legal o seu artigo, eu já usava wireframe no desenvolvimento, e agora é que não paro de usar mesmo.
Carlos Prada
Publicado em:
28/05/2009 - 08:06
Carlos Prada
Eu digo que o wireframe é meio projeto, pois se ele for bem definido, o resto vai acontecer com sucesso, agora se ele nào deixar as idéias claras, coitado do desenvolvedor...
Tiago Pelais
Publicado em:
11/07/2009 - 14:05
Parabéns Jonathan!
Uma necessidade que devemos sempre abordar...

Abraço!