O documento discute wireframes, que são modelos estruturais de baixa fidelidade visual usados no desenvolvimento de sites. Eles indicam a estrutura de conteúdo e a interação do usuário antes do design visual. Wireframes podem variar em detalhamento e são criados em softwares específicos para auxiliar a produção do site de forma rápida e eficiente.

1. WIREFRAME "Estrutura de Arame" (Fio) Metodologia de Desenvolvimento Equipe Webdesign CCE - 2010 UFPR

2. Exemplo Visual

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

9. Exemplo Visual

20. Wireframe - Baixo Detalhamento

21. Wireframe - Alto Detalhamento

22. Wireframe - Resultado Final

39. Como desenhar um Wireframe no Pencil

40. Wireframe - outro exemplo

43. Wireframe

46. Wireframe - Estrutura Analítica do Conteúdo

47. Wireframe - Problematização

48. Wireframe -

49. Wireframe -

50. Wireframe -

51. Wireframe -

52. Wireframe -

53. Wireframe

54. Wireframe

55. Wireframe - Exemplos (pelo mundo)

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

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

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/

82. Dúvidas ... Por hoje é só Pessoal...

83. Obrigado... Mauro H. Suzuki [email_address] Analista de TI CCE/Equipe Webdesign