WIREFRAME "Estrutura de Arame" (Fio) Metodologia de Desenvolvimento  Equipe Webdesign CCE - 2010 UFPR
Exemplo Visual
Wireframe  <ul><ul><li>Documento cada vez  mais   importante  </li></ul></ul><ul><ul><li>Conhecer / Trabalhar  </li></ul><...
Wireframe  <ul><ul><li>Contudo o  &quot; Diferencial dos bons desenvolvedores é: &quot; </li></ul></ul><ul><ul><ul><li>ass...
Wireframe “ O primo pobre do layout é fundamental para o trabalho do arquiteto de informação, porque auxilia a equipe de d...
 
Wireframe  <ul><ul><li>Documento que se torna cada vez mais fundamental para o trabalho do  arquiteto de informação </li><...
Wireframe  <ul><ul><li>Função de estruturar o  conteúdo  de cada página </li></ul></ul><ul><ul><li>Indica o  peso  e  rele...
Exemplo Visual
Wireframe - Funções <ul><ul><li>Indicar a correta marcação de textos, de navegação,  guidelines  de marca e até dos recurs...
Wireframe - Funções <ul><ul><li>Além da função estrutural, o wireframe também é utilizado para marcação das etapas de um p...
Wireframe  <ul><ul><li>Como as etapas de uma compra online que vão da busca pelo produto, escolha de um dos resultados, co...
Wireframe  <ul><ul><li>Documento superficial baixo detalhamento </li></ul></ul><ul><li>       pouca influência no trabalho...
 
Wireframe -  alto detalhamento <ul><ul><li>Este modelo apresenta alto grau de detalhamento dos componentes da página e uti...
 
Wireframe -  alto detalhamento <ul><ul><li>Este modelo de wireframe é muito útil no desenvolvimento de um site e também em...
Wireframe -  alto detalhamento <ul><ul><li>É só observar atentamente o segundo wireframe e já nos propomos algumas questõe...
 
Wireframe -  Baixo Detalhamento
Wireframe -  Alto Detalhamento
Wireframe -  Resultado Final
Wireframe - usabilidade <ul><ul><li>Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não...
Wireframe - usabilidade <ul><ul><li>Faz-se análise de usabilidade quando o site já está criado e produzido, hospedado em u...
Wireframe - identidade e marca <ul><ul><li>Por fim, é na construção do wireframe que o arquiteto vai garantir que todas as...
Wireframe - identidade e marca <ul><ul><li>  É muito importante que o site esteja, graficamente e conceitualmente alinhado...
Wireframe - riscos  <ul><ul><li>Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos co...
Wireframe - riscos <ul><ul><li>Por não ser desenhado na exata escala em que será construído o site, pode gerar desencontro...
Wireframe - vantagens <ul><ul><li>Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficiente...
Wireframe - vantagens <ul><ul><li>Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram e...
Wireframe -  Principais Softwares <ul><ul><li>Pode-se criar seus wireframes em qualquer software que permita o mínimo de o...
Wireframe -  Principais Softwares <ul><ul><li>Pencil Project </li></ul></ul><ul><li>  </li></ul>
Wireframe -  Principais Softwares <ul><ul><li>iPlotz </li></ul></ul><ul><li>  </li></ul>
Wireframe -  Principais Softwares <ul><ul><li>Gliffy </li></ul></ul><ul><li>  </li></ul>
Wireframe -  Principais Softwares <ul><ul><li>Axure </li></ul></ul><ul><li>  </li></ul>
Wireframe <ul><ul><li>Com base na validação dos protótipos em papel pelos próprios usuários, foi feita a digitalização dos...
Wireframe <ul><ul><li>Além desta função estrutural, o wireframe também é utilizado para a marcação das etapas de um proces...
Wireframe <ul><ul><li>O nome “wireframe” vem da junção de duas palavras em inglês: “wire” (linhas) e “frames” (telas) </li...
  Como desenhar um Wireframe no Pencil
Wireframe -  outro exemplo  
Wireframe <ul><ul><li>Em baixo temos o exemplo de uma tela em formato wireframe preto e branco </li></ul></ul>
Wireframe <ul><ul><li>Este projeto usa cores pois existem algumas mensagens de alerta importantes para os utilizadores. Ei...
Wireframe  
Wireframe <ul><ul><li>Como podem reparar, do lado direito existe uma coluna com informações sobre cada elemento do tela. P...
Wireframe - próximos passos <ul><ul><li>Os próximos passos consistem numa validação das telas feita pelos usuários e pelo ...
Wireframe -  Estrutura Analítica do Conteúdo
Wireframe -  Problematização
Wireframe - 
Wireframe - 
Wireframe - 
Wireframe - 
Wireframe - 
Wireframe
Wireframe
Wireframe - Exemplos (pelo mundo)   
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  Referências Bibliográficas Microsoft Visio  http://office.microsoft.com/en-us/FX010857981033.aspx   OmniGraffle  http://...
  Referências Bibliográficas http://www.zeroseis.com.br/2005/11/wireframes-em-XHTML.html http://www.ivogomes.com/blog/taxo...
  Referências Bibliográficas Links: (Designers Premiados) http://www.time4ever.com/ http://www.derbauer.de/index2.html htt...
