Bom dia Pessoal.

Wireframes, até onde eles podem nos ajudar? Qual o melhor metodo para cria-los e planejar um projeto com eles?

Esses processos vamos discutir aqui hoje

Para que servem os wireframes antes de tudo?

Wireframe

É um rascunho ou estrutyra de uma tela que mostra onde vai ficar cada elemento de uma determinada interface (menu, logo, agrupamento de notícias, etc) facilitando no decorrer do projeto.

Qual a importancia disso?

Se você ainda tem dúvidas se deve começar a utilizar esse processo de criação de wireframes no processo de criação. Deve primeiro tentar iniciar em novo projeto (nada de tentar fazer o que ja está andamento )

De acordo com o Português Ivo Gomes, a criação e validação dos protóripos no papel tem como um objetivo também de indicar o peso e relevancia de cada elemento dentro de um layout, em relação aos outros elementos do laout.

Ivo Gomes diz:

Com base na validação dos protótipos em papel pelos próprios utilizadores, foi feita a digitalização dos mesmos em formato wireframe.
Um wireframe é um documento que tem como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e a sua relação com os demais elementos formadores do todo.

Hora de desenvolve-los

Alem de rabisca-lo, temos que pensar em seu aspecto, ja que o mesmo é um espelho do layout.

Recomenda-se que ele seja feito em preto e branco, apenas com bordas, sem muito preenchimento, para facilitar a manipulação e impressão.

O Nosso amigo Ivo Gomes nos cita também sobre isso:

Há ainda uma outra discussão relativamente ao uso da cor nestes ecrãs. Muitos especialistas dizem que não devemos usar a cor porque isso irá levantar questões no cliente do tipo: “é com aquela cor que vai ficar o site?”; ou “não gosto muito é das cores” em vez de se centrarem no layout das páginas.
Por outro lado, podemos usar a cor para distinguir certos objectos da interacção e zonas de aviso ao utilizador. Num ecrã a preto e branco não é fácil distinguir se há zonas de alerta ou de aviso e na fase de programação pode acontecer que essas zonas não sejam devidamente marcadas pelo programador.

Prefiro não influênciar nisso, eu prefiro desenvolver os mesmos em cores, para distinguir as zonas de alerta, porém isso também pode ser feito pela localização dos elementos

Posso citar também outro profissional, do Fator W - Walmar Andrade, que cita sobre as cores:

O uso de cor deve ser evitado. Se elas forem utilizadas, deve-se deixar claro para o design gráfico que elas não representam necessariamente o esquema de cores e ser utilizado no projeto real.

A sugestão de solução, não a salvação

Não vamos nos enganar, achando que a solução de todo e tipo de problema durante o desenvolvimento pode ser absorvido na hora do desenvolvimento dos wireframes. Porque geralmente vão desenvolver mais de 5, isso se o projeto for pequeno.

Os wireframes na maioria das vezes supre muitas coisas, mas do planejamento, e ajuda na hora de modelar o banco, mas lembre-se que: Nada é 100% perfeito. O Wireframe pode falhar e você voltar a pensar novamente em tudo

Eu recomendo estipular o prazo de desenvolvimento depois de desenvolver os primeiros wireframes, pois você terá dimensão do mesmo.

Apresentação do wireframe

Eu não recomendo a apresentação deles para o cliente, porque existe uma probalidade dele entender que aquilo é o layout dele. A parte gráfica e estética é separado, até explicar que é um esboço utilizado para definir areas de prioridade, e alertas, o cara ja encerrou o contrato.

O Walmar também cita sobre isso:

Apresentar wireframes ao cliente é um ponto um tanto quanto delicado. É preciso explicar a ele quais as finalidades daquele esboço e esclarecer que ele não representa design gráfico.

Vou postar algumas referencias deleciosas além do que já citei acima, sobre os wireframes, para não me extender, e para quem quiser estudar muitas referências são ideias.

• http://del.icio.us/luciano.lobato/wireframes
• http://del.icio.us/nafsantana/wireframes
• http://www.avellareduarte.com.br/projeto/desenvolvimento/desenvolvimento1/desenvolvimento11b.htm

Próximo post vamos falar mais e meter a mão na massa em um projeto teste pra aprendizagem

Tem seu metodo para desenvolver seus wireframes? Compartilhe-os aqui

• No Related Post