Arquitetura da Informao e Webdesign

  • Published on
    29-Nov-2014

  • View
    6.129

  • Download
    0

DESCRIPTION

1 Semana de Tecnologia em Palmital Danilo Rosisca Pereira

Transcript

  • 1. Danilo Rosisca Pereira Especialista em Sistemas para Internet
  • 2. ArquiteturadaInformaoeWebdesign OA Avano d W b da Web Percebe-se o aumento exagerado de informaes disponibilizadas em ambientes digitais digitais. E muitas vezes apresentadas de forma vezes, desorganizada.
  • 3. ArquiteturadaInformaoeWebdesign A NOVA GERAO DA WEB exige uma mudana e um repensar no processo de desenvolvimento de ambientes informacionais digitais. d g ta s.
  • 4. ArquiteturadaInformaoeWebdesign A Web 2.0 A NOVA GERAO DA WEB, que traz novas regras e servios baseados na Web como plataforma.
  • 5. ArquiteturadaInformaoeWebdesign A Web 2.0 busca interao ai t entre t usurios, com a criao e o compartilhamento de contedo.
  • 6. Arquitetura da Informao
  • 7. ArquiteturadaInformaoeWebdesign Arquitetura d Informao i da f Foi criada por Saul Wurman em 1976 com o objetivo de 1976, organizar a informao, tornando simples o que complexo. o estudo que se aplica em website, buscando um balanceamento entre usurio-contedo-contexto, facilitando para as pessoas o acesso a i f informao.
  • 8. ArquiteturadaInformaoeWebdesign Si istemas d Arquitetura d Informao da i da f A Arquitetura da Informao possui 4 sistemas, onde cada um sistemas possui suas prprias regras e caractersticas, e quando reunidas servem para organizar o ambiente informacional de p g um website. Rosenfeld e Morville (2006). Esses sistemas so:
  • 9. ArquiteturadaInformaoeWebdesign Sistema d O Si t de Organizao: Maneira de categorizar e organizar a i informao. 1 Esquema de Organizao Alfabtica Esquema de Organizao por Tempo 2 Esquema de Organizao 3 por Assunto
  • 10. ArquiteturadaInformaoeWebdesign Sistema d R t l Si t de Rotulao: Define a forma de representar a informao. So l S elementos f d t fundamentais que t i antecipam o que vir a seguir logo aps efetuar o clique em um link.
  • 11. ArquiteturadaInformaoeWebdesign Sistema d N Si t de Navegao: Determina o modo de navegar ou mover no espao Informacional (e hipertextual).
  • 12. ArquiteturadaInformaoeWebdesign Sistema d P Si t de Pesquisa: i Estabelece as d id dvidas (perguntas) executadas em uma consulta de pesquisa e como elas sero respondidas. (Exemplo de busca de fcil compreenso)
  • 13. ArquiteturadaInformaoeWebdesign Documentos d AI: Wireframe D t da AI O wireframe descreve o contedo e a informao a ser includa na arquitetura relativamente a espaos confinados bidimensional, conhecida como pgina pgina.
  • 14. ArquiteturadaInformaoeWebdesign Exemplodewireframe elayout finaldeumwebsite: N Navegao Gl b l Global Contedo Global Contedo Local
  • 15. Usabilidade
  • 16. ArquiteturadaInformaoeWebdesign Usabilidade: U bilid d Possui Poss i componentes mltiplos e radicionalmente associada com estes cinco atributos: Ser fcil de APRENDER; Ser eficiente na utilizao; Ser fcil de ser recordado; Ter poucos erros; Ser subjetivamente agradvel. (Nilsen, 1993)
  • 17. ArquiteturadaInformaoeWebdesign Usabilidade: Portanto um website... U bilid d P b i BicicletaConvergentedeJacquesCarelman. Deve ser fcil de usar; Com simplicidade, OBJETIVIDADE e foco na experincia do usurio usurio.
  • 18. Webdesign
  • 19. Arquitetura da Informao e Webdesign Webdesign: umaextensodaprtica dodesign,ondeofocodo projetoacriaodewebsites e documentosdisponveisno ambientedaWeb.
  • 20. Arquitetura da Informao e Webdesign Webdesign:Seuobjetivo planejar eCRIARa organizao funcionaldetodo contedoqueser transmitido(apresentado), permitindoqueousurio compreendarapidamentea mensagem. (Damasceno,2003)
  • 21. Arquitetura da Informao e Webdesign ArquitetodaInformaoxWebdesigner OArquitetodaInformao projetaositecomdiferentes mtodosatribuindo umahierarquia entreasinformaes informaes. OWebdesigner constriolayoutaplicandoconceitosetcnicas dedesignusandocomoguiaowireframefeitopeloarquiteto. (RosenfeldeMorville,2006)
  • 22. Arquitetura da Informao e Webdesign Amissododesign SegundoNorman(2006),odesigntemamissodecolaborarna criaodeprodutoscadavezmais p TEIS,bons,bonitos, , , , baratos e eficazes.
  • 23. Arquitetura da Informao e Webdesign Webdesign:Ostrselementosfundamentaisdeumlayout D i b l d Design balanceado: equilbrioecomposioentreimagens,grficosefontes lb f f tipogrficas. Contraste: integraoentreoselementosdodesign. Linhas invisveis: soreascriadasentrediferentespartesdeumdesign. p g Proporode70%paracontedoe30%paraespaosembranco.
  • 24. Arquitetura da Informao e Webdesign Nemsemprea Aparncia no Importante!
  • 25. Arquitetura da Informao e Webdesign Aprtica da Simplicidade Si li id d emlayout para WEB.
  • 26. Arquitetura da Informao e Webdesign Webdesign C Webdesign:ConvenesdedesenhodeInterface d d h d I t f Apadronizaodasinterfacesumdosconceitosmaisimportantes paraseprojetarwebsites. El t l i Elasestorelacionadasaconceitosdepsicologiacognitiva,como d it d i l i iti facilidadedeaprendizadoememorizao,diminuindoaschancesde p p dvidaseerrosporpartedosusurios. (Memria,2005)
  • 27. Arquitetura da Informao e Webdesign Webdesign:ConvenesdedesenhodeInterface Webdesign C d d h d I t f Marca buscar Navegao global Breadcrumbs Navegao local Contedo global Contedo e contextual relacionado Navegao rodap (Memria, 2005)
  • 28. Arquitetura da Informao e Webdesign Webdesign: Tipografia a arte, o processo de criao e a classificao do desenho de letras do alfabeto e de caracteres usados para formar palavras. (Cavichioli, (Cavichioli 2008)
  • 29. Arquitetura da Informao e Webdesign Webdesign: Tipografia As fontes tipogrficas (ou apenas fontes) so classificadas em 4 grupos bsicos: as com serifas, as , sem serifas, as cursivas e as fontes dingbats. g Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008
  • 30. Arquitetura da Informao e Webdesign Webdesign: F t l i para web Fontes legveis b Nome da Fonte Caracterstica Arial Moderna, limpa, bsica. Fonte F t com serifa projetada para l it if j t d leitura on-line. li Georgia Aparncia Tradicional, visual mais moderno que Times News Roman. Trebuchet MS Moderna, simples. Verdana Fonte on-line mais legivel, mesmo em texto pequeno Todas com 10 pontos ou acima. (Nielsen e Loranger, 2007)
  • 31. Arquitetura da Informao e Webdesign Webdesign:Legibilidade,textosexistemparaseremlidos. Fonte serifada Exemplo: para ttulo l Curiosidade, inovao e descoberta A World Wide Web abriu fronteiras inacreditveis: pela primeira vez os profissionais de layout e artes grficas tm acesso a um pblico enorme, que pode ver seus trabalhos a qualquer instante. instante Alguns dizem que o conjunto das tais pginas pessoais a maior exposio pblica de arte da histria. Sob alguns aspectos, esse pblico at maior que o dos publicitrios, pois no tem restries de tempo. Fonte sem serifa para texto
  • 32. Arquitetura da Informao e Webdesign Webdesign: P i l i das cores Psicologia d As cores podem ter alguns significados, provocar lembranas e significados sensaes diferentes s pessoas dependendo de sua cultura: Vermelho: paixo, fora, energia, amor; Azul: harmonia, confidncia, monotonia, tecnologia; g Verde: natureza, primavera, fertilidade, riqueza, ganncia; Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza; Branco: Branco: pureza, inocncia, paz, simplicidade, esterilidade; Preto: poder modernidade, sofisticao, morte, medo mistrio poder, modernidade sofisticao morte medo, mistrio. (Cavichioli, 2008)
  • 33. Webstandards
  • 34. Arquitetura da Informao e Webdesign Webdesign: PadresWeb(Webstandards) CriadospeloW3C(WorldWideWebConsortium),eles separamocontedoemHTMLdaapresentaoemCSS,mantendoa compatibilidadeeportabilidadecomnavegadores,dispositivos... tibilid d t bilid d d di iti (Ferreira,2005,p.12)
  • 35. Arquitetura da Informao e Webdesign Webdesign: PadresWeb(Webstandards) OsPadresWebtornamodesenvolvimentomaissimplese produtivo,resultandoem: MontagemRpidadoLayout; Desenvolvimentosimplificado; Independnciaentrelayoutecontedo; Manutenosimplificada; PadresReaproveitveis. (Ferreira,2005)
  • 36. Webwriting
  • 37. Arquitetura da Informao e Webdesign Webdesign: Webwriting oconjuntodetcnicasqueauxiliamnadistribuiodecontedo informativoemambientesdigitais,tendocomobaseapersuaso. (Rodrigues,2006)
  • 38. Arquitetura da Informao e Webdesign Webdesign: Webwriting OtextoparaWebdeveserapresentadomaisconciso,simplificado (curto) enocommenorquantidadedeinformaes (curto),enocommenorquantidadedeinformaes. Deveserobjetivo /enxuto comfrasesepargrafoscurtos comfrasesepargrafoscurtos. Fonte: www.midiadigital.com.br Acessado em: 09/08/2008
  • 39. Arquitetura da Informao e Webdesign Webdesign: Webwriting Pargrafosseparadosporespaos (blocosdetexto); Bloco de texto 1 Bloco de texto nico X Bloco de texto 2 Bloco de texto 3 Fonte: www.midiadigital.com.br Acessado em: 09/08/2008
  • 40. Arquitetura da Informao e Webdesign Webdesign: Webwriting sujestesquepodemajudar Entredoissinnimos,escolhaomais curto. Evite repeties, palavras inteis, longas e excessivas. Ex: EVITAR USAR Empreender Fazer Unicamente S No Estado do Paran No Paran Na eventualidade de Se Durante o ano de 2005 Em 2005 Na poca em que vivemos Hoje Fonte: www.midiadigital.com.br Acessado em: 09/08/2008
  • 41. Arquitetura da Informao e Webdesign Webdesign: Webwritingesuasvantagens Otexto tornasemais prtico; Acompreenso doleitor mais rpida efcil; Facilita acriao defidelidade comovisitante; Fonte: www.midiadigital.com.br Acessado em: 09/08/2008
  • 42. Concluso
  • 43. Arquitetura da Informao e Webdesign Concluso: A Arquitetura d I f A it t de Informao atravs d seus conceitos e t de it planejamento das funcionalidades, visa a organizao da informao de forma simples e compreensvel para os informao, usurios. O Webdesign a tcnica de design que se difere por sua funcionalidade e harmonia esttica na distribuio dos elementos de ambientes informacionais di it i l t d bi t i f i i digitais.
  • 44. Arquitetura da Informao e Webdesign Muito Obrigado! danilo@sitedodanilo.com.br
  • 45. Arquitetura da Informao e Webdesign REFERNCIAS BIBLIOGRFICAS CAVICHIOLI, O. Tipografia, Teoria das Cores. Disponvel em: . Acesso em em: 26/05/2008. DAMASCENO, A. Webdesign: Teoria e Prtica. Florianpolis: Visual Books, 2003. FERREIRA, E. Produtividade Web 2.0. So Paulo: Visie, 2005. MEMRIA, F. Design para Internet: projetando a experincia perfeita. Rio de Janeiro: Elsevier, 2005. NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, 1993. 361 p. NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007. NORMAN, D. A. Design do dia-a-dia. Ri de Janeiro: Rocco, 2006. NORMAN D A O D i d di di Rio d J i R 2006 RODRIGUES, B. Webwriting: Redao & Informao na Web. Rio de Janeiro: Brasport, 2006. ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.