Dúvidas     ... Por hoje é só Pessoal...
Obrigado... Mauro H. Suzuki  [email_address] Analista de TI CCE/Equipe Webdesign
Upcoming SlideShare
Loading in …5
×

Wireframe workshop externo_001_b

2,224 views

Published on

Wireframe workshop externo_001_b

  1. 1. WIREFRAME &quot;Estrutura de Arame&quot; (Fio) Metodologia de Desenvolvimento Equipe Webdesign CCE - 2010 UFPR
  2. 2. Exemplo Visual
  3. 3. Wireframe <ul><ul><li>Documento cada vez mais importante </li></ul></ul><ul><ul><li>Conhecer / Trabalhar  </li></ul></ul><ul><ul><ul><li>ferramentas </li></ul></ul></ul><ul><ul><ul><li>aplicativos  </li></ul></ul></ul><ul><ul><ul><li>softwares </li></ul></ul></ul><ul><ul><ul><ul><li>p/ desenvolvimento de sites </li></ul></ul></ul></ul><ul><ul><ul><ul><li>torna-se &quot;fácil&quot; e até mesmo &quot;trivial&quot;  </li></ul></ul></ul></ul>
  4. 4. Wireframe <ul><ul><li>Contudo o &quot; Diferencial dos bons desenvolvedores é: &quot; </li></ul></ul><ul><ul><ul><li>associar tal conhecimento técnico a diversos conceitos </li></ul></ul></ul><ul><ul><ul><ul><li>design </li></ul></ul></ul></ul><ul><ul><ul><ul><li>cores </li></ul></ul></ul></ul><ul><ul><ul><ul><li>tipologia </li></ul></ul></ul></ul><ul><ul><ul><ul><li>iconografia </li></ul></ul></ul></ul><ul><ul><ul><ul><li>gerenciamento </li></ul></ul></ul></ul><ul><ul><ul><ul><li>publicidade, etc... </li></ul></ul></ul></ul>
  5. 5. Wireframe “ O primo pobre do layout é fundamental para o trabalho do arquiteto de informação, porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.” Leonardo Oliveira (leonardo.oliveira@ogilvy.com)  gerente de operações OgilvyOne Brasil mestre em Jornalismo Digital pela ECA/USP
  6. 7. Wireframe <ul><ul><li>Documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação </li></ul></ul><ul><ul><li>Apesar de não ser ( e nem pretender ser ) uma régua de estilos para o layout e a criação das páginas de um site </li></ul></ul><ul><ul><ul><li>como é erroneamente interpretado por muitos webdesigners </li></ul></ul></ul>
  7. 8. Wireframe <ul><ul><li>Função de estruturar o conteúdo de cada página </li></ul></ul><ul><ul><li>Indica o peso e relevância de cada elemento do layout </li></ul></ul><ul><ul><li>Importância da relação com os demais elementos formadores do todo </li></ul></ul>
  8. 9. Exemplo Visual
  9. 10. Wireframe - Funções <ul><ul><li>Indicar a correta marcação de textos, de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção </li></ul></ul><ul><ul><li>Posteriormente serve como baliza para testes de usabilidade   </li></ul></ul>
  10. 11. Wireframe - Funções <ul><ul><li>Além da função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e sistema </li></ul></ul><ul><li>  </li></ul>
  11. 12. Wireframe <ul><ul><li>Como as etapas de uma compra online que vão da busca pelo produto, escolha de um dos resultados, confirmação de intenção, preenchimento do cadastro e opção de pagamento </li></ul></ul><ul><ul><li>Para cada um destes passos de compra deve haver um wireframe que explique detalhamente todas as possibilidades de interação e o caminho percorrido pelo usuário </li></ul></ul>
  12. 13. Wireframe <ul><ul><li>Documento superficial baixo detalhamento </li></ul></ul><ul><li>      pouca influência no trabalho dos designers       das demais equipes do projeto </li></ul><ul><ul><li>Traz apenas uma marcação de blocos de   conteúdo </li></ul></ul>
  13. 15. Wireframe - alto detalhamento <ul><ul><li>Este modelo apresenta alto grau de detalhamento dos componentes da página e utiliza vários elementos gráficos para representá–la. </li></ul></ul>
  14. 17. Wireframe - alto detalhamento <ul><ul><li>Este modelo de wireframe é muito útil no desenvolvimento de um site e também em sua documentação posterior, para futuras consultas. Além, é claro, de valorizar o trabalho desenvolvido pelo arquiteto. </li></ul></ul>
  15. 18. Wireframe - alto detalhamento <ul><ul><li>É só observar atentamente o segundo wireframe e já nos propomos algumas questões que envolvem as competências de um arquiteto de informação, tais como conhecimentos básicos de design, tecnologia, programação e redação. </li></ul></ul>
  16. 20. Wireframe - Baixo Detalhamento
  17. 21. Wireframe - Alto Detalhamento
  18. 22. Wireframe - Resultado Final
  19. 23. Wireframe - usabilidade <ul><ul><li>Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não cabe ao arquiteto </li></ul></ul><ul><ul><li>Por ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura </li></ul></ul>
  20. 24. Wireframe - usabilidade <ul><ul><li>Faz-se análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico </li></ul></ul><ul><ul><li>Apenas para que os envolvidos neste trabalho e os usuários por eles selecionados possam checar a eficiência do site em atender as expectativas do público alvo </li></ul></ul>
  21. 25. Wireframe - identidade e marca <ul><ul><li>Por fim, é na construção do wireframe que o arquiteto vai garantir que todas as páginas mantenham uma unidade gráfica, padronizada e uma presença de marca relevante para o patrocinador do site, o cliente  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Um website raramente é uma ação isolada de uma empresa na tentativa de se comunicar com seu clientes, prestando serviços ou vendendo diretamente seus produtos </li></ul></ul>
  22. 26. Wireframe - identidade e marca <ul><ul><li>  É muito importante que o site esteja, graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada nas demais ações na internet e mesmo nas mídias off–line, como jornais, revistas, TV, outdoors, ponto–de–venda, etc. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>É claro que este envolvimento com a marca deve ater–se também ao respeito pelas características do universo digital e o objetivo individual de cada projeto, conjugando unidade e autonomia de atuação </li></ul></ul>
  23. 27. Wireframe - riscos <ul><ul><li>Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos conceitos mais básicos da Arquitetura da Informação, sentindo–se assim mais confortáveis em aprovar layouts de designers, por serem peças com grande impacto gráfico  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Acomodar a equipe de criação de modo que os designers, por falta de tempo hábil ou insegurança, não mais inovem em seus projetos e sigam as indicações do wireframe à risca </li></ul></ul>
  24. 28. Wireframe - riscos <ul><ul><li>Por não ser desenhado na exata escala em que será construído o site, pode gerar desencontros de entendimento da relevância de cada elemento na composição da página e seu impacto de visualização </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Necessita de tempo, educação e insistência de uso até tornar–se corretamente entendido pelos profissionais envolvidos nas etapas de cada projeto </li></ul></ul>
  25. 29. Wireframe - vantagens <ul><ul><li>Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente. </li></ul></ul>
  26. 30. Wireframe - vantagens <ul><ul><li>Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas </li></ul></ul><ul><ul><li>Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade. </li></ul></ul>
  27. 31. Wireframe - Principais Softwares <ul><ul><li>Pode-se criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos </li></ul></ul><ul><ul><li>Porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função:  </li></ul></ul><ul><ul><ul><li>Mock Flow </li></ul></ul></ul><ul><ul><ul><li>Pencil Project </li></ul></ul></ul><ul><ul><ul><li>Gliffy </li></ul></ul></ul><ul><ul><ul><li>iPlotz </li></ul></ul></ul><ul><ul><ul><li>Axure </li></ul></ul></ul><ul><li>  </li></ul>
  28. 32. Wireframe - Principais Softwares <ul><ul><li>Pencil Project </li></ul></ul><ul><li>  </li></ul>
  29. 33. Wireframe - Principais Softwares <ul><ul><li>iPlotz </li></ul></ul><ul><li>  </li></ul>
  30. 34. Wireframe - Principais Softwares <ul><ul><li>Gliffy </li></ul></ul><ul><li>  </li></ul>
  31. 35. Wireframe - Principais Softwares <ul><ul><li>Axure </li></ul></ul><ul><li>  </li></ul>
  32. 36. Wireframe <ul><ul><li>Com base na validação dos protótipos em papel pelos próprios usuários, foi feita a digitalização dos mesmos em formato wireframe </li></ul></ul><ul><li>  </li></ul>
  33. 37. Wireframe <ul><ul><li>Além desta função estrutural, o wireframe também é utilizado para a marcação das etapas de um processo de interação entre o usuário e o sistema, fornecendo um wireframe por cada tela que explique detalhadamente todos os elementos presentes na página e como o utilizador pode interagir com eles </li></ul></ul>
  34. 38. Wireframe <ul><ul><li>O nome “wireframe” vem da junção de duas palavras em inglês: “wire” (linhas) e “frames” (telas) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>São telas de baixa resolução e com um aspecto gráfico muito pobre que servem apenas para indicar onde devem estar localizados os objetos e menus de interação </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Wireframe serve para mostrar a funcionalidade e não o aspecto gráfico de uma aplicação </li></ul></ul>
  35. 39.   Como desenhar um Wireframe no Pencil
  36. 40. Wireframe - outro exemplo  
  37. 41. Wireframe <ul><ul><li>Em baixo temos o exemplo de uma tela em formato wireframe preto e branco </li></ul></ul>
  38. 42. Wireframe <ul><ul><li>Este projeto usa cores pois existem algumas mensagens de alerta importantes para os utilizadores. Eis 2 exemplos de telas: </li></ul></ul><ul><li>  </li></ul><ul><ul><li>O tamanho das imagens foi diminuido de propósito pois trata-se de uma aplicação de um cliente e não convém mostrar muito… </li></ul></ul><ul><li>  </li></ul><ul><ul><li>As imagens foram colocadas  por motivos meramente demonstrativos de como pode ser desenvolvido um wireframe </li></ul></ul>
  39. 43. Wireframe  
  40. 44. Wireframe <ul><ul><li>Como podem reparar, do lado direito existe uma coluna com informações sobre cada elemento do tela. Podem ver ainda as cores usadas para as mensagens de aviso e de alerta. </li></ul></ul>
  41. 45. Wireframe - próximos passos <ul><ul><li>Os próximos passos consistem numa validação das telas feita pelos usuários e pelo cliente </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Avançar para a fase de concepção e programação da aplicação </li></ul></ul>
  42. 46. Wireframe - Estrutura Analítica do Conteúdo
  43. 47. Wireframe - Problematização
  44. 48. Wireframe - 
  45. 49. Wireframe - 
  46. 50. Wireframe - 
  47. 51. Wireframe - 
  48. 52. Wireframe - 
  49. 53. Wireframe
  50. 54. Wireframe
  51. 55. Wireframe - Exemplos (pelo mundo)  
  52. 79.   Referências Bibliográficas Microsoft Visio http://office.microsoft.com/en-us/FX010857981033.aspx OmniGraffle http://www.omnigroup.com/applications/omnigraffle/ Adobe Illustrator http://www.adobe.com/products/illustrator/main.html Adobe InDesign http://www.adobe.com/products/indesign/main.html Prototipagem em Papel:  http://www.ivogomes.com/blog/prototipagem-em-papel/ Artigos sobre Wireframes: http://deyalexander.com/resources/wireframes.html Wireframes em XHTML: http://www.zeroseis.com.br/2005/11/wireframes-em-xhtml.html Diego Aguilera: Curso de Gestão da Informação / UFPR Wireframe: http://webinsider.uol.com.br/vernoticia.php?id=1995 Using Wireframes: http://www.strangesystems.com/archives/000005.php http://www.ivogomes.com/blog/prototipagem-em-papel/ http://office.microsoft.com/en-us/FX010857981033.aspx http://www.omnigroup.com/applications/omnigraffle/ http://www.adobe.com/products/illustrator/main.html http://www.adobe.com/products/indesign/main.html    
  53. 80.   Referências Bibliográficas http://www.zeroseis.com.br/2005/11/wireframes-em-XHTML.html http://www.ivogomes.com/blog/taxonomia-usar-os-termos-correctos/ http://deyalexander.com/resources/wireframes.html http://www.zeroseis.com.br/2005/11/wireframes-em-xhtml.html http://webinsider.uol.com.br/vernoticia.php?id=1995 http://www.strangesystems.com/archives/000005.php        
  54. 81.   Referências Bibliográficas Links: (Designers Premiados) http://www.time4ever.com/ http://www.derbauer.de/index2.html http://www.plat4m.com/experimental/images/atr02-lucidity-vitakit/ http://www.2advancedstudios.com/#portfolio/bydate/2003&id=31 SimpleFolio: http://www.smashingmagazine.com/2010/02/07/simplefolio-a-free-clean-portfolio-wordpress-theme/ http://mudanca.org.br/ http://www.ujs.org.br/portal/      
  55. 82. Dúvidas    ... Por hoje é só Pessoal...
  56. 83. Obrigado... Mauro H. Suzuki [email_address] Analista de TI CCE/Equipe Webdesign

×